Adding 50% price.

Some refactor and minor improvements.
This commit is contained in:
Jorge Bolois Guerrero 2022-07-09 13:30:30 +02:00
parent 6c473c54ea
commit 6de714b445
7 changed files with 81 additions and 36 deletions

5
src/ButtonClass.js Normal file
View File

@ -0,0 +1,5 @@
export default class ButtonClass {
static IDEALISTA_BUTTON_CLASS = 'btn regular smaller';
}

View File

@ -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>`
}
}

View File

@ -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();
}
}

View File

@ -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');
}
}

View File

@ -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>`;
}

View File

@ -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>`;
}

View File

@ -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 {