Adding 50% price.
Some refactor and minor improvements.
This commit is contained in:
		
							
								
								
									
										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 { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user