286 lines
10 KiB
HTML
286 lines
10 KiB
HTML
<!--
|
|
Written By: Robert Zmrzli robert@wellnuo.com
|
|
edit_device.html
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Device</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
token = "0"
|
|
user_name = ""
|
|
priviledges = 0
|
|
const baseURL = window.location.origin;
|
|
const api_url = `${baseURL}/function/well-api`;
|
|
|
|
function initialize() {
|
|
token = localStorage.getItem('token');
|
|
user_name = localStorage.getItem('user_name');
|
|
priviledges = localStorage.getItem('priviledges');
|
|
|
|
|
|
}
|
|
|
|
async function SendToServer(formData) {
|
|
|
|
console.log(formData.toString());
|
|
const response = await fetch(api_url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
mode: 'no-cors',
|
|
body: formData.toString()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const text = await response.text();
|
|
console.log(text);
|
|
try {
|
|
data = JSON.parse(text);
|
|
return data;
|
|
|
|
}
|
|
catch {
|
|
data = {
|
|
ok: 0
|
|
}
|
|
return data;
|
|
}
|
|
|
|
} else {
|
|
console.log(await response.json());
|
|
data = {
|
|
ok: 0
|
|
}
|
|
return data;
|
|
}
|
|
}
|
|
|
|
async function SubmitDeviceForm(formData) {
|
|
|
|
console.log(formData.toString());
|
|
const response = await fetch(api_url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
mode: 'no-cors',
|
|
body: formData.toString()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const text = await response.text();
|
|
console.log(text);
|
|
try {
|
|
data = JSON.parse(text);
|
|
return data;
|
|
|
|
}
|
|
catch {
|
|
data = {
|
|
ok: 0
|
|
}
|
|
return data;
|
|
}
|
|
|
|
} else {
|
|
console.log(await response.json());
|
|
data = {
|
|
ok: 0
|
|
}
|
|
return data;
|
|
}
|
|
}
|
|
|
|
|
|
async function SubmitDevice() {
|
|
editing_device_id = document.getElementById("editing_device_id").innerText;
|
|
device_mac = document.getElementById("device_mac").value;
|
|
well_id = document.getElementById("well_id").value;
|
|
group_id = document.getElementById("group_id").value;
|
|
description = document.getElementById("description").value;
|
|
location_ = document.getElementById("location").value; //location is reserved word
|
|
close_to = document.getElementById("close_to").value;
|
|
radar_threshold = document.getElementById("radar_threshold").value;
|
|
temperature_calib = document.getElementById("temperature_calib").value;
|
|
humidity_calib = document.getElementById("humidity_calib").value;
|
|
if (device_mac.length != 12) { //308398E05724
|
|
alert("MAC has wrong length!")
|
|
}
|
|
else if (well_id.length < 3) {
|
|
alert("Well Id is too short!")
|
|
}
|
|
else {
|
|
|
|
// Form URL encoded data
|
|
const formData = new URLSearchParams();
|
|
formData.append('function', "device_form");
|
|
formData.append('user_name', user_name);
|
|
formData.append('token', token);
|
|
|
|
formData.append('editing_device_id', editing_device_id);
|
|
formData.append('device_mac', device_mac);
|
|
formData.append('well_id', well_id);
|
|
formData.append('group_id', group_id);
|
|
formData.append('description', description);
|
|
formData.append('location', location_);
|
|
formData.append('close_to', close_to);
|
|
formData.append('radar_threshold', radar_threshold);
|
|
formData.append('temperature_calib', temperature_calib);
|
|
formData.append('humidity_calib', humidity_calib);
|
|
|
|
data = await SubmitDeviceForm(formData);
|
|
|
|
if(data.ok == 1){
|
|
alert("Device is stored!");
|
|
}
|
|
else {
|
|
alert('Failed to store device');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function DeleteDevice() {
|
|
|
|
editing_device_id = document.getElementById("editing_device_id").innerText;
|
|
|
|
if (confirm("Are you sure you want to delete this device?")) {
|
|
|
|
// Form URL encoded data
|
|
const formData = new URLSearchParams();
|
|
formData.append('function', "device_delete");
|
|
formData.append('token', token);
|
|
formData.append('device_id', editing_device_id);
|
|
|
|
data = await SendToServer(formData);
|
|
|
|
if(data.ok == 1){
|
|
alert("Device is deleted!");
|
|
}
|
|
else {
|
|
alert('Failed to delete device');
|
|
}
|
|
}
|
|
}
|
|
|
|
function TZoneChange() {
|
|
document.getElementById("tzone").value = document.getElementById("tzone_s").value;
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="initialize();">
|
|
|
|
<div id="edit_beneficiary_content" style="margin: 0 auto; max-width: 400px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 10px; padding: 20px; text-align: left; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
|
|
<h2 class="info-text">Device Information Id = <span id="editing_device_id">?</span></h2>
|
|
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="device_mac" style="display: block; margin-bottom: 5px; color: #333;">MAC address: *</label>
|
|
<input type="text" id="device_mac" style="width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;">
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="well_id" style="display: block; margin-bottom: 5px; color: #333;">Well Id: *</label>
|
|
<input type="text" id="well_id" style="width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;">
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="group_id" style="display: block; margin-bottom: 5px; color: #333;">Group Id: *</label>
|
|
<input type="text" id="group_id" style="width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;">
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="description" style="display: block; margin-bottom: 5px; color: #333;">Description:</label>
|
|
<input type="text" id="description" style="width: 80%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;">
|
|
</div>
|
|
|
|
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="location" style="margin-right: 10px; color: #333;">Location:</label>
|
|
<select id="location" name="location">
|
|
<option value=0>--Please choose a location--</option>
|
|
<option value=56>Bedroom</option>
|
|
<option value=106>Master Bedroom</option>
|
|
<option value=107>Guest Bedroom</option>
|
|
<option value=102>Bathroom</option>
|
|
<option value=104>Main Bathroom</option>
|
|
<option value=105>Guest Bathroom</option>
|
|
<option value=34>Kitchen</option>
|
|
<option value=103>Dining Room</option>
|
|
<option value=78>Living Room</option>
|
|
<option value=5>Office</option>
|
|
<option value=6>Hallway</option>
|
|
<option value=7>Garage</option>
|
|
<option value=9>Conference Room</option>
|
|
<option value=109>Basement</option>
|
|
<option value=110>Attic</option>
|
|
<option value=10>Room</option>
|
|
<option value=8>Outside</option>
|
|
<option value=200>Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="close_to" style="display: block; margin-bottom: 5px; color: #333;">Close to:</label>
|
|
<input type="text" id="close_to" style="width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;">
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="radar_threshold" style="display: block; margin-bottom: 5px; color: #333;">Radar threshold:</label>
|
|
<input type="text" id="radar_threshold" style="width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;" placeholder='["s3_max",12]' title="Gate_(min/max), threshold">
|
|
</div>
|
|
<br>
|
|
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="temperature_calib" style="margin-right: 10px; color: #333;">Temperature Calibration:</label>
|
|
<input type="text" id="temperature_calib" style="width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;"placeholder="0.0,1.0,0.0" title="A,B,C parameters in y=A*x^2+B*x+C">
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 15px; display: flex; align-items: center;">
|
|
<label for="humidity_calib" style="margin-right: 10px; color: #333;">Humidity Calibration:</label>
|
|
<input type="text" id="humidity_calib" style="width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;" placeholder="0.0,1.0,0.0" title="A,B,C parameters in y=A*x^2+B*x+C">
|
|
</div>
|
|
|
|
<br>
|
|
<div style="text-align: center;">
|
|
<button style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;" onclick="SubmitDevice()">Submit</button>
|
|
<button style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;" onclick="DeleteDevice()">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|