Add readonly toggle buttonmain

1 files changed, 22 insertions, 3 deletions

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<boolean>,
+    onUpdateReadOnly: (b: boolean) => void,
+}
+
+export function view({ mapInit, readOnly, onUpdateReadOnly }: ViewParams): Html {
     return h('footer',
         { className: 'g-Map__Footer' },
         rx.withState<Map>(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<boolean>, 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 {