Add readonly toggle buttonmain

1 files changed, 49 insertions, 25 deletions

diff --git a/frontend/ts/src/pages/map.ts b/frontend/ts/src/pages/map.ts
index b445f63..42da69c 100644
--- a/frontend/ts/src/pages/map.ts
+++ b/frontend/ts/src/pages/map.ts
@@ -1,4 +1,4 @@
-import { h, Html } from 'lib/rx'
+import { h, Html, Var } from 'lib/rx'
 import * as rx from 'lib/rx'
 import * as request from 'request'
 import * as modal from 'ui/modal'
@@ -13,9 +13,9 @@ import * as L from 'lib/loadable'
 import * as layout from 'ui/layout'
 
 export function view(id: string): Html {
-    return rx.withState2<L.Loadable<Map>, L.Loadable<markerModel.Map>>(
-        [L.loading, L.loading],
-        (mapVar, markersVar) => {
+    return rx.withState3<L.Loadable<Map>, L.Loadable<markerModel.Map>, boolean>(
+        [L.loading, L.loading, false],
+        (mapVar, markersVar, readOnlyVar) => {
             request
                 .get<Map>(`/api/maps/${id}`)
                 .then(res => mapVar.update(_ => L.loaded(res)))
@@ -23,7 +23,11 @@ export function view(id: string): Html {
 
             request
                 .get<Array<markerModel.Marker>>(`/api/markers?map=${id}`)
-                .then(res => markersVar.update(_ => L.loaded(markerModel.toMap(res))))
+                .then(res => {
+                    markersVar.update(_ => L.loaded(markerModel.toMap(res)))
+                    // Set to readonly if there is one marker
+                    if (res.length > 0) readOnlyVar.update(_ => true)
+                })
                 .catch(({ message }) => markersVar.update(_ => L.failure(message)))
 
             return rx.map2(
@@ -33,8 +37,14 @@ export function view(id: string): Html {
                         L.map2([map, markers], (map, markers) => ({ map, markers })),
                         ({map, markers}) => h('div',
                             { className: 'g-Map' },
-                            withMap(map => mapView(id, map, markers)),
-                            footer.view(map)
+                            withMap(leafletMap =>
+                                [ mapView(id, leafletMap, markers, readOnlyVar),
+                                footer.view({
+                                    mapInit: map,
+                                    readOnly: readOnlyVar,
+                                    onUpdateReadOnly: (b: boolean) => readOnlyVar.update(_ => b)
+                                }) ]
+                            )
                         )
                     )
                 }
@@ -74,7 +84,7 @@ interface ErrorModal {
     message: string
 }
 
-function mapView(map_id: string, map: M.Map, markers: markerModel.Map): Html {
+function mapView(map_id: string, map: M.Map, markers: markerModel.Map, readOnlyVar: Var<boolean>): Html {
     let lastUserAdded: markerModel.Marker | undefined
 
     return rx.withState3<
@@ -84,9 +94,17 @@ function mapView(map_id: string, map: M.Map, markers: markerModel.Map): Html {
     >(
         [undefined, undefined, undefined],
         (addModalVar, updateModalVar, errorModalVar) => {
-            map.addEventListener('click', (event: M.MapEvent) => addModalVar.update(_ => event.latlng))
+            map.addEventListener('click', (event: M.MapEvent) => {
+                if (!readOnlyVar.now()) {
+                    addModalVar.update(_ => event.latlng)
+                }
+            })
 
-            const onClick = (m: MarkerContext) => updateModalVar.update(_ => m)
+            const onClick = (m: MarkerContext) => {
+                if (!readOnlyVar.now()) {
+                    updateModalVar.update(_ => m)
+                }
+            }
 
             const onMoveError = (message: string) => {
                 errorModalVar.update(_ => ({
@@ -97,7 +115,7 @@ function mapView(map_id: string, map: M.Map, markers: markerModel.Map): Html {
 
             const elements = M.featureGroup()
             Object.values(markers).forEach(marker => {
-                const elem = addMarker({ marker, markers, map, onClick, onMoveError })
+                const elem = addMarker({ marker, markers, map, onClick, onMoveError, readOnlyVar })
                 elements.addLayer(elem)
             })
 
@@ -120,7 +138,7 @@ function mapView(map_id: string, map: M.Map, markers: markerModel.Map): Html {
                                 body
                             ),
                             onSuccess: marker => {
-                                addMarker({ marker, markers, map, onClick, onMoveError })
+                                addMarker({ marker, markers, map, onClick, onMoveError, readOnlyVar })
                                 addModalVar.update(_ => undefined)
                                 markers[marker.id] = marker
                                 lastUserAdded = marker
@@ -145,7 +163,7 @@ function mapView(map_id: string, map: M.Map, markers: markerModel.Map): Html {
                             ),
                             onSuccess: marker => {
                                 map.removeLayer(markerElem)
-                                addMarker({ marker, markers, map, onClick, onMoveError })
+                                addMarker({ marker, markers, map, onClick, onMoveError, readOnlyVar })
                                 updateModalVar.update(_ => undefined)
                                 markers[marker.id] = marker
                                 lastUserAdded = marker
@@ -175,24 +193,30 @@ interface AddMarkerParams {
     map: M.Map
     onClick: (m: MarkerContext) => void
     onMoveError: (message: string) => void
+    readOnlyVar: Var<boolean>
 }
 
-function addMarker({ markers, marker, map, onClick, onMoveError }: AddMarkerParams): M.FeatureGroup {
+function addMarker({ markers, marker, map, onClick, onMoveError, readOnlyVar }: AddMarkerParams): M.FeatureGroup {
     const elem = markerView.create({
         marker,
         onMove: markerElem => {
-            const pos = markerElem.getLatLng()
-            const newMarker = structuredClone(marker)
-            newMarker.lat = pos.lat
-            newMarker.lng = pos.lng
-            updateMarker(newMarker)
-                .then(m => markers[marker.id] = m)
-                .catch(({ message }) => {
-                    markerElem.setLatLng({ lat: marker.lat, lng: marker.lng })
-                    onMoveError(message)
-                })
+            if (!readOnlyVar.now()) {
+                const pos = markerElem.getLatLng()
+                const newMarker = structuredClone(marker)
+                newMarker.lat = pos.lat
+                newMarker.lng = pos.lng
+                updateMarker(newMarker)
+                    .then(m => markers[marker.id] = m)
+                    .catch(({ message }) => {
+                        markerElem.setLatLng({ lat: marker.lat, lng: marker.lng })
+                        onMoveError(message)
+                    })
+            } else {
+                markerElem.setLatLng({ lat: marker.lat, lng: marker.lng })
+            }
         },
-        onClick: (markerElem: M.FeatureGroup) => onClick({ markerId: marker.id, markerElem })
+        onClick: (markerElem: M.FeatureGroup) => onClick({ markerId: marker.id, markerElem }),
+        readOnlyVar
     })
 
     map.addLayer(elem)