fixes communication conflicts between frontend and database through backend;

sets up visualization of DOMs in frontend through javascript

app.py

@@ -87,15 +87,10 @@ def get_google_provider_cfg():
     return requests.get(GOOGLE_DISCOVERY_URL).json()
 
 class Calendar:
-    def __init__(self, name, toggle=0, color="#000000"):
+    def __init__(self, name, toggle='False', color="#000000"):
         self.name = name
         self.color = color
-    
+        self.toggle=toggle
-        if toggle == 0:
-            self.toggle = False
-        else:
-            self.toggle = True
-
 def calendarsFromDb():
     calendars = dbCalendar.getCalendars(current_user.id)
     pyCalendars = []
@@ -260,15 +255,14 @@ def downloader(user):
 @login_required
 def user():
     if request.method == 'POST':
-        calId = request.json.get('calendar_id')
+        calName = request.json.get('calendar_id')
         color = request.json.get('color')
         toggle = request.json.get('toggle')
         
-        print(calId)
         if color != None:
-            print(color)
+            dbCalendar.updateCalendar(current_user.id, calName, color=color)
         if toggle != None:
-            print(toggle)
+            dbCalendar.updateCalendar(current_user.id, calName, toggle=toggle)
         # toggle specific calendar of user
     elif request.method == 'DELETE':
         # do nothing

database/schema.sql

@@ -9,6 +9,6 @@ CREATE TABLE calendar (
   usr_id TEXT NOT NULL,
   calendar_id TEXT PRIMARY KEY,
   name TEXT NOT NULL,
-  toggle INT NOT NULL,
+  toggle TEXT,
   color TEXT
 );

database/user.py

@@ -56,13 +56,33 @@ class dbCalendar():
     def getCalendar(user_id, calendar_id):
         db = get_db()
         calendar = db.execute(
-            "SELECT * FROM calendar WHERE usr_id = ? AND calendar_id = ?", (user_id, calendar_id,)
+            "SELECT * FROM calendar WHERE usr_id = ? AND calendar_id = ?", (user_id, calendar_id)
         ).fetchone()
+        
         if not calendar:
             return None
         
+        return calendar
+    
     @staticmethod
-    def create(user_id, calendar_id, name, color, toggle = False):
+    def updateCalendar(user_id, calendar_name, toggle=None, color=None):
+        db = get_db()
+        print("updating")
+        if(toggle != None):
+            print(toggle)
+            db.execute(
+                "UPDATE calendar SET toggle = ? WHERE usr_id = ? AND name = ?", (toggle, user_id, calendar_name)
+            )
+            db.commit()
+
+        if(color != None):
+            db.execute(
+                "UPDATE calendar SET color = ? WHERE usr_id = ? AND name = ?", (color, user_id, calendar_name)
+            )
+            db.commit()
+
+    @staticmethod
+    def create(user_id, calendar_id, name, color, toggle = 'True'):
         db = get_db()
         db.execute(
             "INSERT INTO calendar (usr_id, calendar_id, name, toggle, color) "

template/calendar.html

@@ -17,8 +17,8 @@
         <div style="width: 30%; float: left">
             <!-- Rounded switch -->
             <label class="switch">
-                <input type="checkbox">
+                <input class="toggle" id={{item.name}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
-                <span id={{item.name}}  class="slider round" onclick="toggleReaction(this)"></span>
+                <span class="slider round"></span>
             </label>
         </div>
 
@@ -38,6 +38,10 @@
 <script type="text/javascript">
     
     
+    var init = false;
+    
+    
+    // initialize all DOM items
     $(".colorPickSelector").colorPick({
     'initialColor': '#3498db',
     'allowRecent': true,
@@ -45,22 +49,36 @@
     'allowCustomColor': false,
     'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
     'onColorSelected': function() {
-
+        if(!init) {
+            return;
+        }
         // Todo getting the element id is currently done over [0] [#02]
         this.element.css({'backgroundColor': this.color, 'color': this.color});
         post("color", this.element[0].id, this.color);
     }
     });
 
+    ($(".toggle").each(function() {
+        var toggle = true;
+        console.log($(this).attr('toggled'));
+        if($(this).attr('toggled') == "True") {
+            toggle = false;
+        } else if ($(this).attr('toggled') == "False") {
+            toggle = true;
+        }
+
+        $(this).prop('checked', toggle);
+    }));
+
     ($(".colorPickSelector").each(function() {
-        console.log($( this )[0].attributes.getNamedItem("style"));
+        // 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"));
+        // console.log($( this )[0].attributes.getNamedItem("style"));
         
     }));
 
@@ -95,26 +113,15 @@
 
     function toggleReaction(self) {
         // the slider used defaults to inverted information [#01]
-        post("toggle", self.id, !self.previousElementSibling.checked);
+        var data;
-        
+        if(self.checked) {
-        /*console.log(self.id);
+            data = "False";
-        var url = "https://192.168.68.103.xip.io:1234/calendar";
+        } else {
-        var method = "POST";
+            data = "True";
-        var postData = JSON.stringify({"calendar_id": self.id.toString() });
-        console.log(postData);
-        var shouldBeAsync = true;
-
-        var request = new XMLHttpRequest();
-        request.onload = function () {
-            var status = request.status;
-            var data = request.responseText;
         }
-
+        post("toggle", self.id, data);
-        request.open(method, url, shouldBeAsync);
-        // content type json makes app do error 400
-        request.setRequestHeader("Content-Type", "application/json");
-        request.send(postData);*/
     }
+    init = true;
 </script>
 
 {% endblock %}