diff options
Diffstat (limited to 'frontend/ts/src/pages/map.ts')
| -rw-r--r-- | frontend/ts/src/pages/map.ts | 74 |
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) |