From f01587a4f775e402b1bdea5d444b439fd344dff6 Mon Sep 17 00:00:00 2001
From: tsindt <Thomas.Sindt@gmx.de>
Date: Tue, 22 Sep 2026 15:47:59 +0200
Subject: [PATCH] Treeview und Formfeld als Dummy aufgebaut

---
 buildtime/static/css/scpq_content.css |  16 ++--
 buildtime/templates/pages/index.html  | 101 +++++++++++++++++++++++---
 2 files changed, 101 insertions(+), 16 deletions(-)

diff --git a/buildtime/static/css/scpq_content.css b/buildtime/static/css/scpq_content.css
index 14a0453..a613810 100644
--- a/buildtime/static/css/scpq_content.css
+++ b/buildtime/static/css/scpq_content.css
@@ -3,7 +3,7 @@
 main {
     padding: var(--main-content-padding);
     margin: 16px;
-    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px);
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding));
     /* 32px für die Margen */
     overflow-y: auto;
     /* Scrollbar, wenn der Inhalt zu groß ist */
@@ -12,7 +12,7 @@ main {
 }
 
 nav {
-    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px);
+    height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding));
     overflow-y: auto;
     /* Scrollbar, wenn der Inhalt zu groß ist */
     display: flex; /* Macht die Liste horizontal */
@@ -26,10 +26,10 @@ nav {
     }
     padding: 5px; 
     background-color: var(--primary-color);
+    color: var(--secondary-font-color);
 }
 
 nav ul {
-    padding-top: 15px; /* Entfernt die Standard-Padding der Liste */
     list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */
 
     flex-wrap: wrap; /* Elemente umbrechen, wenn der Platz nicht ausreicht */
@@ -37,7 +37,6 @@ nav ul {
 }
 
 nav ul li a {
-    padding-top: 16px; /* Abstand oben für die Links */
     text-decoration: none; /* Entfernt die Unterstreichung */
     color: var(--secondary-font-color); /* Setzt die Schriftfarbe */
 }
@@ -46,6 +45,13 @@ nav ul li a:hover {
     font-weight: bold; /* Macht den Text fett */
 }
 
+.rootNode {
+    padding-top: 28px;
+    /* Einrückung für die Wurzelknoten */
+    color: var(--primary-color);
+    font-weight: bold;
+}
+
 .editor-container {
     height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px);
     display: flex;
@@ -83,7 +89,7 @@ nav ul li a:hover {
 }
 
 .leaf {
-    padding-left: 20px;
+    padding-left: 28px;
     /* Einrückung für Blätter */
     color: var(--primary-color);
     font-weight: lighter;
diff --git a/buildtime/templates/pages/index.html b/buildtime/templates/pages/index.html
index 785e470..c68e2db 100644
--- a/buildtime/templates/pages/index.html
+++ b/buildtime/templates/pages/index.html
@@ -18,24 +18,103 @@
     <div class="row">
         <nav class="col-2 col-s-12">
             <ul>
-                <li><a href="#">Eigenschaften</a></li>
-                <li><a href="#">Produkte</a></li>
-                <li><a href="#">Regeln</a></li>
-                <li><a href="#">Preiskalkulation</a></li>
-                <li><a href="#">Übersetzungen</a></li>
-                <li><a href="#">Importe</a></li>
+                <li>
+                    <ul>
+                        <details closed>
+                            <summary>
+                                Eigenschaften
+                            </summary>
+                            <ul class="node">
+                                <li class="leaf"><a href="#">Unterpunkt 1</a></li>
+                                <li class="leaf"><a href="#">Unterpunkt 2</a></li>
+                            </ul>
+                        </details>
+                    </ul>
+                </li>
+                <li>
+                    <ul>
+                        <details closed>
+                            <summary>
+                                Produkte
+                            </summary>
+                            <ul class="node">
+                                <li class="leaf"><a href="#">Unterpunkt 1</a></li>
+                                <li class="leaf"><a href="#">Unterpunkt 2</a></li>
+                            </ul>
+                        </details>
+                    </ul>
+                </li>
+                <li>
+                    <ul>
+                        <details closed>
+                            <summary>
+                                Regeln
+                            </summary>
+                            <ul class="node">
+                                <li class="leaf"><a href="#">Unterpunkt 1</a></li>
+                                <li class="leaf"><a href="#">Unterpunkt 2</a></li>
+                            </ul>
+                        </details>
+                    </ul>
+                </li>
+                <li>
+                    <ul>
+                        <details closed>
+                            <summary>
+                                Preiskalkulation
+                            </summary>
+                            <ul class="node">
+                                <li class="leaf"><a href="#">Unterpunkt 1</a></li>
+                                <li class="leaf"><a href="#">Unterpunkt 2</a></li>
+                            </ul>
+                        </details>
+                    </ul>
+                </li>
+                <li>
+                    <ul>
+                        <details closed>
+                            <summary>
+                                Übersetzungen
+                            </summary>
+                            <ul class="node">
+                                <li class="leaf"><a href="#">Unterpunkt 1</a></li>
+                                <li class="leaf"><a href="#">Unterpunkt 2</a></li>
+                            </ul>
+                        </details>
+                    </ul>
+                </li>
             </ul>
         </nav>    
         <main>
             <div class="col-6 col-s-6">
-                <h1>Content</h1>
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <h3>Property-Type Group </h3>
+                <section class="editor-view">
+                    <section id="PropertyTypeGroupData">
+                        <form class="cform" method="post" action="/updatePropertyTypeGroup">
+                            <label for="propertyTypeGroupID">ID:</label>
+                            <input type="text" id="propertyTypeGroupID" name="propertyTypeGroupID" value="{PropertyTypeGroupID}" disabled>
+                            <label for="propertyTypeGroupName">Name:</label>
+                            <input type="text" id="propertyTypeGroupName" name="propertyTypeGroupName" value="{PropertyTypeGroupName}">
+                            <label for="propertyTypeGroupDescription">Beschreibung:</label>
+                            <textarea id="propertyTypeGroupDescription" name="propertyTypeGroupDescription">{PropertyTypeGroupDescription}</textarea>
+                            <div class="button_row">
+                                <button type="submit">Speichern</button>
+                                <button type="submit">Neu</button>
+                                <button type="submit">Löschen</button>
+                            </div>
+                        </form>
+                    </section>
+                </section>
             </div>
-
             <div class="col-6 col-s-12">
                 <div class="aside">
-                    <h2>Sidebar</h2>
-                    <p>Wir ziehen mit unserem Equipment zurück in die Zollkantine in Bremen. Wir teilen uns dann den Raum mit Myrre und ihrer Band.</p>
+                    <h3>Values für {PropertyTypeName}</h3>
+                    <section class="editor-view">
+                        <section id="ValueData">
+                            <p>Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.</p>
+                            <!-- Editor content can be added here -->
+                        </section>
+                    </section>
                 </div>
             </div>
         </main>