From e1745841b1978f60b1754c2f83bdc41203dc3cb0 Mon Sep 17 00:00:00 2001
From: Mark Kalsbeek <Mark@Kalsbeek.dev>
Date: Sat, 4 Apr 2026 15:27:12 +0200
Subject: [PATCH] restyle page, add area filters

---
 src/huizenbot.py         |  2 +-
 src/templates/index.html | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/huizenbot.py b/src/huizenbot.py
index 5ff2c7e..347e863 100644
--- a/src/huizenbot.py
+++ b/src/huizenbot.py
@@ -309,7 +309,7 @@ def _check_filters(listing: RawListing, travel: dict[str, int]) -> bool:
             )
             passed = False
     # --- Area filter ---
-    if listing.woonoppervlak is not None and listing.woonoppervlak is not > config.MIN_AREA:
+    if listing.woonoppervlak is not None and listing.woonoppervlak < config.MIN_AREA:
         log.info(f"Gefilterd op oppervlakte: {listing.woonoppervlak} < {config.MIN_AREA}")
         passed = False
 
diff --git a/src/templates/index.html b/src/templates/index.html
index d610f40..6790c69 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -389,6 +389,11 @@
     <label>Max prijs</label>
     <input type="number" id="f-prijs" value="300000" min="0" step="5000">
   </div>
+  <div class="filter-group">
+    <label>Min opp.</label>
+    <input type="number" id="f-opp" value="65" min="0" max="300">
+    <label>m²</label>
+  </div>
   <div class="filter-group">
     <label>Sorteer</label>
     <select id="f-sort">
@@ -398,6 +403,8 @@
       <option value="prijs_desc">Prijs ↓</option>
       <option value="ov_mark_asc">OV Mark ↑</option>
       <option value="fiets_mark_asc">Fiets Mark ↑</option>
+      <option value="opp_asc">Opp. ↑</option>
+      <option value="opp_desc">Opp. ↓</option>
     </select>
   </div>
   <button id="filter-reset">Reset</button>
@@ -414,6 +421,7 @@ const DEFAULTS = {
   'f-ov-michelle': 45,
   'f-fiets-mark': 40,
   'f-prijs': 300000,
+  'f-opp': 65,
   'f-sort': 'first_seen_desc',
 };
 
@@ -555,6 +563,7 @@ function get_filters() {
     ov_michelle: parseInt(document.getElementById('f-ov-michelle').value) || Infinity,
     fiets_mark:  parseInt(document.getElementById('f-fiets-mark').value) || Infinity,
     prijs:       parseInt(document.getElementById('f-prijs').value) || Infinity,
+    opp:         parseInt(document.getElementById('f-opp').value) || 0,
     sort:        document.getElementById('f-sort').value,
   };
 }
@@ -566,6 +575,8 @@ const SORT_FNS = {
   prijs_desc:      (a, b) => (b.prijs || 0) - (a.prijs || 0),
   ov_mark_asc:     (a, b) => (a.ov_mark ?? 999) - (b.ov_mark ?? 999),
   fiets_mark_asc:  (a, b) => (a.fiets_mark ?? 999) - (b.fiets_mark ?? 999),
+  opp_asc:         (a, b) => (a.woonoppervlak ?? 0) - (b.woonoppervlak ?? 0),
+  opp_desc:        (a, b) => (b.woonoppervlak ?? 0) - (a.woonoppervlak ?? 0),
 };
 
 function apply() {
@@ -575,6 +586,7 @@ function apply() {
     if (f.ov_michelle < Infinity && (l.ov_michelle == null || l.ov_michelle > f.ov_michelle)) return false;
     if (f.fiets_mark  < Infinity && (l.fiets_mark  == null || l.fiets_mark  > f.fiets_mark))  return false;
     if (l.prijs != null && l.prijs > f.prijs) return false;
+    if (f.opp > 0 && (l.woonoppervlak == null || l.woonoppervlak < f.opp)) return false;
     return true;
   });