From 452565943e2725cc21e0a55e9c460cdfe599ae83 Mon Sep 17 00:00:00 2001 From: Dan Gowans Date: Tue, 1 Apr 2025 10:25:42 -0400 Subject: [PATCH] mapping fixes, select by map --- .../doAddBurialSiteComment.ts | 1 + public/html/leaflet-selectCoordinate.html | 33 ++++++ public/javascripts/burialSite.edit.js | 13 +++ public/javascripts/burialSite.edit.ts | 21 ++++ public/javascripts/burialSite.view.js | 28 ++++- public/javascripts/burialSite.view.ts | 51 ++++++++- public/javascripts/cemetery.edit.js | 30 ++++- public/javascripts/cemetery.edit.ts | 41 ++++++- public/javascripts/cemetery.view.js | 17 ++- public/javascripts/cemetery.view.ts | 26 +++-- public/javascripts/main.js | 69 +++++++++++- public/javascripts/main.ts | 104 +++++++++++++++++- public/javascripts/types.d.ts | 13 ++- public/javascripts/types.ts | 18 ++- views/burialSite-edit.ejs | 5 +- views/burialSite-view.ejs | 88 ++++++++++----- views/cemetery-edit.ejs | 5 +- views/cemetery-view.ejs | 2 +- 18 files changed, 490 insertions(+), 75 deletions(-) create mode 100644 public/html/leaflet-selectCoordinate.html diff --git a/handlers/burialSites-post/doAddBurialSiteComment.ts b/handlers/burialSites-post/doAddBurialSiteComment.ts index 7cd2d925..7ff07eef 100644 --- a/handlers/burialSites-post/doAddBurialSiteComment.ts +++ b/handlers/burialSites-post/doAddBurialSiteComment.ts @@ -17,6 +17,7 @@ export default async function handler( response.json({ success: true, + burialSiteComments }) } diff --git a/public/html/leaflet-selectCoordinate.html b/public/html/leaflet-selectCoordinate.html new file mode 100644 index 00000000..d29bc5f1 --- /dev/null +++ b/public/html/leaflet-selectCoordinate.html @@ -0,0 +1,33 @@ + diff --git a/public/javascripts/burialSite.edit.js b/public/javascripts/burialSite.edit.js index 107639ec..72d7bd76 100644 --- a/public/javascripts/burialSite.edit.js +++ b/public/javascripts/burialSite.edit.js @@ -183,6 +183,19 @@ Object.defineProperty(exports, "__esModule", { value: true }); } }); } + // Leaflet Map + document + .querySelector('#button--selectCoordinate') + ?.addEventListener('click', (clickEvent) => { + clickEvent.preventDefault(); + sunrise.openLeafletCoordinateSelectorModal({ + latitudeElement: document.querySelector('#burialSite--burialSiteLatitude'), + longitudeElement: document.querySelector('#burialSite--burialSiteLongitude'), + callbackFunction: () => { + sunrise.setUnsavedChanges(); + } + }); + }); // Comments let burialSiteComments = exports.burialSiteComments; delete exports.burialSiteComments; diff --git a/public/javascripts/burialSite.edit.ts b/public/javascripts/burialSite.edit.ts index 1bb56c49..7ad21c81 100644 --- a/public/javascripts/burialSite.edit.ts +++ b/public/javascripts/burialSite.edit.ts @@ -281,6 +281,27 @@ declare const exports: Record }) } + // Leaflet Map + + document + .querySelector('#button--selectCoordinate') + ?.addEventListener('click', (clickEvent) => { + clickEvent.preventDefault() + + sunrise.openLeafletCoordinateSelectorModal({ + latitudeElement: document.querySelector( + '#burialSite--burialSiteLatitude' + ) as HTMLInputElement, + longitudeElement: document.querySelector( + '#burialSite--burialSiteLongitude' + ) as HTMLInputElement, + + callbackFunction: () => { + sunrise.setUnsavedChanges() + } + }) + }) + // Comments let burialSiteComments = exports.burialSiteComments as BurialSiteComment[] diff --git a/public/javascripts/burialSite.view.js b/public/javascripts/burialSite.view.js index e4ae39b7..ba3ecce8 100644 --- a/public/javascripts/burialSite.view.js +++ b/public/javascripts/burialSite.view.js @@ -1,10 +1,34 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); (() => { - const mapContainerElement = document.querySelector('#burialSite--cemeterySvg'); + /* + * Map + */ + const sunrise = exports.sunrise; + const mapContainerElement = document.querySelector('#burialSite--leaflet'); if (mapContainerElement !== null) { - exports.sunrise.highlightMap(mapContainerElement, mapContainerElement.dataset.cemeterySvgId ?? '', 'success'); + const mapLatitude = Number.parseFloat(mapContainerElement.dataset.latitude ?? ''); + const mapLongitude = Number.parseFloat(mapContainerElement.dataset.longitude ?? ''); + const mapCoordinates = [mapLatitude, mapLongitude]; + // eslint-disable-next-line unicorn/no-array-callback-reference + const map = L.map(mapContainerElement); + map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom); + L.tileLayer(sunrise.leafletConstants.tileLayerURL, { + attribution: sunrise.leafletConstants.attribution, + maxZoom: sunrise.leafletConstants.maxZoom + }).addTo(map); + L.marker(mapCoordinates).addTo(map); } + /* + * Image + */ + const svgContainerElement = document.querySelector('#burialSite--cemeterySvg'); + if (svgContainerElement !== null) { + sunrise.highlightMap(svgContainerElement, svgContainerElement.dataset.cemeterySvgId ?? '', 'success'); + } + /* + * Contracts + */ document .querySelector('#burialSite--contractsToggle') ?.addEventListener('click', () => { diff --git a/public/javascripts/burialSite.view.ts b/public/javascripts/burialSite.view.ts index 8f703df3..b9d94965 100644 --- a/public/javascripts/burialSite.view.ts +++ b/public/javascripts/burialSite.view.ts @@ -1,21 +1,64 @@ +import type * as Leaflet from 'leaflet' + import type { Sunrise } from './types.js' +declare const L: typeof Leaflet declare const exports: { sunrise: Sunrise } ;(() => { + /* + * Map + */ + + const sunrise = exports.sunrise + const mapContainerElement: HTMLElement | null = document.querySelector( - '#burialSite--cemeterySvg' + '#burialSite--leaflet' ) if (mapContainerElement !== null) { - exports.sunrise.highlightMap( - mapContainerElement, - mapContainerElement.dataset.cemeterySvgId ?? '', + const mapLatitude = Number.parseFloat( + mapContainerElement.dataset.latitude ?? '' + ) + const mapLongitude = Number.parseFloat( + mapContainerElement.dataset.longitude ?? '' + ) + + const mapCoordinates: Leaflet.LatLngTuple = [mapLatitude, mapLongitude] + + // eslint-disable-next-line unicorn/no-array-callback-reference + const map: Leaflet.Map = L.map(mapContainerElement) + map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom) + + L.tileLayer(sunrise.leafletConstants.tileLayerURL, { + attribution: sunrise.leafletConstants.attribution, + maxZoom: sunrise.leafletConstants.maxZoom + }).addTo(map) + + L.marker(mapCoordinates).addTo(map) + } + + /* + * Image + */ + + const svgContainerElement: HTMLElement | null = document.querySelector( + '#burialSite--cemeterySvg' + ) + + if (svgContainerElement !== null) { + sunrise.highlightMap( + svgContainerElement, + svgContainerElement.dataset.cemeterySvgId ?? '', 'success' ) } + /* + * Contracts + */ + document .querySelector('#burialSite--contractsToggle') ?.addEventListener('click', () => { diff --git a/public/javascripts/cemetery.edit.js b/public/javascripts/cemetery.edit.js index 5f5b734a..07eec6c1 100644 --- a/public/javascripts/cemetery.edit.js +++ b/public/javascripts/cemetery.edit.js @@ -4,6 +4,24 @@ Object.defineProperty(exports, "__esModule", { value: true }); const sunrise = exports.sunrise; const cemeteryId = document.querySelector('#cemetery--cemeteryId').value; const isCreate = cemeteryId === ''; + /* + * Cemetery Map + */ + document + .querySelector('#button--selectCoordinate') + ?.addEventListener('click', (clickEvent) => { + clickEvent.preventDefault(); + sunrise.openLeafletCoordinateSelectorModal({ + latitudeElement: document.querySelector('#cemetery--cemeteryLatitude'), + longitudeElement: document.querySelector('#cemetery--cemeteryLongitude'), + callbackFunction: () => { + sunrise.setUnsavedChanges(); + } + }); + }); + /* + * Cemetery Form + */ const cemeteryForm = document.querySelector('#form--cemetery'); function setUnsavedChanges() { sunrise.setUnsavedChanges(); @@ -28,14 +46,14 @@ Object.defineProperty(exports, "__esModule", { value: true }); } else { bulmaJS.alert({ - message: "Cemetery Updated Successfully", + message: 'Cemetery Updated Successfully', contextualColorName: 'success' }); } } else { bulmaJS.alert({ - title: "Error Updating Cemetery", + title: 'Error Updating Cemetery', message: responseJSON.errorMessage ?? '', contextualColorName: 'danger' }); @@ -61,7 +79,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); } else { bulmaJS.alert({ - title: "Error Deleting Cemetery", + title: 'Error Deleting Cemetery', message: responseJSON.errorMessage ?? '', contextualColorName: 'danger' }); @@ -69,11 +87,11 @@ Object.defineProperty(exports, "__esModule", { value: true }); }); } bulmaJS.confirm({ - title: "Delete Cemetery", - message: "Are you sure you want to delete this cemetery and all related burial sites?", + title: 'Delete Cemetery', + message: 'Are you sure you want to delete this cemetery and all related burial sites?', contextualColorName: 'warning', okButton: { - text: "Yes, Delete Cemetery", + text: 'Yes, Delete Cemetery', callbackFunction: doDelete } }); diff --git a/public/javascripts/cemetery.edit.ts b/public/javascripts/cemetery.edit.ts index 8e803d16..0fd69ebd 100644 --- a/public/javascripts/cemetery.edit.ts +++ b/public/javascripts/cemetery.edit.ts @@ -13,8 +13,36 @@ declare const exports: Record const cemeteryId = ( document.querySelector('#cemetery--cemeteryId') as HTMLInputElement ).value + const isCreate = cemeteryId === '' + /* + * Cemetery Map + */ + + document + .querySelector('#button--selectCoordinate') + ?.addEventListener('click', (clickEvent) => { + clickEvent.preventDefault() + + sunrise.openLeafletCoordinateSelectorModal({ + latitudeElement: document.querySelector( + '#cemetery--cemeteryLatitude' + ) as HTMLInputElement, + longitudeElement: document.querySelector( + '#cemetery--cemeteryLongitude' + ) as HTMLInputElement, + + callbackFunction: () => { + sunrise.setUnsavedChanges() + } + }) + }) + + /* + * Cemetery Form + */ + const cemeteryForm = document.querySelector( '#form--cemetery' ) as HTMLFormElement @@ -56,13 +84,13 @@ declare const exports: Record ) } else { bulmaJS.alert({ - message: "Cemetery Updated Successfully", + message: 'Cemetery Updated Successfully', contextualColorName: 'success' }) } } else { bulmaJS.alert({ - title: "Error Updating Cemetery", + title: 'Error Updating Cemetery', message: responseJSON.errorMessage ?? '', contextualColorName: 'danger' }) @@ -101,7 +129,7 @@ declare const exports: Record globalThis.location.href = sunrise.getCemeteryURL() } else { bulmaJS.alert({ - title: "Error Deleting Cemetery", + title: 'Error Deleting Cemetery', message: responseJSON.errorMessage ?? '', contextualColorName: 'danger' }) @@ -111,11 +139,12 @@ declare const exports: Record } bulmaJS.confirm({ - title: "Delete Cemetery", - message: "Are you sure you want to delete this cemetery and all related burial sites?", + title: 'Delete Cemetery', + message: + 'Are you sure you want to delete this cemetery and all related burial sites?', contextualColorName: 'warning', okButton: { - text: "Yes, Delete Cemetery", + text: 'Yes, Delete Cemetery', callbackFunction: doDelete } }) diff --git a/public/javascripts/cemetery.view.js b/public/javascripts/cemetery.view.js index b58e5b8c..bd902b6e 100644 --- a/public/javascripts/cemetery.view.js +++ b/public/javascripts/cemetery.view.js @@ -1,19 +1,18 @@ "use strict"; -// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair -/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call */ Object.defineProperty(exports, "__esModule", { value: true }); (() => { - const mapContainerElement = document.querySelector('#map--leaflet'); + const sunrise = exports.sunrise; + const mapContainerElement = document.querySelector('#cemetery--leaflet'); if (mapContainerElement !== null) { - const mapLatitude = Number.parseFloat(mapContainerElement.dataset.mapLatitude ?? ''); - const mapLongitude = Number.parseFloat(mapContainerElement.dataset.mapLongitude ?? ''); + const mapLatitude = Number.parseFloat(mapContainerElement.dataset.latitude ?? ''); + const mapLongitude = Number.parseFloat(mapContainerElement.dataset.longitude ?? ''); const mapCoordinates = [mapLatitude, mapLongitude]; // eslint-disable-next-line unicorn/no-array-callback-reference const map = L.map(mapContainerElement); - map.setView(mapCoordinates, 15); - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 19, - attribution: '© OpenStreetMap' + map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom); + L.tileLayer(sunrise.leafletConstants.tileLayerURL, { + attribution: sunrise.leafletConstants.attribution, + maxZoom: sunrise.leafletConstants.maxZoom }).addTo(map); L.marker(mapCoordinates).addTo(map); } diff --git a/public/javascripts/cemetery.view.ts b/public/javascripts/cemetery.view.ts index ba4d989c..5d1d2175 100644 --- a/public/javascripts/cemetery.view.ts +++ b/public/javascripts/cemetery.view.ts @@ -1,30 +1,34 @@ -// eslint-disable-next-line @eslint-community/eslint-comments/disable-enable-pair -/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call */ - import type * as Leaflet from 'leaflet' -declare const L +import type { Sunrise } from './types.js' + +declare const L: typeof Leaflet +declare const exports: { + sunrise: Sunrise +} ;(() => { + const sunrise = exports.sunrise + const mapContainerElement: HTMLElement | null = - document.querySelector('#map--leaflet') + document.querySelector('#cemetery--leaflet') if (mapContainerElement !== null) { const mapLatitude = Number.parseFloat( - mapContainerElement.dataset.mapLatitude ?? '' + mapContainerElement.dataset.latitude ?? '' ) const mapLongitude = Number.parseFloat( - mapContainerElement.dataset.mapLongitude ?? '' + mapContainerElement.dataset.longitude ?? '' ) const mapCoordinates: Leaflet.LatLngTuple = [mapLatitude, mapLongitude] // eslint-disable-next-line unicorn/no-array-callback-reference const map: Leaflet.Map = L.map(mapContainerElement) - map.setView(mapCoordinates, 15) + map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom) - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 19, - attribution: '© OpenStreetMap' + L.tileLayer(sunrise.leafletConstants.tileLayerURL, { + attribution: sunrise.leafletConstants.attribution, + maxZoom: sunrise.leafletConstants.maxZoom }).addTo(map) L.marker(mapCoordinates).addTo(map) diff --git a/public/javascripts/main.js b/public/javascripts/main.js index 892a5516..b915c3b9 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -19,7 +19,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); return _hasUnsavedChanges; } /* - * Mapping + * SVG Mapping */ function highlightMap(mapContainerElement, mapKey, contextualClass) { // Search for ID @@ -41,6 +41,71 @@ Object.defineProperty(exports, "__esModule", { value: true }); } } } + /* + * Leaflet Mapping + */ + const leafletConstants = { + tileLayerURL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + defaultZoom: 15, + maxZoom: 19, + attribution: '© OpenStreetMap' + }; + function openLeafletCoordinateSelectorModal(options) { + const latitude = Number.parseFloat(options.latitudeElement.value); + const longitude = Number.parseFloat(options.longitudeElement.value); + let currentMarker; + cityssm.openHtmlModal('leaflet-selectCoordinate', { + onshown(modalElement, closeModalFunction) { + bulmaJS.toggleHtmlClipped(); + /* + * Set up the Leaflet map + */ + const mapContainerElement = modalElement.querySelector('.leaflet-map'); + // eslint-disable-next-line unicorn/no-array-callback-reference + const map = L.map(mapContainerElement); + L.tileLayer(sunrise.leafletConstants.tileLayerURL, { + attribution: sunrise.leafletConstants.attribution, + maxZoom: sunrise.leafletConstants.maxZoom + }).addTo(map); + if (!Number.isNaN(latitude) && !Number.isNaN(longitude)) { + const mapCoordinates = [latitude, longitude]; + map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom); + currentMarker = L.marker(mapCoordinates).addTo(map); + } + else { + const middleLatitude = (Number.parseFloat(options.latitudeElement.min) + Number.parseFloat(options.latitudeElement.max)) / 2; + const middleLongitude = (Number.parseFloat(options.longitudeElement.min) + Number.parseFloat(options.longitudeElement.max)) / 2; + const mapCoordinates = [middleLatitude, middleLongitude]; + map.setView(mapCoordinates, 5); + } + map.on('click', (clickEvent) => { + const mapCoordinates = clickEvent.latlng; + if (currentMarker !== undefined) { + currentMarker.remove(); + } + currentMarker = L.marker(mapCoordinates).addTo(map); + }); + modalElement + .querySelector('.is-update-button') + ?.addEventListener('click', (clickEvent) => { + clickEvent.preventDefault(); + if (currentMarker !== undefined) { + const mapCoordinates = currentMarker.getLatLng(); + options.latitudeElement.value = mapCoordinates.lat.toFixed(8); + options.longitudeElement.value = mapCoordinates.lng.toFixed(8); + options.callbackFunction(mapCoordinates.lat, mapCoordinates.lng); + } + closeModalFunction(); + }); + }, + onremoved() { + bulmaJS.toggleHtmlClipped(); + } + }); + } + /* + * Field Unlocking + */ function unlockField(clickEvent) { const fieldElement = clickEvent.currentTarget.closest('.field'); const inputOrSelectElement = fieldElement.querySelector('input, select'); @@ -206,6 +271,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); dynamicsGPIntegrationIsEnabled, urlPrefix, highlightMap, + leafletConstants, + openLeafletCoordinateSelectorModal, initializeUnlockFieldButtons, escapedAliases, populateAliases, diff --git a/public/javascripts/main.ts b/public/javascripts/main.ts index 7901fb02..ada6c439 100644 --- a/public/javascripts/main.ts +++ b/public/javascripts/main.ts @@ -1,4 +1,6 @@ +import type { BulmaJS } from '@cityssm/bulma-js/types.js' import type { cityssmGlobal } from '@cityssm/bulma-webapp-js/src/types.js' +import type * as Leaflet from 'leaflet' import type { Sunrise } from './types.js' @@ -13,7 +15,10 @@ type RandomColorHue = | 'yellow' type RandomColorLuminosity = 'bright' | 'dark' | 'light' +declare const L: typeof Leaflet declare const cityssm: cityssmGlobal +declare const bulmaJS: BulmaJS + declare const exports: Record & { aliases: Record randomColor: (options?: { @@ -49,7 +54,7 @@ declare const exports: Record & { } /* - * Mapping + * SVG Mapping */ function highlightMap( @@ -83,6 +88,100 @@ declare const exports: Record & { } } + /* + * Leaflet Mapping + */ + + const leafletConstants = { + tileLayerURL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + + defaultZoom: 15, + maxZoom: 19, + + attribution: '© OpenStreetMap' + } + + function openLeafletCoordinateSelectorModal(options: { + latitudeElement: HTMLInputElement + longitudeElement: HTMLInputElement + + callbackFunction: (latitude: number, longitude: number) => void + }): void { + const latitude = Number.parseFloat(options.latitudeElement.value) + const longitude = Number.parseFloat(options.longitudeElement.value) + + let currentMarker: Leaflet.Marker | undefined + + cityssm.openHtmlModal('leaflet-selectCoordinate', { + onshown(modalElement, closeModalFunction) { + bulmaJS.toggleHtmlClipped() + + /* + * Set up the Leaflet map + */ + + const mapContainerElement = modalElement.querySelector( + '.leaflet-map' + ) as HTMLElement + + // eslint-disable-next-line unicorn/no-array-callback-reference + const map = L.map(mapContainerElement) + + L.tileLayer(sunrise.leafletConstants.tileLayerURL, { + attribution: sunrise.leafletConstants.attribution, + maxZoom: sunrise.leafletConstants.maxZoom + }).addTo(map) + + if (!Number.isNaN(latitude) && !Number.isNaN(longitude)) { + const mapCoordinates: Leaflet.LatLngTuple = [latitude, longitude] + map.setView(mapCoordinates, sunrise.leafletConstants.defaultZoom) + currentMarker = L.marker(mapCoordinates).addTo(map) + } else { + const middleLatitude = (Number.parseFloat(options.latitudeElement.min) + Number.parseFloat(options.latitudeElement.max)) / 2 + const middleLongitude = (Number.parseFloat(options.longitudeElement.min) + Number.parseFloat(options.longitudeElement.max)) / 2 + + const mapCoordinates: Leaflet.LatLngTuple = [middleLatitude, middleLongitude] + map.setView(mapCoordinates, 5) + } + + map.on('click', (clickEvent: Leaflet.LeafletMouseEvent) => { + const mapCoordinates = clickEvent.latlng as Leaflet.LatLng + + if (currentMarker !== undefined) { + currentMarker.remove() + } + + currentMarker = L.marker(mapCoordinates).addTo(map) + }) + + modalElement + .querySelector('.is-update-button') + ?.addEventListener('click', (clickEvent) => { + clickEvent.preventDefault() + + if (currentMarker !== undefined) { + const mapCoordinates = currentMarker.getLatLng() as Leaflet.LatLng + + options.latitudeElement.value = mapCoordinates.lat.toFixed(8) + options.longitudeElement.value = mapCoordinates.lng.toFixed(8) + + options.callbackFunction(mapCoordinates.lat, mapCoordinates.lng) + } + + closeModalFunction() + }) + }, + + onremoved() { + bulmaJS.toggleHtmlClipped() + } + }) + } + + /* + * Field Unlocking + */ + function unlockField(clickEvent: Event): void { const fieldElement = (clickEvent.currentTarget as HTMLElement).closest( '.field' @@ -347,6 +446,9 @@ declare const exports: Record & { urlPrefix, highlightMap, + leafletConstants, + openLeafletCoordinateSelectorModal, + initializeUnlockFieldButtons, escapedAliases, diff --git a/public/javascripts/types.d.ts b/public/javascripts/types.d.ts index 71d535d6..f4efbd77 100644 --- a/public/javascripts/types.d.ts +++ b/public/javascripts/types.d.ts @@ -1,7 +1,18 @@ export interface Sunrise { - urlPrefix: string; apiKey: string; + urlPrefix: string; highlightMap: (mapContainerElement: HTMLElement, mapKey: string, contextualClass: 'danger' | 'success') => void; + leafletConstants: { + tileLayerURL: string; + defaultZoom: number; + maxZoom: number; + attribution: string; + }; + openLeafletCoordinateSelectorModal: (options: { + latitudeElement: HTMLInputElement; + longitudeElement: HTMLInputElement; + callbackFunction: (latitude: number, longitude: number) => void; + }) => void; initializeUnlockFieldButtons: (containerElement: HTMLElement) => void; populateAliases: (containerElement: HTMLElement) => void; escapedAliases: { diff --git a/public/javascripts/types.ts b/public/javascripts/types.ts index c3b83e0c..9e7b87cb 100644 --- a/public/javascripts/types.ts +++ b/public/javascripts/types.ts @@ -1,6 +1,6 @@ export interface Sunrise { - urlPrefix: string apiKey: string + urlPrefix: string highlightMap: ( mapContainerElement: HTMLElement, @@ -8,6 +8,22 @@ export interface Sunrise { contextualClass: 'danger' | 'success' ) => void + leafletConstants: { + tileLayerURL: string + + defaultZoom: number + maxZoom: number + + attribution: string + } + + openLeafletCoordinateSelectorModal: (options: { + latitudeElement: HTMLInputElement + longitudeElement: HTMLInputElement + + callbackFunction: (latitude: number, longitude: number) => void + }) => void + initializeUnlockFieldButtons: (containerElement: HTMLElement) => void populateAliases: (containerElement: HTMLElement) => void diff --git a/views/burialSite-edit.ejs b/views/burialSite-edit.ejs index 0660a2ad..fff8482b 100644 --- a/views/burialSite-edit.ejs +++ b/views/burialSite-edit.ejs @@ -347,7 +347,10 @@
- +
diff --git a/views/burialSite-view.ejs b/views/burialSite-view.ejs index 21e6ee44..90bdb7f4 100644 --- a/views/burialSite-view.ejs +++ b/views/burialSite-view.ejs @@ -59,42 +59,70 @@ +
+
+
+
+

+ Cemetery
+ + <%= burialSite.cemeteryName || "(No Name)" %> + +

+

+ Burial Site Type
+ <%= burialSite.burialSiteType %> +

+

+ Status
+ <%= burialSite.burialSiteStatus %> +

+
+ <% if (burialSite.burialSiteFields.length > 0) { %> +
+ <% for (const burialSiteField of burialSite.burialSiteFields) { %> +

+ <%= burialSiteField.burialSiteTypeField %>
+ <% if (burialSiteField.fieldValue) { %> + <%= burialSiteField.fieldValue %> + <% } else { %> + (No Value) + <% } %> +

+ <% } %> +
+ <% } %> +
+
+
+
+
+
+
+
+

Geographic Location

+
+
+
+
+ +
+
+
+
-
-
-

- Cemetery
- - <%= burialSite.cemeteryName || "(No Name)" %> - -

-

- Burial Site Type
- <%= burialSite.burialSiteType %> -

-

- Status
- <%= burialSite.burialSiteStatus %> + <% if (burialSite.burialSiteLatitude && burialSite.burialSiteLongitude) { %> +

+ <% } else { %> +
+

+ There are no geographic coordinates associated with this burial site.

- <% if (burialSite.burialSiteFields.length > 0) { %> -
- <% for (const burialSiteField of burialSite.burialSiteFields) { %> -

- <%= burialSiteField.burialSiteTypeField %>
- <% if (burialSiteField.fieldValue) { %> - <%= burialSiteField.fieldValue %> - <% } else { %> - (No Value) - <% } %> -

- <% } %> -
- <% } %> -
+ <% } %>
diff --git a/views/cemetery-edit.ejs b/views/cemetery-edit.ejs index a55adbc2..ca16670e 100644 --- a/views/cemetery-edit.ejs +++ b/views/cemetery-edit.ejs @@ -203,7 +203,10 @@
- +
diff --git a/views/cemetery-view.ejs b/views/cemetery-view.ejs index 5028fdbe..45679222 100644 --- a/views/cemetery-view.ejs +++ b/views/cemetery-view.ejs @@ -112,7 +112,7 @@
<% if (cemetery.cemeteryLatitude && cemetery.cemeteryLongitude) { %> -
+
<% } else { %>