diff options
Diffstat (limited to 'app/main.js')
| -rw-r--r-- | app/main.js | 100 |
1 files changed, 83 insertions, 17 deletions
diff --git a/app/main.js b/app/main.js index 9a4da0c..ef51345 100644 --- a/app/main.js +++ b/app/main.js @@ -1,6 +1,6 @@ // main.js - Updated with Sidebar class -import { Modal, Sidebar } from "components"; +import { LeftSidebar, Modal, RightSidebar } from "components"; import { Dom, DomOptions } from "dom"; import { MapEl } from "map"; import { @@ -223,8 +223,10 @@ export class App { #map; /** @type {HTMLElement} */ #stats; - /** @type {Sidebar} */ - #sidebar; + /** @type {LeftSidebar} */ + #leftSidebar; + /** @type {RightSidebar} */ + #rightSidebar; /** @type {Modal|null} */ #modal = null; /** @type {HouseParameter} */ @@ -248,26 +250,75 @@ export class App { margin: "0", }); - this.#sidebar = new Sidebar({ + // Create header with global toggle buttons + const header = Dom.div( + new DomOptions({ + children: [ + // Left sidebar toggle button + Dom.button( + "☰ Filters", + () => this.#leftSidebar.toggle(), + new DomOptions({ + styles: { + background: "#fff", + border: "1px solid #ddd", + borderRadius: "4px", + cursor: "pointer", + fontSize: "1rem", + margin: "0.5rem", + padding: "0.5rem 1rem", + }, + }), + ), + // Right sidebar toggle button + Dom.button( + "⚙️ Weights", + () => this.#rightSidebar.toggle(), + new DomOptions({ + styles: { + background: "#fff", + border: "1px solid #ddd", + borderRadius: "4px", + cursor: "pointer", + fontSize: "1rem", + margin: "0.5rem", + padding: "0.5rem 1rem", + }, + }), + ), + ], + styles: { + background: "#f5f5f5", + borderBottom: "1px solid #ddd", + display: "flex", + justifyContent: "space-between", + padding: "0", + }, + }), + ); + + this.#leftSidebar = new LeftSidebar({ allHouses: this.#collection.houses, areaParam: this.#areaParameter, filters: this.#filters, houseParam: this.#houseParameter, - onAreaParamChange: (param) => { + onAreaColorChange: (param) => { this.#areaParameter = param; this.#map.updateArea(this.#areaParameter); }, + onColorChange: (param) => { + this.#houseParameter = param; + this.#map.updateHousesParameter(this.#houseParameter); + }, onFilterChange: () => { this.#map.updateHouseVisibility(this.#filters); - const stats = App.#createStats(this.#collection.houses, this.#filters); this.#stats.replaceWith(stats); this.#stats = stats; }, - onHouseParamChange: (param) => { - this.#houseParameter = param; - this.#map.updateHousesParameter(this.#houseParameter); - }, + }); + + this.#rightSidebar = new RightSidebar({ onWeightChange: (key, value) => { if (key in this.#weights) { this.#weights[/** @type {keyof Weights} */ (key)] = value; @@ -300,16 +351,31 @@ export class App { Dom.div( new DomOptions({ children: [ - this.#sidebar.render(), + header, Dom.div( new DomOptions({ - children: [this.#map.svg, this.#stats], - id: "map-container", + children: [ + this.#leftSidebar.render(), + Dom.div( + new DomOptions({ + children: [this.#map.svg, this.#stats], + id: "map-container", + styles: { + display: "flex", + flex: "1", + flexDirection: "column", + minWidth: "0", + }, + }), + ), + this.#rightSidebar.render(), + ], + id: "main-content", styles: { display: "flex", flex: "1", - flexDirection: "column", - minWidth: "0", + height: "calc(100vh - 60px)", + overflow: "hidden", }, }), ), @@ -317,8 +383,8 @@ export class App { id: "main", styles: { display: "flex", - flex: "1", - overflow: "hidden", + flexDirection: "column", + height: "100vh", }, }), ), |