added back flask website version

velconnect/__init__.py

@@ -17,8 +17,8 @@ def create_app():
     from .routes import api
     app.register_blueprint(api.bp, url_prefix='/api')
 
-    # from .routes import website
-    # app.register_blueprint(website.bp)
+    from .routes import website
+    app.register_blueprint(website.bp)
 
     # Error handlers
     app.register_error_handler(404, resource_not_found)

velconnect/routes/api.py

@@ -10,6 +10,11 @@ from random import random
 bp = Blueprint('api', __name__)
 
 
+@bp.route('/', methods=['GET'])
+def index():
+    return render_template('api.html')
+
+
 @bp.route('/api_spec.json', methods=['GET'])
 @require_api_key(0)
 def api_spec():

velconnect/routes/website.py

@@ -9,19 +9,19 @@ bp = Blueprint('website', __name__, template_folder='templates')
 
 @bp.route('/', methods=['GET'])
 def index():
-    return render_template('index.jinja')
+    return render_template('index.html')
 
 
 @bp.route('/pair', methods=['GET'])
 def pair():
-    return render_template('pair.jinja')
+    return render_template('pair.html')
 
 
 @bp.route('/success', methods=['GET'])
 def success():
-    return render_template('success.jinja')
+    return render_template('success.html')
 
 
 @bp.route('/failure', methods=['GET'])
 def failure():
-    return render_template('failure.jinja')
+    return render_template('failure.html')

velconnect/static/api_spec.json

@@ -7,7 +7,7 @@
     },
     "servers": [
         {
-            "url": "http://3.23.79.32/api/"
+            "url": "http://3.141.15.55/api/"
         }
     ],
     "tags": [

velconnect/static/favicons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#b91d47</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

velconnect/static/favicons/safari-pinned-tab.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M605 1500 l600 -600 97 0 98 0 0 600 0 600 -100 0 -100 0 0 -452 0
+-453 -453 453 -452 452 -145 0 -145 0 600 -600z"/>
+<path d="M1500 2000 l0 -100 300 0 300 0 0 100 0 100 -300 0 -300 0 0 -100z"/>
+<path d="M2200 1500 l0 -600 398 2 397 3 3 98 3 97 -301 0 -300 0 -2 498 -3
+497 -97 3 -98 3 0 -601z"/>
+<path d="M1500 1500 l0 -100 300 0 300 0 0 100 0 100 -300 0 -300 0 0 -100z"/>
+<path d="M1500 1000 l0 -100 300 0 300 0 0 100 0 100 -300 0 -300 0 0 -100z"/>
+</g>
+</svg>

velconnect/static/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

velconnect/static/js/util.js

@@ -0,0 +1,98 @@
+
+function httpGetAsync(theUrl, callback, failCallback) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (xmlHttp.readyState == 4) {
+            if (xmlHttp.status == 200) {
+                callback(xmlHttp.responseText);
+            } else {
+                failCallback(xmlHttp.status);
+            }
+        }
+    }
+    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
+    xmlHttp.send(null);
+}
+
+
+function httpPostAsync(theUrl, data, callback, failCallback) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+        if (xmlHttp.readyState == 4) {
+            if (xmlHttp.status == 200) {
+                callback(xmlHttp.responseText);
+            } else {
+                failCallback(xmlHttp.status);
+            }
+        }
+    }
+    xmlHttp.open("POST", theUrl, true); // true for asynchronous 
+    xmlHttp.setRequestHeader('Content-type', 'application/json');
+    xmlHttp.send(JSON.stringify(data));
+}
+
+function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    let expires = "expires=" + d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+function writeClass(className, data) {
+    if (data == undefined || data == null || data.toString() == 'undefined') {
+        data = "";
+    }
+
+    let elements = document.getElementsByClassName(className);
+    Array.from(elements).forEach(e => {
+        e.innerHTML = data;
+    });
+}
+
+function writeId(idName, data) {
+    if (data == undefined || data == null || data.toString() == 'undefined') {
+        data = "";
+    }
+
+    document.getElementById(idName).innerHTML = data;
+}
+
+function writeValue(className, data) {
+    if (data == undefined || data == null || data.toString() == 'undefined') {
+        data = "";
+    }
+
+    let elements = document.getElementsByClassName(className);
+    Array.from(elements).forEach(e => {
+        e.value = data;
+    });
+}
+
+
+function writeSrc(className, data) {
+    if (data == undefined || data == null || data.toString() == 'undefined') {
+        data = "";
+    }
+
+    let elements = document.getElementsByClassName(className);
+    Array.from(elements).forEach(e => {
+        e.src = data;
+    });
+}

velconnect/templates/api.html

@@ -0,0 +1,24 @@
+<!doctype html>
+  <html>
+    <head>
+      <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
+      <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
+    </head>
+    <body>
+      <rapi-doc
+        render-style = "read" 
+        primary-color = "#bc1f2d" 
+        show-header = "false" 
+        show-info = "true"
+        spec-url = "http://3.141.15.55/api/api_spec.json" 
+        default-schema-tab = 'example'
+        
+        > 
+        
+
+        <div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;"> 
+          <img src = "/static/favicons/android-chrome-256x256.png" style="width:10em; margin: auto;" />
+        </div>
+      </rapi-doc>
+    </body>
+  </html>

velconnect/templates/failure.html

@@ -0,0 +1,35 @@
+<html>
+
+<head>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/static/favicons/site.webmanifest">
+    <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#b91d47">
+    <meta name="theme-color" content="#ffffff">
+
+    
+    <style>
+        body {
+            background-color: #333;
+            font-size: 1.2em;
+        }
+
+        .centered {
+            margin: 8em auto;
+            width: max-content;
+            font-family: arial, sans-serif;
+            color: #ddd;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="centered">
+        🤮 FAIL 🤡
+    </div>
+</body>
+
+</html>

velconnect/templates/index.html

@@ -0,0 +1,210 @@
+<html>
+
+<head>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/static/favicons/site.webmanifest">
+    <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#b91d47">
+    <meta name="theme-color" content="#ffffff">
+
+
+
+    <link rel="stylesheet" href="/static/css/spectre.min.css">
+    <script src="/static/js/util.js"></script>
+    <style>
+        .container {
+            max-width: 30em;
+        }
+
+        .card {
+            margin: 1em;
+            box-shadow: 0 0 2em #0003;
+        }
+    
+        input.btn {
+            cursor: auto;
+            user-select: auto;
+        }
+
+        .centered {
+            margin: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+
+        <div id="loading" class="loading loading-lg"></div>
+        <div id="failure" style="display: none;">☹️</div>
+
+
+        <div id="headset_details" style="display: none;">
+            <div class="panel card">
+                <div class="panel-header text-center">
+                    <figure class="avatar avatar-lg"><img src="/static/favicons/android-chrome-192x192.png"
+                            alt="Avatar"></figure>
+                    <div class="panel-title h5 mt-10">Headset Info</div>
+                    <div class="panel-subtitle hw_id">---</div>
+                </div>
+                <div class="panel-body">
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">Current Room</div>
+                            <input class="btn current_room" type="text" id="current_room" placeholder="----">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_room_id"
+                                data-tooltip="Set Room ID">Set</button>
+                        </div>
+                    </div>
+                    <br>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">First Added</div>
+                            <div class="tile-subtitle date_created">---</div>
+                        </div>
+                    </div>
+                    <br>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">Last Used</div>
+                            <div class="tile-subtitle last_used">---</div>
+                        </div>
+                    </div>
+                    <br>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">User Name</div>
+                            <input class="btn user_name" type="text" id="user_name" placeholder="----">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_name"
+                                data-tooltip="">Set</button>
+                        </div>
+                    </div>
+                    <br>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">TV URL</div>
+                            <input class="btn tv_url" type="text" id="tv_url" placeholder="----">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_tv_url"
+                                data-tooltip="">Set</button>
+                        </div>
+                    </div>
+                    <br>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">User Color</div>
+                            <input class="btn user_color" type="color" id="user_color" placeholder="#ffffff">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_color"
+                                data-tooltip="Set User Color">Set</button>
+                        </div>
+                    </div>
+                    <br>
+                    <div class="tile tile-centered">
+                        <div class="tile-content">
+                            <div class="tile-title text-bold">Carpet Color</div>
+                            <input class="btn carpet_color" type="color" id="carpet_color" placeholder="#ffffff">
+                        </div>
+                        <div class="tile-action">
+                            <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_carpet_color"
+                                data-tooltip="Set Carpet Color">Set</button>
+                        </div>
+                    </div>
+                    <br>
+                    <br>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+
+        let submit_button = document.getElementById('submit_pairing_code');
+        let pair_code_input = document.getElementById('pair_code');
+        let loading = document.getElementById('loading');
+        let enter_pairing_id = document.getElementById('enter_pairing_id');
+        let headset_details = document.getElementById('headset_details');
+        let hw_id_field = document.getElementById('hw_id');
+        let failure = document.getElementById('failure');
+        let set_room_id = document.getElementById('set_room_id');
+        let current_room = document.getElementById('current_room');
+
+
+        // check cookie
+        let hw_id = getCookie('hw_id');
+        loading.style.display = "none";
+        if (hw_id != "") {
+
+            httpGetAsync('/api/get_state/' + hw_id, (resp) => {
+                console.log(resp);
+                let respData = JSON.parse(resp);
+
+                writeClass('hw_id', respData['user']['hw_id']);
+                writeValue('current_room', respData['user']['current_room']);
+                writeClass('date_created', respData['user']['date_created']);
+                writeClass('last_used', respData['user']['last_used']);
+                writeValue('user_color', respData['user']['user_color']);
+                writeValue('user_name', respData['user']['user_name']);
+                if (respData['room']) {
+                    writeValue('tv_url', respData['room']['tv_url']);
+                    writeValue('carpet_color', respData['room']['carpet_color']);
+                }
+
+                headset_details.style.display = "block";
+            }, (status) => {
+                failure.style.display = "block";
+            });
+
+            function setUserData(endpoint, data) {
+                httpPostAsync('/api/set_headset_details/' + hw_id + '/' + endpoint,
+                    data,
+                    (resp) => {console.log('success');},
+                    (status) => {console.log('fail');}
+                );
+            }
+            function setRoomData(endpoint, data) {
+                httpPostAsync('/api/set_room_details/' + current_room.value + '/' + endpoint,
+                    data,
+                    (resp) => {console.log('success');},
+                    (status) => {console.log('fail');}
+                );
+            }
+
+            set_room_id.addEventListener('click', () => {
+                setUserData('current_room', {"current_room": current_room.value});
+            });
+            document.getElementById('set_user_color').addEventListener('click', () => {
+                setUserData('user_color', {"user_color": document.getElementById('user_color').value});
+            });
+            document.getElementById('set_user_name').addEventListener('click', () => {
+                setUserData('user_name', {"user_name": document.getElementById('user_name').value});
+            });
+            document.getElementById('set_tv_url').addEventListener('click', () => {
+                setRoomData('tv_url', {"tv_url": document.getElementById('tv_url').value});
+            });
+            document.getElementById('set_carpet_color').addEventListener('click', () => {
+                setRoomData('carpet_color', {"carpet_color": document.getElementById('carpet_color').value});
+            });
+
+        } else {
+            window.location.href = "/pair";
+        }
+
+
+
+
+
+
+    </script>
+</body>
+
+</html>

velconnect/templates/pair.html

@@ -0,0 +1,91 @@
+<html>
+
+<head>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/static/favicons/site.webmanifest">
+    <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#b91d47">
+    <meta name="theme-color" content="#ffffff">
+
+
+
+    <link rel="stylesheet" href="/static/css/spectre.min.css">
+    <script src="/static/js/util.js"></script>
+    <style>
+        :root {
+            --primary-color: #bc1f2d;
+        }
+
+        #pair_code {
+            max-width: 4em;
+        }
+
+        .container {
+            max-width: 30em;
+        }
+
+        .card {
+            margin: 1em;
+            box-shadow: 0 0 2em #0003;
+        }
+
+        input.btn {
+            cursor: auto;
+            user-select: auto;
+        }
+
+        .centered {
+            margin: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <!-- <div class="hero bg-gray">
+            <div class="hero-body">
+                <h1>Pair your headset.</h1>
+            </div>
+        </div> -->
+
+        <div class="card">
+            <div class="card-image">
+                <img src="/static/img/pair_code_screenshot.png" class="img-responsive">
+            </div>
+            <div class="card-header">
+                <div class="card-title h5">Enter Pairing Code</div>
+                <div class="card-subtitle text-gray"></div>
+            </div>
+            <div class="card-body">
+                You can find the code in the bottom left of your menu tablet in conVRged.
+            </div>
+            <div class="card-footer centered">
+                <input class="btn" type="text" id="pair_code" placeholder="0000">
+                <button class="btn btn-primary" id="submit_pairing_code">Submit</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+
+        let submit_button = document.getElementById('submit_pairing_code');
+        let pair_code_input = document.getElementById('pair_code');
+        submit_button.addEventListener('click', () => {
+            httpGetAsync('/api/pair_headset/' + pair_code_input.value, (resp) => {
+                console.log(resp);
+                let respData = JSON.parse(resp);
+                if (respData['hw_id'] != '') {
+                    setCookie('hw_id', respData['hw_id'], 60);
+                    window.location.href = "/";
+                }
+            }, (status) => {
+                window.location.href = "/failure";
+            });
+        });
+    </script>
+</body>
+
+</html>

velconnect/templates/success.html

@@ -0,0 +1,35 @@
+<html>
+
+<head>
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
+    <link rel="manifest" href="/static/favicons/site.webmanifest">
+    <link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#b91d47">
+    <meta name="theme-color" content="#ffffff">
+
+    
+    <style>
+        body {
+            background-color: #333;
+            font-size: 1.2em;
+        }
+
+        .centered {
+            margin: 8em auto;
+            width: max-content;
+            font-family: arial, sans-serif;
+            color: #ddd;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="centered">
+        🎉 SUCCESS 🎉
+    </div>
+</body>
+
+</html>

website/api.html

@@ -0,0 +1,24 @@
+<!doctype html>
+  <html>
+    <head>
+      <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
+      <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
+    </head>
+    <body>
+      <rapi-doc
+        render-style = "read" 
+        primary-color = "#bc1f2d" 
+        show-header = "false" 
+        show-info = "true"
+        spec-url = "http://3.141.15.55/api/api_spec.json" 
+        default-schema-tab = 'example'
+        
+        > 
+        
+
+        <div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;"> 
+          <img src = "/favicons/android-chrome-256x256.png" style="width:10em; margin: auto;" />
+        </div>
+      </rapi-doc>
+    </body>
+  </html>