further updates for mobile experience

as described in https://serverfault.com/questions/407612/error-2006-mysql-server-has-gone-away
the uwsgi server usually forks its workers from the parent, which already has a connection
open to the mysql database. So the new child typically inherits the same connection.
Should both workers use the same connection at the same time, the server connection throws a
'2006, server has gone away error'.
The flag --lazy creates fresh forks for each child, each creating a new connection.
This prevents the overload and after testing, the '2006' error seems to not be reproduceable.

backend

@@ -1 +1 @@
-Subproject commit 45cd71cc4bcddf23f46b1eddcffd8c7fda2b9d41
+Subproject commit f939127a0c9099f9c22c39bfaaed33b70b006fa2

database/__init__.py

@@ -0,0 +1,14 @@
+from server import db
+import time
+from database.models import Device
+
+def cleanDevices():
+    allDevs = db.session.query(Device)
+    devices = allDevs.filter(Device.lastConnection <= int(round(time.time())) - 60*60*24*30).all()
+    devices += allDevs.filter(Device.lastConnection == None)
+    for device in devices:
+        print(device.deviceName)
+        db.session.delete(device)
+
+    db.session.commit()
+

database/migrations/versions/9882522aafa9_.py

@@ -0,0 +1,30 @@
+"""empty message
+
+Revision ID: 9882522aafa9
+Revises: e5ef5e4a807b
+Create Date: 2020-07-25 09:34:07.987380
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '9882522aafa9'
+down_revision = 'e5ef5e4a807b'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('calendar', sa.Column('calendar_type', sa.String(length=32), nullable=True))
+    op.create_index(op.f('ix_calendar_calendar_type'), 'calendar', ['calendar_type'], unique=False)
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_index(op.f('ix_calendar_calendar_type'), table_name='calendar')
+    op.drop_column('calendar', 'calendar_type')
+    # ### end Alembic commands ###

database/models.py

@@ -61,11 +61,13 @@ class Device(db.Model):
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
     deviceName = db.Column(db.String(64), unique=True)
     connection = db.Column(db.Boolean)
+    lastConnection = db.Column(db.BigInteger)
 
 class Calendar(db.Model):
     id = db.Column(db.Integer, primary_key=True, autoincrement=True)
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'), index=True,  nullable=False)
     calendar_id = db.Column(db.String(256), primary_key=True)
+    calendar_type = db.Column(db.String(32), index=True)
     name = db.Column(db.String(256), index=True)
     toggle = db.Column(db.String(8))
     color = db.Column(db.String(16))

docker/calendarwatch/Dockerfile

@@ -2,9 +2,10 @@ FROM python:3.8-slim-buster
 RUN apt-get update && apt-get upgrade
 RUN pip3 install flask Flask-SQLAlchemy flask_migrate flask_login flask_wtf python-dotenv
 RUN apt-get install gcc libpcre3 libpcre3-dev libmariadbclient-dev -y
-RUN pip3 install uwsgi email-validator RandomWords
+RUN pip3 install uwsgi email-validator RandomWords ics
 RUN pip3 install google google-oauth google-auth-oauthlib google-api-python-client mysqlclient
 COPY docker-entrypoint.sh /usr/local/bin/
 EXPOSE 8084
 EXPOSE 3001
 ENTRYPOINT ["docker-entrypoint.sh"]
+# CMD tail -f /dev/null

docker/calendarwatch/docker-entrypoint.sh

@@ -1,5 +1,17 @@
 #!/bin/sh
 cd /home/calendarwatch
-uwsgi --ini wsgi.ini
+
+# use flasks own uwsgi server for debugging:
+# export FLASK_APP=/home/calendarwatch/server.py
+# python3 server.py
+
+
+# the --lazy flag forks() a new instance of the server
+# instead of forking from the parent and copying the same mysql
+# connection. If you don't do that, then multiple forks will use
+# the same connection at the same time, causing the server to throw
+# a 'connection has gone away' error.
+# more here: https://serverfault.com/questions/407612/error-2006-mysql-server-has-gone-away
+uwsgi --ini wsgi.ini --lazy
 echo "server has been started"  
 

server/forms.py

@@ -46,3 +46,13 @@ class DeviceForm(FlaskForm):
         device = Device.query.filter_by(deviceName=deviceName.data).first()
         if device is None:
             raise ValidationError('Device not Found')
+
+
+class CalendarForm(FlaskForm):
+    iCalURL = StringField('New ical URL', validators=[DataRequired()])
+    calName = StringField('Calendar Name', validators=[DataRequired()])
+    submit = SubmitField('Add URL')
+
+    def validate_iCalURL (self, iCalURL):
+        return None
+

server/googleHandler.py

@@ -122,6 +122,8 @@ def deleteAccount(user):
 
 def fetchCalendarEvents(user, calendars, startDate, endDate):
    
+    service = None
+    if user.google_token is not None:
         client_token = GC.build_credentials(user.google_token.token,
                                             user.google_token.refresh_token)
         credentials = google.oauth2.credentials.Credentials(**client_token)
@@ -130,10 +132,12 @@ def fetchCalendarEvents(user, calendars, startDate, endDate):
     
     all_events = []
     for calendar in calendars:
-        if calendar.toggle == "True":
+        if (calendar.toggle == "True" and 
+            calendar.calendar_type == "Google" and 
+            service != None):
             event_result = service.events().list(calendarId=calendar.calendar_id, 
-                                                 timeMin=startDate,
+                                                 timeMin=startDate.isoformat(),
-                                                 timeMax=endDate,
+                                                 timeMax=endDate.isoformat(),
                                                  maxResults=10, 
                                                  singleEvents=True,
                                                  orderBy='startTime').execute()
@@ -156,7 +160,10 @@ def fetchCalendarEvents(user, calendars, startDate, endDate):
                 
                 all_events.append(newEvent)
 
+    if service != None:
         colors = service.colors().get().execute()
+    else:
+        colors = None
 
     return all_events, colors
 
@@ -178,6 +185,7 @@ def fetchCalendars():
         calendar_list = service.calendarList().list(pageToken=page_token).execute()
         for calendar in calendar_list['items']:
             calendars.append(Calendar(name=calendar['summary'], 
+                                      calType="Google",
                                               calendarId=calendar['id'], 
                                               color=calendar['colorId']))
         page_token = calendar_list.get('nextPageToken')

server/routes.py

@@ -1,6 +1,7 @@
 # Python standard libraries
 import json
 import os
+import time
 
 # Third-party libraries
 import flask
@@ -16,10 +17,11 @@ from flask_login import (
 from random_words import RandomWords
 import requests
 
+import backend.icalHandler as ical
 import server.googleHandler as google
 
 from server import login_manager, app, db
-from server.forms import LoginForm, RegistrationForm, DeviceForm
+from server.forms import LoginForm, RegistrationForm, DeviceForm, CalendarForm
 import backend
 from database.models import User, Calendar, Device, GoogleToken
 
@@ -93,11 +95,58 @@ def devices():
             form=form)
 
 
-@app.route("/calendar")
+@app.route("/calendar", methods=['GET', 'POST', 'DELETE'])
-@login_required
 def calendar():
+    if not current_user.is_authenticated:
+        return flask.render_template('login.html')
+
     calendars = backend.calendarsFromDb(current_user)
-    return flask.render_template('calendar.html', calendars=calendars)
+
+    form = CalendarForm()
+    if request.method == 'POST':
+
+        if request.form.get("submit") == "Remove":
+            calendar = db.session.query(Calendar).filter(Calendar.calendar_id==request.form.get("calendar")).first()
+            db.session.delete(calendar)
+            db.session.commit()
+            return flask.redirect(url_for('calendar'))
+
+        elif form.validate_on_submit():
+            ical.icalToCalendarDb(form.iCalURL.data, form.calName.data, current_user)
+            return flask.redirect(url_for('calendar'))
+
+            
+        # otherwise it is a javascript POST
+        else:
+            try:
+                calId = request.json.get('calendar_id')
+                color = request.json.get('color', None)
+                toggle = request.json.get('toggle', None)
+            except:
+                return flask.render_template('calendar.html', calendars=calendars, form=form)
+
+            if color != None:
+                current_user.updateCalendar(calId, color=color)
+            if toggle != None:
+                current_user.updateCalendar(calId, toggle=toggle)
+            # toggle specific calendar of user
+            try:
+                calId = request.json.get('calendar_id')
+                color = request.json.get('color', None)
+                toggle = request.json.get('toggle', None)
+            except:
+                return flask.render_template('calendar.html', calendars=calendars, form=form)
+
+            if color != None:
+                current_user.updateCalendar(calId, color=color)
+            if toggle != None:
+                current_user.updateCalendar(calId, toggle=toggle)
+            # toggle specific calendar of user
+
+
+    return flask.render_template('calendar.html', calendars=calendars, form=form)
+
+# POST
 
 @app.route('/login/email', methods=['GET', 'POST'])
 def emaillogin():
@@ -204,6 +253,7 @@ def downloader(device):
     if request_device.user_id == None: 
         return jsonify(kind="unregistered")
 
+    request_device.lastConnection=int(round(time.time()))
     request_device.connection=True
     db.session.commit()
     request_user = db.session.query(User).filter(User.id==request_device.user_id).first()
@@ -213,6 +263,7 @@ def downloader(device):
     # TODO only pass along google calendars form user
     startDate, endDate = backend.getTimeStamps()
     events, colors  = google.fetchCalendarEvents(request_user, request_user.calendars, startDate, endDate)
+    events.extend(ical.fetchCalendarEvents(request_user.calendars, startDate, endDate))
     calendarjson = backend.generateJsonFromCalendarEntries(events, colors) 
     return jsonify(calendarjson)
 
@@ -233,6 +284,7 @@ def generateDeviceFingerprint():
         if not db.session.query(Device).filter(Device.deviceName==fingerprint).first():
             # Save as new Device
             device = Device(deviceName=fingerprint, connection=False)
+            device.lastConnection = int(round(time.time()))
             db.session.add(device)
             db.session.commit()
             break;
@@ -240,27 +292,3 @@ def generateDeviceFingerprint():
     # Send to Device
     return jsonify(deviceName=fingerprint)
 
-# POST
-
-@app.route('/calendar', methods = ['POST', 'DELETE'])
-@login_required
-def user():
-    if request.method == 'POST':
-        calId = request.json.get('calendar_id')
-        color = request.json.get('color', None)
-        toggle = request.json.get('toggle', None)
-        
-        if color != None:
-            current_user.updateCalendar(calId, color=color)
-        if toggle != None:
-            current_user.updateCalendar(calId, toggle=toggle)
-        # toggle specific calendar of user
-        
-    elif request.method == 'DELETE':
-        # do nothing
-        return 'NONE'
-    else:
-        # POST Error 405
-        print("405")
-
-    return 'OK'

server/static/css/main.css

@@ -69,7 +69,7 @@ body
 }
 
 .grayblock .padded {
-    padding: 3rem; 
+    padding: 0rem; 
 }
 
 .horizontal {
@@ -91,11 +91,13 @@ body
 }
 
 .vertical .content .image {
+    max-width: 90%;
     width: 25rem;
 }
 
 .vertical .content .text {
-    margin-left: 2rem;
+    max-width: 90%;
+    margin: auto;
     width: 26rem;
 }
 
@@ -106,8 +108,6 @@ body
 
 .horizontal .image {
     margin: 1rem;
-    margin-left: 4rem;
-    margin-right: 4rem;
     height: 20rem;
     border-radius: 1rem;
     width: auto;
@@ -156,7 +156,7 @@ body
     background-color: #eaeaea;
     overflow: hidden;
     margin: auto;
-    display: flex;
+    display: block;
 }
 
 .navigation_rightside {
@@ -165,7 +165,7 @@ body
 
 .navigation a {
     float: left;
-    display: flex;
+    display: block;
     color: #333;
     text-align: center;
     padding: 14px 16px;
@@ -211,6 +211,7 @@ body
     display: block;
     text-align: left;
   }
+  
 }
 
 /* Style page content */
@@ -289,25 +290,27 @@ body
   }
 
 .container {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items:center;
-    flex-direction: row;
+    /* flex-direction: row; */
-    padding: 0px 2rem 0px 2rem;
+    /*padding: 0px 2rem 0px 2rem;*/
 }
 
 .container .button {
    padding: 1rem 1.5rem 1rem 1.5rem;
    font-size: 2rem;
-   margin: 4rem;
+   margin: 4rem 1rem 1rem 1rem;
    color: black;
    text-decoration: none;
 }
 
 .container .preview {
     width: 20rem;
-    height: 20rem;
+    height: auto;
     margin: 1rem 3rem 4rem 3rem;
+    max-width: 100%;
 }
 
 .container .button.logout {
@@ -328,8 +331,9 @@ body
 }
 
 .sub.container {
-    width: 20rem;
+    width: 40%;
     justify-content: left;
+    display: flex;
 }
 
 .profile {
@@ -349,6 +353,7 @@ body
 .profile .name {
     font-size: 3rem;
     color: #333;
+    text-align: center;
 }
 
 .grey {
@@ -366,3 +371,10 @@ body
     border-radius: 5px; 
     margin-right: 1rem;
 }
+
+
+@media (max-width:800px) { 
+  .sub.container {
+    justify-content: center;
+  }
+}

server/template/calendar.html

@@ -2,18 +2,32 @@
 {% block body%}
 
 <div class="container">
-    <div style="width: 15rem; margin: 1rem">Calendar</div>
+    <div style="width: 4rem;margin:1rem;"></div>
-    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Show on device</div>
+    <div style="width: 10rem; margin: 1rem; font-weight: bold">Calendar</div>
-    <div style="width: 2rem; margin: 1rem">Color</div>
+    <div style="display: inline-flex">
+        <div style="width: 5rem; margin: 1rem; padding-right: 1rem;font-weight: bold">Show on device</div>
+        <div style="width: 2rem; margin: 1rem;font-weight: bold">Color</div>
+    </div>
 </div>
 
     {% for item in calendars %}
-    <div class="container">
+    <div class="container" style="margin-top: 1.5rem">
+        <!--action button-->
+        {% if "ical" == item.calType %} 
+        <div style="width: 4rem; margin: 1rem;">
+            <form action="" method="post">
+                <input type="hidden" name="calendar" value={{ item.calendarId }}>
+                <input type="submit" name="submit" value="Remove">
+            </form> 
+        </div>
+        {% else %}
+        <div style="width: 4rem; margin: 1rem;"></div>
+        {% endif %}
         <!--Name-->
-        <div style="width: 15rem; margin: 1rem;">{{ item.name }}</div>
+        <div style="width: 10rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">{{ item.name }}</div>
-
+        <div style="display: inline-flex">
         <!--Toggle-->
-        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
+        <div style="width: 5rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem; padding-right: 1rem">
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
@@ -22,22 +36,38 @@
         </div>
 
         <!--Color Selector-->
-        <div style="width: 2rem; margin: 1rem;">
+        <div style="width: 2rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">
         <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--> 
         </div>
+        </div>
         
     </div>
     {% endfor %}
     <div id=calendars class="container">
-        <a class="button" href="login/google">Google Calendar</a>
-        <a class="button" href="#" >Nextcloud Calendar</a>
     </div>
-    <div class="container">
+    <form action="" method="post">
+    <div class="container grey" style="margin-top: 3rem;">
+        <div>{{ form.hidden_tag() }}</div>
+        <div style="display: flex">
+        <div style="margin: 1rem">{{ form.calName.label }}</div>
+        <div style="margin: 1rem">{{ form.calName(size=24) }}</div>
+        </div>
+        <div style="display: flex">
+        <div style="margin: 1rem">{{ form.iCalURL.label }}</div>
+        <div style="margin: 1rem">{{ form.iCalURL(size=24) }}</div>
+        </div>
+        <div style="with: 8rem; margin: 1rem">{{ form.submit() }}</div>
+        {% for error in form.iCalURL.errors %}
+        <span style="color: red;">[{{ error }}]</span>
+        {% endfor %}
+    </div> 
+    </form>
+    <!--div class="container">
         <a class="button addcalendar" href="/login/google" style="width: auto; margin: 4rem">Add Calendar</a>
-    </div> 
+    </div--> 
 
 <script type="text/javascript">
     

server/template/footer.html

@@ -1,7 +1,7 @@
 
 <div id="footer">
 
-    <div class="footer">
+    <div class="footer container">
         <p>made by Raphael Maenle </p>  
         <p><a href="mailto:raphael@maenle.net">raphael@maenle.net</a></p>
       <p><a href="/privacy">privacy policy</a></p>

server/template/privacy.html

@@ -7,7 +7,7 @@
 </div>
 
 <h3 style="margin-left:10rem">Summary</h3>
-<div style="margin-left:10rem; margin-right:10rem;">This Privacy Statement descibes how Longitude handles your data and how the developer makes sure, that the users information remains as secure as possible.
+<div style="margin-left:10rem; margin-right:10rem;">This Privacy Statement describes how Longitude handles your data and how the developer makes sure, that the user's information remains as secure as possible.
 This application does not share any user information with third parties and takes care to only save the minimum amount of information about the user.
 The following chapters cover all essential points of interest about which information is saved and when it is removed from the server.
 If you have any further questions or suggestions, please email us at <a href="mailto:raphael@maenle.net">raphael@maenle.net</a>.</div>
@@ -15,7 +15,7 @@ If you have any further questions or suggestions, please email us at <a href="ma
 
 <h3 style="margin-left:10rem">What Information is saved?</h3>
 <div style="margin-left:10rem; margin-right:10rem;">
-Longitude Calendar saves as little information about their users as possible. The application handles sensitive information only when directly prompted by the user or a device associated with the user. The service only provides this information to the user or a device associated with the user. The data saved in the Longidute Databas is
+Longitude Calendar saves as little information about their users as possible. The application handles sensitive information only when directly prompted by the user or a device associated with the user. The service only provides this information to the user or a device associated with the user. The data saved in the Longidute Database is
 <ul>
     <li>Username and hashed password or alternatively</li>
     <li>Google Username and  Id with Google Login Token</li>

server/template/sidebar.html

@@ -39,6 +39,8 @@
                 // content here
                 {% endblock %}
 
+          </div>
+          <div id="main">
           </div>
           {% include "footer.html" %}
     </div>

server/template/startpage.html

@@ -12,13 +12,15 @@
 <div class="grayblock horizontal">
     <div class="content padded">
         <div style='margin: 1rem'>
-            Connect your <img src='/static/res/googlelogo.png' style='height: 2.2rem; vertical-align:middle; padding-Bottom: 0.1rem'/> Calendar...
+            <!--Connect your <img src='/static/res/googlelogo.png' style='height: 3.2rem; vertical-align:middle; padding-Bottom: 0.1rem'/> Calendar...-->
+            Connect your Calendar..
         </div>
         <img class="image" src='/static/res/calendar.svg'/>
     </div>
     <div class="content padded">
         <div style='margin: 1rem'>
-            ...with your <img src='/static/res/tizenlogo.png' style='height: 2rem; vertical-align:middle; padding-Bottom:0.3rem;'/> Watchface
+            <!--...with your <img src='/static/res/tizenlogo.png' style='height: 2rem; vertical-align:middle; padding-Bottom:0.3rem;'/> Watchface-->
+            ..with your Tizen Watchface
         </div>
         <img class="image" src='/static/res/watchface.svg'/>
     </div>