Coffee Masters

From d5a420a8135537c9fc36f9dd81ec7c9fc0500e66 Mon Sep 17 00:00:00 2001 From: Leo Goetz Date: Thu, 29 Jan 2026 14:55:56 +0100 Subject: feat: added router, api and data --- app.js | 13 +++++ index.html | 154 +++++++++++++++++++++++++++++------------------------ services/API.js | 10 ++++ services/Menu.js | 5 ++ services/Router.js | 61 +++++++++++++++++++++ services/Store.js | 8 +++ 6 files changed, 180 insertions(+), 71 deletions(-) create mode 100644 app.js create mode 100644 services/API.js create mode 100644 services/Menu.js create mode 100644 services/Router.js create mode 100644 services/Store.js diff --git a/app.js b/app.js new file mode 100644 index 0000000..57bddfe --- /dev/null +++ b/app.js @@ -0,0 +1,13 @@ +import Store from "./services/Store.js"; +import { loadData } from "./services/Menu.js"; +import Router from "./services/Router.js"; + +window.app = { + store: Store, + router: Router, +}; + +window.addEventListener("DOMContentLoaded", () => { + loadData(); + app.router.init(); +}); diff --git a/index.html b/index.html index 12a7c31..6ef46ee 100644 --- a/index.html +++ b/index.html @@ -1,94 +1,106 @@ - + - - - + + + Coffee Masters - - - - + + + + - - - - - + - + + + + + + +

- +

- - \ No newline at end of file + + diff --git a/services/API.js b/services/API.js new file mode 100644 index 0000000..b28feba --- /dev/null +++ b/services/API.js @@ -0,0 +1,10 @@ +const API = { + // url: "https://firtman.github.io/coffeemasters/api/menu.json", + url: "/data/menu.json", + fetchMenu: async () => { + const result = await fetch(API.url); + return await result.json(); + }, +}; + +export default API; diff --git a/services/Menu.js b/services/Menu.js new file mode 100644 index 0000000..88e3f35 --- /dev/null +++ b/services/Menu.js @@ -0,0 +1,5 @@ +import API from "./API.js"; + +export async function loadData() { + app.store.menu = await API.fetchMenu(); +} diff --git a/services/Router.js b/services/Router.js new file mode 100644 index 0000000..13ef58e --- /dev/null +++ b/services/Router.js @@ -0,0 +1,61 @@ +const Router = { + init: () => { + document.querySelectorAll("a.navlink").forEach((a) => { + a.addEventListener("click", (event) => { + event.preventDefault(); + const url = event.target.getAttribute("href"); + Router.go(url); + }); + }); + // Event Handler for URL changes + window.addEventListener("popstate", (event) => { + Router.go(event.state.route, false); + }); + + // Check inital URL + Router.go(location.pathname); + }, + + go: (route, addToHistory = true) => { + console.log("Going to route" + route); + + if (addToHistory) { + history.pushState({ route }, "", route); + } + + let pageElement = null; + + switch (route) { + case "/": + pageElement = document.createElement("h1"); + pageElement.textContent = "Menu"; + break; + case "/order": + pageElement = document.createElement("h1"); + pageElement.textContent = "Your Order"; + break; + default: + if (route.startsWith("/product-")) { + pageElement = document.createElement("h1"); + pageElement.textContent = "Your Order"; + const paramId = route.substring(route.lastIndexOf("-") + 1); + // Dataset is great for storing costum data because it doesnt get + // parsed by the browser + pageElement.dataset.id = paramId; + } + } + + if (pageElement) { + // document.querySelector("main").children[0].remove(); + + // For little Performance Improvement + const cache = document.querySelector("main"); + cache.innerHTML = ""; + cache.appendChild(pageElement); + window.screenX = 0; + window.screenY = 0; + } + }, +}; + +export default Router; diff --git a/services/Store.js b/services/Store.js new file mode 100644 index 0000000..979a5a6 --- /dev/null +++ b/services/Store.js @@ -0,0 +1,8 @@ +import API from "./API.js"; + +const Store = { + menu: null, + cart: [], +}; + +export default Store; -- cgit v1.3