From 5ee75f8ab0a1184e2fcb8e8c5aa1db0f01817865 Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Sun, 31 Aug 2025 14:25:43 +0200 Subject: Add readonly toggle button --- frontend/ts/src/pages/map/footer.ts | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) (limited to 'frontend/ts/src/pages/map/footer.ts') diff --git a/frontend/ts/src/pages/map/footer.ts b/frontend/ts/src/pages/map/footer.ts index 945bfd4..f514c66 100644 --- a/frontend/ts/src/pages/map/footer.ts +++ b/frontend/ts/src/pages/map/footer.ts @@ -1,4 +1,4 @@ -import { h, Html } from 'lib/rx' +import { h, Html, Rx } from 'lib/rx' import * as rx from 'lib/rx' import * as request from 'request' import * as modal from 'ui/modal' @@ -7,12 +7,22 @@ import { Map } from 'models/map' import * as form from 'lib/form' import * as L from 'lib/loadable' -export function view(mapInit: Map): Html { +interface ViewParams { + mapInit: Map, + readOnly: Rx, + onUpdateReadOnly: (b: boolean) => void, +} + +export function view({ mapInit, readOnly, onUpdateReadOnly }: ViewParams): Html { return h('footer', { className: 'g-Map__Footer' }, rx.withState(mapInit, mapVar => mapVar.map(map => [ - map.name, + h('div', + { className: 'g-Map__FooterButtons' }, + map.name, + readOnlyButton(readOnly, onUpdateReadOnly) + ), h('div', { className: 'g-Map__FooterButtons' }, viewRenameButton(map, (map: Map) => mapVar.update(_ => map)), @@ -23,6 +33,15 @@ export function view(mapInit: Map): Html { ) } +function readOnlyButton(readOnly: Rx, onUpdateReadOnly: (b: boolean) => void): Html { + return h('button', + { className: readOnly.map(b => `g-Button g-ReadOnly ${b ? 'g-ReadOnly--Active' : ''}`), + onclick: readOnly.map(b => (event: Event) => onUpdateReadOnly(!b)) + }, + 'Lecture seule' + ) +} + // Rename modal function viewRenameButton(map: Map, onUpdate: (m: Map) => void): Html { -- cgit v1.2.3