Skip to content

UX Enhancements to DeviceConfig #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

UX Enhancements to DeviceConfig #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 37 additions & 22 deletions html-Detector/Config/DeviceConfig/deviceConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,47 @@
// html/DeviceConfig/deviceConfig.js
// Description: JavaScript for the device configuration page.

import { GetPSQLTable, GetPSQL } from '/includes/functions.js';
import { GetPSQLTable } from '/includes/functions.js';
import { dataTable } from '/includes/tooldaq.js';
import '/includes/ace.js'

if (document.readyState !== 'loading'){
//console.log("already loaded, initing");
Init();
let editor;

if (document.readyState !== 'loading') {
//console.log("already loaded, initing");
Init();
} else {
//console.log("page still loading, waiting to finish...");
document.addEventListener("DOMContentLoaded", function () {
//console.log("page loaded, initing");
Init();
});
//console.log("page still loading, waiting to finish...");
document.addEventListener("DOMContentLoaded", function () {
//console.log("page loaded, initing");
Init();
});
}

function Init(){
//console.log("Initialising page");
GetDeviceConfigs();
document.getElementById("addDeviceConfigBtn").addEventListener("click", addDeviceConfig);
function Init() {
//console.log("Initialising page");
setupEditor();
GetDeviceConfigs();
document.getElementById("addDeviceConfigBtn").addEventListener("click", addDeviceConfig);
}

function setupEditor() {
editor = ace.edit("jsonEditor");
editor.setTheme("ace/theme/chrome");
editor.session.setMode("ace/mode/json");
editor.setValue("{\n \"devices\": []\n}", -1);
}

function GetDeviceConfigs() {
const query = "SELECT * FROM device_config ORDER BY time DESC LIMIT 10";
GetPSQLTable(query, "root", "daq", true).then(function (result) {
const deviceConfigOutput = document.getElementById("deviceConfigOutput");
deviceConfigOutput.innerHTML = result;
}).catch(function (error) {
console.error("Error fetching device configurations:", error);
});
const query = "SELECT * FROM device_config ORDER BY time DESC LIMIT 20";
dataTable(query, "deviceConfigOutput");
}

function addDeviceConfig() {
const device = document.getElementById("device").value;
const author = document.getElementById("author").value;
const description = document.getElementById("description").value;
const data = document.getElementById("data").value;
const data = editor.getValue();

// Ensure data is in JSON format
try {
Expand All @@ -51,9 +58,17 @@ function addDeviceConfig() {
`;

GetPSQLTable(query, "root", "daq", true).then(() => {
// Refresh the table after adding a new config
alert("Device configuration saved successfully.");
clearDeviceConfigInputs();
GetDeviceConfigs();
}).catch(function (error) {
console.error("Error adding device configuration:", error);
});
}

function clearDeviceConfigInputs() {
document.getElementById("device").value = "";
document.getElementById("author").value = "";
document.getElementById("description").value = "";
editor.setValue("{\n \"devices\": []\n}", -1);
}
88 changes: 58 additions & 30 deletions html-Detector/Config/DeviceConfig/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,31 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToolDAQ | Device Configurations</title>
<style>
.container {
margin: auto;
padding: 20px;
}

#jsonEditor {
height: 300px;
width: 100%;
border: 1px solid #ccc;
margin-top: 10px;
}

.mdl-textfield {
width: 100%;
}

.mdl-card {
margin-bottom: 20px;
}

#deviceConfigOutput {
margin-top: 30px;
}
</style>
</head>

<body>
Expand All @@ -14,45 +39,48 @@
<!--#include virtual="../subheader.html" -->
<!--#include virtual="/includes/drawer.html" -->

<div class="container">
<h3>New Device Configuration</h3>

<h1 align="center">New Device Configurations</h1>

<!-- Form to add a new device configuration -->
<form id="deviceConfigForm">
<label for="device">Device:</label>
<input type="text" id="device" name="device" size="40" style="margin: 10px;" required><br><br>
<div class="mdl-card mdl-shadow--2dp mdl-card--border">
<div class="mdl-card__supporting-text">
<form id="deviceConfigForm">

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

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

<label for="data">Data (JSON format):</label><br>
<textarea id="data" name="data" style="resize:both; width:80%; margin:10px;" required></textarea><br><br>

<script type="text/javascript">
const datainput = document.querySelector("#data");
datainput.addEventListener('input', autoResize, false);

const descriptinput = document.querySelector("#description");
descriptinput.addEventListener('input', autoResize, false);

function autoResize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
</script>
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" rows="3" id="description"></textarea>
<label class="mdl-textfield__label" for="description">Description</label>
</div>

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

<h2 align="center">Existing Device Configurations</h2>
<div id="deviceConfigOutput"></div>
<br>
<button type="button" id="addDeviceConfigBtn"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Add Device Configuration
</button>
</form>
</div>
</div>

<h2 align="center">Existing Device Configurations</h2>
<div id="deviceConfigOutput"></div>
</div>
<!-- Include common footer -->
<!--#include virtual="/includes/footer.html" -->

<script type="module" src="/includes/functions.js?v=1" async></script>
<script type="module" src="./deviceConfig.js?v=1" async></script>
</body>
<script type="module" src="/includes/ace.js?v=1" async></script>

</body>