From c3f815939de8dbcc7aae220e9b4744a3ebae5689 Mon Sep 17 00:00:00 2001
From: raphael <raphael@maenle.net>
Date: Wed, 15 Apr 2020 18:47:41 +0000
Subject: [PATCH] adds writing the color as css attribute and then via jsqurey
 going through all of the class and adding this as background color

---
 app.py                 |  1 +
 template/calendar.html | 20 ++++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app.py b/app.py
index fd476f6..3c0f8fc 100644
--- a/app.py
+++ b/app.py
@@ -104,6 +104,7 @@ def calendarsFromDb():
         calId = calendar[1]
         toggle = calendar[3]
         color = calendar[4]
+
         pyCalendars.append(Calendar(name, toggle, color))
 
     return pyCalendars
diff --git a/template/calendar.html b/template/calendar.html
index 288bdaf..cad847c 100644
--- a/template/calendar.html
+++ b/template/calendar.html
@@ -11,7 +11,7 @@
     {% for item in calendars %}
     <div style="height: 30px">
         <!--Name-->
-        <div style="width: 30%; float: left; font-size: 24px; text-align: left; margin-left: 10%">{{ item.name }}</div>
+        <div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>
 
         <!--Toggle-->
         <div style="width: 30%; float: left">
@@ -24,7 +24,7 @@
 
         <!--Color Selector-->
         <div style="width: 30%; float: left">
-            <div class="colorPickSelector" id={{item.name}}></div>
+        <div class="colorPickSelector" id={{item.name}}  defaultColor={{item.color}}></div>
             <!--svg height="20" width="20">
                 <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
             </svg--> 
@@ -36,6 +36,8 @@
 </div>
 
 <script type="text/javascript">
+    
+
     $(".colorPickSelector").colorPick({
     'initialColor': '#3498db',
     'allowRecent': true,
@@ -46,12 +48,22 @@
 
         // Todo getting the element id is currently done over [0] [#02]
         this.element.css({'backgroundColor': this.color, 'color': this.color});
-        console.log(this.element[0].id);
-        console.log(this.color);
         post("color", this.element[0].id, this.color);
     }
     });
 
+    ($(".colorPickSelector").each(function() {
+        console.log($( this )[0].attributes.getNamedItem("style"));
+
+        var color = $( this )[0].attributes.getNamedItem("defaultcolor").nodeValue;
+        var style = document.createAttribute("style");
+        style.value = 'background-color: ' + color + '; color: ' + color + ';';
+        $( this )[0].attributes.setNamedItem(style); 
+
+        console.log($( this )[0].attributes.getNamedItem("style"));
+        
+    }));
+
     function post(type, id, data) {
         var url = "https://192.168.68.103.xip.io:1234/calendar";
         var method = "POST";