Format and fix date
This commit is contained in:
parent
bf1b2d52e8
commit
579fca3c19
6 changed files with 74 additions and 55 deletions
|
@ -98,6 +98,7 @@
|
||||||
setTimeout(closePopup, 13000);
|
setTimeout(closePopup, 13000);
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
|
/*
|
||||||
// Add a click event listener to the button
|
// Add a click event listener to the button
|
||||||
const gpsButton = document.getElementById("gps-button");
|
const gpsButton = document.getElementById("gps-button");
|
||||||
gpsButton.addEventListener("click", function () {
|
gpsButton.addEventListener("click", function () {
|
||||||
|
@ -107,9 +108,12 @@
|
||||||
lc.start();
|
lc.start();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script src="./js/dist/L.Control.Locate.min.js"></script>
|
|
||||||
<script type="module" type="text/javascript" src="/js/map.js"></script>
|
<script defer src="./js/dayjs/dayjs.min.js"></script>
|
||||||
|
<script defer src="./js/dist/L.Control.Locate.min.js"></script>
|
||||||
|
<script defer type="module" type="text/javascript" src="/js/map.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
1
public/js/dayjs/dayjs.min.js
vendored
Normal file
1
public/js/dayjs/dayjs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -3,21 +3,15 @@ import { initEvents } from "./eventHandler.js";
|
||||||
import { mapInit } from "./mapInit.js";
|
import { mapInit } from "./mapInit.js";
|
||||||
|
|
||||||
let editMode = false;
|
let editMode = false;
|
||||||
|
const lastUpdateCheck = new Date().getTime();
|
||||||
|
|
||||||
let map = mapInit();
|
const map = mapInit();
|
||||||
let lastUpdateCheck = new Date().getTime();
|
|
||||||
|
|
||||||
// initMarkers(markerPopupExample, L, map);
|
|
||||||
initEvents(map);
|
initEvents(map);
|
||||||
|
|
||||||
await fetchAllMarkers();
|
|
||||||
|
|
||||||
setInterval(fetchNewMarkers, 5000);
|
|
||||||
|
|
||||||
async function fetchAllMarkers() {
|
async function fetchAllMarkers() {
|
||||||
let response = await fetch("/fetchMarkers", {
|
const response = await fetch("/fetchMarkers");
|
||||||
method: "GET",
|
|
||||||
});
|
|
||||||
|
|
||||||
let markers = await response.json();
|
let markers = await response.json();
|
||||||
console.log(markers);
|
console.log(markers);
|
||||||
|
@ -26,16 +20,13 @@ async function fetchAllMarkers() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchNewMarkers() {
|
|
||||||
let response = await fetch(
|
|
||||||
"/updateMarkers?" + new URLSearchParams({ fromDate: lastUpdateCheck }),
|
|
||||||
{
|
|
||||||
method: "GET",
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
let markers = await response.json();
|
export async function fetchNewMarkers() {
|
||||||
console.log(markers);
|
const searchParams = new URLSearchParams({ fromDate: lastUpdateCheck });
|
||||||
|
|
||||||
|
const response = await fetch(`/updateMarkers?${searchParams.toString()}`);
|
||||||
|
|
||||||
|
const markers = await response.json();
|
||||||
|
|
||||||
markers.forEach((marker) => {
|
markers.forEach((marker) => {
|
||||||
createMarker(marker, L, map);
|
createMarker(marker, L, map);
|
||||||
|
@ -43,3 +34,13 @@ export async function fetchNewMarkers() {
|
||||||
|
|
||||||
lastUpdateCheck = new Date().getTime();
|
lastUpdateCheck = new Date().getTime();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const main = async () => {
|
||||||
|
await fetchAllMarkers();
|
||||||
|
|
||||||
|
setInterval(fetchNewMarkers, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
main().then(() => {
|
||||||
|
console.log("Completed")
|
||||||
|
}).catch(console.error)
|
|
@ -4,8 +4,7 @@
|
||||||
|
|
||||||
export function mapInit() {
|
export function mapInit() {
|
||||||
const coordsPiazzaMaggiore = [44.49385, 11.34316];
|
const coordsPiazzaMaggiore = [44.49385, 11.34316];
|
||||||
|
const map = L.map("map").setView(coordsPiazzaMaggiore, 13);
|
||||||
var map = L.map("map").setView(coordsPiazzaMaggiore, 13);
|
|
||||||
|
|
||||||
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||||
maxZoom: 19,
|
maxZoom: 19,
|
||||||
|
|
|
@ -1,17 +1,28 @@
|
||||||
|
const formatDate = (date) => {
|
||||||
|
const day = date.getDate();
|
||||||
|
const month = date.getMonth() + 1;
|
||||||
|
const year = date.getFullYear();
|
||||||
|
|
||||||
|
return `${day}/${month}/${year}`;
|
||||||
|
};
|
||||||
|
const formatTime = (date) => {
|
||||||
|
return date.toTimeString().split(" ")[0];
|
||||||
|
};
|
||||||
|
|
||||||
export function initMarkers(markerList, L, map) {
|
export function initMarkers(markerList, L, map) {
|
||||||
markerList.forEach((customMarker) => {
|
markerList.forEach((customMarker) => {
|
||||||
var marker = L.marker([customMarker.x, customMarker.y]).addTo(map);
|
const marker = L.marker([customMarker.x, customMarker.y]).addTo(map);
|
||||||
let popUpContentTitle = "<h1>" + customMarker.title + "</h1>";
|
const popUpContentTitle = "<h1>" + customMarker.title + "</h1>";
|
||||||
let popUpContentdescription = "<p>" + customMarker.description + "</p>";
|
const popUpContentdescription = "<p>" + customMarker.description + "</p>";
|
||||||
let popUpContentImage =
|
const popUpContentImage =
|
||||||
"<img src='/img/" + customMarker.imgName + "'</img>";
|
"<img src='/img/" + customMarker.imgName + "'</img>";
|
||||||
let popUpContentDate =
|
const popUpContentDate =
|
||||||
"<br><p>Inserito il: " +
|
"<br><p>Inserito il: " +
|
||||||
markerData.ts.substring(0, 10) +
|
markerData.ts.substring(0, 10) +
|
||||||
"<br>alle " +
|
"<br>alle " +
|
||||||
markerData.ts.substring(11, 16) +
|
markerData.ts.substring(11, 16) +
|
||||||
"</p>";
|
"</p>";
|
||||||
let popUpContent =
|
const popUpContent =
|
||||||
popUpContentTitle +
|
popUpContentTitle +
|
||||||
popUpContentdescription +
|
popUpContentdescription +
|
||||||
popUpContentImage +
|
popUpContentImage +
|
||||||
|
@ -21,21 +32,22 @@ export function initMarkers(markerList, L, map) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createMarker(markerData, L, map, returnMarker = false) {
|
export function createMarker(markerData, L, map, returnMarker = false) {
|
||||||
var marker = L.marker([
|
const marker = L.marker([
|
||||||
markerData.coordinate.y,
|
markerData.coordinate.y,
|
||||||
markerData.coordinate.x,
|
markerData.coordinate.x,
|
||||||
]).addTo(map);
|
]).addTo(map);
|
||||||
let popUpContentTitle = "<h1>" + markerData.name + "</h1>";
|
const date = new Date(markerData.ts);
|
||||||
let popUpContentdescription = "<p>" + markerData.description + "</p>";
|
|
||||||
let popUpContentImage = "<img src='/imgs/" + markerData.filename + "'</img>";
|
const popUpContentTitle = "<h1>" + markerData.name + "</h1>";
|
||||||
let popUpContentDate =
|
const popUpContentdescription = "<p>" + markerData.description + "</p>";
|
||||||
"<br><p>Inserito il: " +
|
const popUpContentImage =
|
||||||
markerData.ts.substring(0, 10) +
|
"<img src='/imgs/" + markerData.filename + "'</img>";
|
||||||
"<br>alle: " +
|
const popUpContentDate = `<br><p>Inserito il: ${formatDate(
|
||||||
markerData.ts.substring(11, 16) +
|
date
|
||||||
"</p>";
|
)} <br>alle: ${formatTime(date)}</p>`;
|
||||||
//let popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>";
|
|
||||||
let popUpContent =
|
//const popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>";
|
||||||
|
const popUpContent =
|
||||||
popUpContentTitle +
|
popUpContentTitle +
|
||||||
popUpContentdescription +
|
popUpContentdescription +
|
||||||
popUpContentImage +
|
popUpContentImage +
|
||||||
|
@ -47,12 +59,12 @@ export function createMarker(markerData, L, map, returnMarker = false) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createMarkerTemp(markerData, L, map, returnMarker = false) {
|
export function createMarkerTemp(markerData, L, map, returnMarker = false) {
|
||||||
var marker = L.marker([
|
const marker = L.marker([
|
||||||
markerData.coordinate.y,
|
markerData.coordinate.y,
|
||||||
markerData.coordinate.x,
|
markerData.coordinate.x,
|
||||||
]).addTo(map);
|
]).addTo(map);
|
||||||
let popUpContentdescription = "<p>" + markerData.description + "</p>";
|
const popUpContentdescription = "<p>" + markerData.description + "</p>";
|
||||||
let popUpContent = popUpContentdescription;
|
const popUpContent = popUpContentdescription;
|
||||||
marker.bindPopup(popUpContent);
|
marker.bindPopup(popUpContent);
|
||||||
if (returnMarker) {
|
if (returnMarker) {
|
||||||
return marker;
|
return marker;
|
||||||
|
@ -60,12 +72,15 @@ export function createMarkerTemp(markerData, L, map, returnMarker = false) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updateMarkers(markerList, L, map) {
|
export function updateMarkers(markerList, L, map) {
|
||||||
var layers = L.LayerGroup(), //layers contains all markers..
|
const layers = L.LayerGroup(); //layers contains all markers..
|
||||||
contained = []; //makers in map boundingbox
|
const contained = []; //makers in map boundingbox
|
||||||
|
|
||||||
layers.eachLayer(function (l) {
|
layers.eachLayer(function (l) {
|
||||||
if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng()))
|
if (
|
||||||
contained.push(l);
|
layer instanceof L.Marker &&
|
||||||
|
map.getBounds().contains(layer.getLatLng())
|
||||||
|
)
|
||||||
|
contained.push(layer);
|
||||||
});
|
});
|
||||||
console.log(contained);
|
console.log(contained);
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,19 +9,18 @@ const pool = mysql.createPool({
|
||||||
});
|
});
|
||||||
|
|
||||||
function addMarker(marker) {
|
function addMarker(marker) {
|
||||||
let insertQuery = "INSERT INTO markers VALUES (?,?,?,POINT(?,?),?)";
|
const insertQuery = "INSERT INTO markers VALUES (?,?,?,POINT(?,?),?)";
|
||||||
const date = new Date().toISOString();
|
const date = new Date();
|
||||||
const datePart = date.slice(0, 10); // '2024-09-06'
|
|
||||||
const timePart = date.slice(11, 19); // '21:33:44'
|
const query = mysql.format(insertQuery, [
|
||||||
const formattedDate = `${datePart} ${timePart}`;
|
|
||||||
let query = mysql.format(insertQuery, [
|
|
||||||
marker.name,
|
marker.name,
|
||||||
marker.description,
|
marker.description,
|
||||||
marker.filename,
|
marker.filename,
|
||||||
marker.long,
|
marker.long,
|
||||||
marker.lat,
|
marker.lat,
|
||||||
formattedDate,
|
date,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
pool.query(query, (err, response) => {
|
pool.query(query, (err, response) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
|
|
Loading…
Reference in a new issue