Separating all remaining code into files.
This commit is contained in:
parent
73ae583881
commit
6c473c54ea
184
app.js
184
app.js
@ -1,187 +1,7 @@
|
|||||||
import Configuration from "./src/Configuration.js";
|
import App from "./src/App.js";
|
||||||
import Item from "./src/Item.js";
|
|
||||||
import $ from 'jquery';
|
|
||||||
import ItemHTML from "./src/ItemHTML.js";
|
|
||||||
|
|
||||||
// Idealista selectors.
|
|
||||||
const ITEM_SELECTOR = 'article.item';
|
|
||||||
|
|
||||||
// Own selectors.
|
|
||||||
const CONFIG_CLASS = 'midefos-idealista-config'
|
|
||||||
|
|
||||||
const STYLES = `
|
|
||||||
.midefos-idealista-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 55px;
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
|
||||||
|
|
||||||
}
|
|
||||||
.midefos-idealista-menu {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
|
||||||
}
|
|
||||||
.${CONFIG_CLASS} {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 3;
|
|
||||||
|
|
||||||
background-color: rgba(225, 245, 110, 0.90);
|
|
||||||
width: 95%;
|
|
||||||
height: 95%;
|
|
||||||
top: 2.5%;
|
|
||||||
left: 2.5%;
|
|
||||||
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success {
|
|
||||||
color: darkgreen;
|
|
||||||
}
|
|
||||||
.warning {
|
|
||||||
color: darkorange;
|
|
||||||
}
|
|
||||||
.error {
|
|
||||||
color: darkred;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
Configuration.init();
|
App.init();
|
||||||
addStyles();
|
|
||||||
|
|
||||||
createMenu();
|
|
||||||
createInformation();
|
|
||||||
}
|
|
||||||
|
|
||||||
function createMenu() {
|
|
||||||
if (window.location.href.includes('mapa-google')) return;
|
|
||||||
|
|
||||||
|
|
||||||
$('body').on('click', '#reload-midefos-idealista', () => {
|
|
||||||
createInformation();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('body').on('click', '.config-open', () => {
|
|
||||||
$(`.${CONFIG_CLASS}`).toggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('body').on('click', '.config-save', () => {
|
|
||||||
const $configNode = $(`.${CONFIG_CLASS}`);
|
|
||||||
|
|
||||||
const configNode = $configNode[0];
|
|
||||||
const newConfig = {
|
|
||||||
enabled: configNode.querySelector('#enabled').checked,
|
|
||||||
percentages: configNode.querySelector('#percentages').checked,
|
|
||||||
garage: configNode.querySelector('#garage').checked,
|
|
||||||
exterior: configNode.querySelector('#exterior').checked,
|
|
||||||
lift: configNode.querySelector('#lift').checked,
|
|
||||||
'max-price': configNode.querySelector('#max-price').value,
|
|
||||||
'max-price-per-meter': configNode.querySelector('#max-price-per-meter').value
|
|
||||||
}
|
|
||||||
setConfig(newConfig);
|
|
||||||
|
|
||||||
createInformation();
|
|
||||||
$configNode.toggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelector('#main-header').innerHTML += createConfigHTML();
|
|
||||||
|
|
||||||
|
|
||||||
const mainContent = document.querySelector('#main-content');
|
|
||||||
mainContent.innerHTML = createMenuHTML() + mainContent.innerHTML;
|
|
||||||
}
|
|
||||||
|
|
||||||
function createInformation() {
|
|
||||||
const items = document.querySelectorAll(ITEM_SELECTOR);
|
|
||||||
for (const _item of items) {
|
|
||||||
const item = new Item(_item);
|
|
||||||
const currentInformation = _item.querySelector('.midefos-idealista-container');
|
|
||||||
if (currentInformation) currentInformation.remove();
|
|
||||||
_item.innerHTML += ItemHTML.createInformation(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createConfigHTML() {
|
|
||||||
return `
|
|
||||||
<div class='${CONFIG_CLASS}'>
|
|
||||||
<h2>Midefos Idealista</h2>
|
|
||||||
|
|
||||||
<h3>Configuración global:</h3>
|
|
||||||
<label>
|
|
||||||
<input type='checkbox' id='enabled' checked='${Configuration.get('enabled')}'>
|
|
||||||
<span>Habilitado</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<h3>Busqueda:</h3>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type='checkbox' id='percentages' checked='${Configuration.get('percentages')}'>
|
|
||||||
<span>Porcentajes</span>
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type='checkbox' id='garage' checked='${Configuration.get('garage')}'>
|
|
||||||
<span>Garaje</span>
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type='checkbox' id='exterior' checked='${Configuration.get('exterior')}'>
|
|
||||||
<span>Exterior</span>
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type='checkbox' id='lift' checked='${Configuration.get('lift')}'>
|
|
||||||
<span>Ascensor</span>
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<span>Precio máximo: </span>
|
|
||||||
<input type='number' id='max-price' value='${Configuration.get('max-price')}' placeholder='0'>
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<span>Precio máximo por metro: </span>
|
|
||||||
<input type='number' id='max-price-per-meter' value='${Configuration.get('max-price-per-meter')}' placeholder='0'>
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<button class='config-save'>Guardar</button>
|
|
||||||
<button class='config-open'>Cerrar</button>
|
|
||||||
</div>`
|
|
||||||
}
|
|
||||||
|
|
||||||
function createMenuHTML() {
|
|
||||||
return `
|
|
||||||
<div class='midefos-idealista-menu'>
|
|
||||||
<button class='config-open' title='Abrir configuración'>⚙</button>
|
|
||||||
<button id='reload-midefos-idealista' title='Cargar información'>⟳</button>
|
|
||||||
</div>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
function addStyles() {
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = STYLES;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
}
|
|
@ -18,7 +18,6 @@
|
|||||||
"@babel/preset-env": "^7.18.6",
|
"@babel/preset-env": "^7.18.6",
|
||||||
"babelify": "^10.0.0",
|
"babelify": "^10.0.0",
|
||||||
"browserify": "^17.0.0",
|
"browserify": "^17.0.0",
|
||||||
"browserify-banner": "^2.0.4",
|
"browserify-banner": "^2.0.4"
|
||||||
"jquery": "^3.6.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
20
src/App.js
Normal file
20
src/App.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import Preferences from './Preferences.js';
|
||||||
|
import Styles from './Styles.js';
|
||||||
|
|
||||||
|
import Menu from './Menu.js';
|
||||||
|
import Configuration from './Configuration.js';
|
||||||
|
import Information from './Information.js';
|
||||||
|
|
||||||
|
|
||||||
|
export default class App {
|
||||||
|
|
||||||
|
static init() {
|
||||||
|
Preferences.init();
|
||||||
|
Styles.add();
|
||||||
|
|
||||||
|
new Menu();
|
||||||
|
new Configuration();
|
||||||
|
Information.create();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -1,44 +1,46 @@
|
|||||||
|
import ConfigurationHTML from "./ConfigurationHTML.js";
|
||||||
|
import Event from "./Event.js";
|
||||||
|
import Information from "./Information.js";
|
||||||
|
import Log from "./Log.js";
|
||||||
|
import Preferences from "./Preferences.js";
|
||||||
|
|
||||||
export default class Configuration {
|
export default class Configuration {
|
||||||
|
|
||||||
static NAME = 'midefos-idealista';
|
constructor() {
|
||||||
|
document.querySelector('#main-header').innerHTML += ConfigurationHTML.create();
|
||||||
|
|
||||||
static _current;
|
this._initEvents();
|
||||||
|
|
||||||
static init() {
|
|
||||||
this._current = this._getConfig();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static get(key) {
|
_initEvents() {
|
||||||
const config = this._getConfig();
|
Event.click(ConfigurationHTML.SAVE_CONFIG_SELECTOR, () => {
|
||||||
return config[key];
|
Preferences.save(this._extractConfiguration());
|
||||||
|
Information.create();
|
||||||
|
Configuration.toggle();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
static save(config) {
|
_extractConfiguration() {
|
||||||
window.localStorage.setItem(this.NAME, JSON.stringify(config));
|
const container = document.querySelector(ConfigurationHTML.CONTAINER_SELECTOR);
|
||||||
this._current = config;
|
|
||||||
}
|
|
||||||
|
|
||||||
static _getConfig() {
|
|
||||||
const storageConfig = this._getFromLocalStorage();
|
|
||||||
if (!storageConfig) return this._default();
|
|
||||||
return storageConfig;
|
|
||||||
}
|
|
||||||
|
|
||||||
static _getFromLocalStorage() {
|
|
||||||
const storageConfig = window.localStorage.getItem(this.NAME);
|
|
||||||
if (!storageConfig) return null;
|
|
||||||
return JSON.parse(storageConfig);
|
|
||||||
}
|
|
||||||
|
|
||||||
static _default() {
|
|
||||||
return {
|
return {
|
||||||
enabled: true,
|
enabled: container.querySelector('#enabled').checked,
|
||||||
percentages: true,
|
percentages: container.querySelector('#percentages').checked,
|
||||||
garage: false,
|
garage: container.querySelector('#garage').checked,
|
||||||
exterior: true,
|
exterior: container.querySelector('#exterior').checked,
|
||||||
lift: true,
|
lift: container.querySelector('#lift').checked,
|
||||||
'max-price': 120_000,
|
'max-price': container.querySelector('#max-price').value,
|
||||||
'max-price-per-meter': 1_500
|
'max-price-per-meter': container.querySelector('#max-price-per-meter').value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static toggle() {
|
||||||
|
const container = document.querySelector(ConfigurationHTML.CONTAINER_SELECTOR);
|
||||||
|
if (getComputedStyle(container).display === 'none') {
|
||||||
|
container.style.display = 'block';
|
||||||
|
Log.debug(`Opened configuration`);
|
||||||
|
} else {
|
||||||
|
container.style.display = 'none';
|
||||||
|
Log.debug(`Closed configuration`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
74
src/ConfigurationHTML.js
Normal file
74
src/ConfigurationHTML.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
import Preferences from "./Preferences.js";
|
||||||
|
|
||||||
|
export default class ConfigurationHTML {
|
||||||
|
|
||||||
|
static CONTAINER_CLASS_NAME = 'midefos-idealista-config';
|
||||||
|
static get CONTAINER_SELECTOR() {
|
||||||
|
return `.${this.CONTAINER_CLASS_NAME}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static OPEN_CONFIG_CLASS_NAME = 'open-config';
|
||||||
|
static get OPEN_CONFIG_SELECTOR() {
|
||||||
|
return `.${this.OPEN_CONFIG_CLASS_NAME}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static SAVE_CONFIG_CLASS_NAME = 'save-config';
|
||||||
|
static get SAVE_CONFIG_SELECTOR() {
|
||||||
|
return `.${this.SAVE_CONFIG_CLASS_NAME}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static create() {
|
||||||
|
return `
|
||||||
|
<div class='${this.CONTAINER_CLASS_NAME}'>
|
||||||
|
<h2>Midefos Idealista</h2>
|
||||||
|
|
||||||
|
<h3>Configuración global:</h3>
|
||||||
|
<label>
|
||||||
|
<input type='checkbox' id='enabled' checked='${Preferences.get('enabled')}'>
|
||||||
|
<span>Habilitado</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<h3>Busqueda:</h3>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type='checkbox' id='percentages' checked='${Preferences.get('percentages')}'>
|
||||||
|
<span>Porcentajes</span>
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type='checkbox' id='garage' checked='${Preferences.get('garage')}'>
|
||||||
|
<span>Garaje</span>
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type='checkbox' id='exterior' checked='${Preferences.get('exterior')}'>
|
||||||
|
<span>Exterior</span>
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<input type='checkbox' id='lift' checked='${Preferences.get('lift')}'>
|
||||||
|
<span>Ascensor</span>
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<span>Precio máximo: </span>
|
||||||
|
<input type='number' id='max-price' value='${Preferences.get('max-price')}' placeholder='0'>
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
<span>Precio máximo por metro: </span>
|
||||||
|
<input type='number' id='max-price-per-meter' value='${Preferences.get('max-price-per-meter')}' placeholder='0'>
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class='${this.SAVE_CONFIG_CLASS_NAME}'>Guardar</button>
|
||||||
|
<button class='${this.OPEN_CONFIG_CLASS_NAME}'>Cerrar</button>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
13
src/Event.js
Normal file
13
src/Event.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import Log from "./Log.js";
|
||||||
|
|
||||||
|
export default class Event {
|
||||||
|
|
||||||
|
static click(selector, callback) {
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
|
if (!event.target.matches(selector)) return;
|
||||||
|
Log.debug(`Click on: ${selector}`)
|
||||||
|
callback(event.target);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
21
src/Information.js
Normal file
21
src/Information.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import Item from './Item.js';
|
||||||
|
import ItemHTML from './ItemHTML.js';
|
||||||
|
import Log from './Log.js';
|
||||||
|
|
||||||
|
export default class Information {
|
||||||
|
|
||||||
|
static CLASS_NAME = 'midefos-idealista-container';
|
||||||
|
static ITEM_SELECTOR = 'article.item';
|
||||||
|
|
||||||
|
static create() {
|
||||||
|
Log.debug(`Creating information...`)
|
||||||
|
const items = document.querySelectorAll(this.ITEM_SELECTOR);
|
||||||
|
for (const _item of items) {
|
||||||
|
const item = new Item(_item);
|
||||||
|
const currentInformation = _item.querySelector(`.${this.CLASS_NAME}`);
|
||||||
|
if (currentInformation) currentInformation.remove();
|
||||||
|
_item.innerHTML += ItemHTML.createInformation(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -1,11 +1,15 @@
|
|||||||
import Configuration from "./Configuration.js";
|
import Preferences from "./Preferences.js";
|
||||||
|
|
||||||
export default class ItemHTML {
|
export default class ItemHTML {
|
||||||
|
|
||||||
|
static CONTAINER_CLASS_NAME = 'midefos-idealista-container';
|
||||||
|
static get CONTAINER_SELECTOR() {
|
||||||
|
return `.${this.CONTAINER_CLASS_NAME}`;
|
||||||
|
}
|
||||||
|
|
||||||
static createInformation(item) {
|
static createInformation(item) {
|
||||||
return `
|
return `
|
||||||
<div class='midefos-idealista-container'>
|
<div class='${this.CONTAINER_CLASS_NAME}'>
|
||||||
${this._createPercentagePriceHTML(item)}
|
${this._createPercentagePriceHTML(item)}
|
||||||
${this._createPriceHTML(item)}
|
${this._createPriceHTML(item)}
|
||||||
${this._createPriceMeterHTML(item)}
|
${this._createPriceMeterHTML(item)}
|
||||||
@ -15,7 +19,7 @@ export default class ItemHTML {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static _createPercentagePriceHTML(item) {
|
static _createPercentagePriceHTML(item) {
|
||||||
if (!Configuration.get('percentages')) return ``;
|
if (!Preferences.get('percentages')) return ``;
|
||||||
|
|
||||||
const twentyPercent = Math.round(item.price * 20 / 100);
|
const twentyPercent = Math.round(item.price * 20 / 100);
|
||||||
const thirtyPercent = Math.round(item.price * 30 / 100);
|
const thirtyPercent = Math.round(item.price * 30 / 100);
|
||||||
@ -28,20 +32,20 @@ export default class ItemHTML {
|
|||||||
|
|
||||||
|
|
||||||
static _createPriceHTML(item) {
|
static _createPriceHTML(item) {
|
||||||
const desiredPrice = Configuration.get('max-price');
|
const desiredPrice = Preferences.get('max-price');
|
||||||
const desiredTwentyFivePercentMore = Math.round(desiredPrice * 1.25);
|
const desiredTwentyFivePercentMore = Math.round(desiredPrice * 1.25);
|
||||||
|
|
||||||
if (item.price <= desiredPrice) {
|
if (item.price <= desiredPrice) {
|
||||||
return `<span class='success'><strong>✓</strong> Precio</span>`;
|
return this._createSuccess('Precio');
|
||||||
} else if (item.price <= desiredTwentyFivePercentMore) {
|
} else if (item.price <= desiredTwentyFivePercentMore) {
|
||||||
return `<span class='warning'><strong>✓</strong> Precio</span>`;
|
return this._createWarning('Precio');
|
||||||
}
|
}
|
||||||
return `<span class='error'><strong>X</strong> Precio</span>`;
|
return this._createError('Precio');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
static _createPriceMeterHTML(item) {
|
static _createPriceMeterHTML(item) {
|
||||||
const desiredPricePerMeter = Configuration.get('max-price-per-meter');
|
const desiredPricePerMeter = Preferences.get('max-price-per-meter');
|
||||||
const desiredTwentyFivePercentMore = Math.round(desiredPricePerMeter * 1.25);
|
const desiredTwentyFivePercentMore = Math.round(desiredPricePerMeter * 1.25);
|
||||||
|
|
||||||
if (item.priceMeter <= desiredPricePerMeter) {
|
if (item.priceMeter <= desiredPricePerMeter) {
|
||||||
@ -53,31 +57,48 @@ export default class ItemHTML {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static _createLiftHTML(item) {
|
static _createLiftHTML(item) {
|
||||||
if (!Configuration.get('lift')) return ``;
|
if (!Preferences.get('lift')) return ``;
|
||||||
|
|
||||||
if (!item.additionalInfo) {
|
if (!item.additionalInfo) {
|
||||||
if (item.isFlat()) return ``;
|
if (item.isFlat()) return ``;
|
||||||
return this.__createIndividual('?', 'Ascensor', 'warning');
|
return this._createMissing('Ascensor');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.hasLift) {
|
if (item.hasLift) {
|
||||||
return this.__createIndividual('✓', 'Ascensor', 'warning');
|
return this._createSuccess('Ascensor',);
|
||||||
}
|
}
|
||||||
return this.__createIndividual('X', 'Ascensor', 'error');
|
return this._createError('Ascensor');
|
||||||
}
|
}
|
||||||
|
|
||||||
static _createInteriorHTML(item) {
|
static _createInteriorHTML(item) {
|
||||||
if (!Configuration.get('exterior')) return ``;
|
if (!Preferences.get('exterior')) return ``;
|
||||||
|
|
||||||
if (!item.additionalInfo) {
|
if (!item.additionalInfo) {
|
||||||
if (!item.isFlat()) return ``;
|
if (!item.isFlat()) return ``;
|
||||||
return `<span class='warning'><strong>?</strong> Exterior</span>`
|
return this._createMissing('Exterior');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.isExterior) {
|
if (item.isExterior) {
|
||||||
return `<span class='success'><strong>✓</strong> Exterior</span>`
|
return this._createSuccess('Exterior');
|
||||||
}
|
}
|
||||||
return `<span class='error'><strong>X</strong> Exterior</span>`;
|
return this._createError('Exterior');
|
||||||
|
}
|
||||||
|
|
||||||
|
static _createSuccess(infoText) {
|
||||||
|
return this.__createIndividual('✓', infoText, 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
static _createWarning(infoText) {
|
||||||
|
return this.__createIndividual('✓', infoText, 'warning');
|
||||||
|
}
|
||||||
|
|
||||||
|
static _createMissing(infoText) {
|
||||||
|
return this.__createIndividual('?', infoText, 'warning');
|
||||||
|
}
|
||||||
|
|
||||||
|
static _createError(infoText) {
|
||||||
|
return this.__createIndividual('✓', infoText, 'error');
|
||||||
}
|
}
|
||||||
|
|
||||||
static __createIndividual(strongText, infoText, className = '') {
|
static __createIndividual(strongText, infoText, className = '') {
|
||||||
|
7
src/Log.js
Normal file
7
src/Log.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default class Log {
|
||||||
|
|
||||||
|
static debug(message) {
|
||||||
|
console.log(`%c [DEBUG] ${message} `, 'background: blue; color: white; font-size: 13px;');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
32
src/Menu.js
Normal file
32
src/Menu.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import Configuration from "./Configuration.js";
|
||||||
|
import ConfigurationHTML from "./ConfigurationHTML.js";
|
||||||
|
import Event from "./Event.js";
|
||||||
|
import Information from "./Information.js";
|
||||||
|
import MenuHTML from "./MenuHTML.js";
|
||||||
|
|
||||||
|
export default class Menu {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
if (this._shouldNotLoad()) return;
|
||||||
|
|
||||||
|
const mainContent = document.querySelector('#main-content');
|
||||||
|
mainContent.innerHTML = MenuHTML.create() + mainContent.innerHTML;
|
||||||
|
|
||||||
|
this._initEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
_initEvents() {
|
||||||
|
Event.click(MenuHTML.RELOAD_INFORMATION_SELECTOR, () => {
|
||||||
|
Information.create();
|
||||||
|
})
|
||||||
|
|
||||||
|
Event.click(ConfigurationHTML.OPEN_CONFIG_SELECTOR, () => {
|
||||||
|
Configuration.toggle();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_shouldNotLoad() {
|
||||||
|
return window.location.href.includes('mapa-google');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
23
src/MenuHTML.js
Normal file
23
src/MenuHTML.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import ConfigurationHTML from "./ConfigurationHTML.js";
|
||||||
|
|
||||||
|
export default class MenuHTML {
|
||||||
|
|
||||||
|
static CONTAINER_CLASS_NAME = 'midefos-idealista-menu';
|
||||||
|
static get CONTAINER_SELECTOR() {
|
||||||
|
return `.${this.CONTAINER_CLASS_NAME}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static RELOAD_INFORMATION_CLASS_NAME = 'reload-information';
|
||||||
|
static get RELOAD_INFORMATION_SELECTOR() {
|
||||||
|
return `.${this.RELOAD_INFORMATION_CLASS_NAME}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static create() {
|
||||||
|
return `
|
||||||
|
<div class='${this.CONTAINER_CLASS_NAME}'>
|
||||||
|
<button class='${ConfigurationHTML.OPEN_CONFIG_CLASS_NAME}' title='Abrir configuración'>⚙</button>
|
||||||
|
<button class='${this.RELOAD_INFORMATION_CLASS_NAME}' title='Cargar información'>⟳</button>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
48
src/Preferences.js
Normal file
48
src/Preferences.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import Log from "./Log.js";
|
||||||
|
|
||||||
|
export default class Preferences {
|
||||||
|
|
||||||
|
static NAME = 'midefos-idealista';
|
||||||
|
|
||||||
|
static _current;
|
||||||
|
|
||||||
|
static init() {
|
||||||
|
this._current = this._getConfig();
|
||||||
|
}
|
||||||
|
|
||||||
|
static get(key) {
|
||||||
|
const config = this._getConfig();
|
||||||
|
return config[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
static save(config) {
|
||||||
|
window.localStorage.setItem(this.NAME, JSON.stringify(config));
|
||||||
|
this._current = config;
|
||||||
|
Log.debug('Saved preferences')
|
||||||
|
}
|
||||||
|
|
||||||
|
static _getConfig() {
|
||||||
|
const storageConfig = this._getFromLocalStorage();
|
||||||
|
if (!storageConfig) return this._default();
|
||||||
|
return storageConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
static _getFromLocalStorage() {
|
||||||
|
const storageConfig = window.localStorage.getItem(this.NAME);
|
||||||
|
if (!storageConfig) return null;
|
||||||
|
return JSON.parse(storageConfig);
|
||||||
|
}
|
||||||
|
|
||||||
|
static _default() {
|
||||||
|
return {
|
||||||
|
enabled: true,
|
||||||
|
percentages: true,
|
||||||
|
garage: false,
|
||||||
|
exterior: true,
|
||||||
|
lift: true,
|
||||||
|
'max-price': 120_000,
|
||||||
|
'max-price-per-meter': 1_500
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
64
src/Styles.js
Normal file
64
src/Styles.js
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import ConfigurationHTML from "./ConfigurationHTML.js";
|
||||||
|
import ItemHTML from "./ItemHTML.js";
|
||||||
|
import MenuHTML from "./MenuHTML.js";
|
||||||
|
|
||||||
|
export default class Styles {
|
||||||
|
|
||||||
|
static APP_STYLES = `
|
||||||
|
.${ItemHTML.CONTAINER_CLASS_NAME} {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 55px;
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
||||||
|
|
||||||
|
}
|
||||||
|
.${MenuHTML.CONTAINER_CLASS_NAME} {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
||||||
|
}
|
||||||
|
.${ConfigurationHTML.CONTAINER_CLASS_NAME} {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 3;
|
||||||
|
|
||||||
|
background-color: rgba(225, 245, 110, 0.90);
|
||||||
|
width: 95%;
|
||||||
|
height: 95%;
|
||||||
|
top: 2.5%;
|
||||||
|
left: 2.5%;
|
||||||
|
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: darkgreen;
|
||||||
|
}
|
||||||
|
.warning {
|
||||||
|
color: darkorange;
|
||||||
|
}
|
||||||
|
.error {
|
||||||
|
color: darkred;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
static add(style = null) {
|
||||||
|
if (!style) style = this.APP_STYLES;
|
||||||
|
const styleNode = document.createElement('style');
|
||||||
|
styleNode.textContent = style;
|
||||||
|
document.head.appendChild(styleNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user