Ledda/stocca-tre
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2025-07-13 16:45:40 +02:00
parent 550b1b936b
commit b492c0fc38
32 changed files with 6187 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/App.vue Normal file
View File

@@ -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>

74
frontend/src/assets/base.css Normal file
View File

@@ -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;
}

1
frontend/src/assets/main.css Normal file
View File

@@ -0,0 +1 @@
@import "./base.css";

4
frontend/src/filetypes.d.ts vendored
View File

@@ -1,4 +0,0 @@
declare module "*.svg" {
declare const svg: string;
export default svg;
}

10
frontend/src/global.scss
View File

@@ -1,10 +0,0 @@
:root {
--bg-color: #e8e2e2;
--red-deep: #aa0000;
--red-shallow: #dc8383;
}
html, body {
padding: 0;
margin: 0;
}

17
frontend/src/main.ts
View File

@@ -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');

15
frontend/src/pages/About.vue Normal file
View File

@@ -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>

9
frontend/src/pages/Home.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<main>
Welcome to your new {{ thing }}.
</main>
</template>
<script setup lang="ts">
const thing = "app";
</script>

20
frontend/src/router/index.ts Normal file
View File

@@ -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;

7
frontend/src/stores/ingredients.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineStore } from 'pinia';
export const useIngredientStore = defineStore('ingredient', () => {
const ingredients = [ "cheese baby" ];
return { ingredients };
});

81
frontend/src/ui/StoccaTreRoot/index.tsx
View File

@@ -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>;
}
}

35
frontend/src/ui/StoccaTreRoot/stocca-tre-root.scss
View File

@@ -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;
}
}
}
}
}

60
frontend/src/ui/pages/IngredientsPage/index.tsx
View File

@@ -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;
}
}