Adding currentMoney.

Better darkMode styles.
Adding more locations.

locations/Ansó.json

@@ -0,0 +1,16 @@
+{
+    "name": "Ansó",
+    "altitude": 860,
+    "bus": true,
+    "train": false,
+    "pharmacy": true,
+    "smoke": true,
+    "supermarkets": [
+        {
+            "type": "CUSTOM",
+            "url": "https://goo.gl/maps/sScuQ6BApZzrFZwN9"
+        }
+    ],
+    "pool": false,
+    "gym": false
+}

locations/Bielsa.json

@@ -3,7 +3,7 @@
     "altitude": 1034,
     "bus": true,
     "train": false,
-    "pharmacy": null,
+    "pharmacy": true,
     "smoke": true,
     "supermarkets": [
         {

locations/Formigal.json

@@ -0,0 +1,16 @@
+{
+    "name": "Formigal",
+    "altitude": 1550,
+    "bus": true,
+    "train": false,
+    "pharmacy": true,
+    "smoke": true,
+    "supermarkets": [
+        {
+            "type": "ALCAMPO",
+            "url": "https://goo.gl/maps/39e37qJLNw2WkZci9"
+        }
+    ],
+    "pool": true,
+    "gym": true
+}

locations/Graus.json

@@ -0,0 +1,32 @@
+{
+    "name": "Graus",
+    "altitude": 469,
+    "bus": true,
+    "train": false,
+    "pharmacy": true,
+    "smoke": true,
+    "supermarkets": [
+        {
+            "type": "EROSKI",
+            "url": "https://g.page/eroski-city-graus?share"
+        },
+        {
+            "type": "BONAREA",
+            "url": "https://goo.gl/maps/CnPyE9PhpsdKMF5N7"
+        },
+        {
+            "type": "ALTO_ARAGON",
+            "url": "https://goo.gl/maps/yZofjAm8awFZnNf37"
+        },
+        {
+            "type": "CUSTOM",
+            "url": "https://goo.gl/maps/KadcU8SoTR2Hx3hd6"
+        },
+        {
+            "type": "CUSTOM",
+            "url": "https://goo.gl/maps/snEwKUjc49SCbX986"
+        }
+    ],
+    "pool": true,
+    "gym": true
+}

locations/Isaba.json

@@ -0,0 +1,20 @@
+{
+    "name": "Isaba",
+    "altitude": 816,
+    "bus": true,
+    "train": false,
+    "pharmacy": true,
+    "smoke": false,
+    "supermarkets": [
+        {
+            "type": "COVIRAN",
+            "url": "https://goo.gl/maps/9zA6ywhaMKXbSWF89"
+        },
+        {
+            "type": "UDACO",
+            "url": "https://goo.gl/maps/fB5pZ3WENSqEG2Wt5"
+        }
+    ],
+    "pool": true,
+    "gym": false
+}

locations/ValledeHecho.json

@@ -0,0 +1,16 @@
+{
+    "name": "Hecho",
+    "altitude": 953,
+    "bus": false,
+    "train": false,
+    "pharmacy": true,
+    "smoke": true,
+    "supermarkets": [
+        {
+            "type": "ALTO_ARAGON",
+            "url": "https://goo.gl/maps/XRmwSrE5HcQzJbdF6"
+        }
+    ],
+    "pool": true,
+    "gym": false
+}

src/Configuration.js

@@ -43,6 +43,9 @@ export default class Configuration {
         return {
             enabled: container.querySelector('#enabled').checked,
             darkMode: container.querySelector('#darkMode').checked,
+            currentMoney: container.querySelector('#currentMoney').value,
+            'max-price': container.querySelector('#max-price').value,
+            'max-price-per-meter': container.querySelector('#max-price-per-meter').value,
             percentages: container.querySelector('#percentages').checked,
             percentages_20: container.querySelector('#percentages_20').checked,
             percentages_30: container.querySelector('#percentages_30').checked,
@@ -50,8 +53,6 @@ export default class Configuration {
             garage: container.querySelector('#garage').checked,
             exterior: container.querySelector('#exterior').checked,
             lift: container.querySelector('#lift').checked,
-            'max-price': container.querySelector('#max-price').value,
-            'max-price-per-meter': container.querySelector('#max-price-per-meter').value,
             bus: container.querySelector('#bus').checked,
             train: container.querySelector('#train').checked,
             supermarket: container.querySelector('#supermarket').checked,

src/ConfigurationHTML.js

@@ -39,6 +39,12 @@ export default class ConfigurationHTML {
             
             <div class='midefos-idealista-card'>
                 <h3>Precios</h3>
+                <label>
+                    <span>Dinero actual: </span>
+                    <input type='number' id='currentMoney' value='${Preferences.get('currentMoney')}' placeholder='0'>
+                </label>
+        
+        
                 <label>
                     <span>Precio máximo: </span>
                     <input type='number' id='max-price' value='${Preferences.get('max-price')}' placeholder='0'>

src/IconSvg.js

@@ -0,0 +1,5 @@
+export default class IconSvg {
+
+    static TICK = `<svg style="color: rgb(51, 209, 122);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" zoomAndPan="magnify" viewBox="0 0 30 30.000001" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656 " clip-rule="nonzero" fill="#33d17a"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#33d17a" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125 " fill-opacity="1" fill-rule="nonzero"></path></g></svg>`;
+
+}

src/ItemHTML.js

@@ -1,3 +1,4 @@
+import IconSvg from "./IconSvg.js";
 import Preferences from "./Preferences.js";
 
 export default class ItemHTML {
@@ -45,7 +46,7 @@ export default class ItemHTML {
     static createInformation(item) {
         let html = `<div class='${this.CONTAINER_CLASS_NAME} ${this.ITEM_STATE_CLASS_NAME(item)}'>`;
         html += `<div class='${this.INFORMATION_CONTAINER_CLASS_NAME}'>`;
-        html += this._createPercentagePriceHTML(item);
+        html += this._createPercentagesPriceHTML(item);
         html += this._createPriceHTML(item);
         html += this._createPriceMeterHTML(item);
         html += this._createGarageHTML(item);
@@ -76,30 +77,40 @@ export default class ItemHTML {
         return html;
     }
 
-    static _createPercentagePriceHTML(item) {
+    static _createPercentagesPriceHTML(item) {
         if (!Preferences.get('percentages')) return ``;
 
-
         let html = `<div class='${this.INFORMATION_CLASS_NAME}'>`;
         if (Preferences.get('percentages_20')) {
-            const twentyPercent = Math.round(item.price * 20 / 100);
+            html += this._createPercentagePriceHTML(item, 20);
-            html += this._createIndividual('20%', twentyPercent);
         }
 
         if (Preferences.get('percentages_30')) {
-            const thirtyPercent = Math.round(item.price * 30 / 100);
+            html += this._createPercentagePriceHTML(item, 30);
-            html += this._createIndividual('30%', thirtyPercent)
         }
 
         if (Preferences.get('percentages_50')) {
-            const fiftyPercent = Math.round(item.price * 50 / 100);
+            html += this._createPercentagePriceHTML(item, 50);
-            html += this._createIndividual('50%', fiftyPercent)
         }
         html += `</div>`;
 
         return html;
     }
 
+    static _createPercentagePriceHTML(item, percent) {
+        const calculation = Math.round(item.price * percent / 100);
+        const currentMoney = Preferences.get('currentMoney'); 
+        const percentText = `${percent}%`;
+        if (currentMoney === 0) {
+            return this._createIndividual(percentText, calculation);
+        }
+        
+        if (currentMoney >= calculation) {
+            return this._createTextSuccess(percentText, calculation);
+        }
+        return this._createTextError(percentText, calculation);
+    }
+
     static _createPriceHTML(item) {
         const desiredPrice = Preferences.get('max-price');
         if (!desiredPrice) return ``;
@@ -266,7 +277,7 @@ export default class ItemHTML {
     }
 
     static _createSuccess(infoText) {
-        return this._createTextSuccess('✔️', infoText);
+        return this._createTextSuccess(IconSvg.TICK, infoText);
     }
 
     static _createTextSuccess(strongText, infoText) {

src/Preferences.js

@@ -45,6 +45,7 @@ export default class Preferences {
             enabled: true,
             darkMode: true,
 
+            currentMoney: 0,
             'max-price': 120_000,
             'max-price-per-meter': 1_500,
             percentages: true,

src/Styles.js

@@ -48,11 +48,11 @@ export default class Styles {
         }
 
         span.${ItemHTML.SUCCESS_CLASS_NAME} {
-            color: darkgreen;
+            color: lightgreen;
         }
 
         .${ItemHTML.CONTAINER_CLASS_NAME}.${ItemHTML.SUCCESS_CLASS_NAME} {
-            border-color: rgba(61, 217, 61, 0.3);
+            border-color: lightgreen;
         }
 
         span.${ItemHTML.WARNING_CLASS_NAME} {
@@ -60,11 +60,11 @@ export default class Styles {
         }
 
         span.${ItemHTML.ERROR_CLASS_NAME} {
-            color: darkred;
+            color: lightcoral;
         }
 
         .${ItemHTML.CONTAINER_CLASS_NAME}.${ItemHTML.ERROR_CLASS_NAME} {
-            border-color: rgba(217, 61, 61, 0.3);
+            border-color: lightcoral;
         }
 
         .${MenuHTML.CONTAINER_CLASS_NAME} {
@@ -81,6 +81,7 @@ export default class Styles {
         .${ConfigurationHTML.CONTAINER_CLASS_NAME} {
             display: none;
             position: fixed;
+            overflow: auto;
             z-index: 3;
         
             width: 95%;
@@ -122,8 +123,16 @@ export default class Styles {
         .rs-gallery-footer,
         .ide-box-detail,
         section.ide-box-detail-first-picture,
+        .pagination li a,
+        .btn.regular,
+        .dropdown-wrapper, .dropdown-wrapper .dropdown,
+        .new-radio-button input:checked + label,
+        .rs-light-adcard_info,
+        .sticky-bar-detail,
+        .home,
         .${ItemHTML.CONTAINER_CLASS_NAME},
-        .${MenuHTML.CONTAINER_CLASS_NAME} {
+        .${MenuHTML.CONTAINER_CLASS_NAME},
+        .midefos-idealista-card {
             background-color: #060703;
             color: white;
         }
@@ -131,7 +140,8 @@ export default class Styles {
         body,
         #wrapper,
         .new-listing-filter,
-        footer {
+        footer,
+        .${ConfigurationHTML.CONTAINER_CLASS_NAME} {
             background-color: #181B0B;
             color: white;
         }
@@ -140,10 +150,17 @@ export default class Styles {
         .new-listing-filter a,
         :root .input-radio > span > span,
         :root .input-checkbox > span > span,
-        .home-boxes-container .draw-search, .home-boxes-container .put-property, .home-boxes-container .solidary-module {
+        .home-boxes-container .draw-search, .home-boxes-container .put-property, .home-boxes-container .solidary-module,
+        .dropdown-wrapper .placeholder, .dropdown-wrapper .dropdown li, .dropdown-wrapper .dropdown li > :first-child,
+        .ide-main-menu li a, .ide-main-menu li > span,
+        .new-search-box .dropdown-wrapper .placeholder {
             color: white;
         }
 
+        .id-logo {
+            filter: invert();
+        }
+        
         .save-search-box {
             color: black;
         }