RuscoMap/ruscomap
5
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

lint and format client js

Browse source
This commit is contained in:
0d0acre 2024-09-21 00:36:00 +02:00
parent 831b00cbb1
commit c2ed3a5478
8 changed files with 229 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -1,4 +1,5 @@
node_modules/ node_modules/
uploads/ uploads/
config/default.json config/default.json
.vscode/ .vscode/
db_data/

14
compose.yml Normal file
View file

@ -0,0 +1,14 @@
services:
db:
image: mariadb
restart: always
environment:
MARIADB_DATABASE: ruscomap
MYSQL_USER: ruscone
MYSQL_PASSWORD: password
MYSQL_RANDOM_ROOT_PASSWORD: '1'
ports:
- 3306:3306
volumes:
- ./db_data:/var/lib/mysql

194
public/js/eventHandler.js
View file

@ -1,114 +1,118 @@
import { basicElements } from "./getHtmlElements.js"; import { basicElements } from "./getHtmlElements.js";
import { createMarkerTemp } from "./markerHandler.js"; import { createMarkerTemp } from "./markerHandler.js";
import { mapInit } from "./mapInit.js"; import { mapInit } from "./mapInit.js";
export function initEvents(map) { export function initEvents(map) {
let editMode = false;
let isTmpMarkerSet = false;
let tmpMarkerSet = {};
let editMode = false const [
let isTmpMarkerSet = false addMarkerBtn,
let tmpMarkerSet = {} markerFormContainer,
markerForm,
noticeCoordsPicker,
remainingForm,
] = basicElements();
markerForm.addEventListener("submit", processForm);
const [addMarkerBtn, markerFormContainer, markerForm, noticeCoordsPicker, remainingForm] = basicElements() function setStyleForEditing() {
markerFormContainer.style.display = "flex";
noticeCoordsPicker.style.display = "block"; //messaggio inserimento
remainingForm.style.display = "none"; // form dati
// imposta una X rossa come icona pulsante, come icona cursore un marker e entra nella modalità inserimento.
document.getElementById("addMarkerBtn").innerHTML =
'<img src="../img/xred20.png" alt="Button Image" />';
document.getElementById("map").style =
'cursor: url("js/dist/images/marker-icon.png") 13 41, auto;';
}
markerForm.addEventListener("submit", processForm); function setStyleNotEditing() {
markerForm.reset();
document.getElementById("addMarkerBtn").innerHTML =
'<img src="../img/marker-icon18.png" alt="Button Image" />';
document.getElementById("map").style = "cursor: auto;";
noticeCoordsPicker.style.display = "none"; //messaggio inserimento
remainingForm.style.display = "none"; // form dati
markerFormContainer.style.display = "none";
}
function setStyleForEditing(){ addMarkerBtn.onclick = function (event) {
markerFormContainer.style.display = 'flex'; event.stopPropagation();
noticeCoordsPicker.style.display = 'block'; //messaggio inserimento if (!editMode) {
remainingForm.style.display = 'none'; // form dati setStyleForEditing();
// imposta una X rossa come icona pulsante, come icona cursore un marker e entra nella modalità inserimento. editMode = true;
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/xred20.png" alt="Button Image" />'; isTmpMarkerSet = false;
document.getElementById('map').style = 'cursor: url("js/dist/images/marker-icon.png") 13 41, auto;'; tmpMarkerSet = {};
document.querySelector(".file-chosen").textContent = "";
} else {
setStyleNotEditing();
editMode = false;
map.removeLayer(tmpMarkerSet);
isTmpMarkerSet = false;
tmpMarkerSet = {};
} }
};
function setStyleNotEditing() { //event listener onclick on map, inserisce marker il temporaneo e mostra il remainingForm
markerForm.reset(); map.on("click", function (e) {
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />'; if (editMode && !isTmpMarkerSet) {
document.getElementById('map').style = 'cursor: auto;'; let formInputCoordY = document.getElementById("formInputCoordY");
noticeCoordsPicker.style.display = 'none'; //messaggio inserimento let formInputCoordX = document.getElementById("formInputCoordX");
remainingForm.style.display = 'none'; // form dati formInputCoordY.value = e.latlng.lat;
markerFormContainer.style.display = 'none'; formInputCoordX.value = e.latlng.lng;
noticeCoordsPicker.style.display = "none";
remainingForm.style.display = "block";
map.getContainer().style.cursor = "auto";
const formattedDate = new Date().toISOString();
const tmpMarker = {
coordinate: { x: formInputCoordX.value, y: formInputCoordY.value },
name: "",
description:
"Compila il form per aggiungere un marker qui. Oppure annulla l'inserimento del marker cliccando sulla X in alto a destra",
filename: "../img/trashw.png",
ts: formattedDate,
};
tmpMarkerSet = createMarkerTemp(tmpMarker, L, map, true);
isTmpMarkerSet = true;
} }
});
addMarkerBtn.onclick = function (event) { function handleSentFormStyle() {
event.stopPropagation(); document.getElementById("addMarkerBtn").innerHTML =
if (!editMode) { '<img src="../img/marker-icon18.png" alt="Button Image" />';
setStyleForEditing() document.getElementById("map").style = "cursor: auto;";
editMode = true; markerFormContainer.style.display = "none"; //tutto
isTmpMarkerSet = false; const remainingForm = document.getElementById("remainingForm");
tmpMarkerSet = {}; remainingForm.style.display = "none";
document.querySelector('.file-chosen').textContent = ''; document.getElementById("addMarkerBtn").innerHTML =
} else { '<img src="../img/marker-icon18.png" alt="Button Image" />';
setStyleNotEditing(); document.getElementById("markerFormContainer").style.display = "none";
editMode = false; }
map.removeLayer(tmpMarkerSet)
isTmpMarkerSet = false;
tmpMarkerSet = {};
}
};
async function processForm(e) {
e.preventDefault();
handleSentFormStyle();
// imposta un marker come icona pulsante, icona cursore normale e esce dalla modalità inserimento.
editMode = false;
isTmpMarkerSet = false;
const markerForm = document.getElementById("markerForm");
const formData = new FormData(markerForm);
markerForm.reset();
//event listener onclick on map, inserisce marker il temporaneo e mostra il remainingForm await fetch("/uploadMarker", {
map.on("click", function (e) { method: "POST",
if (editMode && !isTmpMarkerSet) { body: formData,
let formInputCoordY = document.getElementById('formInputCoordY') }).then(async () => {
let formInputCoordX = document.getElementById('formInputCoordX') await map.fetchNewMarkers().then(() => map.removeLayer(tmpMarkerSet));
formInputCoordY.value = e.latlng.lat });
formInputCoordX.value = e.latlng.lng }
noticeCoordsPicker.style.display = 'none';
remainingForm.style.display = 'block';
map.getContainer().style.cursor = 'auto';
const formattedDate = new Date().toISOString();
const tmpMarker = {
coordinate: { x: formInputCoordX.value, y: formInputCoordY.value },
name: "",
description: "Compila il form per aggiungere un marker qui. Oppure annulla l'inserimento del marker cliccando sulla X in alto a destra",
filename: "../img/trashw.png",
ts: formattedDate,
}
tmpMarkerSet = createMarkerTemp(tmpMarker, L, map, true)
isTmpMarkerSet = true
}
})
function handleSentFormStyle() {
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
document.getElementById('map').style = 'cursor: auto;';
markerFormContainer.style.display = 'none'; //tutto
const remainingForm = document.getElementById("remainingForm")
remainingForm.style.display = 'none';
document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
document.getElementById("markerFormContainer").style.display = 'none';
}
async function processForm(e) {
e.preventDefault();
handleSentFormStyle()
// imposta un marker come icona pulsante, icona cursore normale e esce dalla modalità inserimento.
editMode = false;
isTmpMarkerSet = false;
const markerForm = document.getElementById("markerForm")
const formData = new FormData(markerForm)
markerForm.reset();
await fetch('/uploadMarker', {
method: 'POST',
body: formData,
}).then(async () => {
await map.fetchNewMarkers().then( () =>
map.removeLayer(tmpMarkerSet)
);
}
)
};
} }
document.getElementById('file-input').addEventListener('change', function () { document.getElementById("file-input").addEventListener("change", function () {
const fileName = this.files[0] ? this.files[0].name : 'No file chosen'; const fileName = this.files[0] ? this.files[0].name : "No file chosen";
const truncatedFileName = fileName.length > 21 ? fileName.slice(0, 21) + '...' : fileName; const truncatedFileName =
document.querySelector('.file-chosen').textContent = truncatedFileName; fileName.length > 21 ? fileName.slice(0, 21) + "..." : fileName;
document.querySelector(".file-chosen").textContent = truncatedFileName;
}); });

22
public/js/getHtmlElements.js
View file

@ -1,8 +1,14 @@
export function basicElements(){ export function basicElements() {
const addMarkerBtn = document.getElementById("addMarkerBtn") const addMarkerBtn = document.getElementById("addMarkerBtn");
const markerFormContainer = document.getElementById("markerFormContainer") const markerFormContainer = document.getElementById("markerFormContainer");
const markerForm = document.getElementById("markerForm") const markerForm = document.getElementById("markerForm");
const noticeCoordsPicker = document.getElementById("noticeCoordsPicker") const noticeCoordsPicker = document.getElementById("noticeCoordsPicker");
const remainingForm = document.getElementById("remainingForm") const remainingForm = document.getElementById("remainingForm");
return [addMarkerBtn, markerFormContainer, markerForm, noticeCoordsPicker, remainingForm] return [
} addMarkerBtn,
markerFormContainer,
markerForm,
noticeCoordsPicker,
remainingForm,
];
}

44
public/js/map.js
View file

@ -2,9 +2,9 @@ import { initMarkers, createMarker } from "./markerHandler.js";
import { initEvents } from "./eventHandler.js"; import { initEvents } from "./eventHandler.js";
import { mapInit } from "./mapInit.js"; import { mapInit } from "./mapInit.js";
let editMode = false let editMode = false;
let map = mapInit() let map = mapInit();
let lastUpdateCheck = new Date().getTime(); let lastUpdateCheck = new Date().getTime();
// initMarkers(markerPopupExample, L, map); // initMarkers(markerPopupExample, L, map);
@ -12,32 +12,34 @@ initEvents(map);
await fetchAllMarkers(); await fetchAllMarkers();
setInterval(fetchNewMarkers, 5000) setInterval(fetchNewMarkers, 5000);
async function fetchAllMarkers() { async function fetchAllMarkers() {
let response = await fetch('/fetchMarkers', { let response = await fetch("/fetchMarkers", {
method: 'GET', method: "GET",
}) });
let markers = await response.json() let markers = await response.json();
console.log(markers) console.log(markers);
markers.forEach(marker => { markers.forEach((marker) => {
createMarker(marker, L, map); createMarker(marker, L, map);
}); });
} }
export async function fetchNewMarkers() { export async function fetchNewMarkers() {
let response = await fetch('/updateMarkers?' + new URLSearchParams({ fromDate: lastUpdateCheck }), { let response = await fetch(
method: 'GET', "/updateMarkers?" + new URLSearchParams({ fromDate: lastUpdateCheck }),
}) {
method: "GET",
}
);
let markers = await response.json() let markers = await response.json();
console.log(markers) console.log(markers);
markers.forEach(marker => { markers.forEach((marker) => {
createMarker(marker, L, map); createMarker(marker, L, map);
}); });
lastUpdateCheck = new Date().getTime(); lastUpdateCheck = new Date().getTime();
} }

19
public/js/mapInit.js
View file

@ -2,19 +2,18 @@
// import '../../node_modeules/leaflet.locatecontrol'; // Import the Locate Control plugin // import '../../node_modeules/leaflet.locatecontrol'; // Import the Locate Control plugin
// import '../../node_modeules/leaflet.locatecontrol/dist/L.Control.Locate.min.css'; // Import styles // import '../../node_modeules/leaflet.locatecontrol/dist/L.Control.Locate.min.css'; // Import styles
export function mapInit(){ export function mapInit() {
const coordsPiazzaMaggiore = [44.49385, 11.34316] const coordsPiazzaMaggiore = [44.49385, 11.34316];
var 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,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution:
}).addTo(map); '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
L.control.locate().addTo(map); L.control.locate().addTo(map);
return map; return map;
} }

103
public/js/markerHandler.js
View file

@ -1,46 +1,71 @@
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); var marker = L.marker([customMarker.x, customMarker.y]).addTo(map);
let popUpContentTitle = "<h1>"+ customMarker.title +"</h1>"; let popUpContentTitle = "<h1>" + customMarker.title + "</h1>";
let popUpContentdescription = "<p>"+ customMarker.description +"</p>"; let popUpContentdescription = "<p>" + customMarker.description + "</p>";
let popUpContentImage = "<img src='/img/"+ customMarker.imgName+"'</img>"; let popUpContentImage =
let popUpContentDate = "<br><p>Inserito il: " + markerData.ts.substring(0, 10) + "<br>alle " + markerData.ts.substring(11, 16) + "</p>"; "<img src='/img/" + customMarker.imgName + "'</img>";
let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate let popUpContentDate =
marker.bindPopup(popUpContent).openPopup(); "<br><p>Inserito il: " +
}); markerData.ts.substring(0, 10) +
"<br>alle " +
markerData.ts.substring(11, 16) +
"</p>";
let popUpContent =
popUpContentTitle +
popUpContentdescription +
popUpContentImage +
popUpContentDate;
marker.bindPopup(popUpContent).openPopup();
});
} }
export function createMarker(markerData, L, map, returnMarker = false){ export function createMarker(markerData, L, map, returnMarker = false) {
var marker = L.marker([markerData.coordinate.y, markerData.coordinate.x]).addTo(map); var marker = L.marker([
let popUpContentTitle = "<h1>"+ markerData.name +"</h1>"; markerData.coordinate.y,
let popUpContentdescription = "<p>"+ markerData.description +"</p>"; markerData.coordinate.x,
let popUpContentImage = "<img src='/imgs/"+ markerData.filename +"'</img>"; ]).addTo(map);
let popUpContentDate = "<br><p>Inserito il: " + markerData.ts.substring(0, 10) + "<br>alle: " + markerData.ts.substring(11, 16) + "</p>"; let popUpContentTitle = "<h1>" + markerData.name + "</h1>";
//let popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>"; let popUpContentdescription = "<p>" + markerData.description + "</p>";
let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate //+ popUpContentHour let popUpContentImage = "<img src='/imgs/" + markerData.filename + "'</img>";
marker.bindPopup(popUpContent); let popUpContentDate =
if(returnMarker) { "<br><p>Inserito il: " +
return marker; markerData.ts.substring(0, 10) +
}; "<br>alle: " +
markerData.ts.substring(11, 16) +
"</p>";
//let popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>";
let popUpContent =
popUpContentTitle +
popUpContentdescription +
popUpContentImage +
popUpContentDate; //+ popUpContentHour
marker.bindPopup(popUpContent);
if (returnMarker) {
return marker;
}
} }
export function createMarkerTemp(markerData, L, map, returnMarker = false){ export function createMarkerTemp(markerData, L, map, returnMarker = false) {
var marker = L.marker([markerData.coordinate.y, markerData.coordinate.x]).addTo(map); var marker = L.marker([
let popUpContentdescription = "<p>"+ markerData.description +"</p>"; markerData.coordinate.y,
let popUpContent = popUpContentdescription markerData.coordinate.x,
marker.bindPopup(popUpContent); ]).addTo(map);
if(returnMarker) { let popUpContentdescription = "<p>" + markerData.description + "</p>";
return marker; let popUpContent = popUpContentdescription;
}; marker.bindPopup(popUpContent);
if (returnMarker) {
return marker;
}
} }
export function updateMarkers(markerList, L, map){ export function updateMarkers(markerList, L, map) {
var layers = L.LayerGroup(), //layers contains all markers.. var layers = L.LayerGroup(), //layers contains all markers..
contained = []; //makers in map boundingbox contained = []; //makers in map boundingbox
layers.eachLayer(function(l) { layers.eachLayer(function (l) {
if( l instanceof L.Marker && map.getBounds().contains(l.getLatLng()) ) if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng()))
contained.push(l); contained.push(l);
}); });
console.log(contained) console.log(contained);
} }

7
server/index.js
View file

@ -5,11 +5,13 @@ const config = require("config");
const dbHandler = require("./dbHandler.js"); const dbHandler = require("./dbHandler.js");
const upload = multer({ dest: config.get("app.upload") }); const upload = multer({ dest: config.get("app.upload") });
const PUBLIC_PATH = `${__dirname}/../public`;
let server = undefined; let server = undefined;
const configureRoutes = (app) => { const configureRoutes = (app) => {
app.get("/", (req, res) => { app.get("/", (req, res) => {
res.sendFile(__dirname + "./public/index.html"); res.sendFile(`${PUBLIC_PATH}/index.html`);
}); });
app.post("/uploadMarker", upload.single("image"), (req, res) => { app.post("/uploadMarker", upload.single("image"), (req, res) => {
@ -48,8 +50,7 @@ const configureExpress = () => {
const app = express(); const app = express();
const port = config.get("app.port"); const port = config.get("app.port");
app.use(express.static(PUBLIC_PATH));
app.use(express.static("public"));
app.use("/imgs", express.static(config.get("app.upload"))); app.use("/imgs", express.static(config.get("app.upload")));
app.use(express.json()); // for json app.use(express.json()); // for json
app.use( app.use(