steve
/
sunrise-cms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mapping fixes, select by map

pull/11/head
Dan Gowans 2025-04-01 10:25:42 -04:00
parent b2da12dac1
commit 452565943e
18 changed files with 490 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
handlers/burialSites-post/doAddBurialSiteComment.ts
View File

@ -17,6 +17,7 @@ export default async function handler(
response.json({
success: true,
burialSiteComments
})
}

33
public/html/leaflet-selectCoordinate.html 100644
View File

@ -0,0 +1,33 @@
<div class="modal" role="dialog">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<h3 class="modal-card-title">Select Coordinate</h3>
<button
class="delete is-close-modal-button"
aria-label="close"
type="button"
></button>
</header>
<section class="modal-card-body">
<div class="message is-info">
<div class="message-body">
<p>Click on the map to select a coordinate.</p>
</div>
</div>
<div class="leaflet-map" style="height:300px"></div>
</section>
<footer class="modal-card-foot is-justify-content-right">
<div class="buttons">
<button
class="button is-success is-update-button"
type="button"
>
<span class="icon"><i class="fas fa-save" aria-hidden="true"></i></span>
<span>Update Coordinate</span>
</button>
<button class="button is-close-modal-button" type="button">Cancel</button>
</div>
</footer>
</div>
</div>

13
public/javascripts/burialSite.edit.js
View File

@ -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;

21
public/javascripts/burialSite.edit.ts
View File

@ -281,6 +281,27 @@ declare const exports: Record<string, unknown>
})
}
// 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[]

28
public/javascripts/burialSite.view.js
View File

@ -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', () => {

51
public/javascripts/burialSite.view.ts
View File

@ -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', () => {

30
public/javascripts/cemetery.edit.js
View File

@ -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
}
});

41
public/javascripts/cemetery.edit.ts
View File

@ -13,8 +13,36 @@ declare const exports: Record<string, unknown>
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<string, unknown>
)
} 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<string, unknown>
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<string, unknown>
}
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
}
})

17
public/javascripts/cemetery.view.js
View File

@ -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);
}

26
public/javascripts/cemetery.view.ts
View File

@ -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)

69
public/javascripts/main.js
View File

@ -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,

104
public/javascripts/main.ts
View File

@ -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<string, unknown> & {
aliases: Record<string, string>
randomColor: (options?: {
@ -49,7 +54,7 @@ declare const exports: Record<string, unknown> & {
}
/*
* Mapping
* SVG Mapping
*/
function highlightMap(
@ -83,6 +88,100 @@ declare const exports: Record<string, unknown> & {
}
}
/*
* 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<string, unknown> & {
urlPrefix,
highlightMap,
leafletConstants,
openLeafletCoordinateSelectorModal,
initializeUnlockFieldButtons,
escapedAliases,

13
public/javascripts/types.d.ts vendored
View File

@ -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: {

18
public/javascripts/types.ts
View File

@ -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

5
views/burialSite-edit.ejs
View File

@ -347,7 +347,10 @@
</div>
<div class="level-right">
<div class="level-item">
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
<button class="button is-small" id="button--selectCoordinate" type="button">
<span class="icon"><i class="fas fa-map-marked-alt" aria-hidden="true"></i></span>
<span>Select Coordinate</span>
</button>
</div>
</div>
</div>

88
views/burialSite-view.ejs
View File

@ -59,42 +59,70 @@
</div>
</div>
<div class="panel">
<div class="panel-block is-block">
<div class="columns">
<div class="column">
<p class="mb-2">
<strong>Cemetery</strong><br />
<a href="<%= urlPrefix %>/cemeteries/<%= burialSite.cemeteryId %>">
<%= burialSite.cemeteryName || "(No Name)" %>
</a>
</p>
<p class="mb-2">
<strong>Burial Site Type</strong><br />
<%= burialSite.burialSiteType %>
</p>
<p>
<strong>Status</strong><br />
<%= burialSite.burialSiteStatus %>
</p>
</div>
<% if (burialSite.burialSiteFields.length > 0) { %>
<div class="column">
<% for (const burialSiteField of burialSite.burialSiteFields) { %>
<p class="mb-2">
<strong><%= burialSiteField.burialSiteTypeField %></strong><br />
<% if (burialSiteField.fieldValue) { %>
<%= burialSiteField.fieldValue %>
<% } else { %>
<span class="has-text-grey">(No Value)</span>
<% } %>
</p>
<% } %>
</div>
<% } %>
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="panel">
<div class="panel-heading">
<div class="level">
<div class="level-left">
<div class="level-item">
<h2 class="title is-5 has-text-weight-bold has-text-white">Geographic Location</h2>
</div>
</div>
<div class="level-right">
<div class="level-item">
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="panel-block is-block">
<div class="columns">
<div class="column">
<p class="mb-2">
<strong>Cemetery</strong><br />
<a href="<%= urlPrefix %>/cemeteries/<%= burialSite.cemeteryId %>">
<%= burialSite.cemeteryName || "(No Name)" %>
</a>
</p>
<p class="mb-2">
<strong>Burial Site Type</strong><br />
<%= burialSite.burialSiteType %>
</p>
<p>
<strong>Status</strong><br />
<%= burialSite.burialSiteStatus %>
<% if (burialSite.burialSiteLatitude && burialSite.burialSiteLongitude) { %>
<div id="burialSite--leaflet" data-latitude="<%= burialSite.burialSiteLatitude %>" data-longitude="<%= burialSite.burialSiteLongitude %>" style="height:300px"></div>
<% } else { %>
<div class="message is-info">
<p class="message-body">
There are no geographic coordinates associated with this burial site.
</p>
</div>
<% if (burialSite.burialSiteFields.length > 0) { %>
<div class="column">
<% for (const burialSiteField of burialSite.burialSiteFields) { %>
<p class="mb-2">
<strong><%= burialSiteField.burialSiteTypeField %></strong><br />
<% if (burialSiteField.fieldValue) { %>
<%= burialSiteField.fieldValue %>
<% } else { %>
<span class="has-text-grey">(No Value)</span>
<% } %>
</p>
<% } %>
</div>
<% } %>
</div>
<% } %>
</div>
</div>
</div>

5
views/cemetery-edit.ejs
View File

@ -203,7 +203,10 @@
</div>
<div class="level-right">
<div class="level-item">
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
<button class="button is-small" id="button--selectCoordinate" type="button">
<span class="icon"><i class="fas fa-map-marked-alt" aria-hidden="true"></i></span>
<span>Select Coordinate</span>
</button>
</div>
</div>
</div>

2
views/cemetery-view.ejs
View File

@ -112,7 +112,7 @@
</div>
<div class="panel-block is-block">
<% if (cemetery.cemeteryLatitude && cemetery.cemeteryLongitude) { %>
<div id="cemetery--leaflet" data-cemetery-latitude="<%= cemetery.cemeteryLatitude %>" data-cemetery-longitude="<%= cemetery.cemeteryLongitude %>" style="height:300px"></div>
<div id="cemetery--leaflet" data-latitude="<%= cemetery.cemeteryLatitude %>" data-longitude="<%= cemetery.cemeteryLongitude %>" style="height:300px"></div>
<% } else { %>
<div class="message is-info">
<p class="message-body">