vel
/
VEL-Connect
mirror of https://github.com/velaboratory/VEL-Connect
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

switching back to flask because python simple

dev
Anton Franzluebbers 2021-11-06 20:22:55 -04:00
parent 57f218f3bc
commit 0f4a23f600
22 changed files with 739 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
velconnect/static/css/coloris.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
velconnect/static/css/spectre-exp.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
velconnect/static/css/spectre-icons.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
velconnect/static/css/spectre.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
velconnect/static/js/coloris.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

57
velconnect/static/js/util.js
View File

@ -96,3 +96,60 @@ function writeSrc(className, data) {
e.src = data; e.src = data;
}); });
} }
function timeSince(date) {
let seconds = Math.floor((new Date() - date) / 1000);
let interval = seconds / 31536000;
if (interval > 1) {
return Math.floor(interval) + " years";
}
interval = seconds / 2592000;
if (interval > 1) {
return Math.floor(interval) + " months";
}
interval = seconds / 86400;
if (interval > 1) {
return Math.floor(interval) + " days";
}
interval = seconds / 3600;
if (interval > 1) {
return Math.floor(interval) + " hours";
}
interval = seconds / 60;
if (interval > 1) {
return Math.floor(interval) + " minutes";
}
return Math.floor(seconds) + " seconds";
}
function timeSinceString(date) {
date = Date.parse(date);
let seconds = Math.floor((new Date() - date) / 1000);
let interval = seconds / 31536000;
if (interval > 1) {
return Math.floor(interval) + " years";
}
interval = seconds / 2592000;
if (interval > 1) {
return Math.floor(interval) + " months";
}
interval = seconds / 86400;
if (interval > 1) {
return Math.floor(interval) + " days";
}
interval = seconds / 3600;
if (interval > 1) {
return Math.floor(interval) + " hours";
}
interval = seconds / 60;
if (interval > 1) {
return Math.floor(interval) + " minutes";
}
return Math.floor(seconds) + " seconds";
}

3
velconnect/templates/api.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters --> <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script> <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
<title>API Reference</title>
</head> </head>
<body> <body>
<rapi-doc <rapi-doc
@ -10,7 +11,7 @@
primary-color = "#bc1f2d" primary-color = "#bc1f2d"
show-header = "false" show-header = "false"
show-info = "true" show-info = "true"
spec-url = "http://3.141.15.55/api/api_spec.json" spec-url = "{% include 'api_url.html' %}/api/api_spec.json"
default-schema-tab = 'example' default-schema-tab = 'example'
> >

1
velconnect/templates/api_url.html Normal file
View File

@ -0,0 +1 @@
http://velconnect.crabdance.com

48
velconnect/templates/failure.html
View File

@ -1,35 +1,23 @@
<html> {% extends 'single.html' %}
<head> {% block content %}
<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>
<style> body {
body { background-color: #333;
background-color: #333; font-size: 1.2em;
font-size: 1.2em; }
}
.centered { .centered {
margin: 8em auto; margin: 8em auto;
width: max-content; width: max-content;
font-family: arial, sans-serif; font-family: arial, sans-serif;
color: #ddd; color: #ddd;
} }
</style> </style>
</head> <div class="centered">
🤮 FAIL 🤡
</div>
<body> {% endblock %}
<div class="centered">
🤮 FAIL 🤡
</div>
</body>
</html>

360
velconnect/templates/index.html
View File

@ -1,210 +1,214 @@
<html> {% extends 'single.html' %}
<head> {% block content %}
<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"> <style>
<script src="/static/js/util.js"></script> .container {
<style> max-width: 30em;
.container { }
max-width: 30em;
}
.card { .card {
margin: 1em; margin: 1em;
box-shadow: 0 0 2em #0003; box-shadow: 0 0 2em #0003;
} }
input.btn {
cursor: auto;
user-select: auto;
}
.centered { input.btn {
margin: auto; cursor: auto;
} user-select: auto;
</style> }
</head>
<body> .centered {
<div class="container"> margin: auto;
}
</style>
<div id="loading" class="loading loading-lg"></div> <div id="loading"><br><br>
<div id="failure" style="display: none;">☹️</div> <div class="loading loading-lg"></div>
</div>
<div id="failure" style="display: none;"><br><br><br>☹️</div>
<div id="headset_details" style="display: none;"> <div id="headset_details" style="display: none;">
<div class="panel card"> <div class="panel card">
<div class="panel-header text-center"> <div class="panel-header text-center">
<figure class="avatar avatar-lg"><img src="/static/favicons/android-chrome-192x192.png" <figure class="avatar avatar-lg"><img src="/static/favicons/android-chrome-192x192.png" alt="Avatar"></figure>
alt="Avatar"></figure> <div class="panel-title h5 mt-10">Headset Info</div>
<div class="panel-title h5 mt-10">Headset Info</div> <div class="panel-subtitle hw_id">---</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>
<div class="panel-body"> <div class="tile-action">
<div class="tile tile-centered"> <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_room_id"
<div class="tile-content"> data-tooltip="Set Room ID">Set</button>
<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>
<br>
<div class="tile tile-centered">
<div class="tile-content">
<div class="tile-title text-bold">First Seen</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 Login</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 coloris" type="text" 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 coloris" type="text" 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>
</div>
<script> <script type="text/javascript" src="/static/js/coloris.min.js"></script>
<script>
let submit_button = document.getElementById('submit_pairing_code'); let submit_button = document.getElementById('submit_pairing_code');
let pair_code_input = document.getElementById('pair_code'); let pair_code_input = document.getElementById('pair_code');
let loading = document.getElementById('loading'); let loading = document.getElementById('loading');
let enter_pairing_id = document.getElementById('enter_pairing_id'); let enter_pairing_id = document.getElementById('enter_pairing_id');
let headset_details = document.getElementById('headset_details'); let headset_details = document.getElementById('headset_details');
let hw_id_field = document.getElementById('hw_id'); let hw_id_field = document.getElementById('hw_id');
let failure = document.getElementById('failure'); let failure = document.getElementById('failure');
let set_room_id = document.getElementById('set_room_id'); let set_room_id = document.getElementById('set_room_id');
let current_room = document.getElementById('current_room'); let current_room = document.getElementById('current_room');
// check cookie // check cookie
let hw_id = getCookie('hw_id'); let hw_id = getCookie('hw_id');
loading.style.display = "none"; if (hw_id != "") {
if (hw_id != "") {
httpGetAsync('/api/get_state/' + hw_id, (resp) => { httpGetAsync('{% include "api_url.html" %}/api/get_state/' + hw_id, (resp) => {
console.log(resp); console.log(resp);
let respData = JSON.parse(resp); let respData = JSON.parse(resp);
writeClass('hw_id', respData['user']['hw_id']); writeClass('hw_id', respData['user']['hw_id']);
writeValue('current_room', respData['user']['current_room']); writeValue('current_room', respData['user']['current_room']);
writeClass('date_created', respData['user']['date_created']); writeClass('date_created', respData['user']['date_created'] + "<br>" + timeSinceString(respData['user']['date_created']) + " ago");
writeClass('last_used', respData['user']['last_used']); writeClass('last_used', respData['user']['last_used'] + "<br>" + timeSinceString(respData['user']['last_used']) + " ago");
writeValue('user_color', respData['user']['user_color']); writeValue('user_color', respData['user']['user_color']);
writeValue('user_name', respData['user']['user_name']); writeValue('user_name', respData['user']['user_name']);
if (respData['room']) { if (respData['room']) {
writeValue('tv_url', respData['room']['tv_url']); writeValue('tv_url', respData['room']['tv_url']);
writeValue('carpet_color', respData['room']['carpet_color']); 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', () => { loading.style.display = "none";
setUserData('current_room', {"current_room": current_room.value}); headset_details.style.display = "block";
}); }, (status) => {
document.getElementById('set_user_color').addEventListener('click', () => { loading.style.display = "none";
setUserData('user_color', {"user_color": document.getElementById('user_color').value}); failure.style.display = "block";
}); });
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 { function setUserData(endpoint, data) {
window.location.href = "/pair"; httpPostAsync('{% include "api_url.html" %}/api/set_headset_details/' + hw_id + '/' + endpoint,
data,
(resp) => { console.log('success'); },
(status) => { console.log('fail'); }
);
}
function setRoomData(endpoint, data) {
httpPostAsync('{% include "api_url.html" %}/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> Coloris({
el: '.coloris',
swatches: [
'#264653',
'#2a9d8f',
'#e9c46a',
'#f4a261',
'#e76f51',
'#d62828',
'#023e8a',
'#0077b6',
'#0096c7',
'#00b4d8',
'#48cae4',
]
});
</script>
{% endblock %}

144
velconnect/templates/pair.html
View File

@ -1,91 +1,69 @@
<html> {% extends 'single.html' %}
<head> {% block content %}
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png"> <style>
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png"> :root {
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png"> --primary-color: #bc1f2d;
<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"> #pair_code {
<meta name="theme-color" content="#ffffff"> 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>
<div class="card">
<link rel="stylesheet" href="/static/css/spectre.min.css"> <div class="card-image">
<script src="/static/js/util.js"></script> <img src="/static/img/pair_code_screenshot.png" class="img-responsive">
<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> </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> <script>
let submit_button = document.getElementById('submit_pairing_code'); let submit_button = document.getElementById('submit_pairing_code');
let pair_code_input = document.getElementById('pair_code'); let pair_code_input = document.getElementById('pair_code');
submit_button.addEventListener('click', () => { submit_button.addEventListener('click', () => {
httpGetAsync('/api/pair_headset/' + pair_code_input.value, (resp) => { httpGetAsync("{% include 'api_url.html' %}/api/pair_headset/" + pair_code_input.value, (resp) => {
console.log(resp); console.log(resp);
let respData = JSON.parse(resp); let respData = JSON.parse(resp);
if (respData['hw_id'] != '') { if (respData['hw_id'] != '') {
setCookie('hw_id', respData['hw_id'], 60); setCookie('hw_id', respData['hw_id'], 60);
window.location.href = "/"; window.location.href = "/";
} }
}, (status) => { }, (status) => {
window.location.href = "/failure"; window.location.href = "/failure";
});
}); });
</script> });
</body> </script>
{% endblock %}
</html>

52
velconnect/templates/single.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="/static/css/spectre.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/spectre-exp.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/spectre-icons.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/coloris.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">
{% block content %}{% endblock %}
</div>
</body>
</html>

48
velconnect/templates/success.html
View File

@ -1,35 +1,23 @@
<html> {% extends 'single.html' %}
<head> {% block content %}
<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>
<style> body {
body { background-color: #333;
background-color: #333; font-size: 1.2em;
font-size: 1.2em; }
}
.centered { .centered {
margin: 8em auto; margin: 8em auto;
width: max-content; width: max-content;
font-family: arial, sans-serif; font-family: arial, sans-serif;
color: #ddd; color: #ddd;
} }
</style> </style>
</head> <div class="centered">
🎉 SUCCESS 🎉
</div>
<body> {% endblock %}
<div class="centered">
🎉 SUCCESS 🎉
</div>
</body>
</html>

1
website/content/api.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters --> <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script> <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
<title>API Reference</title>
</head> </head>
<body> <body>
<rapi-doc <rapi-doc

50
website/content/failure.html
View File

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

366
website/content/index.html
View File

@ -1,210 +1,208 @@
<html> ---
title: VEL Connect
---
<style>
.container {
max-width: 30em;
}
<head> .card {
margin: 1em;
box-shadow: 0 0 2em #0003;
}
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"> input.btn {
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"> cursor: auto;
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"> user-select: auto;
<link rel="manifest" href="/favicons/site.webmanifest"> }
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#b91d47"> .centered {
<meta name="theme-color" content="#ffffff"> margin: auto;
}
</style>
<div id="loading"><br><br><div class="loading loading-lg"></div></div>
<div id="failure" style="display: none;"><br><br><br>☹️</div>
<div id="headset_details" style="display: none;">
<link rel="stylesheet" href="/css/spectre.min.css"> <div class="panel card">
<script src="/js/util.js"></script> <div class="panel-header text-center">
<style> <figure class="avatar avatar-lg"><img src="/favicons/android-chrome-192x192.png" alt="Avatar"></figure>
.container { <div class="panel-title h5 mt-10">Headset Info</div>
max-width: 30em; <div class="panel-subtitle hw_id">---</div>
} </div>
<div class="panel-body">
.card { <div class="tile tile-centered">
margin: 1em; <div class="tile-content">
box-shadow: 0 0 2em #0003; <div class="tile-title text-bold">Current Room</div>
} <input class="btn current_room" type="text" id="current_room" placeholder="----">
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="/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>
<div class="panel-body"> <div class="tile-action">
<div class="tile tile-centered"> <button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_room_id"
<div class="tile-content"> data-tooltip="Set Room ID">Set</button>
<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 Seen</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 Login</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>
<br>
<div class="tile tile-centered">
<div class="tile-content">
<div class="tile-title text-bold">First Seen</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 Login</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 coloris" type="text" 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 coloris" type="text" 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>
</div>
<script> <script type="text/javascript" src="/js/coloris.min.js"></script>
<script>
let submit_button = document.getElementById('submit_pairing_code'); let submit_button = document.getElementById('submit_pairing_code');
let pair_code_input = document.getElementById('pair_code'); let pair_code_input = document.getElementById('pair_code');
let loading = document.getElementById('loading'); let loading = document.getElementById('loading');
let enter_pairing_id = document.getElementById('enter_pairing_id'); let enter_pairing_id = document.getElementById('enter_pairing_id');
let headset_details = document.getElementById('headset_details'); let headset_details = document.getElementById('headset_details');
let hw_id_field = document.getElementById('hw_id'); let hw_id_field = document.getElementById('hw_id');
let failure = document.getElementById('failure'); let failure = document.getElementById('failure');
let set_room_id = document.getElementById('set_room_id'); let set_room_id = document.getElementById('set_room_id');
let current_room = document.getElementById('current_room'); let current_room = document.getElementById('current_room');
// check cookie // check cookie
let hw_id = getCookie('hw_id'); let hw_id = getCookie('hw_id');
loading.style.display = "none"; if (hw_id != "") {
if (hw_id != "") {
httpGetAsync('https://connect.vel.workers.dev/api/get_state/' + hw_id, (resp) => { httpGetAsync('https://connect.vel.workers.dev/api/get_state/' + hw_id, (resp) => {
console.log(resp); console.log(resp);
let respData = JSON.parse(resp); let respData = JSON.parse(resp);
writeClass('hw_id', respData['user']['hw_id']); writeClass('hw_id', respData['user']['hw_id']);
writeValue('current_room', respData['user']['current_room']); writeValue('current_room', respData['user']['current_room']);
writeClass('date_created', respData['user']['date_created'] + "<br>" + timeSinceString(respData['user']['date_created']) + " ago"); writeClass('date_created', respData['user']['date_created'] + "<br>" + timeSinceString(respData['user']['date_created']) + " ago");
writeClass('last_used', respData['user']['last_used'] + "<br>" + timeSinceString(respData['user']['last_used']) + " ago"); writeClass('last_used', respData['user']['last_used'] + "<br>" + timeSinceString(respData['user']['last_used']) + " ago");
writeValue('user_color', respData['user']['user_color']); writeValue('user_color', respData['user']['user_color']);
writeValue('user_name', respData['user']['user_name']); writeValue('user_name', respData['user']['user_name']);
if (respData['room']) { if (respData['room']) {
writeValue('tv_url', respData['room']['tv_url']); writeValue('tv_url', respData['room']['tv_url']);
writeValue('carpet_color', respData['room']['carpet_color']); writeValue('carpet_color', respData['room']['carpet_color']);
}
headset_details.style.display = "block";
}, (status) => {
failure.style.display = "block";
});
function setUserData(endpoint, data) {
httpPostAsync('https://connect.vel.workers.dev/api/set_headset_details/' + hw_id + '/' + endpoint,
data,
(resp) => {console.log('success');},
(status) => {console.log('fail');}
);
}
function setRoomData(endpoint, data) {
httpPostAsync('https://connect.vel.workers.dev/api/set_room_details/' + current_room.value + '/' + endpoint,
data,
(resp) => {console.log('success');},
(status) => {console.log('fail');}
);
} }
set_room_id.addEventListener('click', () => { loading.style.display = "none";
setUserData('current_room', {"current_room": current_room.value}); headset_details.style.display = "block";
}); }, (status) => {
document.getElementById('set_user_color').addEventListener('click', () => { loading.style.display = "none";
setUserData('user_color', {"user_color": document.getElementById('user_color').value}); failure.style.display = "block";
}); });
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 { function setUserData(endpoint, data) {
window.location.href = "/pair"; httpPostAsync('https://connect.vel.workers.dev/api/set_headset_details/' + hw_id + '/' + endpoint,
data,
(resp) => { console.log('success'); },
(status) => { console.log('fail'); }
);
}
function setRoomData(endpoint, data) {
httpPostAsync('https://connect.vel.workers.dev/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> Coloris({
el: '.coloris',
swatches: [
'#264653',
'#2a9d8f',
'#e9c46a',
'#f4a261',
'#e76f51',
'#d62828',
'#023e8a',
'#0077b6',
'#0096c7',
'#00b4d8',
'#48cae4',
]
});
</html>
</script>

143
website/content/pair.html
View File

@ -1,91 +1,68 @@
<html> ---
title: "Pairing"
---
<head> <style>
:root {
--primary-color: #bc1f2d;
}
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"> #pair_code {
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"> max-width: 4em;
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"> }
<link rel="manifest" href="/favicons/site.webmanifest">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5"> .container {
<meta name="msapplication-TileColor" content="#b91d47"> max-width: 30em;
<meta name="theme-color" content="#ffffff"> }
.card {
margin: 1em;
box-shadow: 0 0 2em #0003;
}
input.btn {
cursor: auto;
user-select: auto;
}
.centered {
margin: auto;
}
</style>
<div class="card">
<link rel="stylesheet" href="/css/spectre.min.css"> <div class="card-image">
<script src="/js/util.js"></script> <img src="/img/pair_code_screenshot.png" class="img-responsive">
<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="/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> </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> <script>
let submit_button = document.getElementById('submit_pairing_code'); let submit_button = document.getElementById('submit_pairing_code');
let pair_code_input = document.getElementById('pair_code'); let pair_code_input = document.getElementById('pair_code');
submit_button.addEventListener('click', () => { submit_button.addEventListener('click', () => {
httpGetAsync('https://connect.vel.workers.dev/api/pair_headset/' + pair_code_input.value, (resp) => { httpGetAsync('https://connect.vel.workers.dev/api/pair_headset/' + pair_code_input.value, (resp) => {
console.log(resp); console.log(resp);
let respData = JSON.parse(resp); let respData = JSON.parse(resp);
if (respData['hw_id'] != '') { if (respData['hw_id'] != '') {
setCookie('hw_id', respData['hw_id'], 60); setCookie('hw_id', respData['hw_id'], 60);
window.location.href = "/"; window.location.href = "/";
} }
}, (status) => { }, (status) => {
window.location.href = "/failure"; window.location.href = "/failure";
});
}); });
</script> });
</body> </script>
</html>

49
website/content/success.html
View File

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

12
website/layouts/_default/single.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
{{ partial "head.html" (dict "title" .Title ) }}
<body>
<div class="container">
{{ .Content }}
</div>
</body>
</html>

40
website/layouts/partials/head.html Normal file
View File

@ -0,0 +1,40 @@
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/favicons/site.webmanifest">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#b91d47">
<meta name="theme-color" content="#ffffff">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .title }}</title>
<link rel="stylesheet" href="/css/spectre.min.css">
<link rel="stylesheet" href="/css/spectre-exp.min.css">
<link rel="stylesheet" href="/css/spectre-icons.min.css">
<link rel="stylesheet" type="text/css" href="/css/coloris.min.css">
<script src="/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>

1
website/static/css/coloris.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
website/static/js/coloris.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long