From c8a1e41abbfe4d41a8dcd83cd234db8bac66486c Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Wed, 21 Jun 2023 21:39:33 +0200
Subject: [PATCH] Setting to show only available items. On by default.

---
 site/model/settings.js     |  1 +
 site/settings.js           | 15 ++++++++-------
 site/views/items-filter.js |  4 ++++
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/site/model/settings.js b/site/model/settings.js
index 959947a..6a76c78 100644
--- a/site/model/settings.js
+++ b/site/model/settings.js
@@ -10,6 +10,7 @@ class Settings extends Model {
         STORE_KEYS.forEach((store) => {
             this[store] = stores[store].defaultChecked;
         });
+        this.onlyAvailable = true;
 
         let settings = localStorage.getItem("settings");
         if (settings) {
diff --git a/site/settings.js b/site/settings.js
index b57bfe1..e51d9bb 100644
--- a/site/settings.js
+++ b/site/settings.js
@@ -21,22 +21,23 @@ class SettingsView extends View {
                             ></custom-checkbox>`
                     ).join("")}
                 </div>
-                <label
-                    >Start-Datum für Diagramme
+                <div class="flex flex-row gap-2">
+                    Start-Datum für Diagramme
                     <input
                         x-id="startDate"
                         x-change
                         x-state
                         type="date"
-                        class="cursor-pointer inline-flex items-center gap-x-1 rounded-full bg-white border border-gray-400 px-2 py-1 text-xs font-medium text-gray-600"
-                /></label>
-                <label>
+                        class="flex-grow cursor-pointer inline-flex items-center gap-x-1 rounded-full bg-white border border-gray-400 px-2 py-1 text-xs font-medium text-gray-600">
+                </div>
+                <div class="flex flex-row gap-2">
                     Diagramm Typ
-                    <select x-id="chartType" x-change x-state>
+                    <select x-id="chartType" x-change x-state class="flex-grow">
                         <option value="stepped">Stufen</option>
                         <option value="lines">Linien</option>
                     </select>
-                </label>
+                </div>
+                <custom-checkbox x-id="onlyAvailable" x-state x-change label="Nur verfügbare Produkte anzeigen" checked></custom-checkbox>
             </div>
         `;
         this.setupEventHandlers();
diff --git a/site/views/items-filter.js b/site/views/items-filter.js
index e482e17..a6009f1 100644
--- a/site/views/items-filter.js
+++ b/site/views/items-filter.js
@@ -180,6 +180,10 @@ class ItemsFilter extends View {
             return;
         }
 
+        if (settings.onlyAvailable) {
+            filteredItems = filteredItems.filter((item) => !item.unavailable);
+        }
+
         this.model.lastDate = null;
         if (this._filterByPriceChanges) {
             if (elements.priceChangesToday.checked) {