adds device page and form for new device

- form added to push new device id to backend
- device added to db model (needs to be pushed still)
- form return right now just prints
- design for device list created, still needs some updates

server/forms.py

@@ -28,4 +28,8 @@ class RegistrationForm(FlaskForm):
     def validate_email(self, email):
         user = User.query.filter_by(email=email.data).first()
         if user is not None:
-            raise ValidationError('Please use a different email address.')
+            raise ValidationError('Please use a different email address.')
+
+class DeviceForm(FlaskForm):
+    deviceId=StringField('New Device ID', validators=[DataRequired()])
+    submit = SubmitField('Add New Device')

server/googleHandler.py

@@ -104,7 +104,7 @@ def calendarsFromDb():
     calendars = dbCalendar.getCalendars(dbCalendar, current_user.id)
     pyCalendars = []
     for calendar in calendars:
-        name = calendar.name
+        name = (calendar.name[:16] + '..') if len(calendar.name)> 18 else calendar.name
         calendarId = calendar.calendar_id
         toggle = calendar.toggle
         color = calendar.color

server/models.py

@@ -88,3 +88,7 @@ class Calendar(db.Model):
         
         db.session.add(newcal)
         db.session.commit()
+        
+class Device(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    deviceId = db.Column(db.String(128), index=True)

server/routes.py

@@ -19,8 +19,8 @@ import requests
 import server.googleHandler as google
 
 from server import login_manager, app, db
-from server.forms import LoginForm, RegistrationForm
-from server.models import User, Calendar
+from server.forms import LoginForm, RegistrationForm, DeviceForm
+from server.models import User, Calendar, Device
 
 os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '1'
 
@@ -39,6 +39,29 @@ def index():
     else:
         return flask.render_template('login.html')
 
+@app.route("/view")
+def view():
+    if not current_user.is_authenticated:
+        return flask.render_template('login.html')
+    else:
+        return (flask.render_template('view.html'))
+
+@app.route("/devices", methods=['GET', 'POST'])
+def devices():
+    if not current_user.is_authenticated:
+        return flask.render_template('login.html')
+    
+    device = Device()
+    device.deviceId="Anthon-Mouse-Car"
+    devices = [device]
+    form = DeviceForm()
+    if form.validate_on_submit():
+        print(form.deviceId.data, flush=True)
+        # TODO add device to database here
+        
+    return flask.render_template('devices.html', devices=devices, form=form)
+
+
 @app.route("/calendar")
 @login_required
 def calendar():
@@ -60,6 +83,7 @@ def emaillogin():
         return redirect(url_for('account'))
     return render_template('emaillogin.html', title='Sign In', form=form)
 
+
 @app.route('/register', methods=['GET', 'POST'])
 def register():
     if current_user.is_authenticated:
@@ -74,7 +98,7 @@ def register():
         db.session.commit()
         flash('Congratulations, you are now a registered user!')
         return redirect(url_for('emaillogin'))
-    return render_template('register.html', title='Register', form=form)
+    return flask.render_template('register.html', title='Register', form=form)
 
 @app.route("/test")
 def testAPI():

server/static/css/main.css

@@ -106,11 +106,14 @@ body *
     left: 0;
     right: 0;
     bottom: 0;
-    background-color:  #2196F3;
+    background-color: #ddd; 
     -webkit-transition: .4s;
     transition: .4s;
   }
-  
+
+.slider.on {
+    background-color:  #2196F3;
+ } 
   .slider:before {
     position: absolute;
     content: "";
@@ -123,15 +126,15 @@ body *
     transition: .4s;
   }
   
-  input:checked + .slider {
+  input:checked + .slider.on{
     background-color: #ccc;
   }
   
-  input:focus + .slider {
+  input:focus + .slider.on {
     box-shadow: 0 0 1px #ccc;
   }
   
-  input:checked + .slider:before {
+  input:checked + .slider.on:before {
     -webkit-transform: translateX(-13px);
     -ms-transform: translateX(-13px);
     transform: translateX(-13px);
@@ -162,6 +165,12 @@ body *
    text-decoration: none;
 }
 
+.container .preview {
+    width: 20rem;
+    height: 20rem;
+    margin: 1rem 3rem 4rem 3rem;
+}
+
 .container .button.logout {
     background-color: #ddd;
 }
@@ -170,6 +179,15 @@ body *
     background-color: #b51409;
 }
 
+.container .button.adddevice {
+    background-color: #ddd;
+    color: white;
+}
+.container .button.addcalendar {
+    background-color: #ddd;
+    color: white;
+}
+
 .sub.container {
     width: 20rem;
     justify-content: left;

server/template/calendar.html

@@ -1,29 +1,28 @@
 {% 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 class="container">
+    <div style="width: 15rem; margin: 1rem">Calendar</div>
+    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Show on device</div>
+    <div style="width: 2rem; margin: 1rem">Color</div>
 </div>
 
-<div>
     {% for item in calendars %}
-    <div style="height: 30px">
+    <div class="container">
         <!--Name-->
-        <div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>
+        <div style="width: 15rem; margin: 1rem;">{{ item.name }}</div>
 
         <!--Toggle-->
-        <div style="width: 30%; float: left">
+        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
             <!-- Rounded switch -->
             <label class="switch">
                 <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
-                <span class="slider round"></span>
+                <span class="slider on round"></span>
             </label>
         </div>
 
         <!--Color Selector-->
-        <div style="width: 30%; float: left">
+        <div style="width: 2rem; margin: 1rem;">
         <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 }} />
@@ -32,8 +31,9 @@
         
     </div>
     {% endfor %}
- 
-</div>
+    <div class="container">
+        <div class="button addcalendar" style="width: auto; margin: 4rem">Add Calendar</div>
+    </div> 
 
 <script type="text/javascript">
     

server/template/devices.html

@@ -0,0 +1,36 @@
+{% extends "sidebar.html" %}
+{% block body%}
+
+<div class="container">
+    <div style="width: 15rem; margin: 1rem">Device ID</div>
+    <div style="width: 10rem; margin: 1rem; padding-right: 5rem">Link Status</div>
+    <div style="width: 2rem; margin: 1rem">Action</div>
+</div>
+
+    {% for item in devices %}
+    <div class="container">
+        <!--Name-->
+        <div style="width: 15rem; margin: 1rem;">{{ item.deviceId }}</div>
+
+        <!--Toggle-->
+        <div style="width: 10rem; margin: 1rem; padding-right: 5rem">
+           Connected 
+        </div>
+
+        <!--Color Selector-->
+        <div style="width: 2rem; margin: 1rem;">
+            <button type="button">Unlink</button>
+        </div>
+        
+    </div>
+    {% endfor %}
+    <form action="" method="post">
+    <div class="container">
+        {{ form.hidden_tag() }}
+        {{ form.deviceId.label }}
+        {{ form.deviceId(size=32) }}
+        {{ form.submit() }}
+    </div> 
+    </form>
+
+{% endblock %}

server/template/view.html

@@ -0,0 +1,43 @@
+{% extends "sidebar.html" %}
+{% block body%}
+<div class="container profile">
+    <p class="name">Sun View</p>
+</div>
+<div class="container">
+    <i class="fa fa-arrow-left" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
+    <img class="preview" src="/static/res/sunview.png" alt="Profile Picture"></img> 
+    <i class="fa fa-arrow-right" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
+</div>
+<div class="sub container">
+    <p class=name>Sun</p>
+    <div style="flex-grow: 1"></div>
+<label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Planet</p>
+    <div style="flex-grow: 1"></div>
+<label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Dwarf</p>
+    <div style="flex-grow: 1"></div>
+    <label class="switch"> 
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+<div class="sub container">
+    <p class=name>Calendar</p>
+    <div style="flex-grow: 1"></div>
+    <label class="switch">
+    <input class="toggle" id=Sun type="checkbox" toggled="True" >
+    <span class="slider round"></span>
+</label>
+</div> 
+{% endblock %}