update

2025-07-13 16:45:40 +02:00
parent 550b1b936b
commit b492c0fc38
32 changed files with 6187 additions and 403 deletions
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}
--- a/frontend/env.d.ts
+++ b/frontend/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
    <title>Stocca Tre Pizzeria</title>
 </head>
 <body>
-<div id="root"><!-- app goes here --></div>
+<div id="app"><!-- app goes here --></div>
 <script type="module" src="./src/main.ts"></script>
 </body>
-</html>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,21 +1,31 @@
 {
-  "name": "stocca-tre",
-  "version": "0.0.1",
-  "description": "pizza im dritten stock",
+  "name": "stocca-tre-frontend",
+  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
-    "build": "vite build"
+    "build": "run-p type-check build-only",
+    "preview": "vite preview --port 4173",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
-  "repository": {
-    "type": "git",
-    "url": "https://git.djledda.de/Ledda/stocca-tre.git"
-  },
-  "author": "Daniel Ledda",
-  "license": "MIT",
  "dependencies": {
-    "@djledda/ladder": "^1.0.2",
-    "@types/node": "^17.0.41",
-    "sass": "^1.52.2",
-    "vite": "^2.9.10"
+    "pinia": "^2.0.21",
+    "vue": "^3.2.38",
+    "vue-router": "^4.1.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^16.11.56",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "prettier": "^2.7.1",
+    "typescript": "~4.7.4",
+    "vite": "^3.0.9",
+    "vue-tsc": "^0.40.7"
  }
 }
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,22 @@
+<template>
+    <header>
+        <img alt="Stocca Tre Logo" class="logo" src="@/assets/stocca-tre-logo.svg" width="125" height="125" />
+
+        <div class="wrapper">
+            <nav>
+                <RouterLink to="/">Home</RouterLink>
+                <RouterLink to="/about">About</RouterLink>
+            </nav>
+        </div>
+    </header>
+ 
+    <RouterView />
+</template>
+
+<script setup lang="ts">
+import { RouterView, RouterLink } from 'vue-router';
+import { useIngredientStore } from '@/stores/ingredients';
+</script>
+
+<style scoped>
+</style>
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -0,0 +1 @@
+@import "./base.css";
--- a/frontend/src/filetypes.d.ts
+++ b/frontend/src/filetypes.d.ts
@@ -1,4 +0,0 @@
-declare module "*.svg" {
-    declare const svg: string;
-    export default svg;
-}
--- a/frontend/src/global.scss
+++ b/frontend/src/global.scss
@@ -1,10 +0,0 @@
-:root {
-  --bg-color: #e8e2e2;
-  --red-deep: #aa0000;
-  --red-shallow: #dc8383;
-}
-
-html, body {
-  padding: 0;
-  margin: 0;
-}
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,14 @@
-import { bootstrap } from '@djledda/ladder';
-import StoccaTreRoot from './ui/StoccaTreRoot';
-import './global.scss';
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';

-bootstrap(new StoccaTreRoot(), "root");
+import router from '@/router';
+import App from '@/App.vue';
+
+import '@/assets/main.css';
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount('#app');
--- a/frontend/src/pages/About.vue
+++ b/frontend/src/pages/About.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
--- a/frontend/src/pages/Home.vue
+++ b/frontend/src/pages/Home.vue
@@ -0,0 +1,9 @@
+<template>
+  <main>
+    Welcome to your new {{ thing }}.
+  </main>
+</template>
+
+<script setup lang="ts">
+const thing = "app";
+</script>
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '@/pages/Home.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('@/pages/About.vue')
+    }
+  ]
+});
+
+export default router;
--- a/frontend/src/stores/ingredients.ts
+++ b/frontend/src/stores/ingredients.ts
@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia';
+
+export const useIngredientStore = defineStore('ingredient', () => {
+  const ingredients = [ "cheese baby" ];
+
+  return { ingredients };
+});
--- a/frontend/src/ui/StoccaTreRoot/index.tsx
+++ b/frontend/src/ui/StoccaTreRoot/index.tsx
@@ -1,81 +0,0 @@
-import { Capsule, h, Rung } from "@djledda/ladder";
-import StoccaTreLogo from "@/assets/stocca-tre-logo.svg";
-import "./stocca-tre-root.scss";
-import IngredientsPage from "../pages/IngredientsPage";
-
-export default class StoccaTreRoot extends Rung {
-    private tabContainer = Capsule.new<HTMLUListElement | null>(null);
-    private tabs: HTMLLIElement[] = [];
-    private mainContent = Capsule.new<HTMLDivElement | null>(null);
-
-    constructor() {
-        super({});
-    }
-
-    deselectTab(index: number) {
-        this.tabs[index]?.classList.remove("active");
-    }
-
-    selectTab(index: number) {
-        for (let i = 0; i < this.tabs.length; i++) {
-            if (i === index) {
-                this.tabs[i]?.classList.add("active");
-            } else {
-                this.deselectTab(i);
-            }
-        }
-        if (index === 2) {
-            this.mainContent.val?.firstChild?.replaceWith(<div>{new IngredientsPage({})}</div>)
-        } else {
-            this.mainContent.val?.firstChild?.replaceWith(<div></div>);
-        }
-    }
-
-    Tab = (props: { label: string }) => {
-        const index = this.tabs.length;
-        const tab = <li
-            onclick={() => {
-                this.selectTab(index);
-            }}>
-            { props.label }
-        </li> as HTMLLIElement;
-        this.tabs.push(tab);
-        return tab;
-    }
-
-    returnToHome(): void {
-        this.tabs.forEach((tab, i) => this.deselectTab(i));
-        this.mainContent.val?.firstChild?.replaceWith(<this.Home />)
-    }
-
-    Home = () => {
-        return <div>Navigiere auf eine Unterseite!</div>;
-    }
-
-    build(): Node {
-        this.tabs = [];
-        return <div className={"stocca-tre-root"}>
-            <nav className={"headstock"}>
-                <a>
-                    <div>
-                        <img className={"logo"} onclick={() => this.returnToHome()} alt={"Stocca Tre Pizzera"}
-                             src={StoccaTreLogo}/>
-                    </div>
-                </a>
-                <ul className={"tabs"} saveTo={this.tabContainer}>
-                    <this.Tab label={"Bestellen"} />
-                    <this.Tab label={"Abstimmung nächste Runde"} />
-                    <this.Tab label={"Zutaten"} />
-                </ul>
-            </nav>
-            <header>
-            </header>
-            <section saveTo={this.mainContent}>
-                {/* Main Content */}
-                <this.Home />
-            </section>
-            <footer>
-            </footer>
-        </div>;
-    }
-}
--- a/frontend/src/ui/StoccaTreRoot/stocca-tre-root.scss
+++ b/frontend/src/ui/StoccaTreRoot/stocca-tre-root.scss
@@ -1,35 +0,0 @@
-.stocca-tre-root {
-  width: 1200px;
-  margin: auto;
-  cursor: pointer;
-
-  .headstock {
-    text-align: center;
-    background-color: var(--bg-color);
-    height: 100%;
-
-    .logo {
-      margin: 20px auto auto auto;
-      --height: 100px;
-      padding: calc(0.2 * var(--height));
-      height: var(--height);
-    }
-
-    ul.tabs {
-      list-style: none;
-      padding: 0;
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      li {
-        flex: 1;
-        padding: 20px;
-        display: inline-block;
-        &:hover, &.active {
-          background-color: var(--red-shallow);
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
--- a/frontend/src/ui/pages/IngredientsPage/index.tsx
+++ b/frontend/src/ui/pages/IngredientsPage/index.tsx
@@ -1,60 +0,0 @@
-import {h, frag, Rung, RungOptions, Capsule, ICapsule} from "@djledda/ladder";
-
-function list<Item extends any, Transform extends Element>(list: ICapsule<Item[]>, transform: (item: Item) => Transform, reuse?: (old: Transform) => Transform) {
-    let items: (Comment | Transform)[] = list.val.map(item => transform(item));
-    list.watch((newList) => {
-        const firstItem = items[0];
-        if (!firstItem) {
-            return;
-        }
-        const newItems = newList.map(item => transform(item));
-        for (const item of newItems) {
-            firstItem.parentElement?.replaceChildren(...newItems);
-        }
-        items = newItems;
-        if (items.length < 1) {
-            items.push(document.createComment("<!-- placeholder -->"));
-        }
-    });
-    if (items.length < 1) {
-        items.push(document.createComment("<!-- placeholder -->"));
-    }
-    return items;
-}
-
-export default class IngredientsPage extends Rung {
-    private ingredients = Capsule.new<any[]>([]);
-    private ingredientInput = Capsule.new<HTMLInputElement | null>(null);
-
-    constructor(options: RungOptions) {
-        super({});
-    }
-
-    async addIngredient() {
-        await fetch("http://localhost:8080/ingredients/add", {
-            body: this.ingredientInput.val?.value ?? "{}",
-            method: "POST",
-        });
-        this.ingredients.val.push(JSON.parse(this.ingredientInput.val?.value ?? "{}"));
-        this.ingredients.val = this.ingredients.val;
-    }
-
-    async getIngredients() {
-        const result = await (await fetch("http://localhost:8080/ingredients/all")).json();
-        this.ingredients.val = result.data.ingredients;
-    }
-
-    build(): Node {
-        const node = <>
-            <ul>
-                {...list(this.ingredients, _ =>
-                    <li>{_.displayNameDE}, hinzugefügt von {`${_.addedBy}`}</li> as HTMLDivElement)
-                }
-            </ul>
-            <input type={"text"} saveTo={this.ingredientInput} />
-            <button onclick={() => this.addIngredient()}>Submit!</button>
-        </>;
-        this.getIngredients();
-        return node;
-    }
-}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,7 +1,17 @@
 {
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "allowJs": false,
-    "lib": [ "ES2021", "DOM", "DOM.Iterable" ]
-  }
+    "include": [
+        "vite.config.*",
+        "vitest.config.*",
+        "cypress.config.*",
+        "./src/**/*"
+    ],
+    "compilerOptions": {
+        "target": "es2020",
+        "moduleResolution": "node",
+        "module": "es2015",
+        "strict": true,
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    }
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,12 +1,14 @@
-import { defineConfig } from "vite";
-import path from "path";
+import { fileURLToPath, URL } from 'node:url';

-const config = defineConfig({
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
    resolve: {
        alias: {
-            "@": path.resolve(__dirname, "./src"),
-        }
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
    },
 });
-
-export default config;