tom/doorlockd-mirror
1
0
Fork 0
mirror of https://github.com/binary-kitchen/doorlockd synced 2024-12-22 18:34:25 +01:00
Code Issues Releases Wiki Activity

layout: improve design

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

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

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

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

@ -1,56 +1,21 @@
{% from "formhelpers.html" import render_field_label, render_field %} {% extends "layout.html" %}
<!DOCTYPE html> {% import "bootstrap/wtf.html" as wtf %}
<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>
<body> {% block content %}
<style> <h1 class="text-center">Binary Kitchen Doorlock</h1>
* { <div class="row">
font: normal 30px Arial,sans-serif; <div class="col-md-3 text-center">
} <img src="{{ led }}">
body { </div>
background-color: #037; <div class="col-md-8">
color: white; {{ wtf.quick_form(authentication_form, button_map={'open': 'success btn-lg btn-block', 'close': 'danger btn-lg btn-block'}) }}
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) }}
<hr/>
{{ render_field(authentication_form.open) }}
{{ render_field(authentication_form.close) }}
{{ authentication_form.csrf_token }}
</form>
{% if response %} {% if response %}
<hr/> <hr/>
<h1>{{ response.to_html() }}</h1> <h1>{{ response.to_html() }}</h1>
{% endif %} {% endif %}
<hr/> <hr/>
Die Kitchen ist: {{ state_text }} Die Kitchen ist: {{ state_text }}
</body> </div>
</html> </div>
{{ super() }}
{% endblock %}