Update package-lock

app/database/sqlite.database.js

@@ -2,8 +2,10 @@ const Database = require("better-sqlite3");
 const logger = require("../utils/logger.util");
 const db_conf = require("../config/db.conf");
 
+// Holds the database class object
 var db;
 
+// Connect to SQLite database
 function connect() {
     try {
         logger.info("Connecting to Database...");
@@ -14,10 +16,12 @@ function connect() {
     }
 }
 
+// Database object getter
 function getDB() {
     return db;
 }
 
+// Database object setter
 function setDB(newDb) {
     db = newDb;
 }

app/routes/private_routes.js

@@ -10,9 +10,12 @@ const messages = require("../config/messages.conf.js");
 const express = require('express');
 const router = express.Router();
 
+// Gets an Express response object an emoji code and a string message and renders as error message
 function errorPageRenderer(res, emoji, message) {
     res.render("error", {
         page_title: app_conf.name,
+        program: app_conf.program,
+        app_url: app_conf.app_url,
         css_path: path.join(app_conf.paths.css.web, "stylesheet.css"),
         js_path: path.join(app_conf.paths.js.web, "error.js"),
         error_emoji: emoji,
@@ -20,11 +23,14 @@ function errorPageRenderer(res, emoji, message) {
     })
 }
 
+// Remove SQL row endpoint
 router.delete("/remove", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
+    // Get the row Name as request parameter
     if (req.query["element"]) {
         try {
+            // Create and run SQL statement to remove the row
             const remove = db.getDB().prepare(`DELETE FROM ${db_conf.table_name} WHERE Name='${req.query["element"]}';`);
             if (remove.run()["changes"]) {
                 res.status(200).send();
@@ -40,21 +46,26 @@ router.delete("/remove", async (req, res) => {
     }
 });
 
+// Upload SQL database
 router.post("/upload", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
+    // Check if file received
     if (!req.files || !req.files.file) {
         res.status(422).send();
     } else {
         const uploadedFile = req.files.file;
 
+        // Close current database
         if (db.getDB()) {
             db.getDB().close();
         }
+        // Overwrite current database file with the new one
         fs.copyFile(uploadedFile.tempFilePath, db_conf.path, (error) => {
             if (error) {
                 logger.error(error);
             } else {
+                // Create new database (connect to db) object and store it
                 try {
                     db.setDB(new Database(db_conf.path, { fileMustExist: true }));
                 } catch (error) {
@@ -66,17 +77,21 @@ router.post("/upload", async (req, res) => {
     res.status(201).send();
 });
 
+// Download current database file
 router.get("/download", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
     res.download(db_conf.path);
 });
 
+// Add row to database
 router.post("/add", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
+    // Check if row name and row data received
     if (req.query["element"] && req.body) {
         try {
+            // Constructing and executing SQL statement
             let keys = Object.keys(req.body);
             let values = `'${req.query["element"]}',`;
 
@@ -105,11 +120,14 @@ router.post("/add", async (req, res) => {
     }
 });
 
+// Edit SQL row
 router.post("/edit", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
+    // Check if row name and row data received
     if (req.query["element"] && req.body) {
         try {
+            // Constructing and executing SQL statement
             let keys = Object.keys(req.body);
             let values = "";
 
@@ -138,10 +156,12 @@ router.post("/edit", async (req, res) => {
     }
 });
 
+// Add row to database page renderer
 router.get("/add", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
     try {
+        // Get all SQL columns to create HTML table
         const select_get = db.getDB().prepare(`SELECT * FROM ${db_conf.table_name};`);
         const row = select_get.get();
 
@@ -149,6 +169,10 @@ router.get("/add", async (req, res) => {
         var table_header = `<th>${sql_header[0]}</th>\n`;
         sql_header.splice(0, 1);
 
+        /*
+         * Getting all distinct values for each column except the value from the
+         * current column to add as options to the HTML selects.
+         */
         if (row) {
             var column_options = {};
             for (const key of sql_header) {
@@ -180,6 +204,8 @@ router.get("/add", async (req, res) => {
             table_data += "</tr>";
             res.render("add", {
                 page_title: app_conf.name,
+                program: app_conf.program,
+                app_url: app_conf.app_url,
                 css_path: path.join(app_conf.paths.css.web, "stylesheet.css"),
                 js_path: path.join(app_conf.paths.js.web, "add.js"),
                 column_options: JSON.stringify(column_options),
@@ -195,9 +221,11 @@ router.get("/add", async (req, res) => {
     }
 });
 
+// Edit SQL row page
 router.get("/edit", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
+    // Same as ADD GET REQUEST but Name is constant as it identifies the row
     if (req.query["element"]) {
         try {
             const select_get = db.getDB().prepare(`SELECT * FROM ${db_conf.table_name} WHERE Name='${req.query["element"]}';`);
@@ -246,6 +274,8 @@ router.get("/edit", async (req, res) => {
 
                 res.render("edit", {
                     page_title: app_conf.name,
+                    program: app_conf.program,
+                    app_url: app_conf.app_url,
                     css_path: path.join(app_conf.paths.css.web, "stylesheet.css"),
                     js_path: path.join(app_conf.paths.js.web, "edit.js"),
                     column_options: JSON.stringify(column_options),
@@ -264,10 +294,12 @@ router.get("/edit", async (req, res) => {
     }
 });
 
+// Main page
 router.get("/", async (req, res) => {
     logger.info(`${req.method}: "${req.url}" => ${req.get("User-Agent")}`);
 
     try {
+        // Get all rows from SQL and creating HTML table
         const select = db.getDB().prepare(`SELECT * FROM ${db_conf.table_name}`);
         const rows = select.all();
 
@@ -293,6 +325,8 @@ router.get("/", async (req, res) => {
 
             res.render("index", {
                 page_title: app_conf.name,
+                program: app_conf.program,
+                app_url: app_conf.app_url,
                 css_path: path.join(app_conf.paths.css.web, "stylesheet.css"),
                 js_path: path.join(app_conf.paths.js.web, "index.js"),
                 table_header: table_header,
@@ -307,4 +341,15 @@ router.get("/", async (req, res) => {
     }
 });
 
+// About page for github
+router.get("/about", (req, res) => {
+    res.render("about", {
+        page_title: app_conf.name,
+        program: app_conf.program,
+        app_url: app_conf.app_url,
+        css_path: path.join(app_conf.paths.css.web, "stylesheet.css"),
+        version: app_conf.version
+    });
+});
+
 module.exports = router;

app/routes/public_routes.js

@@ -8,15 +8,11 @@ router.use(app_conf.paths.css.web, express.static(path.join(path.dirname(require
 router.use(app_conf.paths.js.web, express.static(path.join(path.dirname(require.main.filename), app_conf.paths.js.src)));
 
 /*
- * Main endpoint - might implement authentication step here...
+ * Main endpoint - authentication happens here
+ * Rewritting the whole url to fix logout bug
  */
 router.get("/", (req, res) => {
-    res.render("auth", {
+    res.redirect(`${app_conf.protocol}://${app_conf.host}:${app_conf.port}${app_conf.app_url}`);
-        page_title: app_conf.name,
-        css_path: path.join(app_conf.paths.css.web, "stylesheet.css"),
-        protocol: app_conf.protocol,
-        host: app_conf.host
-    });
 });
 
 module.exports = router;

app/views/about.ejs

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>
+        <%= page_title %>
+    </title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="<%= css_path %>">
+</head>
+
+<body>
+    <div class="control_div" style="display: flex; flex-direction: row; justify-content: space-between;">
+        <label style="font-size: 200%;">
+            <%= page_title%>
+                <%= program %>
+        </label>
+    </div>
+    <div class="main_div">
+        <center>
+            <label>Version <%= version %></label>
+            <br>
+            <a href="https://github.com/Centaurus-Racing-Team/5G-telemetry" target="_blank"
+                style="font-size: 150%;">GitHub</a>
+        </center>
+        <br>
+        <a href="<%= app_url %>"><span>&#129152; </span>Return</a>
+    </div>
+</body>
+
+</html>

app/views/add.ejs

@@ -6,6 +6,7 @@
         <%= page_title %>
     </title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
@@ -15,12 +16,16 @@
     <script src="<%= js_path %>" defer></script>
     <script defer>
         var column_options = '<%- column_options %>';
+        var app_url = '<%= app_url %>';
     </script>
 </head>
 
 <body>
     <div class="control_div">
-        <label style="font-size: 200%;">CRTelemetry SQLite3</label>
+        <label style="font-size: 200%;">
+            <%= page_title%>
+                <%= program %>
+        </label>
     </div>
     <div class="main_div">
         <center><label>Add record</label></center>
@@ -31,10 +36,13 @@
             <%- table_data %>
         </table>
         <div style="display: flex; flex-direction: row; justify-content: space-between;">
-            <a href="/app"><span>&#129152; </span>Return</a>
+            <a href="<%= app_url %>"><span>&#129152; </span>Return</a>
             <label id="commit" style="cursor: pointer;"><span>&#9989; </span>Commit</label>
         </div>
     </div>
+    <div class="about_div">
+        <center><a href="<%= app_url %>/about">About</label></center>
+    </div>
 </body>
 
 </html>

app/views/auth.ejs

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>
-        <%= page_title %>
-    </title>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link
-        href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
-        rel="stylesheet">
-    <link rel="stylesheet" href="<%= css_path %>">
-</head>
-
-<body>
-    <div class="control_div">
-        <label
-            style='font-family: "Ubuntu", sans-serif; font-weight: 500; font-style: normal; font-size: 200%;'>Centaurus
-            Racing Team</label>
-    </div>
-    <div class="main_div" style="display: flex; flex-direction: column; justify-content: space-between;">
-        <div style="display: flex; flex-direction: row; justify-content: space-evenly;">
-            <label>CRTelemetry SQLite3</label>
-            <a href="<%= protocol %>://<%= host %>/app">Enter</a>
-        </div>
-    </div>
-</body>
-
-</html>

app/views/edit.ejs

@@ -6,6 +6,7 @@
         <%= page_title %>
     </title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
@@ -15,12 +16,16 @@
     <script src="<%= js_path %>" defer></script>
     <script defer>
         var column_options = '<%- column_options %>';
+        var app_url = '<%= app_url %>';
     </script>
 </head>
 
 <body>
     <div class="control_div" style="display: flex; flex-direction: row; justify-content: space-between;">
-        <label style="font-size: 200%;">CRTelemetry SQLite3</label>
+        <label style="font-size: 200%;">
+            <%= page_title%>
+                <%= program %>
+        </label>
         <div style="display: flex;align-items: center;">
             <label id="remove" style="cursor: pointer; margin-right: 10px;"><span>&#45; </span>Remove</label>
         </div>
@@ -34,10 +39,13 @@
             <%- table_data %>
         </table>
         <div style="display: flex; flex-direction: row; justify-content: space-between;">
-            <a href="/app"><span>&#129152; </span>Return</a>
+            <a href="<%= app_url %>"><span>&#129152; </span>Return</a>
             <label id="commit" style="cursor: pointer;"><span>&#9989; </span>Commit</label>
         </div>
     </div>
+    <div class="about_div">
+        <center><a href="<%= app_url %>/about">About</label></center>
+    </div>
 </body>
 
 </html>

app/views/error.ejs

@@ -6,6 +6,7 @@
         <%= page_title %>
     </title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
@@ -13,15 +14,23 @@
         rel="stylesheet">
     <link rel="stylesheet" href="<%= css_path %>">
     <script src="<%= js_path %>" defer></script>
+    <script defer>
+        var app_url = '<%= app_url %>';
+    </script>
 </head>
 
 <body>
     <input type="file" id="file_input" accept=".db" style="display: none;" />
     <div class="control_div" style="display: flex; flex-direction: row; justify-content: space-between;">
-        <label style="font-size: 200%;">CRTelemetry SQLite3</label>
+        <label style="font-size: 200%;">
+            <%= page_title%>
+                <%= program %>
+        </label>
         <div style="display: flex;align-items: center;">
-            <label id="upload" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129093; </span>Upload</label>
+            <label id="upload" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129093;
-            <label id="download" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129095; </span>Download</label>
+                </span>Upload</label>
+            <label id="download" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129095;
+                </span>Download</label>
             <label id="logout" style="cursor: pointer; margin-left: 10px;"><span>&#129092; </span>Logout</label>
         </div>
     </div>
@@ -33,7 +42,7 @@
             <%= error_message %>
         </label>
         <br>
-        <a href="/app"><span>&#129152; </span>Return</a>
+        <a href="<%= app_url %>"><span>&#129152; </span>Return</a>
     </div>
 </body>
 

app/views/index.ejs

@@ -6,6 +6,7 @@
         <%= page_title %>
     </title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
@@ -13,16 +14,24 @@
         rel="stylesheet">
     <link rel="stylesheet" href="<%= css_path %>">
     <script src="<%= js_path %>" defer></script>
+    <script defer>
+        var app_url = '<%= app_url %>';
+    </script>
 </head>
 
 <body>
     <input type="file" id="file_input" accept=".db" style="display: none;" />
     <div class="control_div" style="display: flex; flex-direction: row; justify-content: space-between;">
-        <label style="font-size: 200%;">CRTelemetry SQLite3</label>
+        <label style="font-size: 200%;">
+            <%= page_title%>
+                <%= program %>
+        </label>
         <div style="display: flex;align-items: center;">
             <label id="add" style="cursor: pointer; margin-right: 10px;"><span>&#43; </span>Add</label>
-            <label id="upload" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129093; </span>Upload</label>
+            <label id="upload" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129093;
-            <label id="download" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129095; </span>Download</label>
+                </span>Upload</label>
+            <label id="download" style="cursor: pointer; margin-left: 10px; margin-right: 10px;"><span>&#129095;
+                </span>Download</label>
             <label id="logout" style="cursor: pointer; margin-left: 10px;"><span>&#129092; </span>Logout</label>
         </div>
     </div>
@@ -35,6 +44,9 @@
             <%- table_data %>
         </table>
     </div>
+    <div class="about_div">
+        <center><a href="<%= app_url %>/about">About</label></center>
+    </div>
 </body>
 
 </html>

package-lock.json

@@ -4,6 +4,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "database_editor",
       "dependencies": {
         "better-sqlite3": "^11.10.0",
         "ejs": "^3.1.10",
@@ -1525,9 +1526,9 @@
       }
     },
     "node_modules/tar-fs": {
-      "version": "2.1.2",
+      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
-      "integrity": "sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==",
+      "integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
       "license": "MIT",
       "dependencies": {
         "chownr": "^1.1.1",

samples/app.conf.sample

@@ -1,11 +1,13 @@
 module.exports = {
+    version: "1.0",
     name: "CRTelemetry",
+    program: "SQLite3",
     host: "localhost",
     protocol: "http",
-    port: 80,
+    port: 8080,
+    app_url: "/app",
     username: "admin",
     password: "password",
-    token_ttl: 1800,
     logger: {
         level: "info",
         error_path: "/app/logs/error.log",

server.js

@@ -18,15 +18,15 @@ var shutting_down = false;
  * Static middleware - serve css and js files to public
  */
 app.use(express.json());
+// Set temp directory and upload size limit
 app.use(fileUpload({
     limits: { fileSize: 102400 },
     useTempFiles: true,
     tempFileDir: path.join(__dirname, app_conf.temp_directory)
 }));
 
-app.use("/", public_routes);
+app.use(`/`, public_routes);
-
+app.use(`${app_conf.app_url}`, basicAuth({
-app.use("/app", basicAuth({
     users: {
         [app_conf.username]: app_conf.password
     },
@@ -39,8 +39,8 @@ app.use("/app", basicAuth({
  */
 app.set("view engine", "ejs");
 app.set("views", path.join(__dirname, app_conf.views_directory));
-const server = app.listen(app_conf.port, () => {
+const server = app.listen(app_conf.port, (error) => {
-    logger.info("Starting Database Editor.");
+    logger.info(`Starting ${app_conf.name} ${app_conf.program}.`);
     db.connect();
     fs.rm(path.join(__dirname, app_conf.temp_directory, "/."), { recursive: true }, (error) => {
         if (error == null) {
@@ -51,7 +51,13 @@ const server = app.listen(app_conf.port, () => {
             logger.error(error.message);
         }
     });
-    logger.info(`Listening to port ${app_conf.port}.`);
+
+    if (error) {
+        logger.error(error.message);
+        shutdown();
+    } else {
+        logger.info(`Listening to port ${app_conf.port}.`);
+    }
 })
 
 /*

src/css/stylesheet.css

@@ -7,9 +7,12 @@ body {
     font-weight: 500;
     font-style: normal;
 
-    -webkit-user-select: none; /* Safari */
+    -webkit-user-select: none;
-    -ms-user-select: none; /* IE 10 and IE 11 */
+    /* Safari */
-    user-select: none; /* Standard syntax */
+    -ms-user-select: none;
+    /* IE 10 and IE 11 */
+    user-select: none;
+    /* Standard syntax */
 }
 
 a:visited {
@@ -27,6 +30,7 @@ a:hover {
     margin: 3px;
     padding: 5px;
     border-radius: 5px;
+    overflow: auto;
 }
 
 .main_div {
@@ -35,6 +39,15 @@ a:hover {
     margin: 3px;
     padding: 5px;
     border-radius: 5px;
+    overflow: auto;
+}
+
+.about_div {
+    color: #ececec;
+    background-color: #272727;
+    margin: 3px;
+    padding: 5px;
+    border-radius: 5px;
 }
 
 table {

src/javascript/add.js

@@ -2,9 +2,6 @@ const sql_table = document.getElementById("sql_table");
 const sql_row = sql_table.rows;
 const commit = document.getElementById("commit");
 
-column_options = JSON.parse(column_options);
-console.log(column_options);
-
 commit.onmouseenter = async function () {
     this.style.backgroundColor = "blue";
 }
@@ -18,12 +15,13 @@ commit.ondblclick = async function () {
     if (sql_row[1].cells[0].firstChild.value) {
         let req_body = {};
 
+        // Constructing request body by getting the values of each HTML select
         for (let i = 1; i < sql_row[1].cells.length; i++) {
             req_body[sql_row[0].cells[i].firstChild.textContent] = sql_row[1].cells[i].firstChild[sql_row[1].cells[i].firstChild.selectedIndex].text;
         }
 
         try {
-            const response = await fetch(`/app/add?element=${sql_row[1].cells[0].firstChild.value}`, {
+            const response = await fetch(`${app_url}/add?element=${sql_row[1].cells[0].firstChild.value}`, {
                 method: "POST",
                 body: JSON.stringify(req_body),
                 headers: {
@@ -31,21 +29,23 @@ commit.ondblclick = async function () {
                 }
             });
             if (!response.ok) {
-                alert(`Add unsuccessful. ${response.status}`);
                 throw new Error(`Response status: ${response.status}`);
             } else {
                 this.style.backgroundColor = "blue";
-                window.location.href = "/app";
+                window.location.href = app_url;
             }
         } catch (error) {
             alert(`Add unsuccessful. ${error.message}`);
-            console.error(error.message);
         }
     } else {
         alert("Sensor name can't be null.");
     }
 };
 
+// Parsing distinct SQL values from backend
+column_options = JSON.parse(column_options);
+
+// Adding options to HTML selects
 for (let i = 1; i < sql_row[1].cells.length; i++) {
     let opts = column_options[sql_row[0].cells[i].textContent];
 
@@ -55,6 +55,7 @@ for (let i = 1; i < sql_row[1].cells.length; i++) {
         }
     }
 
+    // On right click add custom value - custom value is always the last one in HTML select
     sql_row[1].cells[i].firstChild.oncontextmenu = async function (ev) {
         ev.preventDefault();
         let new_value = prompt("Enter a new value");

src/javascript/edit.js

@@ -4,8 +4,6 @@ const commit = document.getElementById("commit");
 const remove = document.getElementById("remove");
 var changes = 0;
 
-column_options = JSON.parse(column_options);
-
 function setEventListeners(element, cb) {
     element.onmouseenter = async function () {
         this.style.backgroundColor = "blue";
@@ -24,18 +22,16 @@ function setEventListeners(element, cb) {
 
 setEventListeners(remove, async () => {
     try {
-        const response = await fetch(`/app/remove?element=${sql_row[1].cells[0].firstChild.textContent}`, {
+        const response = await fetch(`${app_url}/remove?element=${sql_row[1].cells[0].firstChild.textContent}`, {
             method: "DELETE"
         });
         if (!response.ok) {
-            alert(`Remove unsuccessful. ${response.status}`);
             throw new Error(`Response status: ${response.status}`);
         } else {
-            window.location.href = "/app";
+            window.location.href = app_url;
         }
     } catch (error) {
         alert(`Remove unsuccessful. ${error.message}`);
-        console.error(error.message);
     }
 });
 
@@ -43,6 +39,7 @@ setEventListeners(commit, async () => {
     if (changes) {
         let req_body = {};
 
+        // Constructing request body by adding ONLY updated values
         for (let i = 1; i < sql_row[1].cells.length; i++) {
             if (sql_row[1].cells[i].firstChild.selectedIndex != 0) {
                 req_body[sql_row[0].cells[i].firstChild.textContent] = sql_row[1].cells[i].firstChild[sql_row[1].cells[i].firstChild.selectedIndex].text;
@@ -50,7 +47,7 @@ setEventListeners(commit, async () => {
         }
 
         try {
-            const response = await fetch(`/app/edit?element=${sql_row[1].cells[0].firstChild.textContent}`, {
+            const response = await fetch(`${app_url}/edit?element=${sql_row[1].cells[0].firstChild.textContent}`, {
                 method: "POST",
                 body: JSON.stringify(req_body),
                 headers: {
@@ -58,20 +55,20 @@ setEventListeners(commit, async () => {
                 }
             });
             if (!response.ok) {
-                alert(`Edit unsuccessful. ${response.status}`);
                 throw new Error(`Response status: ${response.status}`);
             } else {
-                window.location.href = "/app";
+                window.location.href = app_url;
             }
         } catch (error) {
             alert(`Edit unsuccessful. ${error.message}`);
-            console.error(error.message);
         }
     } else {
         alert("Nothing to commit.");
     }
 });
 
+column_options = JSON.parse(column_options);
+
 for (let i = 1; i < sql_row[1].cells.length; i++) {
     let opts = column_options[sql_row[0].cells[i].textContent];
 
@@ -97,7 +94,6 @@ for (let i = 1; i < sql_row[1].cells.length; i++) {
 
     sql_row[1].cells[i].firstChild.onchange = async function () {
         if (this.selectedIndex) {
-            console.log(this);
             this.parentElement.style.backgroundColor = "blue";
             changes++;
         } else {

src/javascript/error.js

@@ -18,13 +18,14 @@ function setEventListeners(element, cb) {
     };
 }
 
+// Upload SQL database
 setEventListeners(upload, async () => {
     const input = document.getElementById("file_input");
     const upload = (file) => {
         const formData = new FormData();
         formData.append('file', file);
 
-        fetch('/app/upload', {
+        fetch(`${app_url}/upload`, {
             method: 'POST',
             body: formData
         }).then((response) => {
@@ -41,7 +42,7 @@ setEventListeners(upload, async () => {
 });
 
 setEventListeners(download, () => {
-    window.location.href = "/app/download";
+    window.location.href = `${app_url}/download`;
 });
 
 setEventListeners(logout, () => {

src/javascript/index.js

@@ -4,8 +4,6 @@ const download = document.getElementById("download");
 const logout = document.getElementById("logout");
 const add = document.getElementById("add");
 
-const sql_rows = sql_table.rows;
-
 function setEventListeners(element, cb) {
     element.onmouseenter = async function () {
         this.style.backgroundColor = "blue";
@@ -28,7 +26,7 @@ setEventListeners(upload, async () => {
         const formData = new FormData();
         formData.append('file', file);
 
-        fetch('/app/upload', {
+        fetch(`${app_url}/upload`, {
             method: 'POST',
             body: formData
         }).then((response) => {
@@ -45,19 +43,21 @@ setEventListeners(upload, async () => {
 });
 
 setEventListeners(add, () => {
-    window.location.href = "/app/add";
+    window.location.href = `${app_url}/add`;
 });
 
 setEventListeners(download, () => {
-    window.location.href = "/app/download";
+    window.location.href = `${app_url}/download`;
 });
 
 setEventListeners(logout, () => {
     window.location.href = `${window.location.protocol}//logout@${window.location.host}/`;
 });
 
+const sql_rows = sql_table.rows;
+
 for (let i = 1; i < sql_rows.length; i++) {
     setEventListeners(sql_rows[i], () => {
-        window.location.href = `/app/edit?element=${sql_rows[i].cells[0].innerText}`;
+        window.location.href = `${app_url}/edit?element=${sql_rows[i].cells[0].innerText}`;
     });
 }