Skip to content

Commit 479fc1f

Browse files
ekumachidiekumachidi
committed
UX Enhancements to DeviceConfig:
* Add jsonEditor for JSON input * enhance device configuration form layout * Update deviceConfig list to use new DataTable function
1 parent 28aac05 commit 479fc1f

File tree

2 files changed

+95
-52
lines changed

2 files changed

+95
-52
lines changed

‎html-Detector/Config/DeviceConfig/deviceConfig.js‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,47 @@
11
// html/DeviceConfig/deviceConfig.js
22
// Description: JavaScript for the device configuration page.
33

4-
import { GetPSQLTable, GetPSQL } from '/includes/functions.js';
4+
import { GetPSQLTable } from '/includes/functions.js';
5+
import { dataTable } from '/includes/tooldaq.js';
6+
import '/includes/ace.js'
57

6-
if (document.readyState !== 'loading'){
7-
//console.log("already loaded, initing");
8-
Init();
8+
let editor;
9+
10+
if (document.readyState !== 'loading') {
11+
//console.log("already loaded, initing");
12+
Init();
913
} else {
10-
//console.log("page still loading, waiting to finish...");
11-
document.addEventListener("DOMContentLoaded", function () {
12-
//console.log("page loaded, initing");
13-
Init();
14-
});
14+
//console.log("page still loading, waiting to finish...");
15+
document.addEventListener("DOMContentLoaded", function () {
16+
//console.log("page loaded, initing");
17+
Init();
18+
});
1519
}
1620

17-
function Init(){
18-
//console.log("Initialising page");
19-
GetDeviceConfigs();
20-
document.getElementById("addDeviceConfigBtn").addEventListener("click", addDeviceConfig);
21+
function Init() {
22+
//console.log("Initialising page");
23+
setupEditor();
24+
GetDeviceConfigs();
25+
document.getElementById("addDeviceConfigBtn").addEventListener("click", addDeviceConfig);
26+
}
27+
28+
function setupEditor() {
29+
editor = ace.edit("jsonEditor");
30+
editor.setTheme("ace/theme/chrome");
31+
editor.session.setMode("ace/mode/json");
32+
editor.setValue("{\n \"devices\": []\n}", -1);
2133
}
2234

2335
function GetDeviceConfigs() {
24-
const query = "SELECT * FROM device_config ORDER BY time DESC LIMIT 10";
25-
GetPSQLTable(query, "root", "daq", true).then(function (result) {
26-
const deviceConfigOutput = document.getElementById("deviceConfigOutput");
27-
deviceConfigOutput.innerHTML = result;
28-
}).catch(function (error) {
29-
console.error("Error fetching device configurations:", error);
30-
});
36+
const query = "SELECT * FROM device_config ORDER BY time DESC LIMIT 20";
37+
dataTable(query, "deviceConfigOutput");
3138
}
3239

3340
function addDeviceConfig() {
3441
const device = document.getElementById("device").value;
3542
const author = document.getElementById("author").value;
3643
const description = document.getElementById("description").value;
37-
const data = document.getElementById("data").value;
44+
const data = editor.getValue();
3845

3946
// Ensure data is in JSON format
4047
try {
@@ -51,9 +58,17 @@ function addDeviceConfig() {
5158
`;
5259

5360
GetPSQLTable(query, "root", "daq", true).then(() => {
54-
// Refresh the table after adding a new config
61+
alert("Device configuration saved successfully.");
62+
clearDeviceConfigInputs();
5563
GetDeviceConfigs();
5664
}).catch(function (error) {
5765
console.error("Error adding device configuration:", error);
5866
});
5967
}
68+
69+
function clearDeviceConfigInputs() {
70+
document.getElementById("device").value = "";
71+
document.getElementById("author").value = "";
72+
document.getElementById("description").value = "";
73+
editor.setValue("{\n \"devices\": []\n}", -1);
74+
}

‎html-Detector/Config/DeviceConfig/index.html‎

Lines changed: 58 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,31 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>ToolDAQ | Device Configurations</title>
8+
<style>
9+
.container {
10+
margin: auto;
11+
padding: 20px;
12+
}
13+
14+
#jsonEditor {
15+
height: 300px;
16+
width: 100%;
17+
border: 1px solid #ccc;
18+
margin-top: 10px;
19+
}
20+
21+
.mdl-textfield {
22+
width: 100%;
23+
}
24+
25+
.mdl-card {
26+
margin-bottom: 20px;
27+
}
28+
29+
#deviceConfigOutput {
30+
margin-top: 30px;
31+
}
32+
</style>
833
</head>
934

1035
<body>
@@ -14,45 +39,48 @@
1439
<!--#include virtual="../subheader.html" -->
1540
<!--#include virtual="/includes/drawer.html" -->
1641

42+
<div class="container">
43+
<h3>New Device Configuration</h3>
1744

18-
<h1 align="center">New Device Configurations</h1>
19-
20-
<!-- Form to add a new device configuration -->
21-
<form id="deviceConfigForm">
22-
<label for="device">Device:</label>
23-
<input type="text" id="device" name="device" size="40" style="margin: 10px;" required><br><br>
45+
<div class="mdl-card mdl-shadow--2dp mdl-card--border">
46+
<div class="mdl-card__supporting-text">
47+
<form id="deviceConfigForm">
2448

25-
<label for="author">Author:</label>
26-
<input type="text" id="author" name="author" size="40" style="margin: 10px;" required><br><br>
49+
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
50+
<input class="mdl-textfield__input" type="text" id="device" required>
51+
<label class="mdl-textfield__label" for="device">Device Name</label>
52+
</div>
2753

28-
<label for="description">Description:</label><br>
29-
<textarea id="description" name="description" style="resize:both; width:80%; margin:10px;" required></textarea><br><br>
54+
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
55+
<input class="mdl-textfield__input" type="text" id="author" required>
56+
<label class="mdl-textfield__label" for="author">Author</label>
57+
</div>
3058

31-
<label for="data">Data (JSON format):</label><br>
32-
<textarea id="data" name="data" style="resize:both; width:80%; margin:10px;" required></textarea><br><br>
33-
34-
<script type="text/javascript">
35-
const datainput = document.querySelector("#data");
36-
datainput.addEventListener('input', autoResize, false);
37-
38-
const descriptinput = document.querySelector("#description");
39-
descriptinput.addEventListener('input', autoResize, false);
40-
41-
function autoResize() {
42-
this.style.height = 'auto';
43-
this.style.height = this.scrollHeight + 'px';
44-
}
45-
</script>
59+
<div class="mdl-textfield mdl-js-textfield">
60+
<textarea class="mdl-textfield__input" rows="3" id="description"></textarea>
61+
<label class="mdl-textfield__label" for="description">Description</label>
62+
</div>
4663

47-
<button type="button" id="addDeviceConfigBtn" >Add Device Configuration</button>
48-
</form>
64+
<label for="jsonEditor"><strong>Data (JSON format):</strong></label>
65+
<div id="jsonEditor">// Write your device config here...</div>
4966

50-
<h2 align="center">Existing Device Configurations</h2>
51-
<div id="deviceConfigOutput"></div>
67+
<br>
68+
<button type="button" id="addDeviceConfigBtn"
69+
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
70+
Add Device Configuration
71+
</button>
72+
</form>
73+
</div>
74+
</div>
5275

76+
<h2 align="center">Existing Device Configurations</h2>
77+
<div id="deviceConfigOutput"></div>
78+
</div>
5379
<!-- Include common footer -->
5480
<!--#include virtual="/includes/footer.html" -->
5581

5682
<script type="module" src="/includes/functions.js?v=1" async></script>
5783
<script type="module" src="./deviceConfig.js?v=1" async></script>
58-
</body>
84+
<script type="module" src="/includes/ace.js?v=1" async></script>
85+
86+
</body>

0 commit comments

Comments
 (0)