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";
|
import Preferences from "./Preferences.js";
|
||||||
|
|
||||||
export default class ConfigurationHTML {
|
export default class ConfigurationHTML {
|
||||||
@ -66,8 +67,10 @@ export default class ConfigurationHTML {
|
|||||||
</label>
|
</label>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<button class='${this.SAVE_CONFIG_CLASS_NAME}'>Guardar</button>
|
<div>
|
||||||
<button class='${this.OPEN_CONFIG_CLASS_NAME}'>Cerrar</button>
|
<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>`
|
</div>`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import Item from './Item.js';
|
import Item from './Item.js';
|
||||||
import ItemHTML from './ItemHTML.js';
|
|
||||||
import Log from './Log.js';
|
import Log from './Log.js';
|
||||||
|
|
||||||
export default class Information {
|
export default class Information {
|
||||||
@ -8,13 +7,11 @@ export default class Information {
|
|||||||
static ITEM_SELECTOR = 'article.item';
|
static ITEM_SELECTOR = 'article.item';
|
||||||
|
|
||||||
static create() {
|
static create() {
|
||||||
Log.debug(`Creating information...`)
|
|
||||||
const items = document.querySelectorAll(this.ITEM_SELECTOR);
|
const items = document.querySelectorAll(this.ITEM_SELECTOR);
|
||||||
for (const _item of items) {
|
Log.debug(`Creating information for ${items.length} items...`)
|
||||||
const item = new Item(_item);
|
for (const itemNode of items) {
|
||||||
const currentInformation = _item.querySelector(`.${this.CLASS_NAME}`);
|
const item = new Item(itemNode);
|
||||||
if (currentInformation) currentInformation.remove();
|
item.refreshData();
|
||||||
_item.innerHTML += ItemHTML.createInformation(item);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
50
src/Item.js
50
src/Item.js
@ -1,3 +1,5 @@
|
|||||||
|
import ItemHTML from './ItemHTML.js';
|
||||||
|
|
||||||
export default class Item {
|
export default class Item {
|
||||||
|
|
||||||
static NAME_SELECTOR = '.item-link';
|
static NAME_SELECTOR = '.item-link';
|
||||||
@ -19,6 +21,42 @@ export default class Item {
|
|||||||
this.isExterior = this._extractExterior();
|
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() {
|
_extractName() {
|
||||||
return this._node.querySelector(Item.NAME_SELECTOR).textContent;;
|
return this._node.querySelector(Item.NAME_SELECTOR).textContent;;
|
||||||
}
|
}
|
||||||
@ -56,16 +94,4 @@ export default class Item {
|
|||||||
return this.additionalInfo.includes('exterior');
|
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 twentyPercent = Math.round(item.price * 20 / 100);
|
||||||
const thirtyPercent = Math.round(item.price * 30 / 100);
|
const thirtyPercent = Math.round(item.price * 30 / 100);
|
||||||
|
const fiftyPercent = Math.round(item.price * 50 / 100);
|
||||||
return `
|
return `
|
||||||
<span>
|
<div>
|
||||||
<strong>20%:</strong> ${twentyPercent}€ <br>
|
<span><strong>20%:</strong> ${twentyPercent}€</span>
|
||||||
<strong>30%:</strong> ${thirtyPercent}€
|
<span><strong>30%:</strong> ${thirtyPercent}€</span>
|
||||||
</span>`;
|
<span><strong>50%:</strong> ${fiftyPercent}€</span>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
static _createPriceHTML(item) {
|
static _createPriceHTML(item) {
|
||||||
const desiredPrice = Preferences.get('max-price');
|
const desiredPrice = Preferences.get('max-price');
|
||||||
|
if (!desiredPrice) return ``;
|
||||||
|
|
||||||
const desiredTwentyFivePercentMore = Math.round(desiredPrice * 1.25);
|
const desiredTwentyFivePercentMore = Math.round(desiredPrice * 1.25);
|
||||||
|
|
||||||
if (item.price <= desiredPrice) {
|
if (item.price <= desiredPrice) {
|
||||||
@ -46,6 +50,8 @@ export default class ItemHTML {
|
|||||||
|
|
||||||
static _createPriceMeterHTML(item) {
|
static _createPriceMeterHTML(item) {
|
||||||
const desiredPricePerMeter = Preferences.get('max-price-per-meter');
|
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);
|
const desiredTwentyFivePercentMore = Math.round(desiredPricePerMeter * 1.25);
|
||||||
|
|
||||||
if (item.priceMeter <= desiredPricePerMeter) {
|
if (item.priceMeter <= desiredPricePerMeter) {
|
||||||
@ -88,7 +94,6 @@ export default class ItemHTML {
|
|||||||
return this.__createIndividual('✓', infoText, 'success');
|
return this.__createIndividual('✓', infoText, 'success');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
static _createWarning(infoText) {
|
static _createWarning(infoText) {
|
||||||
return this.__createIndividual('✓', infoText, 'warning');
|
return this.__createIndividual('✓', infoText, 'warning');
|
||||||
}
|
}
|
||||||
@ -101,6 +106,10 @@ export default class ItemHTML {
|
|||||||
return this.__createIndividual('✓', infoText, 'error');
|
return this.__createIndividual('✓', infoText, 'error');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static _createNeutral(infoText) {
|
||||||
|
return this.__createIndividual('ⓘ', infoText)
|
||||||
|
}
|
||||||
|
|
||||||
static __createIndividual(strongText, infoText, className = '') {
|
static __createIndividual(strongText, infoText, className = '') {
|
||||||
return `<span class='${className}'><strong>${strongText}</strong> ${infoText}</span>`;
|
return `<span class='${className}'><strong>${strongText}</strong> ${infoText}</span>`;
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import ButtonClass from "./ButtonClass.js";
|
||||||
import ConfigurationHTML from "./ConfigurationHTML.js";
|
import ConfigurationHTML from "./ConfigurationHTML.js";
|
||||||
|
|
||||||
export default class MenuHTML {
|
export default class MenuHTML {
|
||||||
@ -15,8 +16,8 @@ export default class MenuHTML {
|
|||||||
static create() {
|
static create() {
|
||||||
return `
|
return `
|
||||||
<div class='${this.CONTAINER_CLASS_NAME}'>
|
<div class='${this.CONTAINER_CLASS_NAME}'>
|
||||||
<button class='${ConfigurationHTML.OPEN_CONFIG_CLASS_NAME}' title='Abrir configuración'>⚙</button>
|
<button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${ConfigurationHTML.OPEN_CONFIG_CLASS_NAME}' title='Abrir configuración'>⚙ Configuración</button>
|
||||||
<button class='${this.RELOAD_INFORMATION_CLASS_NAME}' title='Cargar información'>⟳</button>
|
<button class='${ButtonClass.IDEALISTA_BUTTON_CLASS} ${this.RELOAD_INFORMATION_CLASS_NAME}' title='Refrescar información'>⟳ Refrescar</button>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,8 +11,9 @@ export default class Styles {
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 55px;
|
margin-top: -10px;
|
||||||
margin-top: 5px;
|
margin-bottom: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
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;
|
justify-content: space-around;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
padding: 10px 0;
|
||||||
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
|
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;
|
position: fixed;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
background-color: rgba(225, 245, 110, 0.90);
|
|
||||||
width: 95%;
|
width: 95%;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
top: 2.5%;
|
top: 2.5%;
|
||||||
left: 2.5%;
|
left: 2.5%;
|
||||||
|
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
|
||||||
|
background-color: rgba(255, 255, 255, 0.90);
|
||||||
|
border: 5px solid rgb(225, 245, 110);
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.success {
|
||||||
|
Loading…
Reference in New Issue
Block a user