tom
/
doorlockd-mirror
mirror of https://github.com/binary-kitchen/doorlockd
1
0
Fork 0
Code Issues Releases Wiki Activity

layout: improve design 

All pages now user twitter bootstrap layout.

Signed-off-by: Ralf Ramsauer <ralf@binary-kitchen.de>
This commit is contained in:
Ralf Ramsauer 2018-03-18 17:22:08 +01:00
parent 84e9440ed6
commit 1268e28a5d
4 changed files with 24 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doorlockd-new/doorlockd.py
View File

@ -80,7 +80,7 @@ class DoorState(Enum):
led = 'red'
if self == DoorState.Open:
led = 'green'
return '<img src="static/led-%s.png">' % led
return 'static/led-%s.png' % led
def to_html(self):
if self == DoorState.Open:
@ -258,7 +258,7 @@ def home():
authentication_form=authentication_form,
response=response,
state_text=logic.state.to_html(),
state_img=Markup(logic.state.to_img()),
led=logic.state.to_img(),
title=html_title)
@ -270,6 +270,6 @@ if __name__ == '__main__':
logic = Logic()
socketio.run(webapp, port=8080)
socketio.run(webapp, host='0.0.0.0', port=8080)
sys.exit(0)

4
doorlockd-new/templates/display.html
View File

@ -10,7 +10,7 @@
socket.emit('connected');
});
socket.on('status', function(status) {
$('#led').html(status.led)
$('#led').attr('src', status.led)
$('#message').html(status.message)
});
});
@ -21,7 +21,7 @@
<h1 class="text-center">Willkommen in der Binary Kitchen!</h1>
<div class="row">
<div class="col-md-3 text-center">
<div id="led"></div>
<img id="led" src="">
<div id="message"></div>
</div>
<div class="col-md-8">

24
doorlockd-new/templates/formhelpers.html
View File

@ -1,24 +0,0 @@
{% macro render_field_label(field) %}
<dt>{{ field.label }}
<dd>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</dd>
{% endmacro %}
{% macro render_field(field) %}
<dd>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</dd>
{% endmacro %}

73
doorlockd-new/templates/index.html
View File

@ -1,56 +1,21 @@
{% from "formhelpers.html" import render_field_label, render_field %}
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
{% extends "layout.html" %}
{% import "bootstrap/wtf.html" as wtf %}
<body>
<style>
* {
font: normal 30px Arial,sans-serif;
}
body {
background-color: #037;
color: white;
background-image: url('static/logo.svg');
background-repeat: repeat;
background-size: 100%;
background-position: -0px -0px;
}
form {
position: relative;
display: block;
width: auto;
text-align: center;
}
input {
position: relative;
display: block;
width: auto;
width: 100%;
}
button {
width: 100%;
margin-top: 40px;
}
</style>
{{ state_img }}
<form name="login" method="POST" action="{{ url_for('home') }}">
{{ render_field_label(authentication_form.username) }}
{{ render_field_label(authentication_form.password) }}
{% block content %}
<h1 class="text-center">Binary Kitchen Doorlock</h1>
<div class="row">
<div class="col-md-3 text-center">
<img src="{{ led }}">
</div>
<div class="col-md-8">
{{ wtf.quick_form(authentication_form, button_map={'open': 'success btn-lg btn-block', 'close': 'danger btn-lg btn-block'}) }}
{% if response %}
<hr/>
{{ render_field(authentication_form.open) }}
{{ render_field(authentication_form.close) }}
{{ authentication_form.csrf_token }}
</form>
{% if response %}
<hr/>
<h1>{{ response.to_html() }}</h1>
{% endif %}
<hr/>
Die Kitchen ist: {{ state_text }}
</body>
</html>
<h1>{{ response.to_html() }}</h1>
{% endif %}
<hr/>
Die Kitchen ist: {{ state_text }}
</div>
</div>
{{ super() }}
{% endblock %}