From 3c3f7460840e443ff973b34c633f91a931eeeda2 Mon Sep 17 00:00:00 2001 From: user Date: Fri, 29 Mar 2024 19:27:55 +0100 Subject: [PATCH] signModal, click map 4 marker, draft loadmap --- ruscoapp/public/index.css | 31 +++++- ruscoapp/public/index.html | 200 +++++++++++++++++++++--------------- ruscoapp/public/index.js | 171 ++++++++++++++++-------------- ruscoapp/public/login.js | 13 ++- ruscoapp/public/marker.js | 0 ruscoapp/public/register.js | 14 ++- ruscoapp/public/unused.js | 23 +++++ ruscoapp/server.js | 156 +++++++++++++++++----------- 8 files changed, 386 insertions(+), 222 deletions(-) create mode 100644 ruscoapp/public/marker.js create mode 100644 ruscoapp/public/unused.js diff --git a/ruscoapp/public/index.css b/ruscoapp/public/index.css index 74d8dc8..50269cb 100644 --- a/ruscoapp/public/index.css +++ b/ruscoapp/public/index.css @@ -1,5 +1,5 @@ #modalAddMarker { - display: none; /* Hide the modal by default */ + display: none; position: fixed; top: 50%; left: 50%; @@ -7,7 +7,18 @@ background-color: #fff; padding: 20px; border-radius: 5px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 1002; +} + +#modalOverlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1001; } #modalAddMarker input[type="file"] { @@ -20,3 +31,19 @@ margin-bottom: 10px; } + +#modalSign { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border-radius: 5px; + z-index: 1002; +} + +#registerForm { + display: none; +} \ No newline at end of file diff --git a/ruscoapp/public/index.html b/ruscoapp/public/index.html index e9fc24e..11766c7 100644 --- a/ruscoapp/public/index.html +++ b/ruscoapp/public/index.html @@ -1,95 +1,133 @@ + + RuscoMap + + + + - h1 { - height: 9dvh; - } - - body { - height: 100dvh; - padding: 20px; - } - - - - - -
-
- - + +
+
+
+ +

+ +

+
+
+ + +
+
+ + +
+
+ + +
+ +
-
- - + +
+
+

Login

+
+ + + + + +
+ +
+
+

Registra

+
+ + + + + + + + +
+
-
- - -
- -
-
-

RuscoMap

+
- +

RuscoMap

- + + -

User Registration

-
-
- - + + - - +
- -
-
+ -

User Login

-
-
- - - - - - - -
-
- - - - - - -
- - - - - - - - \ No newline at end of file + + + diff --git a/ruscoapp/public/index.js b/ruscoapp/public/index.js index bcf9d0f..28f79e0 100644 --- a/ruscoapp/public/index.js +++ b/ruscoapp/public/index.js @@ -1,103 +1,118 @@ - -let map = null; -let points = []; +let map = null +let points = [] //BOLOGNA -const x = 11.343095841047235; -const y = 44.49373478876318; -const piazzaMaggiore = [x, y]; +const x = 11.343095841047235 +const y = 44.49373478876318 +const piazzaMaggiore = [x, y] + +var lat = 0 +var lng = 0 + // COORDS ESISTENTI -async function downloadRusco() { - const resp = await window.fetch("/rusco.geojson"); +async function downloadRusco () { + const resp = await window.fetch('/rusco.geojson') const rusco = await resp.json() - return rusco.features; + return rusco.features } // SET VIEW -function loadMap() { - map = L.map('map').setView([44.49593478876318, 11.343095841047235], 13.5); +async function initMap () { + map = L.map('map').setView([44.49593478876318, 11.343095841047235], 13.5) // IMPOSTA MAPPA L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors | RuscoMap' - }).addTo(map); - // LOAD JSON WITH nome, descrizione e fotoURl - fetch('rusco.geojson') - .then(response => response.json()) - .then(data => { - L.geoJSON(data, { - onEachFeature: function (feature, layer) { - layer.bindPopup('

' + - feature.properties.Nome + '

' + feature.properties.Descrizione + '

Photo'); - } - }).addTo(map); - }); + }).addTo(map) + + loadMarkers(map) + map.on('click', function (e) { + lat = e.latlng.lat + lng = e.latlng.lng + document.getElementById('latitudeValue').textContent = lat + document.getElementById('longitudeValue').textContent = lng + // Bind a popup to the marker + showModal('modalAddMarker') + }) } -//LOGICA BTN -function preparaDOM() { - const button = document.querySelector('#PMaggiore'); - button.addEventListener('click', () => { - //const risposta = prompt("Dammi coordinates"); - const puntoNuovo = { - "type": "Feature", - "properties": { - "Nome": "Coors Field", - "Descrizione": "Baseball Stadium", - }, - "geometry": { - "type": "Point", - "coordinates": piazzaMaggiore +async function loadMarkers(map) { + fetch('http://localhost:3000/getRuschi') + .then(response => response.json()) + .then(data => { + L.geoJSON(data, { + onEachFeature: function (feature, layer) { + layer.bindPopup('

' + + feature.properties.Nome + '

' + feature.properties.Descrizione + '

Photo'); } - } - //PUSH NUOVECOORD - points.push(puntoNuovo); - //RELOAD JSON - L.geoJSON(points).addTo(map); - button.innerHTML = "Aggiungi piu' ombra" + }).addTo(map); }); } + // SEGUENZA EXEC -async function load() { - points = await downloadRusco(); - //console.log (points.features) - preparaDOM(); - loadMap(); +async function load () { + points = await downloadRusco() + await initMap() } -function showModalAddMarker(){ - const addMarkerModal = document.getElementById('modalAddMarker'); - const modalOverlay = document.getElementById('modalOverlay'); - addMarkerModal.style.display = 'block'; // Show the modal - addMarkerModal.style.zIndex = '1002'; // Show the modal - modalOverlay.style.position = 'fixed'; - modalOverlay.style.top = '0'; - modalOverlay.style.left = '0'; - modalOverlay.style.width = '100%'; - modalOverlay.style.height = '100%'; - modalOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Black semi-transparent background - modalOverlay.style.zIndex = '1001'; // Ensure it's on top of everything +function showModal (modalName) { + const selectedModal = document.getElementById(modalName) + const modalOverlay = document.getElementById('modalOverlay') + selectedModal.style.display = 'block' // Show the modal + modalOverlay.style.display = 'block' // Show the overlay } -function closeModalAddMarker(){ - const addMarkerModal = document.getElementById('modalAddMarker'); - const modalOverlay = document.getElementById('modalOverlay'); - addMarkerModal.style.display = 'none'; - modalOverlay.style.display = 'none'; +function detectCurrentShownModal(){ + const modalAddMarker = document.getElementById('modalAddMarker') + const modalSign = document.getElementById('modalSign') + return modalAddMarker.style.display !== 'none' ? modalAddMarker : modalSign } - -function addMarker(){ -const nameValue = document.getElementById('name').value; -const descriptionValue = document.getElementById('description').value; -const photoValue = document.getElementById('photo').value; -closeModalAddMarker() +function closeModal () { + const currentShownModal = detectCurrentShownModal() + const modalOverlay = document.getElementById('modalOverlay') + currentShownModal.style.display = 'none' + modalOverlay.style.display = 'none' } -window.addEventListener('load', load); +function addMarker () { + const name = document.getElementById('name').value + const description = document.getElementById('description').value + const imageUrl = document.getElementById('photo').value + const latitude = document.getElementById('latitude').value + const longitude = document.getElementById('longitude').value + fetch('http://localhost:3000/addRuschi', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + name: name, + description: description, + imageUrl: imageUrl, + latitude: latitude, + longitude: longitude + }) + }).then(response => { + if (response.ok) { + // Authentication successful + console.log('Added marker') + // Redirect the user to the authenticated area or perform other actions + } else { + // Authentication failed + console.error('Error adding marker') + } + }) + .catch(error => { + console.error('Error adding marker', error) + }) + closeModalAddMarker() +} -const addMarkerModal = document.getElementById('showAddMarkerModal'); -addMarkerModal.addEventListener('click', showModalAddMarker); +window.addEventListener('load', load) -const modalOverlay = document.getElementById('modalOverlay'); -modalOverlay.addEventListener('click', closeModalAddMarker); +const showAddMarkerModal = document.getElementById('showAddMarkerModal') +showAddMarkerModal.addEventListener('click', () => showModal('modalAddMarker')) -const addMarkerBtn = document.getElementById('addMarker'); -addMarkerBtn.addEventListener('click', addMarker); \ No newline at end of file +const showModalSign = document.getElementById('showModalSign') +showModalSign.addEventListener('click', () => showModal('modalSign')) + +const modalOverlay = document.getElementById('modalOverlay') +modalOverlay.addEventListener('click', closeModal) \ No newline at end of file diff --git a/ruscoapp/public/login.js b/ruscoapp/public/login.js index 25f1c60..5f66fcb 100644 --- a/ruscoapp/public/login.js +++ b/ruscoapp/public/login.js @@ -1,6 +1,11 @@ // login.js document.getElementById('loginForm').addEventListener('submit', function (event) { event.preventDefault(); + + if(event.submitter.id == 'showRegisterForm') { + return showRegisterForm(); + } + const username = document.getElementById('loginUsername').value; const password = document.getElementById('loginPassword').value; // Make a POST request to the server to authenticate the user @@ -25,4 +30,10 @@ document.getElementById('loginForm').addEventListener('submit', function (event) console.error('Error authenticating user', error); }); }); - \ No newline at end of file + + function showRegisterForm(){ + const registerForm = document.getElementById('registerForm') + registerForm.style.display = 'block' + const loginForm = document.getElementById('loginForm') + loginForm.style.display = 'none' + } \ No newline at end of file diff --git a/ruscoapp/public/marker.js b/ruscoapp/public/marker.js new file mode 100644 index 0000000..e69de29 diff --git a/ruscoapp/public/register.js b/ruscoapp/public/register.js index 499b452..e575e1b 100644 --- a/ruscoapp/public/register.js +++ b/ruscoapp/public/register.js @@ -1,6 +1,12 @@ // register.js document.getElementById('registerForm').addEventListener('submit', function (event) { event.preventDefault(); + + if(event.submitter.id == 'showLoginForm') { + return showLoginModal(); + } + + var username = document.getElementById('username').value; var password = document.getElementById('password').value; const data = { username: username, password: password }; @@ -26,4 +32,10 @@ document.getElementById('registerForm').addEventListener('submit', function (eve console.error('Error registering new user', error); }); }); - \ No newline at end of file + + function showLoginModal(){ + const loginForm = document.getElementById('loginForm') + loginForm.style.display = 'block' + const registerForm = document.getElementById('registerForm') + registerForm.style.display = 'none' + } \ No newline at end of file diff --git a/ruscoapp/public/unused.js b/ruscoapp/public/unused.js new file mode 100644 index 0000000..8b7c578 --- /dev/null +++ b/ruscoapp/public/unused.js @@ -0,0 +1,23 @@ +//LOGICA BTN +function preparaDOM () { + const button = document.querySelector('#PMaggiore') + button.addEventListener('click', () => { + //const risposta = prompt("Dammi coordinates"); + const puntoNuovo = { + type: 'Feature', + properties: { + Nome: 'Coors Field', + Descrizione: 'Baseball Stadium' + }, + geometry: { + type: 'Point', + coordinates: piazzaMaggiore + } + } + //PUSH NUOVECOORD + points.push(puntoNuovo) + //RELOAD JSON + L.geoJSON(points).addTo(map) + button.innerHTML = "Aggiungi piu' ombra" + }) +} \ No newline at end of file diff --git a/ruscoapp/server.js b/ruscoapp/server.js index 42b4291..5383d68 100644 --- a/ruscoapp/server.js +++ b/ruscoapp/server.js @@ -1,84 +1,122 @@ -const express = require('express'); -const sqlite3 = require('sqlite3').verbose(); +const express = require('express') +const sqlite3 = require('sqlite3').verbose() const path = require('path') -const bcrypt = require('crypto'); +const bcrypt = require('crypto') -const app = express(); -const port = 3000; +const app = express() +const port = 3000 // Create a new SQLite database in memory -const db = new sqlite3.Database('ruscodb'); +const db = new sqlite3.Database('ruscodb') // Create a table to store data db.serialize(() => { - db.table - db.get(`SELECT name FROM sqlite_master WHERE type='table' AND name='Customers'`, (err, row) => { - if(err){ - db.run("CREATE TABLE items (id INTEGER PRIMARY KEY, name TEXT, description TEXT, image_url TEXT, latitude REAL, longitude REAL)"); - } - }) -}); + db.get( + `SELECT name FROM sqlite_master WHERE type='table' AND name='ruschi';`, + (err, row) => { + if (!row) { + db.run( + 'CREATE TABLE ruschi (id INTEGER PRIMARY KEY, type TEXT, name TEXT, description TEXT, image_url TEXT, latitude REAL, longitude REAL)' + ) + } + } + ) +}) -app.use(express.static(path.join(__dirname, 'public'))); -app.use(express.json()); +app.use(express.static(path.join(__dirname, 'public'))) +app.use(express.json()) // app.get('/', (req, res) => { // res.sendFile('index.html') // }); - // Insert a new item into the database -app.get('/addRuschi', (req, res) => { - const { name, description, image_url, latitude, longitude } = req.query; - db.run("INSERT INTO ruschi (type, nome, descrizione, foto, lat, lng) VALUES (?, ?, ?, ?, ?)", [type, name, description, image_url, latitude, longitude], function (err) { - if (err) { - return console.error(err.message); - } - console.log(`A row has been inserted with rowid ${this.lastID}`); - res.send(`Item added with ID: ${this.lastID}`); - }); -}); +app.post('/addRuschi', (req, res) => { + const { name, description, imageUrl, latitude, longitude } = req.body + const type = 'bho' + db.run( + 'INSERT INTO ruschi (type, name, description, image_url, latitude, longitude) VALUES (?, ?, ?, ?, ?, ?)', + [type, name, description, imageUrl, latitude, longitude], + function (err) { + if (err) { + return console.error(err.message) + } + console.log(`A row has been inserted with rowid ${this.lastID}`) + res.send(`Item added with ID: ${this.lastID}`) + } + ) +}) // Retrieve all items from the database app.get('/getRuschi', (req, res) => { - db.all("SELECT * FROM ruschi", [], (err, rows) => { - if (err) { - return console.error(err.message); - } - res.json(rows); - }); -}); + db.all('SELECT * FROM ruschi', [], (err, rows) => { + if (err) { + return console.error(err.message) + } + let ruschi = [] + rows.forEach(rusco => { + const coordinates = { latitude: rusco.latitude, longitude: rusco.longitude } + const marker = { + type: "Feature", + properties: { + name: rusco.name, + description: rusco.description, + image_url: rusco.image_url, + }, + geometry: { + type: rusco.type, + coordinates: coordinates + } + } + ruschi.push(marker) + }) + return res.json(ruschi) + }) +}) app.post('/login', (req, res) => { - const username = req.body.username; - const password = req.body.password; - const hashedPassword = bcrypt.createHash('sha256').update(password).digest('base64'); //.digest('base64'); + const username = req.body.username + const password = req.body.password + const hashedPassword = bcrypt + .createHash('sha256') + .update(password) + .digest('base64') //.digest('base64'); - db.all("SELECT * FROM users WHERE username = ? AND password = ?", [username, hashedPassword], (err, rows) => { - if (err) { - return console.error(err.message) - } - if(rows.length == 1) { - return res.json('Logged in') - } - return res.json('Incorrect username or password') - }) + db.all( + 'SELECT * FROM users WHERE username = ? AND password = ?', + [username, hashedPassword], + (err, rows) => { + if (err) { + return console.error(err.message) + } + if (rows.length == 1) { + return res.json('Logged in') + } + return res.json('Incorrect username or password') + } + ) }) app.post('/register', (req, res) => { - console.log(req.body) - const username = req.body.username; - const password = req.body.password; - const hashedPassword = bcrypt.createHash('sha256').update(password).digest('base64'); //.digest('base64'); - db.run('insert into users (username, password) VALUES (?, ?)', [username, hashedPassword], (err, rows) => { - if (err) { - return console.error(err.message); - } - res.json('OK'); - }); -}); - + console.log(req.body) + const username = req.body.username + const password = req.body.password + const hashedPassword = bcrypt + .createHash('sha256') + .update(password) + .digest('base64') //.digest('base64'); + db.run( + 'insert into users (username, password) VALUES (?, ?)', + [username, hashedPassword], + (err, rows) => { + if (err) { + return console.error(err.message) + } + res.json('OK') + } + ) +}) // Start the server app.listen(port, () => { - console.log(`Server is running on http://localhost:${port}`); -}); + console.log(`Server is running on http://localhost:${port}`) +})