homebridge-punt
Version:
Fhem-Gateway and Accessory-Simulator Plugin for Homebridge
213 lines (206 loc) • 7.16 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="homebridge-punt.css" />
<link href="jsoneditor/dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="jsoneditor/dist/jsoneditor.js"></script>
<script>
var ws;
var logmsg = "";
var line = 1;
var editor;
$(document).on("pagecreate", "#page1", function() {
$(document).ready(startWS);
});
function startWS() {
var origin = window.document.location.origin.replace(/http/, 'ws');
ws = new WebSocket(origin);
ws.onopen = function (event) {
displayMessage("#status", "connected", "YellowGreen");
$("#p_title").css("visibility", "visible");
$("#p_reload").css("visibility", "hidden");
}
ws.onclose = function (event) {
displayMessage("#status", "disconnected", "Tomato");
$("#p_reload").css("visibility", "visible");
$("#p_reload").on("tap", function(event) {
location.reload();
});
setTimeout(function() {
//location.reload();
startWS();
},2000);
}
ws.onmessage = function (event) {
//log(event.data);
var data = JSON.parse(event.data);
switch (data.type) {
case "info":
$("#fc").html('homebridge-punt <span id="version"></span><span id="latest"></span>');
displayMessage("#version", "v"+data.spec.version, "SteelBlue");
if (data.spec.version != data.spec.latest) {
displayMessage("#latest", " [ new version "+data.spec.latest+" available ]", "YellowGreen");
}
break;
case "accessory":
updateView(data);
displayMessage("#r_status", "reloaded", "YellowGreen");
break;
case "command":
if (data.cmd_type == "delete") {
$("#content").html('');
}
break;
case "document":
//log(JSON.stringify(data.config));
open_editor(data.content);
break;
default:
displayMessage("#error_msg",'data_type error '+data.type,"orangered");
}
}
ws.onerror = function (event) {
displayMessage("#status", "disconnected", "Tomato");
}
}
function displayMessage(output, message, color) {
$(output).html('<span style="color:'+color+'">'+message+'</span>');
}
function log(message) {
logmsg += line++ + " " + message + '<br>';
$("#debug").html('<span>'+logmsg+'</span>');
}
function updateView(data) {
//log(JSON.stringify(data));
var data_view = document.getElementById('data_view');
if (!data_view) createView(data);
for (var k in data.accessories) {
parsing(data.accessories[k]);
}
}
function parsing(accessory) {
//log(JSON.stringify(accessory.value));
var u = accessory.uuid;
var value = accessory.value;
for (var c in value) {
var p_id = document.getElementById(u+c);
$(p_id).html('<span>'+value[c]+'</span>');
var p_idtt = document.getElementById("tt"+u+c);
if (accessory.timestamp) {
$(p_idtt).html('<span>'+accessory.timestamp+' - '+accessory.trigger+'</span>');
}
}
}
function createView(data) {
//log(JSON.stringify(data));
var grid = $('<div class="pi-grid-p ui-grid-c ui-responsive" id="data_view">');
var ba = '<div class="ui-block-a pi-border pi-padding">';
var bb = '<div class="ui-block-b pi-border pi-padding">';
var bc = '<div class="ui-block-c pi-border pi-padding">';
var bd = '<div class="ui-block-d pi-border pi-padding">';
var bf = '</div>';
var blocka, blockb, blockc, blockd;
var html = "";
for (var k in data.accessories) {
var value = data.accessories[k].value;
var first = true;
for (var c in value) {
if (first) {
blocka = $(ba+data.accessories[k].name+'<br><span class="pi-sf">'+data.accessories[k].type+'</span>'+bf);
blockb = $(bb+data.accessories[k].service+bf);
html ='<span id="'+k+c+'">'+value[c]+'</span><br><span class="pi-sf" id="tt'+k+c+'"></span>';
blockd = $(bd+html+bf);
first = false;
} else {
blocka = $('<div class="ui-block-a pi-noborder pi-padding">'+bf);
blockb = $('<div class="ui-block-b pi-noborder pi-padding">'+bf);
html ='<span id="'+k+c+'">'+value[c]+'</span>';
blockd = $(bd+html+bf);
}
blockc = $(bc+c+bf);
grid.append(blocka);
grid.append(blockb);
grid.append(blockc);
grid.append(blockd);
}
}
grid.append(bf);
$("#content").append(grid);
$("#content").trigger("create");
}
$(function () {
$("[data-role=header],[data-role=footer]").toolbar().enhanceWithin();
$("div[data-role=panel]").panel().enhanceWithin();
});
$(document).on("tap", "#setting", function(event) {
displayMessage("#r_status", "", "Tomato");
var msg = {"type": "request", "config": "plugin"};
var message = JSON.stringify(msg);
setTimeout(function() {
ws.send(message);
});
});
$(document).on("tap", "#save", function(event) {
//log("save");
var json = editor.get();
var msg = {"type": "document", "content": json};
var message = JSON.stringify(msg);
setTimeout(function() {
ws.send(message);
});
});
$(document).on("tap", "#cancel", function(event) {
//log("cancel");
});
function open_editor(content) {
//log("open_editor");
var container = document.getElementById('jsoneditor');
var options = {
mode: 'tree',
modes: ['tree', 'code'],
onError: function (err) {
alert(err.toString());
},
onModeChange: function (newMode, oldMode) {
//log('Mode switched from '+oldMode+' to '+newMode);
}
};
if (!editor) editor = new JSONEditor(container, options);
editor.set(content);
}
</script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<a href="#panel1" class="pi-btn-h ui-btn ui-nodisc-icon ui-corner-all ui-icon-bars ui-btn-icon-left"></a>
<h1 id="p_title" class="pi-vh">puntView<span id="status" class="pi-lb"></span></h1>
<a href="#" id="p_reload" class="pi-btn-h pi-vh ui-btn ui-nodisc-icon ui-corner-all ui-icon-refresh ui-btn-icon-right"></a>
</div>
<div data-role="footer" data-position="fixed" data-theme="a">
<h1 id="fc"></h1>
<div id="error_msg" class="pi-la"></div>
<div id="debug" class="pi-la"></div>
</div>
<div class="panel left" data-role="panel" data-position="left" data-display="push" id="panel1">
<ul>
<li><a href="#page1" id="overview" data-rel="close">Overview</a></li>
<li><a href="#page2" id="setting" data-rel="close">Setting</a></li>
<li><a href="https://github.com/cflurin/homebridge-punt" target="_blank">Report Bug</a></li>
</ul>
</div>
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<div id="content"></div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<a href="#" id="save" class="pi-btn-e ui-btn ui-btn-inline">Save</a><span id="r_status" class="pi-lb"></span>
<div id="jsoneditor"></div>
</div>
</body>
</html>