Project-Name-Here/pointsight
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
bedd69436b
pointsight/templates/index.eta.html

415 lines
18 KiB
HTML
Raw Normal View History

Inital commit
2022-03-06 18:36:36 +01:00
<!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 &copy; <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>
Reference in New Issue Copy Permalink