-
+
-
+
-
-
-
-
-
- 
WiFi Configuration
-
- WiFi Configuration
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
-
+
+
+ WiFi Configuration
+
+ WiFi Configuration
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Must be an integer.
+
-
-
-
- 
Temperature Configuration
-
- Temperature Configuration
-
-
-
-
-
-
-
-
-
+
+
-
-
+
-
+
+
+ Temperature Configuration
+
+ Temperature Configuration
+
+
+
+
+
+
+ Must be an integer.
+
+
+
+
Must be a number with at most one decimal.
+
-
-
-
- 
Drone Video Configuration
-
- Drone Video Configuration
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
-
+
+
+ Drone Video Configuration
+
+ Drone Video Configuration
+
+
+
+
+
+
+ Must be an integer.
+
+
+
+
+
+
+
+
+ IP Address must be in the format xxx.xxx.xxx.xxx
+
+
+
+
Port must be between 1 and 65535
+
-
-
-
- 
Drone MAVLink Configuration
-
- Drone MAVLink Configuration
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
-
+
+
+ Drone MAVLink Configuration
+
+ Drone MAVLink Configuration
+
+
+
+
+
+
+ Must be an integer.
+
+
+
+
+
+
+
+
+ IP Address must be in the format xxx.xxx.xxx.xxx
+
+
+
+
Port must be between 1 and 65535
+
-
-
-
- 
MAVLink Settings
-
- MAVLink Settings
-
-
-
diff --git a/ui/general/spirilink.js b/ui/general/spirilink.js
index c4b1ee0..b8ed8db 100644
--- a/ui/general/spirilink.js
+++ b/ui/general/spirilink.js
@@ -23,6 +23,7 @@ const mavlinkSysId = document.getElementById("mavlinkSysId");
const mavlinkCompId = document.getElementById("mavlinkCompId");
const mavlinkTcpPort = document.getElementById("mavlinkTcpPort");
+const spiriLinkForm = document.getElementById("spiriLinkForm");
const output = document.getElementById("output");
const wifiChannels = [
@@ -74,7 +75,7 @@ function initPage() {
const inputs = document.querySelectorAll("input, select, textarea");
inputs.forEach(input => {
- input.addEventListener("focus", clearResult);
+ input.addEventListener("focus", resetForm);
});
cockpit.file(confLocation)
@@ -85,6 +86,7 @@ function initPage() {
// Load configuration values from the configuration file
function successReadFile(content) {
try {
+
// WiFi Configuration
// Remove surrounding quotes from wifi_region value if present
const currentWifiChannel = getValueByKey(content, "common", "wifi_channel");
@@ -131,14 +133,69 @@ function successReadFile(content) {
}
}
+// Log error message and display it
+// TODO: Add more error handling for failed file reads
function failureReadFile(error) {
- // Display error message
- console.log("Error : " + error.message);
+ console.error("Error : " + error.message);
displayFail(error.message)
}
+// Validate the form using non-standard input validation conditions.
+// Additional checks for IP, port, and system/component ID fields
+// Returns true if all fields are valid, false otherwise
+function validateSpiriLinkForm(form) {
+ const ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+ const portformat = /^([1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
+ let isValid = true;
+
+ defaultValidation = form.checkValidity();
+
+ const inputs = form.querySelectorAll("input, select, textarea");
+ inputs.forEach(input => {
+ if (input.value === "") {
+ isValid = !input.hasAttribute("required");
+ setValidationVisuals(input, isValid);
+ } else {
+ if (input.id === "droneMavlinkIP" || input.id === "droneVideoIP") {
+ isValid = input.value.match(ipformat);
+ setValidationVisuals(input, isValid);
+ }
+ else if (input.id === "droneMavlinkPort" || input.id === "droneVideoPort" || input.id === "mavlinkTcpPort") {
+ isValid = input.value.match(portformat);
+ setValidationVisuals(input, isValid);
+ }
+ else if (input.id === "mavlinkSysId" || input.id === "mavlinkCompId") {
+ isValid = input.value > 1 || input.value < 255;
+ setValidationVisuals(input, isValid);
+ }
+ }
+ });
+
+ form.classList.add("was-validated");
+ if (!isValid || !defaultValidation) return false;
+ return true;
+}
+
+// Set validation visuals for input fields
+// Adds or removes is-invalid class based on the validity of the input
+// The setCustomValidity function triggers the actual field visuals.
+// Giving it an empty string assumes the input is valid.
+function setValidationVisuals(input, isValid) {
+ if (isValid) {
+ input.classList.remove("is-invalid");
+ input.setCustomValidity("");
+ } else {
+ input.classList.add("is-invalid");
+ input.setCustomValidity("Invalid input");
+ }
+}
+
// Save configuration values to the configuration file
function saveSettings() {
+
+ const dataIsValid = validateSpiriLinkForm(spiriLinkForm);
+ if (!dataIsValid) return;
+
try {
cockpit.file(confLocation)
.read()
@@ -231,9 +288,18 @@ function displayFail(error) {
result.innerHTML = "Error : " + error;
}
-// Clear the result message
-function clearResult() {
+// Reset & clear form data
+function resetForm() {
result.innerHTML = "";
+ const inputs = spiriLinkForm.querySelectorAll("input, select, textarea");
+ inputs.forEach(input => {
+ input.setCustomValidity("");
+ input.classList.remove("is-invalid");
+ input.classList.remove("is-valid");
+ });
+
+ spiriLinkForm.classList.remove("was-validated");
+ spiriLinkForm.classList.add("needs-validation");
}
function addDropDown(box, pairs, defaultValue) {
@@ -245,7 +311,6 @@ function addDropDown(box, pairs, defaultValue) {
option.text = pairs[i][1];
box.add(option);
if (defaultValue === option.value) {
- console.log("found")
box.value = option.value;
}
}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
+
+
+ MAVLink Settings
+
+ MAVLink Settings
+
+
+
+
+
+
+
+
+
+
+ System ID must be between 1 and 255
+
+
+
+
+ Comp ID must be between 1 and 255
+
+
+
+
Port must be between 1 and 65535
+