From c2ed3a54789d0663834e154d95fff4978834e9e7 Mon Sep 17 00:00:00 2001 From: 0d0acre <0d0acre@esiliati.org> Date: Sat, 21 Sep 2024 00:36:00 +0200 Subject: [PATCH] lint and format client js --- .gitignore | 3 +- compose.yml | 14 +++ public/js/eventHandler.js | 194 ++++++++++++++++++----------------- public/js/getHtmlElements.js | 22 ++-- public/js/map.js | 44 ++++---- public/js/mapInit.js | 19 ++-- public/js/markerHandler.js | 103 ++++++++++++------- server/index.js | 7 +- 8 files changed, 229 insertions(+), 177 deletions(-) create mode 100644 compose.yml diff --git a/.gitignore b/.gitignore index 2c72b61..10a8a95 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules/ uploads/ config/default.json -.vscode/ \ No newline at end of file +.vscode/ +db_data/ \ No newline at end of file diff --git a/compose.yml b/compose.yml new file mode 100644 index 0000000..73ca261 --- /dev/null +++ b/compose.yml @@ -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 diff --git a/public/js/eventHandler.js b/public/js/eventHandler.js index 76ba522..96a5341 100644 --- a/public/js/eventHandler.js +++ b/public/js/eventHandler.js @@ -1,114 +1,118 @@ - import { basicElements } from "./getHtmlElements.js"; import { createMarkerTemp } from "./markerHandler.js"; import { mapInit } from "./mapInit.js"; export function initEvents(map) { + let editMode = false; + let isTmpMarkerSet = false; + let tmpMarkerSet = {}; - let editMode = false - let isTmpMarkerSet = false - let tmpMarkerSet = {} + const [ + addMarkerBtn, + 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 = + '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 = + '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(){ - 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 = 'Button Image'; - document.getElementById('map').style = 'cursor: url("js/dist/images/marker-icon.png") 13 41, auto;'; + addMarkerBtn.onclick = function (event) { + event.stopPropagation(); + if (!editMode) { + setStyleForEditing(); + editMode = true; + isTmpMarkerSet = false; + tmpMarkerSet = {}; + document.querySelector(".file-chosen").textContent = ""; + } else { + setStyleNotEditing(); + editMode = false; + map.removeLayer(tmpMarkerSet); + isTmpMarkerSet = false; + tmpMarkerSet = {}; } + }; - function setStyleNotEditing() { - markerForm.reset(); - document.getElementById("addMarkerBtn").innerHTML = 'Button Image'; - document.getElementById('map').style = 'cursor: auto;'; - noticeCoordsPicker.style.display = 'none'; //messaggio inserimento - remainingForm.style.display = 'none'; // form dati - markerFormContainer.style.display = 'none'; + //event listener onclick on map, inserisce marker il temporaneo e mostra il remainingForm + map.on("click", function (e) { + if (editMode && !isTmpMarkerSet) { + let formInputCoordY = document.getElementById("formInputCoordY"); + let formInputCoordX = document.getElementById("formInputCoordX"); + 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; } + }); - addMarkerBtn.onclick = function (event) { - event.stopPropagation(); - if (!editMode) { - setStyleForEditing() - editMode = true; - isTmpMarkerSet = false; - tmpMarkerSet = {}; - document.querySelector('.file-chosen').textContent = ''; - } else { - setStyleNotEditing(); - editMode = false; - map.removeLayer(tmpMarkerSet) - isTmpMarkerSet = false; - tmpMarkerSet = {}; - } - }; + function handleSentFormStyle() { + document.getElementById("addMarkerBtn").innerHTML = + '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 = + '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(); - //event listener onclick on map, inserisce marker il temporaneo e mostra il remainingForm - map.on("click", function (e) { - if (editMode && !isTmpMarkerSet) { - let formInputCoordY = document.getElementById('formInputCoordY') - let formInputCoordX = document.getElementById('formInputCoordX') - 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 = '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 = '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) - ); - } - ) - }; - + await fetch("/uploadMarker", { + method: "POST", + body: formData, + }).then(async () => { + await map.fetchNewMarkers().then(() => map.removeLayer(tmpMarkerSet)); + }); + } } -document.getElementById('file-input').addEventListener('change', function () { - const fileName = this.files[0] ? this.files[0].name : 'No file chosen'; - const truncatedFileName = fileName.length > 21 ? fileName.slice(0, 21) + '...' : fileName; - document.querySelector('.file-chosen').textContent = truncatedFileName; +document.getElementById("file-input").addEventListener("change", function () { + const fileName = this.files[0] ? this.files[0].name : "No file chosen"; + const truncatedFileName = + fileName.length > 21 ? fileName.slice(0, 21) + "..." : fileName; + document.querySelector(".file-chosen").textContent = truncatedFileName; }); - diff --git a/public/js/getHtmlElements.js b/public/js/getHtmlElements.js index 3b72a2d..408b6ed 100644 --- a/public/js/getHtmlElements.js +++ b/public/js/getHtmlElements.js @@ -1,8 +1,14 @@ -export function basicElements(){ - const addMarkerBtn = document.getElementById("addMarkerBtn") - const markerFormContainer = document.getElementById("markerFormContainer") - const markerForm = document.getElementById("markerForm") - const noticeCoordsPicker = document.getElementById("noticeCoordsPicker") - const remainingForm = document.getElementById("remainingForm") - return [addMarkerBtn, markerFormContainer, markerForm, noticeCoordsPicker, remainingForm] -} \ No newline at end of file +export function basicElements() { + const addMarkerBtn = document.getElementById("addMarkerBtn"); + const markerFormContainer = document.getElementById("markerFormContainer"); + const markerForm = document.getElementById("markerForm"); + const noticeCoordsPicker = document.getElementById("noticeCoordsPicker"); + const remainingForm = document.getElementById("remainingForm"); + return [ + addMarkerBtn, + markerFormContainer, + markerForm, + noticeCoordsPicker, + remainingForm, + ]; +} diff --git a/public/js/map.js b/public/js/map.js index 7597d20..ae24bcb 100644 --- a/public/js/map.js +++ b/public/js/map.js @@ -2,9 +2,9 @@ import { initMarkers, createMarker } from "./markerHandler.js"; import { initEvents } from "./eventHandler.js"; import { mapInit } from "./mapInit.js"; -let editMode = false +let editMode = false; -let map = mapInit() +let map = mapInit(); let lastUpdateCheck = new Date().getTime(); // initMarkers(markerPopupExample, L, map); @@ -12,32 +12,34 @@ initEvents(map); await fetchAllMarkers(); -setInterval(fetchNewMarkers, 5000) +setInterval(fetchNewMarkers, 5000); async function fetchAllMarkers() { - let response = await fetch('/fetchMarkers', { - method: 'GET', - }) + let response = await fetch("/fetchMarkers", { + method: "GET", + }); - let markers = await response.json() - console.log(markers) - markers.forEach(marker => { - createMarker(marker, L, map); - }); + let markers = await response.json(); + console.log(markers); + markers.forEach((marker) => { + createMarker(marker, L, map); + }); } export async function fetchNewMarkers() { - let response = await fetch('/updateMarkers?' + new URLSearchParams({ fromDate: lastUpdateCheck }), { - method: 'GET', - }) + let response = await fetch( + "/updateMarkers?" + new URLSearchParams({ fromDate: lastUpdateCheck }), + { + method: "GET", + } + ); - let markers = await response.json() - console.log(markers) + let markers = await response.json(); + console.log(markers); - markers.forEach(marker => { - createMarker(marker, L, map); - }); + markers.forEach((marker) => { + createMarker(marker, L, map); + }); - lastUpdateCheck = new Date().getTime(); + lastUpdateCheck = new Date().getTime(); } - diff --git a/public/js/mapInit.js b/public/js/mapInit.js index 26147a7..94c39cf 100644 --- a/public/js/mapInit.js +++ b/public/js/mapInit.js @@ -2,19 +2,18 @@ // import '../../node_modeules/leaflet.locatecontrol'; // Import the Locate Control plugin // import '../../node_modeules/leaflet.locatecontrol/dist/L.Control.Locate.min.css'; // Import styles -export function mapInit(){ -const coordsPiazzaMaggiore = [44.49385, 11.34316] +export function mapInit() { + 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, - attribution: '© OpenStreetMap' -}).addTo(map); + attribution: + '© OpenStreetMap', + }).addTo(map); -L.control.locate().addTo(map); + L.control.locate().addTo(map); -return map; + return map; } - - diff --git a/public/js/markerHandler.js b/public/js/markerHandler.js index 2f2f55a..26e9256 100644 --- a/public/js/markerHandler.js +++ b/public/js/markerHandler.js @@ -1,46 +1,71 @@ -export function initMarkers(markerList, L, map){ - markerList.forEach(customMarker => { - var marker = L.marker([customMarker.x, customMarker.y]).addTo(map); - let popUpContentTitle = "

"+ customMarker.title +"

"; - let popUpContentdescription = "

"+ customMarker.description +"

"; - let popUpContentImage = ""; - let popUpContentDate = "

Inserito il: " + markerData.ts.substring(0, 10) + "
alle " + markerData.ts.substring(11, 16) + "

"; - let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate - marker.bindPopup(popUpContent).openPopup(); - }); +export function initMarkers(markerList, L, map) { + markerList.forEach((customMarker) => { + var marker = L.marker([customMarker.x, customMarker.y]).addTo(map); + let popUpContentTitle = "

" + customMarker.title + "

"; + let popUpContentdescription = "

" + customMarker.description + "

"; + let popUpContentImage = + ""; + let popUpContentDate = + "

Inserito il: " + + markerData.ts.substring(0, 10) + + "
alle " + + markerData.ts.substring(11, 16) + + "

"; + let popUpContent = + popUpContentTitle + + popUpContentdescription + + popUpContentImage + + popUpContentDate; + marker.bindPopup(popUpContent).openPopup(); + }); } -export function createMarker(markerData, L, map, returnMarker = false){ - var marker = L.marker([markerData.coordinate.y, markerData.coordinate.x]).addTo(map); - let popUpContentTitle = "

"+ markerData.name +"

"; - let popUpContentdescription = "

"+ markerData.description +"

"; - let popUpContentImage = ""; - let popUpContentDate = "

Inserito il: " + markerData.ts.substring(0, 10) + "
alle: " + markerData.ts.substring(11, 16) + "

"; - //let popUpContentHour = "

" + "alle: " + markerData.ts.substring(11, 16) + "

"; - let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate //+ popUpContentHour - marker.bindPopup(popUpContent); - if(returnMarker) { - return marker; - }; +export function createMarker(markerData, L, map, returnMarker = false) { + var marker = L.marker([ + markerData.coordinate.y, + markerData.coordinate.x, + ]).addTo(map); + let popUpContentTitle = "

" + markerData.name + "

"; + let popUpContentdescription = "

" + markerData.description + "

"; + let popUpContentImage = ""; + let popUpContentDate = + "

Inserito il: " + + markerData.ts.substring(0, 10) + + "
alle: " + + markerData.ts.substring(11, 16) + + "

"; + //let popUpContentHour = "

" + "alle: " + markerData.ts.substring(11, 16) + "

"; + let popUpContent = + popUpContentTitle + + popUpContentdescription + + popUpContentImage + + popUpContentDate; //+ popUpContentHour + marker.bindPopup(popUpContent); + if (returnMarker) { + return marker; + } } -export function createMarkerTemp(markerData, L, map, returnMarker = false){ - var marker = L.marker([markerData.coordinate.y, markerData.coordinate.x]).addTo(map); - let popUpContentdescription = "

"+ markerData.description +"

"; - let popUpContent = popUpContentdescription - marker.bindPopup(popUpContent); - if(returnMarker) { - return marker; - }; +export function createMarkerTemp(markerData, L, map, returnMarker = false) { + var marker = L.marker([ + markerData.coordinate.y, + markerData.coordinate.x, + ]).addTo(map); + let popUpContentdescription = "

" + markerData.description + "

"; + let popUpContent = popUpContentdescription; + marker.bindPopup(popUpContent); + if (returnMarker) { + return marker; + } } -export function updateMarkers(markerList, L, map){ - var layers = L.LayerGroup(), //layers contains all markers.. - contained = []; //makers in map boundingbox +export function updateMarkers(markerList, L, map) { + var layers = L.LayerGroup(), //layers contains all markers.. + contained = []; //makers in map boundingbox - layers.eachLayer(function(l) { - if( l instanceof L.Marker && map.getBounds().contains(l.getLatLng()) ) - contained.push(l); - }); - console.log(contained) -} \ No newline at end of file + layers.eachLayer(function (l) { + if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng())) + contained.push(l); + }); + console.log(contained); +} diff --git a/server/index.js b/server/index.js index 8ee4d13..bb0af77 100644 --- a/server/index.js +++ b/server/index.js @@ -5,11 +5,13 @@ const config = require("config"); const dbHandler = require("./dbHandler.js"); const upload = multer({ dest: config.get("app.upload") }); +const PUBLIC_PATH = `${__dirname}/../public`; + let server = undefined; const configureRoutes = (app) => { app.get("/", (req, res) => { - res.sendFile(__dirname + "./public/index.html"); + res.sendFile(`${PUBLIC_PATH}/index.html`); }); app.post("/uploadMarker", upload.single("image"), (req, res) => { @@ -48,8 +50,7 @@ const configureExpress = () => { const app = express(); const port = config.get("app.port"); - - app.use(express.static("public")); + app.use(express.static(PUBLIC_PATH)); app.use("/imgs", express.static(config.get("app.upload"))); app.use(express.json()); // for json app.use(