"test1"
Bootstrap 4.0.0 Snippet by danbicks

<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>

Related: See More


Questions / Comments: