feat: things are happening...

frontend/src/StoccaTreRoot/index.tsx

@@ -1,27 +0,0 @@
-import { h, Rung } from "@djledda/ladder";
-import StoccaTreLogo from "@/assets/stocca-tre-logo.svg";
-import "./stocca-tre-root.scss";
-
-export default class StoccaTreRoot extends Rung {
-    constructor() {
-        super({});
-    }
-
-    build(): Node {
-        return <div className={"stocca-tre-root"}>
-            <header className={"headstock"}>
-                <div>
-                    <img className={"logo"} alt={"Stocca Tre Pizzera"} src={StoccaTreLogo} />
-                </div>
-                <ul className={"tabs"}>
-                    <li>
-                        Bestellen
-                    </li>
-                    <li>
-                        Abstimmung Nächste Runde
-                    </li>
-                </ul>
-            </header>
-        </div>;
-    }
-}

frontend/src/global.scss

@@ -1,7 +1,7 @@
 :root {
   --bg-color: #e8e2e2;
   --red-deep: #aa0000;
-  --red-shallow: #ec563f;
+  --red-shallow: #dc8383;
 }
 
 html, body {

frontend/src/main.ts

@@ -1,5 +1,5 @@
 import { bootstrap } from '@djledda/ladder';
-import StoccaTreRoot from './StoccaTreRoot';
+import StoccaTreRoot from './ui/StoccaTreRoot';
 import './global.scss';
 
 bootstrap(new StoccaTreRoot(), "root");

frontend/src/ui/StoccaTreRoot/index.tsx

@@ -0,0 +1,81 @@
+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>;
+    }
+}

frontend/src/ui/StoccaTreRoot/stocca-tre-root.scss

@@ -1,10 +1,12 @@
 .stocca-tre-root {
+  width: 1200px;
+  margin: auto;
+  cursor: pointer;
+
   .headstock {
-    width: 1200px;
     text-align: center;
     background-color: var(--bg-color);
     height: 100%;
-    margin: auto;
 
     .logo {
       margin: 20px auto auto auto;
@@ -23,6 +25,10 @@
         flex: 1;
         padding: 20px;
         display: inline-block;
+        &:hover, &.active {
+          background-color: var(--red-shallow);
+          cursor: pointer;
+        }
       }
     }
   }

frontend/src/ui/pages/IngredientsPage/index.tsx

@@ -0,0 +1,47 @@
+import {h, frag, Rung, RungOptions, Capsule} from "@djledda/ladder";
+
+export default class IngredientsPage extends Rung {
+    private ingredients: any[] = [];
+    private list = Capsule.new<HTMLDivElement | null>(null);
+    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.push(JSON.parse(this.ingredientInput.val?.value ?? "{}"));
+        this.refreshList();
+    }
+
+    async getIngredients() {
+        const result = await (await fetch("http://localhost:8080/ingredients/all")).json();
+        this.ingredients = result.data.ingredients;
+        this.refreshList();
+    }
+
+    refreshList() {
+        this.list.val?.replaceWith(<this.List />);
+    }
+
+    List = (): HTMLUListElement => {
+        const thing = <div saveTo={this.list}>{...this.ingredients.map((ingredient) => {
+            return <div>{ingredient.displayNameDE}, hinzugefügt von {`${ingredient.addedBy}`}</div>;
+        })}</div> as HTMLUListElement;
+        return thing;
+    }
+
+    build(): Node {
+        const node = <>
+            <this.List saveTo={this.list} />
+            <input type={"text"} saveTo={this.ingredientInput} />
+            <button onclick={() => this.addIngredient()}>Submit!</button>
+        </>;
+        this.getIngredients();
+        return node;
+    }
+}