adds more advanced database handling unsing sql alchemy

- moves app into package
- adds sql alchemy equipment
- moves templates into server package
- add app.db sqlite file

server/__init__.py

@@ -0,0 +1,28 @@
+
+import os
+import sqlite3
+
+from flask import Flask
+from config import Config
+from flask_sqlalchemy import SQLAlchemy
+from flask_migrate import Migrate
+
+from flask_login import LoginManager 
+
+# Flask app setup
+app = Flask(__name__,
+            static_folder='static',
+            template_folder='template')
+app.secret_key = os.environ.get("SECRET_KEY") or os.urandom(24)
+
+app.config.from_object(Config)
+
+db = SQLAlchemy(app)
+migrate = Migrate(app, db)
+
+# User session management setup
+# https://flask-login.readthedocs.io/en/latest
+login_manager = LoginManager(app)
+
+
+from server import routes, models

server/googleHandler.py

@@ -0,0 +1,162 @@
+import google.oauth2.credentials
+import google_auth_oauthlib.flow
+import googleapiclient.discovery
+
+import backend.caltojson as caltojson
+from oauthlib.oauth2 import WebApplicationClient
+import flask
+
+# Python standard libraries
+import json
+import os
+import sqlite3
+
+# Third-party libraries
+import flask
+from flask import Flask, redirect, request, url_for
+from flask_login import (
+    LoginManager,
+    current_user,
+    login_required,
+    login_user,
+    logout_user,
+)
+import requests
+
+from server.models import Calendar as dbCalendar
+
+# Configuration
+CLIENT_SECRETS_FILE = "certificate/client_secret.json"
+
+# This OAuth 2.0 access scope allows for full read/write access to the
+# authenticated user's account and requires requests to use an SSL connection.
+SCOPES = ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile", "https://www.googleapis.com/auth/calendar.readonly", "openid"]
+API_SERVICE_NAME = 'calendar'
+API_VERSION = 'v3'
+
+GOOGLE_CLIENT_ID ="377787187748-shuvi4iq5bi4gdet6q3ioataimobs4lh.apps.googleusercontent.com"
+GOOGLE_CLIENT_SECRET = "Hu_YWmKsVKUcLwyeINYzdKfZ"
+GOOGLE_DISCOVERY_URL = (
+    "https://accounts.google.com/.well-known/openid-configuration"
+)
+
+# OAuth 2 client setup
+client = WebApplicationClient(GOOGLE_CLIENT_ID)
+
+
+
+def login():
+    # Create flow instance to manage the OAuth 2.0 Authorization Grant Flow steps.
+    flow = google_auth_oauthlib.flow.Flow.from_client_secrets_file(
+        CLIENT_SECRETS_FILE, scopes=SCOPES)
+    # The URI created here must exactly match one of the authorized redirect URIs
+    # for the OAuth 2.0 client, which you configured in the API Console. If this
+    # value doesn't match an authorized URI, you will get a 'redirect_uri_mismatch'
+    # error.
+    flow.redirect_uri = request.base_url + "/callback"
+    authorization_url, state = flow.authorization_url(
+        # Enable offline access so that you can refresh an access token without
+        # re-prompting the user for permission. Recommended for web server apps.
+        access_type='offline',
+        # Enable incremental authorization. Recommended as a best practice.
+        include_granted_scopes='true')
+
+    # Store the state so the callback can verify the auth server response.
+    flask.session['state'] = state
+    # Flask-Login helper to retrieve a user from our db
+    return authorization_url
+
+def verifyResponse():
+    # Specify the state when creating the flow in the callback so that it can
+    # verified in the authorization server response.
+    state = flask.session['state']
+
+    flow = google_auth_oauthlib.flow.Flow.from_client_secrets_file(
+        CLIENT_SECRETS_FILE, scopes=SCOPES, state=state)
+    flow.redirect_uri = request.base_url
+
+    # Use the authorization server's response to fetch the OAuth 2.0 tokens.
+    authorization_response = flask.request.url
+    flow.fetch_token(authorization_response=authorization_response)
+
+    # Store credentials in the session.
+    # ACTION ITEM: In a production app, you likely want to save these
+    #              credentials in a persistent database instead.
+    credentials = flow.credentials
+    flask.session['credentials'] = credentials_to_dict(credentials)
+
+    session = flow.authorized_session()
+    return session 
+
+
+def get_google_provider_cfg():
+    return requests.get(GOOGLE_DISCOVERY_URL).json()
+
+class Calendar:
+    def __init__(self, name, toggle='False', color="#000000"):
+        self.name = name
+        self.color = color
+        self.toggle=toggle
+
+def calendarsFromDb():
+    calendars = dbCalendar.getCalendars(dbCalendar, current_user.id)
+    pyCalendars = []
+    for calendar in calendars:
+        name = calendar.name
+        calId = calendar.calendar_id
+        toggle = calendar.toggle
+        color = calendar.color
+
+        pyCalendars.append(Calendar(name, toggle, color))
+
+    return pyCalendars
+
+
+def getCalendarJson():
+    if 'credentials' not in flask.session:
+        return flask.redirect('login/google')
+
+    # Load credentials from the session.
+    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')
+
+  # Load credentials from the session.
+    credentials = google.oauth2.credentials.Credentials(
+        **flask.session['credentials'])
+
+  
+    calendars = caltojson.getCalendarList(credentials)
+
+    for calendar in calendars:
+
+        if dbCalendar.getCalendar(dbCalendar, current_user.id, calendar.calendarId) == None:
+            dbCalendar.create(dbCalendar, 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)
+
+
+def credentials_to_dict(credentials):
+  return {'token': credentials.token,
+          'refresh_token': credentials.refresh_token,
+          'token_uri': credentials.token_uri,
+          'client_id': credentials.client_id,
+          'client_secret': credentials.client_secret,
+          'scopes': credentials.scopes}
+
+

server/models.py

@@ -0,0 +1,62 @@
+from flask_login import UserMixin
+from server import login_manager, db
+
+@login_manager.user_loader
+def load_user(id):
+    return User.query.get(id)
+
+class User(UserMixin, db.Model):
+    id = db.Column(db.String(21), primary_key=True)
+    username = db.Column(db.String(64), index=True, unique=True)
+    email = db.Column(db.String(120), index=True, unique=True)
+    profile_pic = db.Column(db.String(256))
+    password_hash = db.Column(db.String(128))
+
+    def __repr__(self):
+        return '<User {}>'.format(self.username)    
+
+class Calendar(db.Model):
+    usr_id = db.Column(db.String(21), index=True)
+    calendar_id = db.Column(db.String(256), primary_key=True)
+    name = db.Column(db.String(256), index=True)
+    toggle = db.Column(db.String(8))
+    color = db.Column(db.String(16))
+
+    def getCalendars(self, user_id):
+        calendars = self.query.filter(Calendar.usr_id==user_id)
+        
+        return calendars
+
+    def getCalendar(self, user_id, calendar_id):
+        calendars = self.query.filter(self.usr_id==user_id, self.calendar_id==calendar_id)
+        
+        calendar = None
+        for c in calendars:
+            calendar = c
+
+        if not calendar:
+            return None
+        
+        return calendar
+    
+    @staticmethod
+    def updateCalendar(user_id, calendar_name, toggle=None, color=None):
+
+        calendar = Calendar.query.filter(Calendar.usr_id==user_id, Calendar.name==calendar_name).first()
+
+
+        print("updating")
+        if(toggle != None):
+            print(toggle)
+            calendar.toggle = toggle
+            db.session.commit()
+
+        if(color != None):
+            calendar.color = color
+            db.session.commit()
+
+    def create(self, user_id, calendar_id, name, color, toggle = 'True'):
+        newcal = Calendar(usr_id=user_id, calendar_id=calendar_id, name=name, toggle=toggle, color=color)
+        
+        db.session.add(newcal)
+        db.session.commit()

server/routes.py

@@ -0,0 +1,124 @@
+# Python standard libraries
+import json
+import os
+import sqlite3
+
+# Third-party libraries
+import flask
+from flask import Flask, redirect, request, url_for
+from flask_login import (
+    LoginManager,
+    current_user,
+    login_required,
+    login_user,
+    logout_user,
+)
+import requests
+
+import server.googleHandler as google
+
+from server import login_manager, app, db
+from server.models import User, Calendar
+
+@app.route("/")
+def account():
+    return flask.redirect('account')
+
+@app.route("/account")
+def index():
+    if current_user.is_authenticated:
+        google.updateCalendars()
+        return (flask.render_template('account.html',
+            username = current_user.username, email = current_user.email, profile_img=current_user.profile_pic
+            )
+        )
+    else:
+        return flask.render_template('login.html')
+
+@app.route("/calendar")
+@login_required
+def calendar():
+    calendars = google.calendarsFromDb()
+    return flask.render_template('calendar.html', calendars=calendars)
+
+@app.route("/login/google")
+def login():
+    authorization_url = google.login()
+
+    return flask.redirect(authorization_url)
+
+@app.route("/login/google/callback")
+def callback():
+    session = google.verifyResponse()
+    
+    userinfo = session.get('https://www.googleapis.com/userinfo/v2/me').json()
+    
+    # Create a user in your db with the information provided
+    # by Google
+
+    # Doesn't exist? Add it to the database.
+    if not User.query.get(userinfo['id']):
+        newser = User(
+            id=userinfo['id'], 
+            username=userinfo['name'], 
+            email=userinfo['email'], 
+            profile_pic=userinfo['picture'],
+            password_hash=""
+        )   
+        db.session.add(newser)
+        db.session.commit()
+
+    user = User.query.get(userinfo['id'])
+
+    # Begin user session by logging the user in
+    print("login:" + user.id)
+
+    login_user(user)
+
+    return flask.redirect(flask.url_for('index'))
+
+@app.route("/logout")
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for("index"))
+
+def credentials_to_dict(credentials):
+  return {'token': credentials.token,
+          'refresh_token': credentials.refresh_token,
+          'token_uri': credentials.token_uri,
+          'client_id': credentials.client_id,
+          'client_secret': credentials.client_secret,
+          'scopes': credentials.scopes}
+
+
+@app.route("/userinfo/<path:user>/calendarevents.json")
+def downloader(user):
+    print(user)
+    path = "/home/raphael/dev/website_ws/website/userinfo/" + user
+    return flask.send_from_directory(path, "calendarevents.json")
+
+# POST
+
+@app.route('/calendar', methods = ['POST', 'DELETE'])
+@login_required
+def user():
+    if request.method == 'POST':
+        calName = request.json.get('calendar_id')
+        color = request.json.get('color')
+        toggle = request.json.get('toggle')
+        
+        if color != None:
+            Calendar.updateCalendar(current_user.id, calName, color=color)
+        if toggle != None:
+            Calendar.updateCalendar(current_user.id, calName, toggle=toggle)
+        # toggle specific calendar of user
+    elif request.method == 'DELETE':
+        # do nothing
+        return 'NONE'
+    else:
+        # POST Error 405
+        print("405")
+
+    return 'OK'
+

server/template/account.html

@@ -0,0 +1,8 @@
+{% extends "sidebar.html" %}
+{% block body%}
+<p>Hello, {{ username }}! You're logged in! Email: {{email}}</p>
+<div><p>Google Profile Picture:</p>
+<img src={{ profile_img }} alt="Google profile pic"></img></div>
+<a class="button" href="/logout">Logout</a>
+<a class="button" href="/test">test API</a>
+{% endblock %}

server/template/calendar.html

@@ -0,0 +1,127 @@
+{% extends "sidebar.html" %}
+{% block body%}
+
+<div style="height: 50px">
+    <div style="width: 30%; float: left; margin-left: 10%">Calendar</div>
+    <div style="width: 30%; float: left">Show on device</div>
+    <div style="width: 30%; float: left">Color</div>
+</div>
+
+<div>
+    {% for item in calendars %}
+    <div style="height: 30px">
+        <!--Name-->
+        <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">
+            <!-- Rounded switch -->
+            <label class="switch">
+                <input class="toggle" id={{item.name}} 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>
+            <!--svg height="20" width="20">
+                <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
+            </svg--> 
+        </div>
+        
+    </div>
+    {% endfor %}
+ 
+</div>
+
+<script type="text/javascript">
+    
+    
+    var init = false;
+    
+    
+    // initialize all DOM items
+    $(".colorPickSelector").colorPick({
+    'initialColor': '#3498db',
+    'allowRecent': true,
+    'recentMax': 5,
+    '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"));
+
+        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";
+        switch (type) {
+            case "color":
+                var postData = JSON.stringify({"calendar_id": id.toString(), "color": data.toString()});
+                break;
+            case "toggle":
+                var postData = JSON.stringify({"calendar_id": id.toString(), "toggle": data.toString()})        
+                break;
+            default:
+                break;
+        }
+        console.log(postData);
+
+        var shouldBeAsync = true;
+
+        var request = new XMLHttpRequest();
+        request.onload = function () {
+            var status = request.status;
+            var data = request.responseText;
+        }
+
+        request.open(method, url, shouldBeAsync);
+        // content type json makes app do error 400
+        request.setRequestHeader("Content-Type", "application/json");
+        request.send(postData);
+    }
+
+    function toggleReaction(self) {
+        // the slider used defaults to inverted information [#01]
+        var data;
+        if(self.checked) {
+            data = "False";
+        } else {
+            data = "True";
+        }
+        post("toggle", self.id, data);
+    }
+    init = true;
+</script>
+
+{% endblock %}

server/template/login.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" type="text/css" href="/static/css/main.css">
+  <title>Index</title>
+</head>
+
+<body>
+<h1 style="color: blue">Login Page</h1>
+
+<!--Google Login-->
+<div class="center-align">
+<div class="col s12 m6 offset-m3 center-align"  style=" margin: 5px;">
+    <a class="oauth-container btn darken-4 white black-text" href="/login/google" style="text-transform:none">
+        <div class="left">
+            <img width="20px" style="margin-top:7px; margin-right:8px" alt="Google sign-in" 
+                src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
+        </div class="login_google">
+        <div class="login_google">Login with Google</div>
+    </a>
+</div>
+
+<!--Email Login-->
+<div class="col s12 m6 offset-m3 center-align"  style=" margin: 5px;">
+    <a class="oauth-container btn darken-4 white black-text" href="/login/email" style="text-transform:none">
+        <div class="left">
+            <img width="20px" style="margin-top:7px; margin-right:8px" alt="E-mail sign-in" 
+                src="http://assets.stickpng.com/thumbs/585e4bf3cb11b227491c339a.png" />
+        </div>
+        <div  class="login_email">Login with Email</div>
+    </a>
+</div>
+</div>
+
+<!-- Compiled and minified CSS -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
+
+<!-- Compiled and minified JavaScript -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
+</body>
+
+</html>

server/template/sidebar.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" type="text/css" href="/static/css/main.css">
+  <script src="static/js/jquery-3.5.0.min.js"></script>
+
+  <link rel="stylesheet" href="static/css/colorPick.css">
+  <!-- OPTIONAL DARK THEME -->
+  <link rel="stylesheet" href="static/css/colorPick.dark.theme.css">
+  <script src="static/js/colorPick.js"></script>
+
+  <title>Index</title>
+</head>
+
+<body>
+  
+
+     <!-- Side navigation -->
+    <div class="sidenav">
+    <a href="/view">View</a>
+    <a href="/calendar">Calendar</a>
+    <a href="/account">Account</a>
+    <a href="/devices">Devices</a>
+  </div>
+  
+  <!-- Page content -->
+  <div class="main">
+  
+    {% block body %}
+    // content here
+    {% endblock %}
+
+  </div>
+
+</body>
+
+
+
+</html>