From 05568120bffa782779f1c1d1981bd318b2d7c29d Mon Sep 17 00:00:00 2001
From: InesSuess <suess936i@htl-ottakring.ac.at>
Date: Tue, 29 Jan 2019 19:46:51 +0100
Subject: [PATCH] .

---
 express-server/public/javascripts/ajax.js   | 15 ++--
 express-server/public/stylesheets/style.css | 24 ++++++-
 express-server/views/dash.ejs               | 79 +++++++++++++++++----
 3 files changed, 94 insertions(+), 24 deletions(-)

diff --git a/express-server/public/javascripts/ajax.js b/express-server/public/javascripts/ajax.js
index 631a5654..cef7a792 100644
--- a/express-server/public/javascripts/ajax.js
+++ b/express-server/public/javascripts/ajax.js
@@ -47,6 +47,7 @@ $(document).ready(function() {
                 data: {
                     name: $("#einkaufslistenname").val(),
                     description: $("#einkaufslistenbeschreibung").val(),
+                    color: $( "input:checked" ).val(),
                     idtoken: idtoken
                 },
                 success(res){
@@ -126,14 +127,14 @@ function eigeneEinkaufslisten(){
                                 const el = res[i];
                 
                                 $(".listen-ausgabe").append(`<div class="col-md-12 karten">
-                                <div class="card border-light mb-3" style="max-width: 18rem;" id="${el.sl_id}">
-                                    <div class="card-header" style="background-color: #b3b3b3;">
+                                <div class="card border-light mb-3 shadow-sm" style="max-width: 18rem;" id="${el.sl_id}">
+                                    <div class="card-header" style="background-color: #${el.color};">
                                     <span>
                                     <img src="${picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                         ${userinfo}</span>
                                         <button class="btn edit"><i class="fas fa-pencil-alt "></i></button>
                                         <button class="btn trash"><i class="far fa-trash-alt"></i></button>
-                                        <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-ellipsis-v"></i></button>
+                                        <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-plus"></i></button>
                                     </div>
                                     
                                     <div class="card-body">
@@ -255,12 +256,12 @@ function Detail(){
 
                                     var link = "/dash/"+idtoken;
 
-                                    $(".card-header").append(`<div class="shoplistid" id="${id}" style="background-color:#b3b3b3">
+                                    $(".card-header").append(`<div class="shoplistid" id="${id}">
                                         <a href="${link}" style="left: 5px; margin-top: -50px">
                                             <i class="fas fa-caret-left"></i>
                                         </a>
                                         <button class="itemadd">
-                                        <i class="fas fa-ellipsis-v"></i>
+                                        <i class="fas fa-plus"></i>
                                         </button>
                                         <h1 class="text-center">
                                             ${neu[0].name}
@@ -280,9 +281,7 @@ function Detail(){
                                         `);
                                         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>
-                                          
-                                        `);
+                                        $(`.${el.name}`).append(`<div class="collapse" id="${el.name}"><ul><li>${el2.count}x ${el2.name}</li></ul></div>`);
                                     }
                                     }
                                     ItemAdden();
diff --git a/express-server/public/stylesheets/style.css b/express-server/public/stylesheets/style.css
index 49d566e8..a5d3ce26 100644
--- a/express-server/public/stylesheets/style.css
+++ b/express-server/public/stylesheets/style.css
@@ -71,4 +71,26 @@
     position: absolute;
     right:23px;
     margin-top:-40px;
-}
\ No newline at end of file
+}
+
+/* button.change {
+    border: none;
+}
+
+button.change:hover{
+    cursor:pointer;
+}
+
+button:active{
+    outline: none;
+    border: none;
+} */
+/* 
+button:focus{
+    outline: none;
+} */
+
+.btn:focus, .btn:active {
+    outline: none !important;
+    box-shadow: none !important;
+  }
\ No newline at end of file
diff --git a/express-server/views/dash.ejs b/express-server/views/dash.ejs
index 91cc5c1a..4b6155b4 100644
--- a/express-server/views/dash.ejs
+++ b/express-server/views/dash.ejs
@@ -42,10 +42,14 @@
 
     <!-- detail card -->
     <div class="row justify-content-center ">
-        <div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;">
+        <div class="card border-light mb-3 detailcardausgabe shadow-sm" style="width: 50rem;">
             <div class="card-header"></div>
 
-            <div class="card-body text-dark gruppeninhalt"></div>
+            <div class="card-body text-dark">
+                <div class="row justify-content-center gruppeninhalt">
+
+                </div>
+            </div>
                 
         </div>
     </div>
@@ -85,25 +89,25 @@
                         <input type="radio" name="color" id="farbe6" value="2196F3" />
                         <label for="farbe6"><span class="farbe6"></span></label>
 
-                        <!-- <br> 
+                        <br> 
     
-                        <input type="radio" name="color" id="violet" value="violet" />
-                        <label for="violet"><span class="violet"></span></label>
+                        <input type="radio" name="color" id="farbe7" value="03a9f4" />
+                        <label for="farbe7"><span class="farbe7"></span></label>
     
-                        <input type="radio" name="color" id="purple" value="purple" />
-                        <label for="purple"><span class="purple"></span></label>
+                        <input type="radio" name="color" id="farbe8" value="00bcd4" />
+                        <label for="farbe8"><span class="farbe8"></span></label>
     
-                        <input type="radio" name="color" id="pink" value="pink" />
-                        <label for="pink"><span class="pink"></span></label>
+                        <input type="radio" name="color" id="farbe9" value="009688" />
+                        <label for="farbe9"><span class="farbe9"></span></label>
 
-                        <input type="radio" name="color" id="blue" value="blue" />
-                        <label for="blue"><span class="blue"></span></label>
+                        <input type="radio" name="color" id="farbe10" value="4caf50" />
+                        <label for="farbe10"><span class="farbe10"></span></label>
     
-                        <input type="radio" name="color" id="violet" value="violet" />
-                        <label for="violet"><span class="violet"></span></label>
+                        <input type="radio" name="color" id="farbe11" value="8bc34a" />
+                        <label for="farbe11"><span class="farbe11"></span></label>
     
-                        <input type="radio" name="color" id="purple" value="purple" />
-                        <label for="purple"><span class="purple"></span></label> -->
+                        <input type="radio" name="color" id="farbe12" value="cddc39" />
+                        <label for="farbe12"><span class="farbe12"></span></label>
 
                         </div>
                     </div>
@@ -168,6 +172,51 @@
                       <label for="exampleInputPassword1">Beschreibung</label>
                       <input type="text" class="form-control" id="einkaufslistenbeschreibung" placeholder="zB: Großeinkauf bei Billa">
                     </div>
+
+                    <div class="form-group layout">
+                        <label for="exampleInputPassword1">Farbe</label>
+                        <div class="farbeeen">
+                              
+                          <input type="radio" name="color" id="farbe1" value="F44336" />
+                          <label for="farbe1"><span class="farbe1 border"></span></label>
+      
+                          <input type="radio" name="color" id="farbe2" value="e91e63" />
+                          <label for="farbe2"><span class="farbe2"></span></label>
+      
+                          <input type="radio" name="color" id="farbe3" value="9c27b0" />
+                          <label for="farbe3"><span class="farbe3"></span></label>
+      
+                          <input type="radio" name="color" id="farbe4" value="673ab7" />
+                          <label for="farbe4"><span class="farbe4"></span></label>
+      
+                          <input type="radio" name="color" id="farbe5" value="3F51B5" />
+                          <label for="farbe5"><span class="farbe5"></span></label>   
+      
+                          <input type="radio" name="color" id="farbe6" value="2196F3" />
+                          <label for="farbe6"><span class="farbe6"></span></label>
+  
+                          <br> 
+      
+                          <input type="radio" name="color" id="farbe7" value="03a9f4" />
+                          <label for="farbe7"><span class="farbe7"></span></label>
+      
+                          <input type="radio" name="color" id="farbe8" value="00bcd4" />
+                          <label for="farbe8"><span class="farbe8"></span></label>
+      
+                          <input type="radio" name="color" id="farbe9" value="009688" />
+                          <label for="farbe9"><span class="farbe9"></span></label>
+  
+                          <input type="radio" name="color" id="farbe10" value="4caf50" />
+                          <label for="farbe10"><span class="farbe10"></span></label>
+      
+                          <input type="radio" name="color" id="farbe11" value="8bc34a" />
+                          <label for="farbe11"><span class="farbe11"></span></label>
+      
+                          <input type="radio" name="color" id="farbe12" value="cddc39" />
+                          <label for="farbe12"><span class="farbe12"></span></label>
+  
+                          </div>
+                      </div>
  
 
                     <center><button type="submit" class="btn btn-outline-dark add">Hinzufügen</button></center>