diff --git a/static/index.html b/static/index.html index a80e80c..3f97939 100644 --- a/static/index.html +++ b/static/index.html @@ -11,6 +11,7 @@ crossorigin="" /> + @@ -72,6 +73,8 @@ align-items: center; justify-content: center; height: 40px; + text-align: center; + padding: 2px 5px; } #banner.hidden { @@ -96,24 +99,85 @@ height: 5px; border-radius: 999px; } + + #bottom-bar { + display: none; + grid-row: 3 / 4; + gap: 10px; + justify-content: center; + padding: 10px; + } + + .bottom-bar__vehicle-filter p { + font-size: 12px; + margin: 0; + text-align: center; + } + .bottom-bar__vehicle-filter .vehicle { + margin: 0 auto; + } + + #container { + display: grid; + grid-template-columns: auto 300px; + grid-template-rows: auto 1fr; + height: 100dvh; + } + + .bottom-bar__vehicle-filter--deselected { + filter: grayscale(1.0); + opacity: 0.75; + } + + @media screen and (max-width: 800px) { + #container { + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; + } + #sidebar { + display: none; + } + #bottom-bar { + display: flex; + } + } -
+
+
+
+
+ +
+

Bus

+
+
+
+ +
+

BRT

+
+
+
+ +
+

TRAX

+
+
+
+ +
+

FrontRunner

+
+
@@ -145,8 +209,8 @@ type="checkbox" name="brt" id="brt" - checked - class="layer-toggle" + :checked="brtLayer" + @change="toggleLayer('brt')" />
@@ -160,8 +224,8 @@ type="checkbox" name="trax" id="trax" - checked - class="layer-toggle" + :checked="traxLayer" + @change="toggleLayer('trax')" />
@@ -175,8 +239,8 @@ type="checkbox" name="frontrunner" id="frontrunner" - checked - class="layer-toggle" + :checked="frontRunnerLayer" + @change="toggleLayer('frontRunner')" /> diff --git a/static/js/main.js b/static/js/main.js index e36c763..a3cf186 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -2,6 +2,7 @@ import * as shapes from "./shapes.js"; import protobuf from "https://cdn.jsdelivr.net/npm/protobufjs@8.0.0/dist/protobuf.js/+esm"; import * as L from "https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet-src.esm.js"; import stations from "./stations.js" +import Alpine from "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/module.esm.min.js"; let lastUpdated; @@ -203,31 +204,42 @@ protobuf.load("/schema.proto").then((root) => { reload(); setInterval(reload, 5000); - - for (const checkbox of document.querySelectorAll(".layer-toggle")) { - checkbox.addEventListener("input", (e) => { - let layer; - - switch (e.target.name) { - case "bus": - layer = busLayer; - break; - case "brt": - layer = brtLayer; - break; - case "trax": - layer = traxLayer; - break; - case "frontrunner": - layer = frontRunnerLayer; - break; - } - - if (e.target.checked) { - layer?.addTo(map); - } else { - layer?.remove(); - } - }); - } }); + +Alpine.data('app', () => ({ + busLayer: true, + brtLayer: true, + traxLayer: true, + frontRunnerLayer: true, + + toggleLayer(name) { + let layer; + + switch (name) { + case "bus": + layer = busLayer; + break; + case "brt": + layer = brtLayer; + break; + case "trax": + layer = traxLayer; + break; + case "frontRunner": + layer = frontRunnerLayer; + break; + } + + let oldState = this[`${name}Layer`] + + if (!oldState) { + layer?.addTo(map); + } else { + layer?.remove(); + } + + this[`${name}Layer`] = !oldState + }, +})) + +Alpine.start()