From 406e846f8a479fa2aca743f799f92217fe46faff Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Tue, 10 Dec 2024 14:55:50 +0100 Subject: [PATCH 1/3] added board year as submit option, renamed uploadImage to uploadStickers. Added board year to popup --- server.py | 6 +++--- static/js/common.js | 1 + static/js/map.js | 1 + static/js/{uploadImage.js => uploadSticker.js} | 1 + templates/home.html | 7 ++++++- 5 files changed, 12 insertions(+), 4 deletions(-) rename static/js/{uploadImage.js => uploadSticker.js} (98%) diff --git a/server.py b/server.py index 39907a9..5d185b7 100644 --- a/server.py +++ b/server.py @@ -37,8 +37,8 @@ cursor = con.cursor() -cursor.execute("CREATE TABLE IF NOT EXISTS stickers (stickerID SERIAL PRIMARY KEY, stickerLat Decimal(8,6), stickerLon Decimal(9,6), logoID INT, pictureUrl VARCHAR(255), adderEmail VARCHAR(255), postTime TIMESTAMP, spots INT, verified INT)") -# cursor.execute("INSERT INTO stickers (stickerLat, stickerLon, logoId, pictureUrl, adderEmail, verified) VALUES (52.1630587, 5.402001, 1, 'zwart 1920x1080.png', 'aron.den.ouden@gmail.com', 1)") +cursor.execute("DROP TABLE stickers") +cursor.execute("CREATE TABLE IF NOT EXISTS stickers (stickerID SERIAL PRIMARY KEY, stickerLat Decimal(8,6), stickerLon Decimal(9,6), logoID INT, pictureUrl VARCHAR(255), adderEmail VARCHAR(255), postTime TIMESTAMP, spots INT, boardYear INT, verified INT)") con.commit() @@ -152,7 +152,7 @@ def uploadSticker(): cursor = con.cursor() # cursor.execute("INSERT INTO stickers (stickerLat, stickerLon, logoId, pictureUrl, adderEmail) VALUES (%s,%s,%s,%s,%s)", (request.form['lat'], request.form['lon'], request.form['logoId'], os.path.join(UPLOAD_DIRECTORY, filename), emailCode)) - cursor.execute("INSERT INTO stickers (stickerLat, stickerLon, logoId, pictureUrl, adderEmail, postTime, spots, verified) VALUES (%s,%s,%s,%s,%s,%s,%s,%s)", (request.form['lat'], request.form['lon'], 1, os.path.join(UPLOAD_DIRECTORY, filename), emailCode, currentTime, 0, 1)) + cursor.execute("INSERT INTO stickers (stickerLat, stickerLon, logoId, pictureUrl, adderEmail, postTime, spots, boardYear, verified) VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s)", (request.form['lat'], request.form['lon'], 1, os.path.join(UPLOAD_DIRECTORY, filename), emailCode, currentTime, 0, request.form['boardYear'], 1)) con.commit() return json.dumps({'status': '200', 'error': 'Sticker added to database.', 'emailCode': emailCode}), 200 else: diff --git a/static/js/common.js b/static/js/common.js index aa6a3ec..1c91899 100644 --- a/static/js/common.js +++ b/static/js/common.js @@ -8,6 +8,7 @@ const longitudeInput = document.getElementById('longitudeInput'); const locationContainerText = document.getElementsByClassName('locationContainerText')[0]; const locationIcon = document.getElementsByClassName('locationIcon')[0]; const locationContainerSpinner = document.getElementsByClassName('locationContainerSpinner')[0]; +const boardYearInput = document.getElementById('boardYearInput'); const submitButton = document.getElementsByClassName('addSubmitButton')[0]; const addLogoSelector = document.getElementsByClassName('addLogoSelector')[0]; const addIcon = document.getElementsByClassName('addIcon')[0]; diff --git a/static/js/map.js b/static/js/map.js index c16921d..e8f66a8 100644 --- a/static/js/map.js +++ b/static/js/map.js @@ -77,6 +77,7 @@ function updateMap() {

${results[x][7]} ${spotText}

Posted ${dayjs().to(dayjs(results[x][6]))}

+

Board year: ${results[x][8]}

`) pointer.pointer.on('popupopen', function (e) { diff --git a/static/js/uploadImage.js b/static/js/uploadSticker.js similarity index 98% rename from static/js/uploadImage.js rename to static/js/uploadSticker.js index 370a5f9..b1786b1 100644 --- a/static/js/uploadImage.js +++ b/static/js/uploadSticker.js @@ -107,5 +107,6 @@ function submit(){ formdata.append('lat', latitudeInput.value); formdata.append('lon', longitudeInput.value); formdata.append('logoId', selectedLogoId); + formdata.append('boardYear', boardYearInput.value); request.send(formdata); } \ No newline at end of file diff --git a/templates/home.html b/templates/home.html index 806ef47..a48c743 100644 --- a/templates/home.html +++ b/templates/home.html @@ -44,6 +44,11 @@ Click to upload +
@@ -72,7 +77,7 @@ - + From dd9fce98f64454b7efd73f5f96ff66f170eca670 Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Wed, 11 Dec 2024 12:27:13 +0100 Subject: [PATCH 2/3] Worked on visuals: added board year colors to css, used board year colors as background for dropdown and in markers on the map. Also created a folder with markers for each board year so each marker has the proper color --- server.py | 1 - static/css/home.css | 137 ++++++++++++++++++++++++++++++- static/img/markers/marker-1.svg | 5 ++ static/img/markers/marker-10.svg | 5 ++ static/img/markers/marker-11.svg | 5 ++ static/img/markers/marker-12.svg | 5 ++ static/img/markers/marker-13.svg | 5 ++ static/img/markers/marker-14.svg | 5 ++ static/img/markers/marker-15.svg | 5 ++ static/img/markers/marker-16.svg | 5 ++ static/img/markers/marker-17.svg | 5 ++ static/img/markers/marker-18.svg | 5 ++ static/img/markers/marker-19.svg | 5 ++ static/img/markers/marker-2.svg | 5 ++ static/img/markers/marker-3.svg | 5 ++ static/img/markers/marker-4.svg | 5 ++ static/img/markers/marker-5.svg | 5 ++ static/img/markers/marker-6.svg | 5 ++ static/img/markers/marker-7.svg | 5 ++ static/img/markers/marker-8.svg | 5 ++ static/img/markers/marker-9.svg | 5 ++ static/js/common.js | 2 +- static/js/map.js | 6 +- templates/home.html | 30 +++++-- 24 files changed, 259 insertions(+), 12 deletions(-) create mode 100644 static/img/markers/marker-1.svg create mode 100644 static/img/markers/marker-10.svg create mode 100644 static/img/markers/marker-11.svg create mode 100644 static/img/markers/marker-12.svg create mode 100644 static/img/markers/marker-13.svg create mode 100644 static/img/markers/marker-14.svg create mode 100644 static/img/markers/marker-15.svg create mode 100644 static/img/markers/marker-16.svg create mode 100644 static/img/markers/marker-17.svg create mode 100644 static/img/markers/marker-18.svg create mode 100644 static/img/markers/marker-19.svg create mode 100644 static/img/markers/marker-2.svg create mode 100644 static/img/markers/marker-3.svg create mode 100644 static/img/markers/marker-4.svg create mode 100644 static/img/markers/marker-5.svg create mode 100644 static/img/markers/marker-6.svg create mode 100644 static/img/markers/marker-7.svg create mode 100644 static/img/markers/marker-8.svg create mode 100644 static/img/markers/marker-9.svg diff --git a/server.py b/server.py index 5d185b7..944d853 100644 --- a/server.py +++ b/server.py @@ -37,7 +37,6 @@ cursor = con.cursor() -cursor.execute("DROP TABLE stickers") cursor.execute("CREATE TABLE IF NOT EXISTS stickers (stickerID SERIAL PRIMARY KEY, stickerLat Decimal(8,6), stickerLon Decimal(9,6), logoID INT, pictureUrl VARCHAR(255), adderEmail VARCHAR(255), postTime TIMESTAMP, spots INT, boardYear INT, verified INT)") con.commit() diff --git a/static/css/home.css b/static/css/home.css index ca494d1..b1d4ac1 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -1,7 +1,27 @@ /* SETTINGS */ :root { - /* Color Variables */ + /* Board Color Variables */ --board-color: #197052; /* primary color of the current board of Sticky */ + --board-18-color: rgb(97, 81, 143); /* #61518f */ + --board-17-color: rgb(41, 115, 143); /* #29738f */ + --board-16-color: rgb(128, 8, 22); /* #800816 */ + --board-15-color: rgb(254, 114, 21); /* #fe7215 */ + --board-14-color: rgb(197, 63, 120); /* #c53f78 */ + --board-13-color: rgb(32, 115, 13); /* #20730d */ + --board-12-color: rgb(0, 0, 120); /* #000078 */ + --board-11-color: rgb(206, 32, 41); /* #ce2029 */ + --board-10-color: rgb(255, 127, 0); /* #ff7f00 */ + --board-9-color: rgb(70, 196, 255); /* #46c4ff */ + --board-8-color: rgb(72, 42, 129); /* #482a81 */ + --board-7-color: rgb(108, 17, 34); /* #6c1122 */ + --board-6-color: rgb(65, 105, 225); /* #4169e1 */ + --board-5-color: rgb(170, 170, 170); /* #aaaaaa */ + --board-4-color: rgb(183, 224, 147); /* #b7e093 */ + --board-3-color: rgb(170, 170, 170); /* #aaaaaa */ + --board-2-color: rgb(170, 170, 170); /* #aaaaaa */ + --board-1-color: rgb(255, 127, 0); /* #ff7f00 */ + + /* Miscellaneous Color Variables */ --secondary-color: #ffffff; /* light color that works in combination with primary board color */ --background-color: #ffffff; /* general light background color */ --element-background-color: #e0e0e0; /* Light grey color for sticker div background */ @@ -90,7 +110,7 @@ button, .addSubmitButton { background-color: var(--background-color); position: fixed; z-index: 2; - top: -500px; + top: -100%; width: 100%; max-width: 500px; display: flex; @@ -195,6 +215,7 @@ button, .addSubmitButton { margin-left: 20px; margin-right: 20px; margin-top: 3px; + color: green; } .addInput{ @@ -279,6 +300,99 @@ button, .addSubmitButton { transition: background-color 0.2s; } +.boarYearInput { + display: flex; + margin: 15 20px; +} + +#boardYearInputSelect { + margin-left: 1rem; +} + +#boardYearInputSelect option { + color: var(--light-text-color); +} + +#boardYearInputSelect option:hover { + background-color: #00ff33; +} + +#boardYearInputSelect option:nth-child(1), .marker-B1 { + background: var(--board-1-color); +} + +#boardYearInputSelect option:nth-child(2), .marker-B2 { + background: var(--board-2-color); +} + +#boardYearInputSelect option:nth-child(3), .marker-B3 { + background: var(--board-3-color); +} + +#boardYearInputSelect option:nth-child(4), .marker-B4 { + background: var(--board-4-color); +} + +#boardYearInputSelect option:nth-child(5), .marker-B5 { + background: var(--board-5-color); +} + +#boardYearInputSelect option:nth-child(6), .marker-B6 { + background: var(--board-6-color); +} + +#boardYearInputSelect option:nth-child(7), .marker-B7 { + background: var(--board-7-color); +} + +#boardYearInputSelect option:nth-child(8), .marker-B8 { + background: var(--board-8-color); +} + +#boardYearInputSelect option:nth-child(9), .marker-B9 { + background: var(--board-9-color); +} + +#boardYearInputSelect option:nth-child(10), .marker-B10 { + background: var(--board-10-color); +} + +#boardYearInputSelect option:nth-child(11), .marker-B11 { + background: var(--board-11-color); +} + +#boardYearInputSelect option:nth-child(12), .marker-B12 { + background: var(--board-12-color); +} + +#boardYearInputSelect option:nth-child(13), .marker-B13 { + background: var(--board-13-color); +} + +#boardYearInputSelect option:nth-child(14), .marker-B14 { + background: var(--board-14-color); +} + +#boardYearInputSelect option:nth-child(15), .marker-B15 { + background: var(--board-15-color); +} + +#boardYearInputSelect option:nth-child(16), .marker-B16 { + background: var(--board-16-color); +} + +#boardYearInputSelect option:nth-child(17), .marker-B17 { + background: var(--board-17-color); +} + +#boardYearInputSelect option:nth-child(18), .marker-B18 { + background: var(--board-18-color); +} + +#boardYearInputSelect option:nth-child(19), .marker-B19 { + background: var(--board-color); +} + /* .logoElementSelected{ background-color: rgba(155, 155, 155, 0.329); } */ @@ -287,6 +401,7 @@ button, .addSubmitButton { animation: submitPressed 2s infinite; } + /* Sticker adding: adding succes */ .successView{ background-color: var(--background-color); @@ -361,6 +476,24 @@ button, .addSubmitButton { width: 80%; } +.markerBoardYearDiv { + display: flex; + width: 100%; +} + +.markerBoardYearText { + /* width: 70%;\ */ +} + +.markerBoardYear { + color: var(--light-text-color); + border-radius: 2rem; + text-align: center; + width: 2rem; + margin: 0 0.5rem; + justify-self: center; +} + /* Maybe add styling for when you hover or click a button? */ .leafletMarkerButton:hover { /* background-color:#be0202; */ diff --git a/static/img/markers/marker-1.svg b/static/img/markers/marker-1.svg new file mode 100644 index 0000000..14aae98 --- /dev/null +++ b/static/img/markers/marker-1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-10.svg b/static/img/markers/marker-10.svg new file mode 100644 index 0000000..14aae98 --- /dev/null +++ b/static/img/markers/marker-10.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-11.svg b/static/img/markers/marker-11.svg new file mode 100644 index 0000000..240fee1 --- /dev/null +++ b/static/img/markers/marker-11.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-12.svg b/static/img/markers/marker-12.svg new file mode 100644 index 0000000..ec36a4d --- /dev/null +++ b/static/img/markers/marker-12.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-13.svg b/static/img/markers/marker-13.svg new file mode 100644 index 0000000..377c3c0 --- /dev/null +++ b/static/img/markers/marker-13.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-14.svg b/static/img/markers/marker-14.svg new file mode 100644 index 0000000..9bdba21 --- /dev/null +++ b/static/img/markers/marker-14.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-15.svg b/static/img/markers/marker-15.svg new file mode 100644 index 0000000..e62633a --- /dev/null +++ b/static/img/markers/marker-15.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-16.svg b/static/img/markers/marker-16.svg new file mode 100644 index 0000000..201b296 --- /dev/null +++ b/static/img/markers/marker-16.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-17.svg b/static/img/markers/marker-17.svg new file mode 100644 index 0000000..08ec69c --- /dev/null +++ b/static/img/markers/marker-17.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-18.svg b/static/img/markers/marker-18.svg new file mode 100644 index 0000000..2272521 --- /dev/null +++ b/static/img/markers/marker-18.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-19.svg b/static/img/markers/marker-19.svg new file mode 100644 index 0000000..96a29ce --- /dev/null +++ b/static/img/markers/marker-19.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-2.svg b/static/img/markers/marker-2.svg new file mode 100644 index 0000000..e716259 --- /dev/null +++ b/static/img/markers/marker-2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-3.svg b/static/img/markers/marker-3.svg new file mode 100644 index 0000000..e716259 --- /dev/null +++ b/static/img/markers/marker-3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-4.svg b/static/img/markers/marker-4.svg new file mode 100644 index 0000000..cc29e16 --- /dev/null +++ b/static/img/markers/marker-4.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-5.svg b/static/img/markers/marker-5.svg new file mode 100644 index 0000000..e716259 --- /dev/null +++ b/static/img/markers/marker-5.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-6.svg b/static/img/markers/marker-6.svg new file mode 100644 index 0000000..c6ea74a --- /dev/null +++ b/static/img/markers/marker-6.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-7.svg b/static/img/markers/marker-7.svg new file mode 100644 index 0000000..36d54ba --- /dev/null +++ b/static/img/markers/marker-7.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-8.svg b/static/img/markers/marker-8.svg new file mode 100644 index 0000000..bdd0b1d --- /dev/null +++ b/static/img/markers/marker-8.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/markers/marker-9.svg b/static/img/markers/marker-9.svg new file mode 100644 index 0000000..5bfeb7d --- /dev/null +++ b/static/img/markers/marker-9.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/js/common.js b/static/js/common.js index 1c91899..c5f910d 100644 --- a/static/js/common.js +++ b/static/js/common.js @@ -8,7 +8,7 @@ const longitudeInput = document.getElementById('longitudeInput'); const locationContainerText = document.getElementsByClassName('locationContainerText')[0]; const locationIcon = document.getElementsByClassName('locationIcon')[0]; const locationContainerSpinner = document.getElementsByClassName('locationContainerSpinner')[0]; -const boardYearInput = document.getElementById('boardYearInput'); +const boardYearInput = document.getElementById('boardYearInputSelect'); const submitButton = document.getElementsByClassName('addSubmitButton')[0]; const addLogoSelector = document.getElementsByClassName('addLogoSelector')[0]; const addIcon = document.getElementsByClassName('addIcon')[0]; diff --git a/static/js/map.js b/static/js/map.js index e8f66a8..3e2575d 100644 --- a/static/js/map.js +++ b/static/js/map.js @@ -48,7 +48,7 @@ function updateMap() { if(isNotOnMap){ //Not on map, add the pointer var stickyIcon = L.icon({ - iconUrl: '/static/img/marker.png', + iconUrl: `/static/img/markers/marker-${results[x][8]}.svg`, shadowUrl: '/static/img/markerShadow.png', iconSize: [38, 52], shadowSize: [52, 52], @@ -77,7 +77,9 @@ function updateMap() {

${results[x][7]} ${spotText}

Posted ${dayjs().to(dayjs(results[x][6]))}

-

Board year: ${results[x][8]}

+
+

Board year:

${results[x][8]}

+
`) pointer.pointer.on('popupopen', function (e) { diff --git a/templates/home.html b/templates/home.html index a48c743..6b74fd4 100644 --- a/templates/home.html +++ b/templates/home.html @@ -44,12 +44,30 @@ Click to upload - - +
+ + +
From c56ff93f2eb132701e2df640d21a4471029f21e0 Mon Sep 17 00:00:00 2001 From: Aron den Ouden Date: Mon, 16 Dec 2024 21:19:46 +0100 Subject: [PATCH 3/3] remove color:green; (this was a for testing purposes only, so should have been removed) --- static/css/home.css | 1 - 1 file changed, 1 deletion(-) diff --git a/static/css/home.css b/static/css/home.css index b1d4ac1..712b8a8 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -215,7 +215,6 @@ button, .addSubmitButton { margin-left: 20px; margin-right: 20px; margin-top: 3px; - color: green; } .addInput{