From f1b698fb46eb59215976218cfe6772c2ed86f8e0 Mon Sep 17 00:00:00 2001
From: Sam Hadow <sam.hadow@inbox.lv>
Date: Sat, 17 Feb 2024 00:18:24 +0100
Subject: [PATCH] input fields validity check

---
 web/app.html |  2 +-
 web/app.js   | 54 +++++++++++++++++++++++++++++-----------------------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/web/app.html b/web/app.html
index f7a4697..1fdaa38 100644
--- a/web/app.html
+++ b/web/app.html
@@ -22,7 +22,7 @@
     <p></p>
     <div class="btn-toolbar btn-group-sm" role="toolbar" aria-label="Toolbar">
       <div class="btn-group mr-2 w-50" role="group" aria-label="Add group">
-        <input id="additemid" type="text" class="form-control input-sm w-15 w-50" placeholder="item id" pattern="[0-9]*">
+        <input id="additemid" type="text" class="form-control input-sm w-15 w-50" placeholder="item id" pattern="[0-9]+" required>
         <input id="addattributes" type="text" class="form-control input-sm w-15" placeholder="attributes (comma separated)" pattern="[0-9a-zA-Z, ]*">
         <button id="addbutton" class="btn btn-secondary" type="button">add</button>
       </div>
diff --git a/web/app.js b/web/app.js
index 26136c6..f00f2b2 100644
--- a/web/app.js
+++ b/web/app.js
@@ -53,35 +53,41 @@ render_graphs_wrapper();
 document.getElementById("addbutton").addEventListener("click", addItem);
 
 async function addItem() {
-    const apiUrl = `${currentUrl}app/add`;
-    const postData = {
-        itemid: document.getElementById("additemid").value,
-        attributes: document.getElementById("addattributes").value
-    };
+    const inputFieldId = document.getElementById("additemid");
+    const inputFieldAttributes = document.getElementById("addattributes");
+    if (inputFieldId.checkValidity() && inputFieldAttributes.checkValidity()) {
+        const apiUrl = `${currentUrl}app/add`;
+        const postData = {
+            itemid: inputFieldId.value,
+            attributes: inputFieldAttributes.value
+        };
 
-    // clear input fields
-    document.getElementById("additemid").value='';
-    document.getElementById("addattributes").value='';
+        // clear input fields
+        inputFieldId.value='';
+        inputFieldAttributes.value='';
 
-    const requestOptions = {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(postData)
-    };
+        const requestOptions = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(postData)
+        };
 
-    const response = await fetch(apiUrl, requestOptions)
-            .catch(error => {
-            console.error('Error during POST request:', error);
-            });
+        const response = await fetch(apiUrl, requestOptions)
+                .catch(error => {
+                console.error('Error during POST request:', error);
+                });
 
-    if (response.ok) {
-        console.log(response);
-        // refresh graphs to display new item
-        refresh_graphs();
+        if (response.ok) {
+            console.log(response);
+            // refresh graphs to display new item
+            refresh_graphs();
+        } else {
+            throw new Error('Error in server response');
+        }
     } else {
-        throw new Error('Error in server response');
+        console.log('invalid content in input fields')
     }
 }