<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket RF Sensors UI</title>
<link rel="shortcut icon" type="image/x-icon" href="src/favicon.ico">
<script src="src/jquery.min.js"></script>
<script src="fonts/glyphicons-halflings-regular.woff"></script>
<link href="src/bootstrap.min.css" rel="stylesheet">
<script src="src/bootstrap.min.js"></script>
<link href="src/bootstrap.toggle.css" rel="stylesheet">
<script src="src/bootstrap.toggle.js"></script>
<script src="src/bubbly_bg.js"></script>
<style>
.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px; }
.toggle.ios .toggle-handle { border-radius: 20px; }
.btnEdit {
background-color: #2226fa;
border: 2px solid #2226fa;
border-radius: 4px;
color: white;
cursor: pointer;
}
.btnEdit:hover{
background-color: #35109b; border: 2px solid #35109b;
}
.btnDelete {
background-color: #f44336;
border: 2px solid #f44336;
border-radius: 4px;
color: white;
cursor: pointer;
}
.btnDelete:hover{
background-color: #c93326; border: 2px solid #c93326;
}
.gi-2x5{font-size: 1.5em;}
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
</style>
</head>
<body>
<h4></h4>
<div class="container-fluid" id="root">
<!-- Panel Alert Dynamic Messages Title and Message -->
<div id='MyAlerts' style="display: none;"></div>
<!-- Panel Sensor Zones -->
<div class="collapse" id="PanSensorZones">
<div class="panel panel-default">
<div class="panel-heading">Sensor Zones<button type="button" class="btn btn-danger btn-xs" style="float: right;" onclick="ClosePanZones()">X</button></div>
<div class="panel-body">
<span class="badge badge-pill badge-primary">Zone 1</span> <input type="checkbox" checked data-toggle="toggle" data-size="small" data-style="ios" data-onstyle="success" data-offstyle="danger" id="CheckZone1">
<span class="badge badge-pill badge-primary">Zone 2</span> <input type="checkbox" checked data-toggle="toggle" data-size="small" data-style="ios" data-onstyle="success" data-offstyle="danger" id="CheckZone2">
<span class="badge badge-pill badge-primary">Zone 3</span> <input type="checkbox" checked data-toggle="toggle" data-size="small" data-style="ios" data-onstyle="success" data-offstyle="danger" id="CheckZone3">
<span class="badge badge-pill badge-primary">Zone 4</span> <input type="checkbox" checked data-toggle="toggle" data-size="small" data-style="ios" data-onstyle="success" data-offstyle="danger" id="CheckZone4">
<span class="badge badge-pill badge-primary">Arm Zones</span> <input type="checkbox" checked data-toggle="toggle" data-size="small" data-style="ios" data-onstyle="success" data-offstyle="danger" id="CheckZoneArm">
<a href="#" class="btn btn-warning btn-sm" id="butSendZones" style="float: right" onclick="SendZoneDetails()"> Send Zones </a>
</div>
</div>
</div>
<!-- Panel Edit RF Sensors -->
<div class="collapse" id="PanEditRFSensors">
<div class="panel panel-default">
<div class="panel-heading">RF Sensor Configuration<button type="button" class="btn btn-danger btn-xs" style="float: right;" onclick="ClosePanEditSensor()">X</button></div>
<div class="panel-body">
<label for="txtSensorIDX">Sensor ID</label>
<input type="text" id="txtSensorIDX" class="form-control" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
<label for="txtSensorLocation">Location</label>
<input type="text" id="txtSensorLocation" class="form-control">
<label for="txtSensorType">Sensor Type</label>
<select class="form-control" id="txtSensorType">
<option>DOOR</option>
<option>WINDOW</option>
<option>PIR</option>
<option>RADAR</option>
<option>SMOKE</option>
<option>FOB</option>
<option>LASER</option>
<option>TEMP/HUMID</option>
</select>
<label for="txtSensorZone">Sensor Zone</label>
<select class="form-control" id="txtSensorZone">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<h2></h2>
<p><strong>Sensor Enable </strong> <input type="checkbox" id="txtSensorEnabled" checked data-toggle="toggle" data-size="small" data-style="ios" data-onstyle="success" data-offstyle="danger" onchange="">
<a href="#" class="btn btn-warning btn-sm" id="butUpdateSensor" style="float: right" onclick="SendSensorDetails('update')"> Update </a>
<a href="#" class="btn btn-success btn-sm" id="butSaveSensor" style="float: right" onclick="SendSensorDetails('save')"> Save </a>
</p>
</div>
</div>
</div>
<!-- Panel for Table sensors -->
<div class="show" id="targetSensors">
<div class="panel panel-default">
<div class="panel-heading"><i class="glyphicon glyphicon-cog" aria-hidden="true"></i> Installed Sensors</div>
<div class="panel-body">
<table class="table table-sm" id="SensorTable">
<thead>
<tr>
<th scope="col" style="width:10%"><span class="badge">IDX</span></th>
<th scope="col"><span class="badge">Type</span></th>
<th scope="col"><span class="badge">Location</span></th>
<th scope="col"><span class="badge">Zone</span></th>
<th scope="col"><span class="badge">Enable</span></th>
<th scope="col"><span class="badge">Edit</span></th>
<th scope="col"><span class="badge">Delete</span></th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr>
<a href="#" class="btn btn-primary btn-sm" data-target="#targetElement" onclick="AddNewSensor()"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i> Add
Sensor</a>
<a href="#" class="btn btn-warning btn-sm" onclick="ShowPanZones()">Zones</a>
<a href="#" class="btn btn-danger btn-sm" onclick="Sendreboot()"><i class="glyphicon glyphicon-off" aria-hidden="true"></i> Reboot</a>
<a href="#" class="btn btn-primary btn-sm" onclick="SendCustomCommand('deleteSpiffs')"> <i class="glyphicon glyphicon-remove" aria-hidden="true"></i> Delete Spiffs</a>
<a href="#" class="btn btn-primary btn-sm" onclick="send_data()"> <i class="glyphicon glyphicon-remove" aria-hidden="true"></i> WS Send</a>
<span style="float:right" id="MyLabel"><strong>Websockets Data Label</strong></span>
</div>
</div>
</div>
</div>
</body>
<!-- Popup alert message works nice -->
<script>
function myAlert(Title,Message) {
$('#MyAlerts').html("<div class='alert alert-info'><strong><i class='glyphicon glyphicon-alert gi-2x5' style='color:orange' aria-hidden='true'></i>"+" "+Title+"</strong>"+Message+"</div>");
$('#MyAlerts').fadeIn(1000);
setTimeout(function() {
$('#MyAlerts').fadeOut(1000);
}, 5000);
}
</script>
<!-- Send reeboot command to Arduino -->
<script>
function Sendreboot() {
var x = new XMLHttpRequest();
x.open("GET", "/reboot", true);
x.send(null);
myAlert('System ',' Rebooting, Please wait ten seconds...');
};
</script>
<!-- Working Send delete request to micro with Sensor ID code -->
<script>
function Senddelete(val_id) {
//alert("Delete Value is: "+ val_id);
var x = new XMLHttpRequest();
x.open("GET", "/delete?idx="+ val_id , true);
x.send(null);
myAlert('Delete! ',' Sensor ID: ' + val_id);
};
</script>
<script>
$('#SensorTable').on('click', '.btnDelete', function () {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".idx").text(); // Find the text
Senddelete($text); // function send ID code to ESP Micro
});
</script>
<!-- Custom Command send to ESP -->
<script>
function SendCustomCommand(vPath) {
var x = new XMLHttpRequest();
x.open("GET", "/" + vPath, true);
x.send(null);
myAlert('Custom Command ',' Sending Command..');
};
</script>
<!-- Hide and Show Edit and Add new Sensor panels -->
<script>
function ShowPanEditSensor() {
$('#PanEditRFSensors').show()
}
</script>
<script>
function ClosePanEditSensor() {
$('#PanEditRFSensors').hide()
}
</script>
<script>
function ShowPanZones() {
$('#PanSensorZones').show()
}
</script>
<script>
function ClosePanZones() {
$('#PanSensorZones').hide()
}
</script>
<!-- Bubbly background animation Nice -->
<script>
bubbly({
colorStart: "#007bff",
colorStop: "#ffffff",
blur: 1,
compose: "source-over",
velocityFunc: () => 0.9 + Math.random() * 0.5,
});
</script>
<!-- Add new Sensor function uses same edit panel -->
<script>
function AddNewSensor() {
document.getElementById("txtSensorIDX").value = 'Enter IDX';
document.getElementById("txtSensorLocation").value = 'Enter Location';
$('#txtSensorType').val('DOOR');
$('#txtSensorZone').val('1');
document.getElementById("txtSensorIDX").disabled = false;
document.getElementById("butSaveSensor").disabled = false;
document.getElementById("butUpdateSensor").disabled = true;
document.getElementById('butSaveSensor').style.visibility = 'visible';
document.getElementById('butUpdateSensor').style.visibility = 'hidden';
ShowPanEditSensor();
};
</script>
<!-- Button Edit event extend and raise edit panel $(".btnEdit").click(function () -->
<script>
$('#SensorTable').on('click', '.btnEdit', function () {
var currentRow=$(this).closest("tr");
var col1 = currentRow.find(".idx").text(); // Find the text
var col2=currentRow.find("td:eq(0)").html();
var col3=currentRow.find("td:eq(1)").html();
var col4=currentRow.find("td:eq(2)").html();
var col5=currentRow.find("td:eq(3)").html();
var data=col1+"\n"+col2+"\n"+col3+"\n"+col4+"\n"+col5;
document.getElementById("txtSensorIDX").value = col1;
document.getElementById("txtSensorLocation").value = col3;
$('#txtSensorType').val(col2);
$('#txtSensorZone').val(col4);
if (col5 == 'Enabled') {
$('#txtSensorEnabled').bootstrapToggle('on')
} else {
$('#txtSensorEnabled').bootstrapToggle('off')
};
document.getElementById("txtSensorIDX").disabled = true;
document.getElementById("butSaveSensor").disabled = true;
document.getElementById("butUpdateSensor").disabled = false;
document.getElementById('butSaveSensor').style.visibility = 'hidden'; // save button 'visible' show button
document.getElementById('butUpdateSensor').style.visibility = 'visible'; // save button 'visible' show button
ShowPanEditSensor();
});
</script>
<!-- Function used for both Uodate and Add new Sensor-->
<script>
function SendSensorDetails(ValPath) {
var SensIDX = document.getElementById("txtSensorIDX").value;
var SensLOC = document.getElementById("txtSensorLocation").value;
var SensTYPE = document.getElementById("txtSensorType").value;
var SensZONE = document.getElementById("txtSensorZone").value;
var SensENABLE = document.getElementById("txtSensorEnabled").checked;
var DataString = ("/" + ValPath +"?idx="+ SensIDX);
DataString += ("&Location=" + SensLOC);
DataString += ("&Type=" + SensTYPE);
DataString += ("&Zone=" + SensZONE);
DataString += ("&Enable=" + SensENABLE);
myAlert('Sending Details ',' Sending Sensor Configuration');
var x = new XMLHttpRequest();
x.open("GET", DataString , true);
x.send(null);
location.reload(true);
return false;
};
</script>
<!-- Function to send zone information to Micro-->
<script>
function SendZoneDetails() {
var Zone1 = document.getElementById("CheckZone1").checked;
var Zone2 = document.getElementById("CheckZone2").checked;
var Zone3 = document.getElementById("CheckZone3").checked;
var Zone4 = document.getElementById("CheckZone4").checked;
var ZonesArm = document.getElementById("CheckZoneArm").checked;
var DataString = ("/zones?Zone1="+ Zone1);
DataString += ("&Zone2=" + Zone2);
DataString += ("&Zone3=" + Zone3);
DataString += ("&Zone4=" + Zone4);
DataString += ("&ZoneArm=" + ZonesArm);
myAlert('Zones ',' Zone details sent...');
alert("Debug String: "+ DataString); // only for debug
var x = new XMLHttpRequest();
x.open("GET", DataString , true);
x.send(null);
};
</script>
<script type="text/javascript">
const SensorTabeBody = document.querySelector("#SensorTable > tbody");
function LoadSensorData()
{
const request = new XMLHttpRequest();
request.open("get", "data/SensorData.json");
request.onload = () => {
try {
const json = JSON.parse(request.responseText);
PopulateSensors(json);
} catch (e) {
console.warn("Could not load Json File");
}
};
request.send();
}
function PopulateSensors(json){
// Clear table data first
while (SensorTabeBody.firstChild)
{
SensorTabeBody.removeChild(SensorTabeBody.firstChild);
}
// now populate table
x = 0;
json.forEach((row) => {
const tr = document.createElement("tr");
tr.innerHTML = '<th class="idx" scope="row" style="color: crimson;">' + json[x][0] + '</th>' +
'<td>' + json[x][1] + '</td>' +
'<td>' + json[x][2] + '</td>' +
'<td>' + json[x][3] + '</td>' +
'<td>' + json[x][4] + '</td>' +
'<td><button type="button" id="btnEdit" class="btnEdit"><i class="glyphicon glyphicon-edit" aria-hidden="true"></i></td>' +
'<td><button type="button" class="btnDelete"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i></td>';
SensorTabeBody.appendChild(tr);
x = x +1;
});
}
document.addEventListener("DOMContentLoaded", () => {LoadSensorData(); });
</script>
<!-- WEBSOCKETS SEND AND RECEIVE FUNCTIONS HERE-->
<script>
var connection = new WebSocket('ws://'+location.hostname+':81/');
var sens_data = 0;
connection.onmessage = function(event){
var full_data = event.data;
console.log(full_data);
var data = JSON.parse(full_data);
sens_data = data.Counter;
document.getElementById("MyLabel").textContent = sens_data;
// try load popup box with this data
//window.myAlert('WebSockets ',sens_data); does not work
//const myAlert = new myAlert("WebSockets", sens_data); does not work
$('.myAlert').myAlert("WebSockets", sens_data);
document.getElementById('myAlert').style.visibility = 'visible'; // save button 'visible' show button
}
function button_1_on()
{
button_1_status = 1;
console.log("LED 1 is ON");
send_data();
}
function send_data()
{
var full_data = '{"LED1" :22,"LED2":23}';
connection.send(full_data);
}
</script>
</html>
