diff options
Diffstat (limited to 'app/dom.js')
| -rw-r--r-- | app/dom.js | 63 |
1 files changed, 58 insertions, 5 deletions
@@ -143,9 +143,8 @@ export class Dom { if (onInput) { input.addEventListener( "input", - /** @param {InputEvent} e */ (e) => { - const _target = /** @type {HTMLInputElement} */ (e.target); - onInput(e); + /** @param {Event} e */ (e) => { + onInput(/** @type {InputEvent} */ (e)); }, ); } @@ -368,7 +367,7 @@ export class Dom { }); const title = Dom.heading(2, { styles: { color: "#333", fontSize: "20px", margin: "0" }, - textContent: house.location.address, + textContent: house.address, }); const score = Dom.span({ styles: { @@ -400,6 +399,12 @@ export class Dom { { label: "Living Area", value: `${house.property.livingArea} m²` }, { label: "District", value: house.location.district }, { label: "Rooms", value: house.property.rooms?.toString() ?? "N/A" }, + { label: "Price", value: `${house.price} €` }, + { label: "Building Type", value: house.buildingType }, + { label: "Construction Year", value: house.constructionYear?.toString() ?? "N/A" }, + { label: "Living Area", value: `${house.livingArea} m²` }, + { label: "District", value: house.district }, + { label: "Rooms", value: house.rooms?.toString() ?? "N/A" }, ]; for (const { label, value } of details) { const item = Dom.div({ @@ -423,7 +428,7 @@ export class Dom { }); const descText = Dom.p({ styles: { color: "#333", fontSize: "14px", lineHeight: "1.4", marginTop: "5px" }, - textContent: house.property.description ?? "No description available.", + textContent: house.description ?? "No description available.", }); Dom.appendChildren(descSect, [descTitle, descText]); frag.appendChild(descSect); @@ -553,4 +558,52 @@ export class Dom { static replace(oldEl, newEl) { oldEl.parentNode?.replaceChild(newEl, oldEl); } + + /** + * Create a weight slider + * @param {string} id + * @param {string} labelText + * @param {string} weightKey + * @param {number} initialValue + * @param {(key: string, value: number) => void} onChange + * @returns {HTMLElement} + */ + static slider(id, labelText, weightKey, initialValue, onChange) { + const group = Dom.div({ + styles: { display: "flex", flexDirection: "column", marginBottom: "1rem" }, + }); + + const label = Dom.label({ for: id }); + const output = Dom.span({ + id: `${id}-value`, + styles: { color: "#0066cc", fontSize: "0.85rem", fontWeight: "bold", textAlign: "center" }, + textContent: initialValue.toFixed(1), + }); + + const labelTextSpan = Dom.span({ + styles: { fontSize: "0.85rem" }, + textContent: labelText, + }); + + label.append(labelTextSpan, " ", output); + + const slider = Dom.input({ + attributes: { max: "1", min: "0", step: "0.1", value: initialValue.toString() }, + id, + onInput: /** @param {Event} e */ (e) => { + const target = /** @type {HTMLInputElement} */ (e.target); + const val = Number(target.value); + output.textContent = val.toFixed(1); + onChange(weightKey, val); + }, + styles: { + margin: "0.5rem 0", + width: "100%", + }, + type: "range", + }); + + group.append(label, slider); + return group; + } } |