diff --git a/src/ButtonClass.js b/src/ButtonClass.js
new file mode 100644
index 0000000..01b37ca
--- /dev/null
+++ b/src/ButtonClass.js
@@ -0,0 +1,5 @@
+export default class ButtonClass {
+
+ static IDEALISTA_BUTTON_CLASS = 'btn regular smaller';
+
+}
\ No newline at end of file
diff --git a/src/ConfigurationHTML.js b/src/ConfigurationHTML.js
index 6b126f3..ed941c2 100644
--- a/src/ConfigurationHTML.js
+++ b/src/ConfigurationHTML.js
@@ -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 {
-
-
-
- `
+
+
+
+
+
+ `
}
}
\ No newline at end of file
diff --git a/src/Information.js b/src/Information.js
index 583900b..51763cd 100644
--- a/src/Information.js
+++ b/src/Information.js
@@ -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();
}
}
diff --git a/src/Item.js b/src/Item.js
index e2cb162..2280f78 100644
--- a/src/Item.js
+++ b/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');
- }
}
\ No newline at end of file
diff --git a/src/ItemHTML.js b/src/ItemHTML.js
index d42c489..8eab843 100644
--- a/src/ItemHTML.js
+++ b/src/ItemHTML.js
@@ -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 `
-
- 20%: ${twentyPercent}€
- 30%: ${thirtyPercent}€
- `;
+
+ 20%: ${twentyPercent}€
+ 30%: ${thirtyPercent}€
+ 50%: ${fiftyPercent}€
+
`;
}
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 `m²: ${item.priceMeter}€`;
+
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 `${strongText} ${infoText}`;
}
diff --git a/src/MenuHTML.js b/src/MenuHTML.js
index 820411b..95520e2 100644
--- a/src/MenuHTML.js
+++ b/src/MenuHTML.js
@@ -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 `
-
-
+
+
`;
}
diff --git a/src/Styles.js b/src/Styles.js
index 9c704e4..dc15473 100644
--- a/src/Styles.js
+++ b/src/Styles.js
@@ -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 {