415 lines
18 KiB
HTML
415 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<!-- Basic Page Needs
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8" />
|
||
<title>
|
||
<%= it.siteTitel %>
|
||
</title>
|
||
<meta name="description" content="<%= it.desc %>" />
|
||
<meta name="author" content="[Project-Name-Here]" />
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<link rel="stylesheet" href="/css/tailwindInclude.css" defer async />
|
||
<link rel="stylesheet" href="/css/mainMap.css" />
|
||
|
||
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
|
||
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
|
||
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
|
||
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
|
||
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
|
||
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
|
||
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
|
||
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="msapplication-TileColor" content="#ffffff">
|
||
<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
|
||
<meta name="theme-color" content="#ffffff">
|
||
|
||
<script src="https://browser.sentry-cdn.com/6.16.0/bundle.tracing.min.js"
|
||
integrity="sha384-nOg4TW2SG7+ChoY+hVJJjLwLlnood85Xw4eFnH7/3VUmhvQCBlXO4KHlLkV/4JmG"
|
||
crossorigin="anonymous"></script>
|
||
|
||
|
||
<script>
|
||
Sentry.init({
|
||
dsn: "<%= it.dsn %>",
|
||
integrations: [new Sentry.Integrations.BrowserTracing()],
|
||
beforeSend(event, hint) {
|
||
// Check if it is an exception, and if so, show the report dialog
|
||
if (event.exception) {
|
||
Sentry.showReportDialog({ eventId: event.event_id });
|
||
}
|
||
return event;
|
||
},
|
||
// We recommend adjusting this value in production, or using tracesSampler
|
||
// for finer control
|
||
tracesSampleRate: 1.0,
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker
|
||
.register('/sw.js')
|
||
.then(function () { console.log("Service Worker Registered"); });
|
||
}
|
||
</script>
|
||
|
||
<script async defer src="/js/site.js"></script>
|
||
<script src="https://kit.fontawesome.com/<%= it.fontawesomeKey %>.js" crossorigin="anonymous"></script>
|
||
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||
crossorigin="" />
|
||
<script>
|
||
if (!<%= it.isInDev %>) {
|
||
|
||
window.addEventListener('error', function (e) {
|
||
var error = e.error;
|
||
document.body.innerHTML = '<%~ it.errorPageContent %>';
|
||
console.log(error);
|
||
|
||
});
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||
crossorigin=""></script>
|
||
<script>
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.js"
|
||
charset="utf-8"></script>
|
||
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
|
||
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'
|
||
rel='stylesheet' />
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- MODALS START -->
|
||
<!-- Geo error -->
|
||
<div
|
||
class="hidden overflow-x-hidden overflow-y-auto fixed top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center h-modal sm:h-full"
|
||
id="popup-modal">
|
||
<div class="relative w-full max-w-md px-4 h-full md:h-auto">
|
||
<!-- Modal content -->
|
||
<div class="bg-white rounded-lg shadow relative dark:bg-gray-700">
|
||
<!-- Modal header -->
|
||
<div class="flex justify-end p-2">
|
||
<button type="button"
|
||
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
|
||
data-modal-toggle="popup-modal">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd"
|
||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<!-- Modal body -->
|
||
<div class="p-6 pt-0 text-center">
|
||
<svg class="w-14 h-14 text-gray-400 dark:text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<h3 class="text-lg font-normal text-gray-500 mb-5 dark:text-gray-400" id="Geomodal-content">Some error
|
||
occured. This text should be replaced.</h3>
|
||
|
||
<button data-modal-toggle="popup-modal" type="button"
|
||
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600">Okay</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Connection lost -->
|
||
<div
|
||
class="hidden overflow-x-hidden overflow-y-auto fixed top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center h-modal sm:h-full popup-modal-no-conn"
|
||
id="popup-modal-no-conn">
|
||
<div class="relative w-full max-w-md px-4 h-full md:h-auto">
|
||
<!-- Modal content -->
|
||
<div class="bg-white rounded-lg shadow relative dark:bg-gray-700">
|
||
<!-- Modal header -->
|
||
|
||
<!-- Modal body -->
|
||
<div class="p-6 pt-0 text-center">
|
||
<svg class="w-14 h-14 text-gray-400 dark:text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor"
|
||
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<h3 class="text-lg font-normal text-gray-500 mb-5 dark:text-gray-400">Pointsight lost connection to it's
|
||
backend. We are tryting to reconnect.</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- report modal -->
|
||
<div id="report-modal" aria-hidden="true"
|
||
class="hidden overflow-x-hidden overflow-y-auto fixed h-modal md:h-full top-4 left-0 right-0 md:inset-0 z-50 justify-center items-center">
|
||
<div class="relative w-full max-w-md px-4 h-full md:h-auto">
|
||
<!-- Modal content -->
|
||
<div class="bg-white rounded-lg shadow relative dark:bg-gray-700">
|
||
<div class="flex justify-end p-2">
|
||
<button type="button"
|
||
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
|
||
data-modal-toggle="report-modal">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd"
|
||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<form class="space-y-6 px-6 lg:px-8 pb-4 sm:pb-6 xl:pb-8" id="reportForm">
|
||
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Report a point</h3>
|
||
<div>
|
||
<label for="email" class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300">Your
|
||
email</label>
|
||
<input type="email" name="email" id="email"
|
||
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
||
placeholder="name@company.com" required>
|
||
</div>
|
||
<div>
|
||
<label for="reason"
|
||
class="text-sm font-medium text-gray-900 block mb-2 dark:text-gray-300">Reasoning</label>
|
||
<input type="text" name="reason" id="reason"
|
||
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
|
||
required>
|
||
</div>
|
||
<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
|
||
Select point: <b id="pointId">POINT_ID</b>
|
||
</div>
|
||
|
||
<button type="submit"
|
||
class="shadow-lg shadow-blue-500/50 w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||
id="submitBtn">
|
||
<center>
|
||
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||
viewBox="0 0 24 24" id="loadingSpinner" style="display: none;">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor"
|
||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||
</path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||
stroke="currentColor" style="display: none;" id="loadingDone">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</center>
|
||
<t id="reportBtnText">Report</t>
|
||
</button>
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MODALS END -->
|
||
<div id="sidebar" class="bg-white dark:bg-gray-900 dark:text-white "></div>
|
||
|
||
<!-- Filter side bar-->
|
||
<div id="sidebar-left" class="bg-white dark:bg-gray-900 dark:text-white">
|
||
<h1 class="text-4xl">Filter</h1>
|
||
<div id="tagSelectors">
|
||
|
||
</div>
|
||
<details>
|
||
<summary>Show hidden filters</summary>
|
||
<div id = "tagsHidden">
|
||
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<script>
|
||
/* Building the available options */
|
||
const tagsAvail = [];
|
||
let amo = 0;
|
||
setTimeout(function () {
|
||
const defaults = {
|
||
disableByDefault: ["AP"]
|
||
}
|
||
const htmlBase = ' <input type="checkbox" id="tag_#tagId" name="tag_#tagId" #ISENABLED value="#tagId"><label for="tag_#tagId">#tagName</label><br>'
|
||
respo = JSON.parse(httpGet("/api/allTags?key=b03f8aaf-1f32-4d9e-914a-9a50f904833d"))
|
||
respo = respo.sort((a, b) => (a.amount > b.amount) ? 1 : -1)
|
||
|
||
for (re in respo) {
|
||
const reponsey = respo[re];
|
||
let cHtml = htmlBase.replaceAll("#tagName", reponsey.key + " (" + reponsey.amount + ")");
|
||
cHtml = cHtml.replaceAll("#tagId", reponsey.key);
|
||
if (!defaults.disableByDefault.includes(reponsey.key)) {
|
||
cHtml = cHtml.replaceAll("#ISENABLED", "checked");
|
||
} else {
|
||
cHtml = cHtml.replaceAll("#ISENABLED", "");
|
||
}
|
||
if(amo >= 2){
|
||
document.getElementById("tagSelectors").innerHTML += cHtml;
|
||
}else{
|
||
document.getElementById("tagsHidden").innerHTML += cHtml;
|
||
}
|
||
amo++;
|
||
tagsAvail.push(reponsey.key)
|
||
}
|
||
console.log(respo);
|
||
}, 100);
|
||
|
||
</script>
|
||
<!-- JavaScript missing error -->
|
||
<div style="margin: 0px" class="dark:bg-gray-800 fullheight">
|
||
<noscript class="object-center">
|
||
<div class="px-4 py-3 h-screen object-center w-96" role="alert">
|
||
<div role="alert">
|
||
<div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
|
||
JavaScript required!
|
||
</div>
|
||
<div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
|
||
<p>This application needs JavaScript to function. Please enable JavaScript.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</noscript>
|
||
<div class="map" id="map">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white rounded-lg border-gray-300 border p-3 shadow-lg animate-right"
|
||
style="position: fixed; top: 50px; z-index: 5000; right: 20px; display: none;" id="notificationToast">
|
||
<div class="flex flex-row">
|
||
<div class="px-2">
|
||
<svg width="24" height="24" viewBox="0 0 1792 1792" fill="#44C997" xmlns="http://www.w3.org/2000/svg">
|
||
<path
|
||
d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
|
||
</svg>
|
||
</div>
|
||
<div class="ml-2 mr-6">
|
||
<span class="font-semibold" id="toast_title">Successfully Saved!</span>
|
||
<span class="block text-gray-500" id="toast_desc">Anyone with a link can now view this file</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
|
||
<link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" />
|
||
<link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.Default.css" />
|
||
<link rel="stylesheet" href="./leafletContextmenu/leaflet.contextmenu.min.css" />
|
||
<script src="./leafletCluster/dist/leaflet.markercluster.js"></script>
|
||
<link rel="stylesheet" defer
|
||
href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.74.0/dist/L.Control.Locate.min.css" />
|
||
|
||
<script src="/Sidebar/L.Control.Sidebar.js"></script>
|
||
<link rel="stylesheet" href="/Sidebar/L.Control.Sidebar.css" defer />
|
||
<script src="./leafletContextmenu/leaflet.contextmenu.min.js"></script>
|
||
|
||
|
||
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' async
|
||
defer></script>
|
||
|
||
<script src="/js/leaflet-search/leaflet-search.js"></script>
|
||
<script>
|
||
|
||
function showCoordinates(e) {
|
||
const shareLinkBase = "https://pointsight.project-name-here.de?lat=ä&lng=ü&zoom=ö"
|
||
const shareLink = shareLinkBase.replace("ä", e.latlng.lat).replace("ü", e.latlng.lng).replace("ö", mymap.getZoom())
|
||
navigator.clipboard.writeText(shareLink)
|
||
|
||
}
|
||
|
||
function copyLocation(e) {
|
||
navigator.clipboard.writeText(e.latlng.lat + "," + e.latlng.lng)
|
||
}
|
||
|
||
function centerMap(e) {
|
||
mymap.panTo(e.latlng);
|
||
}
|
||
|
||
function zoomIn(e) {
|
||
mymap.zoomIn();
|
||
}
|
||
|
||
function zoomOut(e) {
|
||
mymap.zoomOut();
|
||
}
|
||
|
||
var mymap = L.map("map", {
|
||
maxZoom: 16,
|
||
minZoom: 5,
|
||
contextmenu: true,
|
||
contextmenuWidth: 140,
|
||
worldCopyJump: true,
|
||
contextmenuItems: [{
|
||
text: 'LatLng',
|
||
callback: showCoordinates
|
||
},
|
||
{
|
||
text: 'Create shareable link',
|
||
callback: showCoordinates
|
||
}, {
|
||
text: 'Center map here',
|
||
callback: centerMap
|
||
}, '-', {
|
||
text: 'Zoom in',
|
||
icon: 'images/zoom-in.png',
|
||
callback: zoomIn
|
||
}, {
|
||
text: 'Zoom out',
|
||
icon: 'images/zoom-out.png',
|
||
callback: zoomOut
|
||
}]
|
||
}).setView([51.505, -0.09], 50);
|
||
|
||
var mapId = "greydiamond/ckv8gvbf865er14nx16m0xuz4"
|
||
if (window.matchMedia &&
|
||
window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||
mapId = "greydiamond/ckv8go48096jx15npzzb3xx3g"
|
||
}
|
||
|
||
L.tileLayer(
|
||
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<%= it.mapboxAccessToken %>",
|
||
{
|
||
attribution:
|
||
'<a href="/about">About</a> | Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||
/*id: "mapbox/streets-v11",*/
|
||
tileSize: 512,
|
||
zoomOffset: -1,
|
||
|
||
id: mapId, // for day: greydiamond/ckv8gvbf865er14nx16m0xuz4
|
||
accessToken: "<%= it.mapboxAccessToken %>",
|
||
}
|
||
).addTo(mymap);
|
||
|
||
mymap.setGeocoder('Here', { apiKey: "<%= it.hereKey %>" })
|
||
|
||
</script>
|
||
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
|
||
|
||
<script src="./js/map.js"></script>
|
||
|
||
<script src="https://unpkg.com/@themesberg/flowbite@1.1.1/dist/flowbite.bundle.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |