150 lines
4.6 KiB
HTML
150 lines
4.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body style='width:400px;'>
|
|
<div id="event"></div>
|
|
<script type="text/javascript">
|
|
|
|
var blockElement = document.getElementById("event");
|
|
// copy query
|
|
query = window.location.search;
|
|
if (query == "") {
|
|
query = "?path=main";
|
|
}
|
|
var evtSrc = new EventSource("http://localhost:5000/update");
|
|
|
|
function getJSON(url, successHandler, errorHandler) {
|
|
var xhr = typeof XMLHttpRequest != 'undefined'
|
|
? new XMLHttpRequest()
|
|
: new ActiveXObject('Microsoft.XMLHTTP');
|
|
console.log("fired JSON request", url)
|
|
xhr.open('get', url, true);
|
|
xhr.onreadystatechange = function() {
|
|
var status;
|
|
var data;
|
|
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
|
if (xhr.readyState == 4) { // `DONE`
|
|
status = xhr.status;
|
|
if (status == 200) {
|
|
data = JSON.parse(xhr.responseText);
|
|
successHandler && successHandler(data);
|
|
} else {
|
|
errorHandler && errorHandler(status);
|
|
}
|
|
}
|
|
};
|
|
xhr.send();
|
|
};
|
|
|
|
|
|
function htmlEscape(str) {
|
|
return str
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
}
|
|
|
|
function draw(message) {
|
|
var blk = "<h3>" + message.title + "</h3><table>\n"
|
|
for (var i=0; i < message.components.length; i++) {
|
|
var component = message.components[i]
|
|
var name = component.name
|
|
var type = component.type
|
|
if ("title" in component) {
|
|
var title = component.title
|
|
} else {
|
|
var title = name
|
|
}
|
|
if (type == "group") {
|
|
blk += "<tr><td>link</td><td><a href='?path=" + encodeURI(message.path + "," + name) + "'>"+ title + "</a></td></tr>\n"
|
|
} else if (type == "rdonly") {
|
|
blk += "<tr><td >" + title + "</td><td id='"+ name +"' __ctype__=rdonly></td></tr>\n"
|
|
} else if (type == "input") {
|
|
blk += "<tr><td>" + title + "</td><td><input type=input id='"+ name +"' __ctype__=input></td></tr>\n"
|
|
} else if (type == "checkbox") {
|
|
blk += "<tr><td>" + title + "</td><td><input type=checkbox id='"+ name +"' __ctype__=checkbox></td></tr>\n"
|
|
} else if (type == "radio") {
|
|
blk += "<tr><td>" + title + "</td><td id='" + name + "' __ctype__=radio>\n"
|
|
for (var j = 0; j < component.buttons.length; j++) {
|
|
button = component.buttons[j]
|
|
var rbname = name + ":" + button.value
|
|
if (j != 0) blk+= "<br>"
|
|
blk += "<input type=radio name='" + name + "' id='"+rbname+"' value='" + button.value + "'>" + button.title + "\n"
|
|
}
|
|
blk += "</td></tr>\n"
|
|
}
|
|
}
|
|
blk += "</table>\n"
|
|
blockElement.innerHTML = blk
|
|
}
|
|
|
|
function updateblock(id) {
|
|
getJSON("http://localhost:5000/updateblock"+query+"&id="+id,
|
|
function(message) { console.log(message); },
|
|
function(status) { console.log('stat', status); }
|
|
);
|
|
}
|
|
|
|
evtSrc.onmessage = function(e) {
|
|
var message = JSON.parse(e.data)
|
|
if (message.type == "id") {
|
|
var id = message.id
|
|
getJSON("http://localhost:5000/getblock"+query+"&id="+id,
|
|
function(message) { draw(message); updateblock(id); },
|
|
function(status) { console.log('stat', status); }
|
|
);
|
|
} else if (message.type == "draw") {
|
|
draw(message);
|
|
} else if (message.type == "update") {
|
|
for (var i=0; i < message.updates.length; i++) {
|
|
var component = message.updates[i]
|
|
var name = component.name
|
|
var value = component.value
|
|
var elm = document.getElementById(name)
|
|
if (!elm) continue
|
|
var type = elm.getAttribute("__ctype__")
|
|
if (type == "rdonly") {
|
|
elm.innerHTML = htmlEscape(value)
|
|
} else if (type == "input") {
|
|
elm.value = value
|
|
} else if (type == "checkbox") {
|
|
elm.checked = (value != 0) && (value != "0")
|
|
} else if (type == "radio") {
|
|
var elm = document.getElementById(name + ":" + value)
|
|
if (elm) {
|
|
elm.checked = true // this will uncheck all radio buttons with the same name
|
|
} else { // no element with this value: we have to go through all radio buttons
|
|
var elms = document.getElementsByName(name)
|
|
for (var j; j < elms.length; j++) {
|
|
if (elms[j].checked) {
|
|
elms[j].checked = false
|
|
break // we have found the victim, we can leave
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else if (message.type == "close") {
|
|
evtSrc.close()
|
|
}
|
|
};
|
|
|
|
evtSrc.onerror = function(e) {
|
|
blockElement.innerHTML = "connection lost"
|
|
evtSrc.close()
|
|
};
|
|
|
|
window.onbeforeunload = closingCode;
|
|
function closingCode(){
|
|
console.log("CLOSE")
|
|
evtSrc.close()
|
|
return null;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|