groups und items werden ordentlich angezeigt + farbe wird angezeigt

express-server/public/javascripts/ajax.js

@@ -261,7 +261,7 @@ function Detail(){
                                             <i class="fas fa-caret-left"></i>
                                         </a>
                                         <button class="itemadd">
-                                        <i class="fas fa-plus"></i>
+                                        <i class="fas fa-ellipsis-v"></i>
                                         </button>
                                         <h1 class="text-center">
                                             ${neu[0].name}
@@ -269,9 +269,19 @@ function Detail(){
                                     `);
                                     for (let i = 0; i < res.groups.length; i++) {
                                         const el = res.groups[i];
-                                        $(".card-body").append(`
-                                        <h5 class="card-title text-center">${el.name}: ${el.content[0].name}</h5>
+                                        $(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:${el.color};">
+                                        <div class="card-header"><h5 class="card-title">${el.name}</h5><button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
+                                        <div class="${el.name}">
+                                        </div>
+                                        </div>
+                                      </div>
                                         `);
+                                        for(let x = 0; x < el.content.length; x++){
+                                            const el2 = el.content[x]
+                                        $(`.${el.name}`).append(`<div class="collapse" id="${el.name}"><ul><li>${el2.name}</li></ul></div>
+                                          
+                                        `);
+                                    }
                                     }
                                     ItemAdden()
                                 },
@@ -300,7 +310,7 @@ function ItemAdden(){
         let id = getid.attr('id'); 
         globaleAddZwischenID = id;
         console.log(id);
-        $('.custom-select-groups').remove('#select-group');
+        $('.select').remove();
 
         $('.GroupItemAdd').modal('show');
 
@@ -354,6 +364,8 @@ $(".itemhinzu").click(function(){
         },error(err){
 
         }
-    })
+    });
+
+    Detail();
 
 });

express-server/public/stylesheets/style.css

@@ -49,4 +49,11 @@
     position: absolute;
     right:5px;
     border: 0px;
+}
+.seemore{
+    background: transparent;
+    position: absolute;
+    right:5px;
+    margin-top:-40px;
+    border: 0px;
 }

express-server/views/dash.ejs

@@ -44,7 +44,7 @@
         <div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;">
             <div class="card-header"></div>
 
-            <div class="card-body text-dark"></div>
+            <div class="card-body text-dark gruppeninhalt"></div>
                 
         </div>
     </div>