adds more advanced database handling unsing sql alchemy
- moves app into package - adds sql alchemy equipment - moves templates into server package - add app.db sqlite file
This commit is contained in:
8
server/template/account.html
Normal file
8
server/template/account.html
Normal file
@ -0,0 +1,8 @@
|
||||
{% extends "sidebar.html" %}
|
||||
{% block body%}
|
||||
<p>Hello, {{ username }}! You're logged in! Email: {{email}}</p>
|
||||
<div><p>Google Profile Picture:</p>
|
||||
<img src={{ profile_img }} alt="Google profile pic"></img></div>
|
||||
<a class="button" href="/logout">Logout</a>
|
||||
<a class="button" href="/test">test API</a>
|
||||
{% endblock %}
|
||||
127
server/template/calendar.html
Normal file
127
server/template/calendar.html
Normal file
@ -0,0 +1,127 @@
|
||||
{% extends "sidebar.html" %}
|
||||
{% block body%}
|
||||
|
||||
<div style="height: 50px">
|
||||
<div style="width: 30%; float: left; margin-left: 10%">Calendar</div>
|
||||
<div style="width: 30%; float: left">Show on device</div>
|
||||
<div style="width: 30%; float: left">Color</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% for item in calendars %}
|
||||
<div style="height: 30px">
|
||||
<!--Name-->
|
||||
<div style="width: 30%; float: left; font-size: 10px; text-align: left; margin-left: 10%">{{ item.name }}</div>
|
||||
|
||||
<!--Toggle-->
|
||||
<div style="width: 30%; float: left">
|
||||
<!-- Rounded switch -->
|
||||
<label class="switch">
|
||||
<input class="toggle" id={{item.name}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!--Color Selector-->
|
||||
<div style="width: 30%; float: left">
|
||||
<div class="colorPickSelector" id={{item.name}} defaultColor={{item.color}}></div>
|
||||
<!--svg height="20" width="20">
|
||||
<circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
|
||||
</svg-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
var init = false;
|
||||
|
||||
|
||||
// initialize all DOM items
|
||||
$(".colorPickSelector").colorPick({
|
||||
'initialColor': '#3498db',
|
||||
'allowRecent': true,
|
||||
'recentMax': 5,
|
||||
'allowCustomColor': false,
|
||||
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
|
||||
'onColorSelected': function() {
|
||||
if(!init) {
|
||||
return;
|
||||
}
|
||||
// Todo getting the element id is currently done over [0] [#02]
|
||||
this.element.css({'backgroundColor': this.color, 'color': this.color});
|
||||
post("color", this.element[0].id, this.color);
|
||||
}
|
||||
});
|
||||
|
||||
($(".toggle").each(function() {
|
||||
var toggle = true;
|
||||
console.log($(this).attr('toggled'));
|
||||
if($(this).attr('toggled') == "True") {
|
||||
toggle = false;
|
||||
} else if ($(this).attr('toggled') == "False") {
|
||||
toggle = true;
|
||||
}
|
||||
|
||||
$(this).prop('checked', toggle);
|
||||
}));
|
||||
|
||||
($(".colorPickSelector").each(function() {
|
||||
// console.log($( this )[0].attributes.getNamedItem("style"));
|
||||
|
||||
var color = $( this )[0].attributes.getNamedItem("defaultcolor").nodeValue;
|
||||
var style = document.createAttribute("style");
|
||||
style.value = 'background-color: ' + color + '; color: ' + color + ';';
|
||||
$( this )[0].attributes.setNamedItem(style);
|
||||
|
||||
// console.log($( this )[0].attributes.getNamedItem("style"));
|
||||
|
||||
}));
|
||||
|
||||
function post(type, id, data) {
|
||||
var url = "https://192.168.68.103.xip.io:1234/calendar";
|
||||
var method = "POST";
|
||||
switch (type) {
|
||||
case "color":
|
||||
var postData = JSON.stringify({"calendar_id": id.toString(), "color": data.toString()});
|
||||
break;
|
||||
case "toggle":
|
||||
var postData = JSON.stringify({"calendar_id": id.toString(), "toggle": data.toString()})
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
console.log(postData);
|
||||
|
||||
var shouldBeAsync = true;
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.onload = function () {
|
||||
var status = request.status;
|
||||
var data = request.responseText;
|
||||
}
|
||||
|
||||
request.open(method, url, shouldBeAsync);
|
||||
// content type json makes app do error 400
|
||||
request.setRequestHeader("Content-Type", "application/json");
|
||||
request.send(postData);
|
||||
}
|
||||
|
||||
function toggleReaction(self) {
|
||||
// the slider used defaults to inverted information [#01]
|
||||
var data;
|
||||
if(self.checked) {
|
||||
data = "False";
|
||||
} else {
|
||||
data = "True";
|
||||
}
|
||||
post("toggle", self.id, data);
|
||||
}
|
||||
init = true;
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
46
server/template/login.html
Normal file
46
server/template/login.html
Normal file
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
|
||||
<title>Index</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 style="color: blue">Login Page</h1>
|
||||
|
||||
<!--Google Login-->
|
||||
<div class="center-align">
|
||||
<div class="col s12 m6 offset-m3 center-align" style=" margin: 5px;">
|
||||
<a class="oauth-container btn darken-4 white black-text" href="/login/google" style="text-transform:none">
|
||||
<div class="left">
|
||||
<img width="20px" style="margin-top:7px; margin-right:8px" alt="Google sign-in"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
|
||||
</div class="login_google">
|
||||
<div class="login_google">Login with Google</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!--Email Login-->
|
||||
<div class="col s12 m6 offset-m3 center-align" style=" margin: 5px;">
|
||||
<a class="oauth-container btn darken-4 white black-text" href="/login/email" style="text-transform:none">
|
||||
<div class="left">
|
||||
<img width="20px" style="margin-top:7px; margin-right:8px" alt="E-mail sign-in"
|
||||
src="http://assets.stickpng.com/thumbs/585e4bf3cb11b227491c339a.png" />
|
||||
</div>
|
||||
<div class="login_email">Login with Email</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
|
||||
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
43
server/template/sidebar.html
Normal file
43
server/template/sidebar.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
|
||||
<script src="static/js/jquery-3.5.0.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="static/css/colorPick.css">
|
||||
<!-- OPTIONAL DARK THEME -->
|
||||
<link rel="stylesheet" href="static/css/colorPick.dark.theme.css">
|
||||
<script src="static/js/colorPick.js"></script>
|
||||
|
||||
<title>Index</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<!-- Side navigation -->
|
||||
<div class="sidenav">
|
||||
<a href="/view">View</a>
|
||||
<a href="/calendar">Calendar</a>
|
||||
<a href="/account">Account</a>
|
||||
<a href="/devices">Devices</a>
|
||||
</div>
|
||||
|
||||
<!-- Page content -->
|
||||
<div class="main">
|
||||
|
||||
{% block body %}
|
||||
// content here
|
||||
{% endblock %}
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user