From 1d3cfdc7b7d691c28af8498a04f88005c5741ba0 Mon Sep 17 00:00:00 2001
From: tsindt <Thomas.Sindt@gmx.de>
Date: Tue, 8 Sep 2026 21:15:02 +0200
Subject: [PATCH] Form

---
 .../xcpq_editor/static/css/scpq_content.css   | 33 ++++++++++++++++
 xcpq/buildtime/xcpq_editor/static/index.html  | 39 ++++++++++++-------
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css b/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css
index 0753e1a83..94e0fc268 100644
--- a/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css
+++ b/xcpq/buildtime/xcpq_editor/static/css/scpq_content.css
@@ -55,7 +55,25 @@ main {
 }
 
 
+/* form styles */
+.cform {
+    display: flex;
+    flex-direction: column;
+    color: var(--primary-color);
+    gap: 8px;
+    padding: 16px;
+}
 
+.cform label {
+    padding-top: 8px;
+} 
+
+.cform input[type="text"],
+.cform textarea {
+    padding: 4px;
+    border: 1px solid var(--primary-color);
+    border-radius: var(--box-border-radius);
+}
 
 /* Style für allgemeine Elemente */
 .box {
@@ -63,6 +81,21 @@ main {
     border-radius: var(--box-border-radius);
 }
 
+.button_row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 8px;
+}
+.button_row button {
+    padding: 4px 8px;
+    border: 1px solid var(--primary-color);
+    border-radius: var(--box-border-radius);
+    background-color: var(--data-background-color);
+    cursor: pointer;
+}
+
 .mt-16 {
     margin-top: 16px;
 }
\ No newline at end of file
diff --git a/xcpq/buildtime/xcpq_editor/static/index.html b/xcpq/buildtime/xcpq_editor/static/index.html
index fe2d14a0a..88b965533 100644
--- a/xcpq/buildtime/xcpq_editor/static/index.html
+++ b/xcpq/buildtime/xcpq_editor/static/index.html
@@ -42,48 +42,39 @@
                     <ul class="node mt-16">
                         <details open>
                             <summary>
-                                <img src="/static/images/property_type_group.svg" alt="group" />
                                 X-CPQ-Eigenschaften
                             </summary>
                             <ul class="node">
                                 <details open>
                                     <summary>
-                                        <img src="/static/images/property_type_group.svg" alt="group" />
                                         Systemeigenschaften
                                     </summary>
                                     <ul class="node">
                                         <li class="leaf">
-                                            <img src="/static/images/property_type.svg" alt="property" />
                                             Eigenschaft 1
                                         </li>
                                         <li class="leaf">
-                                            <img src="/static/images/property_type.svg" alt="property" />
                                             Eigenschaft 2
                                         </li>
                                     </ul>
                                 </details>
                                 <details open>
                                     <summary>
-                                        <img src="/static/images/property_type_group.svg" alt="group" />
                                         Catalog Eigenschaften
                                     </summary>
                                     <ul class="node">
                                         <li class="leaf">
-                                            <img src="/static/images/property_type.svg" alt="property" />
                                             Eigenschaft 1
                                         </li>
                                         <li class="leaf">
-                                            <img src="/static/images/property_type.svg" alt="property" />
                                             Eigenschaft 2
                                         </li>
                                     </ul>
                                 </details>
                                 <li class="leaf">
-                                    <img src="/static/images/property_type.svg" alt="property" />
                                     Eigenschaft 1
                                 </li>
                                 <li class="leaf">
-                                    <img src="/static/images/property_type.svg" alt="property" />
                                     Eigenschaft 2
                                 </li>
                             </ul>
@@ -91,14 +82,32 @@
                     </ul>
                 </section>
                 <section class="editor-view">
-                    <h3>Property-Type</h3>
-                    <p>Hier können die Details der ausgewählten Eigenschaft bearbeitet werden.</p>
-                    <!-- Editor content can be added here -->
+                    <section id="PropertyTypeGroupData">
+                        <h3>Property-Type Group {PropertyTypeGroupName}</h3>
+                        <form class="cform" method="post" action="/updatePropertyTypeGroup">
+                            <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 id="PropertyTypeData">
+                        <h3>Property-Type {PropertyTypeName}</h3>
+                        <p>Hier können die Details der ausgewählten Eigenschaft bearbeitet werden.</p>
+                        <!-- Editor content can be added here -->
+                    </section>
                 </section>
                 <section class="editor-view">
-                    <h3>Values</h3>
-                    <p>Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.</p>
-                    <!-- Editor content can be added here -->
+                    <section id="ValueData">
+                        <h3>Values für {PropertyTypeName}</h3>
+                        <p>Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.</p>
+                        <!-- Editor content can be added here -->
+                    </section>
                 </section>
             </div>
         </section>