Switched away from deprecated bootstrap

This commit is contained in:
Daniel Perna 2017-11-12 19:04:22 +01:00
parent 8790cd1c17
commit d87cc769dd
2 changed files with 123 additions and 92 deletions

View file

@ -1984,77 +1984,86 @@ INDEX = Template(r"""<!DOCTYPE html>
modemapping['txt'] = 'ace/mode/text'; modemapping['txt'] = 'ace/mode/text';
modemapping['xml'] = 'ace/mode/xml'; modemapping['xml'] = 'ace/mode/xml';
modemapping['yaml'] = 'ace/mode/yaml'; modemapping['yaml'] = 'ace/mode/yaml';
function sort_select(id) {
var options = $('#' + id + ' option');
var arr = options.map(function (_, o) {
return {
t: $(o).text(), v: o.value
};
}).get();
arr.sort(function (o1, o2) {
var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each(function (i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
var separator = '$separator'; var separator = '$separator';
var bootstrap = $bootstrap; var services_list = $services;
if (bootstrap.hasOwnProperty("events")) { var events_list = $events;
var states_list = $states;
if (events_list) {
var events = document.getElementById("events"); var events = document.getElementById("events");
for (var i = 0; i < bootstrap.events.length; i++) { for (var i = 0; i < events_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.events[i].event; option.value = events_list[i].event;
option.text = bootstrap.events[i].event; option.text = events_list[i].event;
events.add(option); events.add(option);
} }
var events = document.getElementById("events_side"); var events = document.getElementById("events_side");
for (var i = 0; i < bootstrap.events.length; i++) { for (var i = 0; i < events_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.events[i].event; option.value = events_list[i].event;
option.text = bootstrap.events[i].event; option.text = events_list[i].event;
events.add(option); events.add(option);
} }
sort_select('events');
sort_select('events_side');
}
if (states_list) {
var entities = document.getElementById("entities"); var entities = document.getElementById("entities");
for (var i = 0; i < bootstrap.states.length; i++) { for (var i = 0; i < states_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.states[i].entity_id; option.value = states_list[i].entity_id;
option.text = bootstrap.states[i].attributes.friendly_name + ' (' + bootstrap.states[i].entity_id + ')'; option.text = states_list[i].attributes.friendly_name + ' (' + states_list[i].entity_id + ')';
entities.add(option); entities.add(option);
} }
var entities = document.getElementById("entities_side"); var entities = document.getElementById("entities_side");
for (var i = 0; i < bootstrap.states.length; i++) { for (var i = 0; i < states_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.states[i].entity_id; option.value = states_list[i].entity_id;
option.text = bootstrap.states[i].attributes.friendly_name + ' (' + bootstrap.states[i].entity_id + ')'; option.text = states_list[i].attributes.friendly_name + ' (' + states_list[i].entity_id + ')';
entities.add(option); entities.add(option);
} }
sort_select('entities');
sort_select('entities_side');
}
if (services_list) {
var services = document.getElementById("services"); var services = document.getElementById("services");
for (var i = 0; i < bootstrap.services.length; i++) { for (var i = 0; i < services_list.length; i++) {
for (var k in bootstrap.services[i].services) { for (var k in services_list[i].services) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.services[i].domain + '.' + k; option.value = services_list[i].domain + '.' + k;
option.text = bootstrap.services[i].domain + '.' + k; option.text = services_list[i].domain + '.' + k;
services.add(option); services.add(option);
} }
} }
var services = document.getElementById("services_side"); var services = document.getElementById("services_side");
for (var i = 0; i < bootstrap.services.length; i++) { for (var i = 0; i < services_list.length; i++) {
for (var k in bootstrap.services[i].services) { for (var k in services_list[i].services) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.services[i].domain + '.' + k; option.value = services_list[i].domain + '.' + k;
option.text = bootstrap.services[i].domain + '.' + k; option.text = services_list[i].domain + '.' + k;
services.add(option); services.add(option);
} }
} }
function sort_select(id) {
var options = $('#' + id + ' option');
var arr = options.map(function (_, o) {
return {
t: $(o).text(), v: o.value
};
}).get();
arr.sort(function (o1, o2) {
var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each(function (i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
sort_select('events');
sort_select('events_side');
sort_select('entities');
sort_select('entities_side');
sort_select('services'); sort_select('services');
sort_select('services_side'); sort_select('services_side');
} }
@ -3090,16 +3099,27 @@ class RequestHandler(BaseHTTPRequestHandler):
self.send_header('Content-type', 'text/html') self.send_header('Content-type', 'text/html')
self.end_headers() self.end_headers()
boot = "{}" services = "[]"
events = "[]"
states = "[]"
try: try:
headers = { headers = {
"Content-Type": "application/json" "Content-Type": "application/json"
} }
if HASS_API_PASSWORD: if HASS_API_PASSWORD:
headers["x-ha-access"] = HASS_API_PASSWORD headers["x-ha-access"] = HASS_API_PASSWORD
req = urllib.request.Request("%sbootstrap" % HASS_API, headers=headers, method='GET')
req = urllib.request.Request("%sservices" % HASS_API, headers=headers, method='GET')
with urllib.request.urlopen(req) as response: with urllib.request.urlopen(req) as response:
boot = response.read().decode('utf-8') services = response.read().decode('utf-8')
req = urllib.request.Request("%sevents" % HASS_API, headers=headers, method='GET')
with urllib.request.urlopen(req) as response:
events = response.read().decode('utf-8')
req = urllib.request.Request("%sstates" % HASS_API, headers=headers, method='GET')
with urllib.request.urlopen(req) as response:
states = response.read().decode('utf-8')
except Exception as err: except Exception as err:
LOG.warning("Exception getting bootstrap") LOG.warning("Exception getting bootstrap")
@ -3114,7 +3134,9 @@ class RequestHandler(BaseHTTPRequestHandler):
except Exception as err: except Exception as err:
LOG.warning("Exception getting release") LOG.warning("Exception getting release")
LOG.warning(err) LOG.warning(err)
html = get_html().safe_substitute(bootstrap=boot, html = get_html().safe_substitute(services=services,
events=events,
states=states,
current=VERSION, current=VERSION,
versionclass=color, versionclass=color,
separator="\%s" % os.sep if os.sep == "\\" else os.sep) separator="\%s" % os.sep if os.sep == "\\" else os.sep)

View file

@ -1906,77 +1906,86 @@
modemapping['txt'] = 'ace/mode/text'; modemapping['txt'] = 'ace/mode/text';
modemapping['xml'] = 'ace/mode/xml'; modemapping['xml'] = 'ace/mode/xml';
modemapping['yaml'] = 'ace/mode/yaml'; modemapping['yaml'] = 'ace/mode/yaml';
function sort_select(id) {
var options = $('#' + id + ' option');
var arr = options.map(function (_, o) {
return {
t: $(o).text(), v: o.value
};
}).get();
arr.sort(function (o1, o2) {
var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each(function (i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
var separator = '$separator'; var separator = '$separator';
var bootstrap = $bootstrap; var services_list = $services;
if (bootstrap.hasOwnProperty("events")) { var events_list = $events;
var states_list = $states;
if (events_list) {
var events = document.getElementById("events"); var events = document.getElementById("events");
for (var i = 0; i < bootstrap.events.length; i++) { for (var i = 0; i < events_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.events[i].event; option.value = events_list[i].event;
option.text = bootstrap.events[i].event; option.text = events_list[i].event;
events.add(option); events.add(option);
} }
var events = document.getElementById("events_side"); var events = document.getElementById("events_side");
for (var i = 0; i < bootstrap.events.length; i++) { for (var i = 0; i < events_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.events[i].event; option.value = events_list[i].event;
option.text = bootstrap.events[i].event; option.text = events_list[i].event;
events.add(option); events.add(option);
} }
sort_select('events');
sort_select('events_side');
}
if (states_list) {
var entities = document.getElementById("entities"); var entities = document.getElementById("entities");
for (var i = 0; i < bootstrap.states.length; i++) { for (var i = 0; i < states_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.states[i].entity_id; option.value = states_list[i].entity_id;
option.text = bootstrap.states[i].attributes.friendly_name + ' (' + bootstrap.states[i].entity_id + ')'; option.text = states_list[i].attributes.friendly_name + ' (' + states_list[i].entity_id + ')';
entities.add(option); entities.add(option);
} }
var entities = document.getElementById("entities_side"); var entities = document.getElementById("entities_side");
for (var i = 0; i < bootstrap.states.length; i++) { for (var i = 0; i < states_list.length; i++) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.states[i].entity_id; option.value = states_list[i].entity_id;
option.text = bootstrap.states[i].attributes.friendly_name + ' (' + bootstrap.states[i].entity_id + ')'; option.text = states_list[i].attributes.friendly_name + ' (' + states_list[i].entity_id + ')';
entities.add(option); entities.add(option);
} }
sort_select('entities');
sort_select('entities_side');
}
if (services_list) {
var services = document.getElementById("services"); var services = document.getElementById("services");
for (var i = 0; i < bootstrap.services.length; i++) { for (var i = 0; i < services_list.length; i++) {
for (var k in bootstrap.services[i].services) { for (var k in services_list[i].services) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.services[i].domain + '.' + k; option.value = services_list[i].domain + '.' + k;
option.text = bootstrap.services[i].domain + '.' + k; option.text = services_list[i].domain + '.' + k;
services.add(option); services.add(option);
} }
} }
var services = document.getElementById("services_side"); var services = document.getElementById("services_side");
for (var i = 0; i < bootstrap.services.length; i++) { for (var i = 0; i < services_list.length; i++) {
for (var k in bootstrap.services[i].services) { for (var k in services_list[i].services) {
var option = document.createElement("option"); var option = document.createElement("option");
option.value = bootstrap.services[i].domain + '.' + k; option.value = services_list[i].domain + '.' + k;
option.text = bootstrap.services[i].domain + '.' + k; option.text = services_list[i].domain + '.' + k;
services.add(option); services.add(option);
} }
} }
function sort_select(id) {
var options = $('#' + id + ' option');
var arr = options.map(function (_, o) {
return {
t: $(o).text(), v: o.value
};
}).get();
arr.sort(function (o1, o2) {
var t1 = o1.t.toLowerCase(), t2 = o2.t.toLowerCase();
return t1 > t2 ? 1 : t1 < t2 ? -1 : 0;
});
options.each(function (i, o) {
o.value = arr[i].v;
$(o).text(arr[i].t);
});
}
sort_select('events');
sort_select('events_side');
sort_select('entities');
sort_select('entities_side');
sort_select('services'); sort_select('services');
sort_select('services_side'); sort_select('services_side');
} }