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

@@ -19,8 +19,9 @@ import requests
 # Internal imports
 from database.db import init_db_command
 from database.user import User
+from database.user import dbCalendar
 
-import caltojson
+import backend.caltojson as caltojson
 
 import google.oauth2.credentials
 import google_auth_oauthlib.flow
@@ -74,6 +75,7 @@ def account():
 @app.route("/account")
 def index():
     if current_user.is_authenticated:
+        updateCalendars()
         return (flask.render_template('account.html',
             username = current_user.name, email = current_user.email, profile_img=current_user.profile_pic
             )
@@ -85,21 +87,51 @@ def get_google_provider_cfg():
     return requests.get(GOOGLE_DISCOVERY_URL).json()
 
 class Calendar:
-    def __init__(self, name, color):
+    def __init__(self, name, toggle=0, color="#000000"):
         self.name = name
         self.color = color
     
+        if toggle == 0:
+            self.toggle = False
+        else:
+            self.toggle = True
+
+def calendarsFromDb():
+    calendars = dbCalendar.getCalendars(current_user.id)
+    pyCalendars = []
+    for calendar in calendars:
+        name = calendar[2]
+        calId = calendar[1]
+        toggle = calendar[3]
+        color = calendar[4]
+
+        pyCalendars.append(Calendar(name, toggle, color))
+
+    return pyCalendars
+
+
 @app.route("/calendar")
 @login_required
 def calendar():
-    ca1 = Calendar("Hightower", "#30ff30")
+    calendars = calendarsFromDb()
-    ca2 = Calendar("Toast", "#66e230")
-    calendars = [ca1, ca2]
     return flask.render_template('calendar.html', calendars=calendars)
 
+def getCalendarJson():
+    if 'credentials' not in flask.session:
+        return flask.redirect('login/google')
 
-@app.route('/test')
+    # Load credentials from the session.
-def test_api_request():
+    credentials = google.oauth2.credentials.Credentials(
+      **flask.session['credentials'])
+    todaysCal = caltojson.generateJsonFromCalendarEntries(credentials)
+
+    with open('./userinfo/' + current_user.id + '/calendarevents.json', 'w') as outfile:
+        json.dump(todaysCal, outfile)
+
+    return todaysCal
+
+
+def updateCalendars():
     if 'credentials' not in flask.session:
         return flask.redirect('login/google')
 
@@ -107,17 +139,20 @@ def test_api_request():
     credentials = google.oauth2.credentials.Credentials(
         **flask.session['credentials'])
 
-  todaysCal = caltojson.generateJsonFromCalendarEntries(credentials)
   
+    calendars = caltojson.getCalendarList(credentials)
+
+    for calendar in calendars:
+        if dbCalendar.getCalendar(current_user.id, calendar.calendarId) == None:
+            dbCalendar.create(current_user.id, calendar.calendarId, calendar.summary, calendar.color)
+
+    print("updated Calendars")
 
     # Save credentials back to session in case access token was refreshed.
     # ACTION ITEM: In a production app, you likely want to save these
     #              credentials in a persistent database instead.
     flask.session['credentials'] = credentials_to_dict(credentials)
 
-  with open('./userinfo/' + current_user.id + '/calendarevents.json', 'w') as outfile:
-    json.dump(todaysCal, outfile)
-  return flask.jsonify(todaysCal)
 
 @app.route("/login/google")
 def login():

database/schema.sql

@@ -4,3 +4,11 @@ CREATE TABLE user (
   email TEXT UNIQUE NOT NULL,
   profile_pic TEXT NOT NULL
 );
+
+CREATE TABLE calendar (
+  usr_id TEXT NOT NULL,
+  calendar_id TEXT PRIMARY KEY,
+  name TEXT NOT NULL,
+  toggle INT NOT NULL,
+  color TEXT
+);

database/user.py

@@ -36,3 +36,37 @@ class User(UserMixin):
 
         Path(f"userinfo/{id_}").mkdir(parents=True, exist_ok=True)
 
+class dbCalendar():
+    def __init__(self, id_, name, toggle, color):
+        self.usr_id = id_
+        self.name = name
+        self.toggle = toggle
+        self.color = color
+
+    @staticmethod
+    def getCalendars(user_id):
+        db = get_db()
+        calendars = db.execute(
+            "SELECT * FROM calendar WHERE usr_id = ?", (user_id,)
+        ).fetchall()
+
+        return calendars
+
+    @staticmethod
+    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,)
+        ).fetchone()
+        if not calendar:
+            return None
+    
+    @staticmethod
+    def create(user_id, calendar_id, name, color, toggle = False):
+        db = get_db()
+        db.execute(
+            "INSERT INTO calendar (usr_id, calendar_id, name, toggle, color) "
+            "VALUES (?, ?, ?, ?, ?)",
+            (user_id, calendar_id, name, toggle, color),
+        )
+        db.commit()

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";