Adding 50% price.
Some refactor and minor improvements.
This commit is contained in:
parent
6c473c54ea
commit
6de714b445
5
src/ButtonClass.js
Normal file
5
src/ButtonClass.js
Normal file
@ -0,0 +1,5 @@
|
||||
export default class ButtonClass {
|
||||
|
||||
static IDEALISTA_BUTTON_CLASS = 'btn regular smaller';
|
||||
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
import ButtonClass from "./ButtonClass.js";
|
||||
import Preferences from "./Preferences.js";
|
||||
|
||||
export default class ConfigurationHTML {
|
||||
@ -65,10 +66,12 @@ export default class ConfigurationHTML {
|
||||
<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>`
|
||||
|
||||
<div>
|
||||
<button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${this.SAVE_CONFIG_CLASS_NAME}'>Guardar</button>
|
||||
<button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${this.OPEN_CONFIG_CLASS_NAME}'>Cerrar</button>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
}
|
@ -1,5 +1,4 @@
|
||||
import Item from './Item.js';
|
||||
import ItemHTML from './ItemHTML.js';
|
||||
import Log from './Log.js';
|
||||
|
||||
export default class Information {
|
||||
@ -8,13 +7,11 @@ export default class Information {
|
||||
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);
|
||||
Log.debug(`Creating information for ${items.length} items...`)
|
||||
for (const itemNode of items) {
|
||||
const item = new Item(itemNode);
|
||||
item.refreshData();
|
||||
}
|
||||
}
|
||||
|
||||
|
54
src/Item.js
54
src/Item.js
@ -1,3 +1,5 @@
|
||||
import ItemHTML from './ItemHTML.js';
|
||||
|
||||
export default class Item {
|
||||
|
||||
static NAME_SELECTOR = '.item-link';
|
||||
@ -13,12 +15,48 @@ export default class Item {
|
||||
this.price = this._extractPrice();
|
||||
this.meters = this._extractMeters();
|
||||
this.priceMeter = this._extractPriceMeter();
|
||||
|
||||
|
||||
this.additionalInfo = this._extractAdditionalInfo();
|
||||
this.hasLift = this._extractLift();
|
||||
this.isExterior = this._extractExterior();
|
||||
}
|
||||
|
||||
get _data() {
|
||||
return this._node.nextElementSibling;
|
||||
}
|
||||
|
||||
refreshData() {
|
||||
this.removeData();
|
||||
this.addData();
|
||||
}
|
||||
|
||||
isDataRendered() {
|
||||
const nextElement = this._data;
|
||||
return nextElement.className
|
||||
&& nextElement.className.includes(ItemHTML.CONTAINER_CLASS_NAME);
|
||||
}
|
||||
|
||||
removeData() {
|
||||
if (!this.isDataRendered()) return;
|
||||
this._data.remove();
|
||||
}
|
||||
|
||||
addData() {
|
||||
this._node.outerHTML += ItemHTML.createInformation(this);
|
||||
}
|
||||
|
||||
isFlat() {
|
||||
return this.name.includes('Piso');
|
||||
}
|
||||
|
||||
isHouse() {
|
||||
return this.name.includes('Casa');
|
||||
}
|
||||
|
||||
isGround() {
|
||||
return this.name.includes('Bajo');
|
||||
}
|
||||
|
||||
_extractName() {
|
||||
return this._node.querySelector(Item.NAME_SELECTOR).textContent;;
|
||||
}
|
||||
@ -35,7 +73,7 @@ export default class Item {
|
||||
}
|
||||
return Number(metersText.replace('m²', ''));
|
||||
}
|
||||
|
||||
|
||||
_extractPriceMeter() {
|
||||
return Math.round(this.price / this.meters);
|
||||
}
|
||||
@ -55,17 +93,5 @@ export default class Item {
|
||||
if (!this.additionalInfo) return false;
|
||||
return this.additionalInfo.includes('exterior');
|
||||
}
|
||||
|
||||
isFlat() {
|
||||
return this.name.includes('Piso');
|
||||
}
|
||||
|
||||
isHouse() {
|
||||
return this.name.includes('Casa');
|
||||
}
|
||||
|
||||
isGround() {
|
||||
return this.name.includes('Bajo');
|
||||
}
|
||||
|
||||
}
|
@ -23,16 +23,20 @@ export default class ItemHTML {
|
||||
|
||||
const twentyPercent = Math.round(item.price * 20 / 100);
|
||||
const thirtyPercent = Math.round(item.price * 30 / 100);
|
||||
const fiftyPercent = Math.round(item.price * 50 / 100);
|
||||
return `
|
||||
<span>
|
||||
<strong>20%:</strong> ${twentyPercent}€ <br>
|
||||
<strong>30%:</strong> ${thirtyPercent}€
|
||||
</span>`;
|
||||
<div>
|
||||
<span><strong>20%:</strong> ${twentyPercent}€</span>
|
||||
<span><strong>30%:</strong> ${thirtyPercent}€</span>
|
||||
<span><strong>50%:</strong> ${fiftyPercent}€</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
||||
static _createPriceHTML(item) {
|
||||
const desiredPrice = Preferences.get('max-price');
|
||||
if (!desiredPrice) return ``;
|
||||
|
||||
const desiredTwentyFivePercentMore = Math.round(desiredPrice * 1.25);
|
||||
|
||||
if (item.price <= desiredPrice) {
|
||||
@ -46,6 +50,8 @@ export default class ItemHTML {
|
||||
|
||||
static _createPriceMeterHTML(item) {
|
||||
const desiredPricePerMeter = Preferences.get('max-price-per-meter');
|
||||
if (!desiredPricePerMeter) return `<span><strong>m²:</strong> ${item.priceMeter}€</span>`;
|
||||
|
||||
const desiredTwentyFivePercentMore = Math.round(desiredPricePerMeter * 1.25);
|
||||
|
||||
if (item.priceMeter <= desiredPricePerMeter) {
|
||||
@ -88,7 +94,6 @@ export default class ItemHTML {
|
||||
return this.__createIndividual('✓', infoText, 'success');
|
||||
}
|
||||
|
||||
|
||||
static _createWarning(infoText) {
|
||||
return this.__createIndividual('✓', infoText, 'warning');
|
||||
}
|
||||
@ -101,6 +106,10 @@ export default class ItemHTML {
|
||||
return this.__createIndividual('✓', infoText, 'error');
|
||||
}
|
||||
|
||||
static _createNeutral(infoText) {
|
||||
return this.__createIndividual('ⓘ', infoText)
|
||||
}
|
||||
|
||||
static __createIndividual(strongText, infoText, className = '') {
|
||||
return `<span class='${className}'><strong>${strongText}</strong> ${infoText}</span>`;
|
||||
}
|
||||
|
@ -1,3 +1,4 @@
|
||||
import ButtonClass from "./ButtonClass.js";
|
||||
import ConfigurationHTML from "./ConfigurationHTML.js";
|
||||
|
||||
export default class MenuHTML {
|
||||
@ -15,8 +16,8 @@ export default class MenuHTML {
|
||||
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>
|
||||
<button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${ConfigurationHTML.OPEN_CONFIG_CLASS_NAME}' title='Abrir configuración'>⚙ Configuración</button>
|
||||
<button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${this.RELOAD_INFORMATION_CLASS_NAME}' title='Refrescar información'>⟳ Refrescar</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
@ -11,8 +11,9 @@ export default class Styles {
|
||||
justify-content: space-around;
|
||||
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
margin-top: 5px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 0;
|
||||
|
||||
background-color: white;
|
||||
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
||||
@ -24,7 +25,7 @@ export default class Styles {
|
||||
justify-content: space-around;
|
||||
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 10px 0;
|
||||
|
||||
background-color: white;
|
||||
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
||||
@ -34,13 +35,16 @@ export default class Styles {
|
||||
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;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0.90);
|
||||
border: 5px solid rgb(225, 245, 110);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.success {
|
||||
|
Loading…
Reference in New Issue
Block a user