Added styling to the debug interface

This commit is contained in:
Paulus Schoutsen 2013-11-07 23:33:04 -08:00
parent 5f4e9d33e0
commit 94752f663e
3 changed files with 152 additions and 36 deletions

View File

@ -249,12 +249,25 @@ class RequestHandler(BaseHTTPRequestHandler):
self.wfile.write(( self.wfile.write((
"<html>" "<html>"
"<head><title>Home Assistant</title></head>" "<head><title>Home Assistant</title>"
"<link rel='stylesheet' type='text/css' "
"href='/static/style.css'>"
"<link rel='icon' href='/static/favicon.ico' "
"type='image/x-icon' />"
"</head>"
"<body>" "<body>"
"<form action='{}' method='GET'>" "<div class='container'>"
"API password: <input name='api_password' />" "<form class='form-signin' action='{}' method='GET'>"
"<input type='submit' value='submit' />"
"<input type='text' class='form-control' name='api_password' "
"placeholder='API Password for Home Assistant' "
"required autofocus>"
"<button class='btn btn-lg btn-primary btn-block' "
"type='submit'>Enter</button>"
"</form>" "</form>"
"</div>"
"</body></html>").format(self.path)) "</body></html>").format(self.path))
return False return False
@ -270,21 +283,39 @@ class RequestHandler(BaseHTTPRequestHandler):
self.end_headers() self.end_headers()
write(("<html>" write(("<html>"
"<head><title>Home Assistant</title></head>" "<head><title>Home Assistant</title>"
"<body>")) "<link rel='stylesheet' type='text/css' "
"href='/static/style.css'>"
"<link rel='icon' href='/static/favicon.ico' "
"type='image/x-icon' />"
"</head>"
"<body>"
"<div class='container'>"
"<div class='page-header'><h1>Home Assistant</h1></div>"
))
# Flash message support # Flash message support
if self.server.flash_message: if self.server.flash_message:
write("<h3>{}</h3>".format(self.server.flash_message)) write(("<div class='row'><div class='alert alert-success'>"
"{}</div></div>").format(self.server.flash_message))
self.server.flash_message = None self.server.flash_message = None
# Describe state machine: # Describe state machine:
categories = [] categories = []
write(("<table><tr>" write(("<div class='row'>"
"<th>Name</th><th>State</th>" "<div class='col-xs-12'>"
"<th>Last Changed</th><th>Attributes</th></tr>")) "<div class='panel panel-primary'>"
"<div class='panel-heading'><h2 class='panel-title'>"
"States</h2></div>"
"<form method='post' action='/change_state' "
"class='form-change-state'>"
"<input type='hidden' name='api_password' value='{}'>"
"<table class='table'><tr>"
"<th>Category</th><th>State</th>"
"<th>Attributes</th><th>Last Changed</th>"
"</tr>").format(self.server.api_password))
for category in \ for category in \
sorted(self.server.statemachine.categories, sorted(self.server.statemachine.categories,
@ -303,40 +334,83 @@ class RequestHandler(BaseHTTPRequestHandler):
"</tr>"). "</tr>").
format(category, format(category,
state['state'], state['state'],
state['last_changed'], attributes,
attributes)) state['last_changed']))
write("</table>")
# Change state form # Change state form
write(("<br><form method='post' action='/change_state'>" write(("<tr><td><input name='category' class='form-control' "
"<input type='hidden' name='api_password' value='{}'>" "placeholder='Category'></td>"
"<b>Change state:</b><br>" "<td><input name='new_state' class='form-control' "
"Category: <input name='category'><br>" "placeholder='New State'></td>"
"State: <input name='new_state'><br>" "<td><textarea rows='3' name='attributes' class='form-control' "
"Attributes: <input name='attributes'><br>" "placeholder='State Attributes (JSON, optional)'>"
"<input type='submit' value='change state'></form>").format( "</textarea></td>"
self.server.api_password)) "<td><button type='submit' class='btn btn-default'>"
"Set State</button></td></tr>"
"</table></form></div>"
"</div></div>"))
# Describe event bus: # Describe event bus:
write(("<table><tr><th>Event</th><th>Listeners</th></tr>")) write(("<div class='row'>"
"<div class='col-xs-6'>"
"<div class='panel panel-primary'>"
"<div class='panel-heading'><h2 class='panel-title'>"
"Events</h2></div>"
"<table class='table'>"
"<tr><th>Event Type</th><th>Listeners</th></tr>"))
for event_type, count in sorted(self.server.eventbus.listeners.items()): for event_type, count in sorted(self.server.eventbus.listeners.items()):
write("<tr><td>{}</td><td>{}</td></tr>".format(event_type, count)) write("<tr><td>{}</td><td>{}</td></tr>".format(event_type, count))
write("</table>") write(( "</table></div></div>"
# Form to allow firing events "<div class='col-xs-6'>"
write(("<br><form method='post' action='/fire_event'>" "<div class='panel panel-primary'>"
"<div class='panel-heading'><h2 class='panel-title'>"
"Fire Event</h2></div>"
"<div class='panel-body'>"
"<form method='post' action='/fire_event' "
"class='form-horizontal form-fire-event'>"
"<input type='hidden' name='api_password' value='{}'>" "<input type='hidden' name='api_password' value='{}'>"
"<b>Fire event:</b><br>"
"Event type: <input name='event_type'><br>" "<div class='form-group'>"
"Event data: <input name='event_data'><br>" "<label for='event_type' class='col-xs-3 control-label'>"
"<input type='submit' value='fire event'></form>").format( "Event type</label>"
self.server.api_password)) "<div class='col-xs-9'>"
"<input type='text' class='form-control' id='event_type'"
" name='event_type' placeholder='Event Type'>"
"</div>"
"</div>"
write("</body></html>") "<div class='form-group'>"
"<label for='event_data' class='col-xs-3 control-label'>"
"Event data</label>"
"<div class='col-xs-9'>"
"<textarea rows='3' class='form-control' id='event_data'"
" name='event_data' placeholder='Event Data "
"(JSON, optional)'></textarea>"
"</div>"
"</div>"
"<div class='form-group'>"
"<div class='col-xs-offset-3 col-xs-9'>"
"<button type='submit' class='btn btn-default'>"
"Fire Event</button>"
"</div>"
"</div>"
"</form>"
"</div></div></div>"
"</div>").format(self.server.api_password))
write("</div></body></html>")
# pylint: disable=invalid-name # pylint: disable=invalid-name
def _handle_change_state(self, path_match, data): def _handle_change_state(self, path_match, data):
@ -455,6 +529,9 @@ class RequestHandler(BaseHTTPRequestHandler):
if os.path.isfile(path): if os.path.isfile(path):
self.send_response(HTTP_OK) self.send_response(HTTP_OK)
# TODO: correct header for mime-type and caching
self.end_headers() self.end_headers()
with open(path, 'rb') as inp: with open(path, 'rb') as inp:

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 B

View File

@ -0,0 +1,39 @@
@import url(//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css);
.panel > form, .panel > form > .table {
margin-bottom: 0;
}
.panel .table {
font-size: inherit;
}
.form-signin {
max-width: 330px;
margin: 0 auto;
}
.form-signin .form-control {
margin-top: 40px;
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
text-align: center;
}
.form-signin .btn-primary {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-fire-event {
margin-bottom: 0px;
}
.form-fire-event .form-group:last-child {
margin-bottom: 0;
}