${this._createPercentagePriceHTML(item)}
${this._createPriceHTML(item)}
${this._createPriceMeterHTML(item)}
${this._createLiftHTML(item)}
- ${this._createInteriorHTML(item)}
+ ${this._createExteriorHTML(item)}
`
}
-
+
static _createPercentagePriceHTML(item) {
if (!Preferences.get('percentages')) return ``;
-
+
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}€
-
50%: ${fiftyPercent}€
+
+ ${this._createIndividual('20%', twentyPercent)}
+ ${this._createIndividual('30%', thirtyPercent)}
+ ${this._createIndividual('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) {
+
+ if (item.isProperPrice(desiredPrice)) {
return this._createSuccess('Precio');
- } else if (item.price <= desiredTwentyFivePercentMore) {
+ } else if (item.isProperPrice(desiredTwentyFivePercentMore)) {
return this._createWarning('Precio');
}
return this._createError('Precio');
}
-
-
+
static _createPriceMeterHTML(item) {
const desiredPricePerMeter = Preferences.get('max-price-per-meter');
- if (!desiredPricePerMeter) return `
m²: ${item.priceMeter}€`;
+ if (!desiredPricePerMeter) return this._createIndividual('m²', item.priceMeter);
const desiredTwentyFivePercentMore = Math.round(desiredPricePerMeter * 1.25);
-
+
if (item.priceMeter <= desiredPricePerMeter) {
- return `
m²: ${item.priceMeter}€`;
+ return this._createTextSuccess('m²', item.priceMeter)
} else if (item.priceMeter <= desiredTwentyFivePercentMore) {
- return `
m²: ${item.priceMeter}€`;
+ return this._createTextWarning('m²', item.priceMeter)
}
- return `
m²: ${item.priceMeter}€`;
+ return this._createTextError('m²', item.priceMeter)
}
-
+
static _createLiftHTML(item) {
- if (!Preferences.get('lift')) return ``;
-
+ if (!this._shouldCheckLift(item)) {
+ return ``;
+ }
+
if (!item.additionalInfo) {
- if (item.isFlat()) return ``;
return this._createMissing('Ascensor');
}
-
+
if (item.hasLift) {
- return this._createSuccess('Ascensor',);
+ return this._createSuccess('Ascensor');
}
return this._createError('Ascensor');
}
-
- static _createInteriorHTML(item) {
- if (!Preferences.get('exterior')) return ``;
-
- if (!item.additionalInfo) {
- if (!item.isFlat()) return ``;
- return this._createMissing('Exterior');
+
+ static _shouldCheckLift(item) {
+ return Preferences.get('lift')
+ && !item.isHouse()
+ && !item.isGround();
+ }
+
+ static _createExteriorHTML(item) {
+ if (!this._shouldCheckExterior(item)) {
+ return ``;
}
-
+
if (item.isExterior) {
return this._createSuccess('Exterior');
}
- return this._createError('Exterior');
+
+ if (item.isInterior) {
+ return this._createError('Exterior');
+ }
+ return this._createMissing('Exterior');
+ }
+
+ static _shouldCheckExterior(item) {
+ return Preferences.get('exterior')
+ && !item.isHouse();
}
static _createSuccess(infoText) {
- return this.__createIndividual('✓', infoText, 'success');
+ return this._createTextSuccess('✔️', infoText);
+ }
+
+ static _createTextSuccess(strongText, infoText) {
+ return this._createIndividual(strongText, infoText, this.SUCCESS_CLASS_NAME);
}
static _createWarning(infoText) {
- return this.__createIndividual('✓', infoText, 'warning');
+ return this._createTextWarning('⚠️', infoText);
}
static _createMissing(infoText) {
- return this.__createIndividual('?', infoText, 'warning');
+ return this._createTextWarning('?', infoText);
+ }
+
+ static _createTextWarning(strongText, infoText) {
+ return this._createIndividual(strongText, infoText, this.WARNING_CLASS_NAME);
}
static _createError(infoText) {
- return this.__createIndividual('✓', infoText, 'error');
+ return this._createTextError('🚫', infoText);
+ }
+
+ static _createTextError(strongText, infoText) {
+ return this._createIndividual(strongText, infoText, this.ERROR_CLASS_NAME);
}
static _createNeutral(infoText) {
- return this.__createIndividual('ⓘ', infoText)
+ return this._createIndividual('ⓘ', infoText)
}
- static __createIndividual(strongText, infoText, className = '') {
+ static _createIndividual(strongText, infoText, className = '') {
return `
${strongText} ${infoText}`;
}
diff --git a/src/Styles.js b/src/Styles.js
index dc15473..1ca6804 100644
--- a/src/Styles.js
+++ b/src/Styles.js
@@ -17,8 +17,34 @@ export default class Styles {
background-color: white;
box-shadow: 0 3px 6px rgba(225, 245, 110, 0.16), 0 3px 6px rgba(225, 245, 110, 0.23);
-
+ border: 3px solid transparent;
}
+
+ .${ItemHTML.INFORMATION_CLASS_NAME} {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .${ItemHTML.SUCCESS_CLASS_NAME} {
+ color: darkgreen;
+ }
+
+ .${ItemHTML.CONTAINER_CLASS_NAME}.${ItemHTML.SUCCESS_CLASS_NAME} {
+ border-color: rgba(61, 217, 61, 0.3);
+ }
+
+ .${ItemHTML.WARNING_CLASS_NAME} {
+ color: darkorange;
+ }
+
+ .${ItemHTML.ERROR_CLASS_NAME} {
+ color: darkred;
+ }
+
+ .${ItemHTML.CONTAINER_CLASS_NAME}.${ItemHTML.ERROR_CLASS_NAME} {
+ border-color: rgba(217, 61, 61, 0.3);
+ }
+
.${MenuHTML.CONTAINER_CLASS_NAME} {
display: flex;
align-items: center;
@@ -46,16 +72,6 @@ export default class Styles {
border: 5px solid rgb(225, 245, 110);
border-radius: 8px;
}
-
- .success {
- color: darkgreen;
- }
- .warning {
- color: darkorange;
- }
- .error {
- color: darkred;
- }
`;
static add(style = null) {