backend now uses calendar_id and this is the frontend upgrade

- calendar_id is unique and therefore creates less problems
- changing id of DOM from item.name to calendar_id

README.md

@@ -2,3 +2,14 @@
 
 this repository includes the webpage frontend for the calendar watch server
 it gets served via a python server 
+
+### app description:
+
+Longitude is a 24h slow watch-face.
+The Sun moves around the watch over the course of the day, while the planet completes a rotation every hour. Add your Calendar via a web-platform, so that every glance at your watch shows a summary of your day.
+
+Version 0.1 (beta):
+- This version of the watchface includes the sun and the planet for time visualization
+
+Future (beta):
+- The next version will add support for connecting the device to the web platform 

backend

@@ -1 +1 @@
-Subproject commit 804ab33a6d07b34c2f0942a63c71f652dfb067f3
+Subproject commit ba912de7f312f130e6916f067c15585143dfd6c2

server/googleHandler.py

@@ -94,21 +94,22 @@ def get_google_provider_cfg():
     return requests.get(GOOGLE_DISCOVERY_URL).json()
 
 class Calendar:
-    def __init__(self, name, toggle='False', color="#000000"):
+    def __init__(self, name, calendarId, toggle='False', color="#000000"):
         self.name = name
         self.color = color
         self.toggle=toggle
+        self.calendarId = calendarId
 
 def calendarsFromDb():
     calendars = dbCalendar.getCalendars(dbCalendar, current_user.id)
     pyCalendars = []
     for calendar in calendars:
         name = calendar.name
-        # calId = calendar.calendar_id
+        calendarId = calendar.calendar_id
         toggle = calendar.toggle
         color = calendar.color
 
-        pyCalendars.append(Calendar(name, toggle, color))
+        pyCalendars.append(Calendar(name, calendarId, toggle, color))
 
     return pyCalendars
 

server/models.py

@@ -68,12 +68,12 @@ class Calendar(db.Model):
         return calendar
     
     @staticmethod
-    def updateCalendar(user_id, calendar_name, toggle=None, color=None):
+    def updateCalendar(user_id, calendar_id, toggle=None, color=None):
 
-        calendar = Calendar.query.filter(Calendar.usr_id==user_id, Calendar.name==calendar_name).first()
+        calendar = Calendar.query.filter(Calendar.usr_id==user_id, Calendar.calendar_id==calendar_id).first()
 
 
-        print("updating")
+        print("updating", flush=True)
         if(toggle != None):
             print(toggle)
             calendar.toggle = toggle

server/routes.py

@@ -148,15 +148,17 @@ def downloader(user):
 @login_required
 def user():
     if request.method == 'POST':
-        calName = request.json.get('calendar_id')
-        color = request.json.get('color')
-        toggle = request.json.get('toggle')
+        calId = request.json.get('calendar_id')
+        color = request.json.get('color', None)
+        toggle = request.json.get('toggle', None)
         
+        print(request.json, flush=True)
         if color != None:
-            Calendar.updateCalendar(current_user.id, calName, color=color)
+            Calendar.updateCalendar(current_user.id, calId, color=color)
         if toggle != None:
-            Calendar.updateCalendar(current_user.id, calName, toggle=toggle)
+            Calendar.updateCalendar(current_user.id, calId, toggle=toggle)
         # toggle specific calendar of user
+        
     elif request.method == 'DELETE':
         # do nothing
         return 'NONE'

server/template/calendar.html

@@ -17,14 +17,14 @@
         <div style="width: 30%; float: left">
             <!-- Rounded switch -->
             <label class="switch">
-                <input class="toggle" id={{item.name}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
+                <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
                 <span class="slider round"></span>
             </label>
         </div>
 
         <!--Color Selector-->
         <div style="width: 30%; float: left">
-        <div class="colorPickSelector" id={{item.name}}  defaultColor={{item.color}}></div>
+        <div class="colorPickSelector" id={{item.calendarId}}  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--> 
@@ -73,7 +73,6 @@
 
     ($(".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 + ';';
@@ -84,7 +83,7 @@
     }));
 
     function post(type, id, data) {
-        var url = "https://192.168.68.103.xip.io:1234/calendar";
+        var url = "calendar";
         var method = "POST";
         switch (type) {
             case "color":