2 files changed, 37 insertions, 8 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 {
diff --git a/frontend/ts/src/pages/map/marker.ts b/frontend/ts/src/pages/map/marker.ts
index b690741..435ed5b 100644
--- a/frontend/ts/src/pages/map/marker.ts
+++ b/frontend/ts/src/pages/map/marker.ts
@@ -1,16 +1,17 @@
-import { mount, h, s } from 'lib/rx'
+import { Var, mount, h, s } from 'lib/rx'
 import * as Color from 'lib/color'
 import * as M from 'lib/leaflet'
 import * as icons from 'lib/icons'
 import * as markerModel from 'models/marker'
 
 interface CreateParams {
-    marker: markerModel.Marker,
-    onMove: (marker: M.Layer) => void,
-    onClick: (markerElem: M.FeatureGroup) => void,
+    marker: markerModel.Marker
+    onMove: (marker: M.Layer) => void
+    onClick: (markerElem: M.FeatureGroup) => void
+    readOnlyVar: Var<boolean>
 }
 
-export function create({ marker, onMove, onClick }: CreateParams): M.FeatureGroup {
+export function create({ marker, onMove, onClick, readOnlyVar }: CreateParams): M.FeatureGroup {
     const { lat, lng, color, icon, name, description, radius } = marker
     const pos = { lat, lng }
 
@@ -30,6 +31,15 @@ export function create({ marker, onMove, onClick }: CreateParams): M.FeatureGrou
         ? M.featureGroup([ markerElem, circle ])
         : M.featureGroup([ markerElem ])
 
+    // Fired before dragging, permits to disable dragging just at the right
+    // moment if in readonly mode.
+    markerElem.addEventListener('mousedown', () => {
+        if (readOnlyVar.now()) {
+            markerElem.dragging.disable()
+            window.setTimeout(() => markerElem.dragging.enable())
+        }
+    })
+
     markerElem.addEventListener('drag', e => {
       circle && circle.setLatLng(markerElem.getLatLng())
     })