From 45cd5b10e651ca50bb89a487bcfccb594794282c Mon Sep 17 00:00:00 2001 From: Spacelord Date: Mon, 24 Feb 2025 22:55:28 +0100 Subject: [PATCH] Frontend stuff --- src/routes/frontend/index.ts | 24 ++-- .../{dashboard.ts => product_select.ts} | 2 +- .../frontend/{contact.ts => screensaver.ts} | 2 +- src/routes/frontend/user_select.ts | 7 + static/apiWrapper.js | 3 + static/main.css | 4 + static/pageDriver.js | 11 ++ static/pages/product_select.js | 17 +++ static/pages/user_select.js | 134 ++++++++++++++++++ views/contacts.eta | 119 ---------------- views/index.eta | 2 +- views/partials/base_foot.eta | 2 - views/partials/footer.eta | 2 + views/partials/nav.eta | 8 +- views/product_select.eta | 38 +++++ views/{lockscreen.eta => screensaver.eta} | 0 views/user_select.eta | 97 +++++++++++++ 17 files changed, 330 insertions(+), 142 deletions(-) rename src/routes/frontend/{dashboard.ts => product_select.ts} (66%) rename src/routes/frontend/{contact.ts => screensaver.ts} (82%) create mode 100644 src/routes/frontend/user_select.ts create mode 100644 static/pages/product_select.js create mode 100644 static/pages/user_select.js delete mode 100644 views/contacts.eta create mode 100644 views/product_select.eta rename views/{lockscreen.eta => screensaver.eta} (100%) create mode 100644 views/user_select.eta diff --git a/src/routes/frontend/index.ts b/src/routes/frontend/index.ts index 2b39fef..80147ed 100644 --- a/src/routes/frontend/index.ts +++ b/src/routes/frontend/index.ts @@ -1,25 +1,19 @@ import express from 'express'; +import config from '../../handlers/config.js'; // Route imports -import dashboardRoute from './dashboard.js'; -import testRoute from './test.js'; -import contactRoute from './contact.js'; -// import itemsRoute from './items.js'; -// import manage_routes from './manage/index.js'; +import screensaver_Route from './screensaver.js'; +import user_select_Route from './user_select.js'; +import product_select_Route from './product_select.js'; +import test_Route from './test.js'; // Router base is '/' const Router = express.Router({ strict: false }); -// Router.route('/test').get(testRoute.get); -// Router.route('/items').get(itemsRoute.get); +Router.route('/').get(screensaver_Route.get); +Router.route('/user_select').get(user_select_Route.get); +Router.route('/product_select').get(product_select_Route.get); -// Router.route('/:id(\\w{8})').get(skuRoute.get); -// Router.route('/s/:id').get(skuRouteDash.get); - -// Router.use('/manage', manage_routes); - -Router.route('/').get(dashboardRoute.get); -Router.route('/dbTest').get(testRoute.get); -Router.route('/contact').get(contactRoute.get); +config.global.devmode && Router.route('/test').get(test_Route.get); export default Router; diff --git a/src/routes/frontend/dashboard.ts b/src/routes/frontend/product_select.ts similarity index 66% rename from src/routes/frontend/dashboard.ts rename to src/routes/frontend/product_select.ts index 7b76611..74a8e4b 100644 --- a/src/routes/frontend/dashboard.ts +++ b/src/routes/frontend/product_select.ts @@ -1,7 +1,7 @@ import express, { Request, Response } from 'express'; function get(req: Request, res: Response) { - res.render("lockscreen", { message: "Hello world from eta!" }) + res.render("product_select") } export default { get }; diff --git a/src/routes/frontend/contact.ts b/src/routes/frontend/screensaver.ts similarity index 82% rename from src/routes/frontend/contact.ts rename to src/routes/frontend/screensaver.ts index a629ae4..9555cbe 100644 --- a/src/routes/frontend/contact.ts +++ b/src/routes/frontend/screensaver.ts @@ -1,7 +1,7 @@ import express, { Request, Response } from 'express'; function get(req: Request, res: Response) { - res.render("contacts") + res.render("screensaver") } export default { get }; diff --git a/src/routes/frontend/user_select.ts b/src/routes/frontend/user_select.ts new file mode 100644 index 0000000..ed8472c --- /dev/null +++ b/src/routes/frontend/user_select.ts @@ -0,0 +1,7 @@ +import express, { Request, Response } from 'express'; + +function get(req: Request, res: Response) { + res.render("user_select") +} + +export default { get }; diff --git a/static/apiWrapper.js b/static/apiWrapper.js index 22b1c0b..d4aeee0 100644 --- a/static/apiWrapper.js +++ b/static/apiWrapper.js @@ -32,6 +32,9 @@ let _api = { if (typeof result === 'number') { return result; } + if (typeof result === 'boolean') { + return result; + } console.error('Invalid JSON response'); _testPageFail('Invalid JSON response'); return; diff --git a/static/main.css b/static/main.css index bf1ca6e..b45d2b1 100644 --- a/static/main.css +++ b/static/main.css @@ -1,3 +1,7 @@ body { min-height: 100vh; +} + +hidden { + display: none; } \ No newline at end of file diff --git a/static/pageDriver.js b/static/pageDriver.js index 557f939..25bf3a1 100644 --- a/static/pageDriver.js +++ b/static/pageDriver.js @@ -618,3 +618,14 @@ document.addEventListener('DOMContentLoaded', () => { } }); }); + + +document.addEventListener('DOMContentLoaded', () => { + (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => { + const $notification = $delete.parentNode; + + $delete.addEventListener('click', () => { + $notification.parentNode.removeChild($notification); + }); + }); + }); \ No newline at end of file diff --git a/static/pages/product_select.js b/static/pages/product_select.js new file mode 100644 index 0000000..ba36c2c --- /dev/null +++ b/static/pages/product_select.js @@ -0,0 +1,17 @@ +console.log('product_select.js loaded'); + +// Get containers +let mainSelectionDiv = document.getElementById('mainSelect'); + +const baseStruct = document.getElementById("baseStruct"); + +let globalData; + +// On load +document.addEventListener('DOMContentLoaded', function() { + let data = await returnTableDataByTableName('product'); + console.info(`Found ${data.count} products`); + const result = data.result; + globalData = result; + +}); \ No newline at end of file diff --git a/static/pages/user_select.js b/static/pages/user_select.js new file mode 100644 index 0000000..2d2eb1e --- /dev/null +++ b/static/pages/user_select.js @@ -0,0 +1,134 @@ +console.log('user_select.js loaded'); + +// Get containers +let mainSelectionDiv = document.getElementById('mainSelect'); +let pinPadModal = document.getElementById('pinPadModal'); +let numpad = document.getElementById('numpad'); + +let pinInput1 = document.getElementById('pinInput1'); +let pinInput2 = document.getElementById('pinInput2'); +let pinInput3 = document.getElementById('pinInput3'); +let pinInput4 = document.getElementById('pinInput4'); + +let pinError = document.getElementById('pinError'); + +let currentUser = null; + +// Attach event listeners to all numpad buttons +let numpadButtons = numpad.getElementsByTagName('button'); +for(let i = 0; i < numpadButtons.length; i++) { + let button = numpadButtons[i]; + button.addEventListener('click', handleNumberClick); +} + +// On keyboard input for pinInputX jump to next input field +pinInput1.addEventListener('input', function() { + if(pinInput1.value) { + pinInput2.focus(); + // Update pinValue + pinValue = pinInput1.value; + } +}); +pinInput2.addEventListener('input', function() { + if(pinInput2.value) { + pinInput3.focus(); + pinValue = pinInput1.value + pinInput2.value; + } +} +); +pinInput3.addEventListener('input', function() { + if(pinInput3.value) { + pinInput4.focus(); + pinValue = pinInput1.value + pinInput2.value + pinInput3.value; + } +}); + +pinInput4.addEventListener('input', function() { + if(pinInput4.value) { + pinValue = pinInput1.value + pinInput2.value + pinInput3.value + pinInput4.value; + validatePin(); + } +}); + +let baseStruct = document.getElementById("baseStruct"); + +let globalData; + +let pinValue = ""; + +// On load +document.addEventListener('DOMContentLoaded', async function() { + let data = await returnTableDataByTableName('user'); + console.info(`Found ${data.count} users`); + const result = data.result; + globalData = result; + + for(let i = 0; i < result.length; i++) { + let user = result[i]; + let userDiv = baseStruct.cloneNode(true); + userDiv.id = `user_${user.id}`; + userDiv.innerHTML = user.name; + userDiv.addEventListener('click', handleUserClick); + + mainSelectionDiv.appendChild(userDiv); + } +}); + + +function handleUserClick(e) { + let userDiv = e.target; + let userId = userDiv.id.split('_')[1]; + console.log(`Clicked on user with id ${userId}`); + let user = globalData.find(u => u.id == userId); + currentUser = user; + if(user.code) { + pinPadModal.classList.add('is-active'); + // Automatically focus on the first input field + pinInput1.focus(); + } +} + +function validatePin() { + let pin = pinValue; + let userId = currentUser.id; + console.log(`Validating pin ${pinValue} for user ${userId}`); + _api.get("/user/codecheck?code=" + pinValue + "&id=" + userId).then((response) => { + if(response) { + console.log("Pin is correct"); + pinPadModal.classList.remove('is-active'); + window.location.href = `/product_select?user=${userId}`; + } else { + console.log("Pin is incorrect"); + pinValue = ""; + updatePinFields(); + pinError.classList.remove('is-hidden'); + } + }); +} + +function handleNumberClick(e) { + let number = e.target.innerHTML; + if(number == '' || e.target.classList.contains('bi-backspace-fill')) { + pinValue = pinValue.slice(0, -1); + updatePinFields(); + return; + } + if(number == '' || e.target.classList.contains('bi-check')) { + validatePin(); + return; + } + if(pinValue.length >= 4) { + return; + } + pinValue += number; + updatePinFields(); +} + +function updatePinFields() { + let pin = pinValue; + pinInput1.value = pin[0] || ""; + pinInput2.value = pin[1] || ""; + pinInput3.value = pin[2] || ""; + pinInput4.value = pin[3] || ""; +} + diff --git a/views/contacts.eta b/views/contacts.eta deleted file mode 100644 index 234fb93..0000000 --- a/views/contacts.eta +++ /dev/null @@ -1,119 +0,0 @@ -<%~ include("partials/base_head.eta", {"title": "Kontakte"}) %> -<%~ include("partials/nav.eta") %> - -
-
-

Kontaktverwaltung

-

Erklärungstext

-
-
-
- -
- - - - - - - - -
-

Kontaktübersicht

- - - - - - - - - - - - - - -
PosNameTelefonnummerKommentarAktionen
- -
- -<%~ include("partials/footer.eta") %> -<%~ include("partials/base_foot.eta") %> diff --git a/views/index.eta b/views/index.eta index 5333c68..1065cbb 100644 --- a/views/index.eta +++ b/views/index.eta @@ -1,5 +1,5 @@ <%~ include("partials/base_head.eta", {"title": "Dashboard"}) %> -<%~ include("partials/nav.eta") %> +
diff --git a/views/partials/base_foot.eta b/views/partials/base_foot.eta index 77489c4..308b1d0 100644 --- a/views/partials/base_foot.eta +++ b/views/partials/base_foot.eta @@ -1,4 +1,2 @@ - - diff --git a/views/partials/footer.eta b/views/partials/footer.eta index 3620065..86590fa 100644 --- a/views/partials/footer.eta +++ b/views/partials/footer.eta @@ -7,3 +7,5 @@

+ + \ No newline at end of file diff --git a/views/partials/nav.eta b/views/partials/nav.eta index ceaad32..d3f4d5d 100644 --- a/views/partials/nav.eta +++ b/views/partials/nav.eta @@ -18,9 +18,11 @@