Started implementing actual function for add.html

Working on sending data to the backend and actually doing something with
it.

app.py

@@ -6,6 +6,7 @@ app = Flask(__name__)
 connection = sql_utils.connect_database('ubuntu-mariadb.home','admin','password','inventory')
 
 
+### main.html paths
 @app.route('/user_search')
 def user_search():
     data = request.args.get('data')
@@ -47,8 +48,67 @@ left join users u on u.assigned_asset=a.asset_id
     data = sql_utils.read_query(connection,query)
     return data
 
+@app.route('/card_list')
+def card_list():
+    query = '''
+select c.card_number,c.display_number,u.name assigned_user
+from access_cards c
+left join users u on u.assigned_card=c.card_number
+'''
+    data = sql_utils.read_query(connection,query)
+    return data
+@app.route('/user_list')
+def user_list():
+    query = '''
+select * from users;
+'''
+    data = sql_utils.read_query(connection,query)
+    return data
+
+### add.html paths
+
+@app.route("/add_asset", methods=['POST'])
+def add_asset():
+    data = request.json
+    query = f'''
+    insert into assets (asset_id,serial,model,category) values
+    (%(tag)s, %(serial)s, %(model)s, %(category)s)
+    '''
+    result = sql_utils.send_query(connection,query,data)
+    if result:
+        return "success"
+    else:
+        return "failure"
+
+@app.route("/add_user",methods=['POST'])
+def add_user():
+    data = request.json
+    query = f'''
+    insert into users (id_num,name,assigned_asset,assigned_card) values
+    (%(id)s, %(name)s, %(asset)s, %(card)s)
+    '''
+    result = sql_utils.send_query(connection,query,data)
+    if result:
+        return "success"
+    else:
+        return "failure"
+
+@app.route("/add_card")
+def add_card():
+    return None
+@app.route("/modify_asset")
+def modify_asset():
+    return None
+@app.route("/modify_user")
+def modify_user():
+    return None
+@app.route("/modify_card")
+def modify_card():
+    return None
+
+### Pages
 @app.route('/add')
-def add_data():
+def add_page():
     return render_template('adding.html')
 
 @app.route("/")

generate_card_data.py

@@ -0,0 +1,18 @@
+import utils.sql_utils as sql_utils
+import string, random
+
+connection = sql_utils.connect_database('ubuntu-mariadb.home','admin','password','inventory')
+
+cards = []
+for i in range(0,100):
+    num = random.randint(0,100)
+    if not num in cards:
+        cards.append(num)
+
+for index,value in enumerate(cards):
+    query = f'''
+insert into access_cards (card_number,display_number) values ({index+1},{value})
+'''
+    sql_utils.send_query(connection,query)
+
+print("done")

static/add.js

@@ -1,35 +1,106 @@
-function add_asset() {
+async function add_asset() {
     let serial = document.getElementById("add-asset-serial");
     let tag = document.getElementById("add-asset-tag");
     let category = document.getElementById("add-asset-category");
     let model = document.getElementById("add-asset-model");
 
-    if (tag.value == "") {
-        tag = null;
-    } else {
-        tag = tag.value;
-        document.getElementById("add-asset-tag").value = "";
-    }
     if (serial.value == "") {
-        alert('Serial field cannot be empty!')
+        alert("Add asset error:\nThe seiral field cannot be empty!");
         return;
-    } else {
-        serial = serial.value;
-        document.getElementById("add-asset-serial").value = "";
-    }
-    if (category.value == "N/A") {
-        category = null;
-    } else {
-        category = category.value;
-        document.getElementById("add-asset-category").value = "N/A";
-    }
-    if (model.value == "N/A") {
-        model = null;
-    } else {
-        model = model.value;
-        document.getElementById("add-asset-model").value = "N/A";
     }
 
-    console.log(serial,tag,category,model);
+    let serial_data = (serial.value == "") ? null : serial.value;
+    let tag_data = (tag.value == "") ? null : tag.value;
+    let category_data = (category.value == "N/A") ? null : category.value;
+    let model_data = (model.value == "N/A") ? null : model.value;
 
+    let data = {
+        "tag": tag_data,
+        "serial": serial_data,
+        "category": category_data,
+        "model": model_data
+    }
+
+    await fetch("/add_asset", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    })
+        .then(response => response.text())
+        .then(data => {
+            console.log(data);
+        })
+
+    serial.value = "";
+    tag.value = "";
+    category.value = "N/A";
+    model.value = "N/A";
+}
+
+async function add_user() {
+    let id = document.getElementById("add-user-id");
+    let username = document.getElementById("add-user-name");
+    let asset = document.getElementById("add-assigned-asset");
+    let card = document.getElementById("add-assigned-card");
+
+    if (username.value == "") {
+        alert("Add user error:\nUser name field cannot be null!");
+        return;
+    }
+
+    let id_data = (id.value == "") ? null : id.value;
+    let username_data = (username.value == "") ? null : username.value;
+    let asset_data = (asset.value == "") ? null : asset.value;
+    let card_data = (card.value == "") ? null : card.value;
+
+    let data = {
+        "id": id_data,
+        "name": username_data,
+        "asset": asset_data,
+        "card": card_data
+    }
+
+
+    await fetch("/add_user",{
+        method: "POST",
+        headers: {
+            "Content-Type":"application/json",
+        },
+        body: JSON.stringify(data),
+    })
+        .then(response => response.text())
+        .then(data => {
+            console.log(data);
+        })
+
+    id.value = "";
+    username.value = "";
+    asset.value = "";
+    card.value = "";
+}
+
+function add_card() {
+    let display = document.getElementById("add-display-number");
+    let card = document.getElementById("add-card-number");
+
+    if (card.value == "") {
+        alert("Add card error:\nCard number field cannot be null");
+        return;
+    }
+    console.log(
+        (display.value == "") ? null : display.value,
+        (card.value == "") ? null : card.value
+    )
+    display.value = "";
+    card.value = "";
+}
+
+function post_data_format(argsObject) {
+    args = []
+    for (let property in argsObject) {
+        args.push(`${property}=${argsObject[property]}`)
+    }
+    return "?" + args.join('&');
 }

templates/adding.html

@@ -16,11 +16,15 @@
             display: inline-block;
             vertical-align: top;
         }
+        a {
+            display:block;
+        }
     </style>
 </head>
 
 <body>
 
+    <a href="/">Search Data</a>
     <div class="col">
         <h1>Assets</h1>
         Stuff pertaining to laptops and ipads.
@@ -66,7 +70,7 @@
             <input type="number" name="add-asset-tag" id="add-asset-tag">
             <br>
             <br>
-            <label for="add-asset-serial">Serial:</label>
+            <label for="add-asset-serial">Serial*:</label>
             <input type="text" name="add-asset-serial" id="add-asset-serial">
             <br>
             <br>
@@ -99,11 +103,11 @@
             <input type="number" name="add-user-id" id="add-user-id">
             <br>
             <br>
-            <label for="add-user-name">User name:</label>
+            <label for="add-user-name">User name*:</label>
             <input type="text" name="add-user-name" id="add-user-name">
             <br>
             <br>
-            <label for="add-assigned-asset">Assigned asset:</label>
+            <label for="add-assigned-asset">Assigned asset tag:</label>
             <input type="number" name="add-assigned-asset" id="add-assigned-asset">
             <br>
             <br>
@@ -121,7 +125,7 @@
             <input type="number" name="add-display-number" id="add-display-number">
             <br>
             <br>
-            <label for="add-card-number">Card number:</label>
+            <label for="add-card-number">Card number*:</label>
             <input type="number" name="add-card-number" id="add-card-number">
             <br>
             <br>
@@ -131,7 +135,7 @@
     <div class="col">
         <h1>Modify asset</h1>
         <form action="javascript:modify_asset()">
-            <label for="modify-asset-tag">Asset Tag:</label>
+            <label for="modify-asset-tag">Asset Tag*:</label>
             <input type="number" name="modify-asset-tag" id="modify-asset-tag">
             <br>
             <br>
@@ -164,7 +168,7 @@
     <div class="col">
         <h1>Modify user</h1>
         <form action="javascript:modify_user()">
-            <label for="modify-user-id">User ID:</label>
+            <label for="modify-user-id">User ID*:</label>
             <input type="number" name="modify-user-id" id="modify-user-id">
             <br>
             <br>
@@ -190,7 +194,7 @@
             <input type="number" name="modify-display-number" id="modify-display-number">
             <br>
             <br>
-            <label for="modify-card-number">Card number:</label>
+            <label for="modify-card-number">Card number*:</label>
             <input type="number" name="modify-card-number" id="modify-card-number">
             <br>
             <br>

templates/main.html

@@ -11,18 +11,24 @@
             margin: 2px;
             padding: 2px;
         }
+
         .col {
             width: 32%;
             display: inline-block;
             vertical-align: top;
         }
+        a {
+            display: block;
+        }
     </style>
 </head>
 
 <body>
 
+    <a href="/add">Add/Modify data</a>
     <div class="col">
         <h1>Assets</h1>
+        <button type="button" onclick="get_assets()">Get assets</button>
         <table id="asset_table">
             <tr>
                 <td>Asset tag</td>
@@ -32,7 +38,18 @@
                 <td>Assigned to</td>
             </tr>
         </table>
-    <button type="button" onclick="get_assets()">get assets</button>
+    </div>
+    <div class="col">
+        <h1>Users</h1>
+        <button type="button" onclick="get_users()">Get users</button>
+        <table id="user_table">
+            <tr>
+                <td>ID Number</td>
+                <td>Name</td>
+                <td>Assigned asset</td>
+                <td>Assigned card</td>
+            </tr>
+        </table>
     </div>
     <div class="col">
         <h1>User info search</h1>
@@ -67,7 +84,7 @@
     <script>
         async function asset_search() {
             let tag = document.getElementById("asset-tag").value;
-            await fetch('/asset_tag_search?data='+tag)
+            await fetch('/asset_tag_search?data=' + tag)
                 .then(response => response.json())
                 .then(data => {
                     data = data[0];
@@ -82,7 +99,7 @@
 
                 });
         }
-        
+
         async function user_search() {
             let user_name = document.getElementById("user-name").value;
             let user_table = document.getElementById("user-search-results");
@@ -90,7 +107,7 @@
             while (user_entries[0]) {
                 user_entries[0].remove();
             }
-            await fetch('/user_search?data='+user_name)
+            await fetch('/user_search?data=' + user_name)
                 .then(response => response.json())
                 .then(data => {
                     for (entry of data) {
@@ -108,7 +125,7 @@
 
         async function serial_search() {
             let serial = document.getElementById("asset-serial").value;
-            await fetch('/serial_search?data='+serial)
+            await fetch('/serial_search?data=' + serial)
                 .then(response => response.json())
                 .then(data => {
                     data = data[0];
@@ -146,6 +163,28 @@
                     }
                 });
         }
+
+        async function get_users() {
+            let elements = document.getElementsByClassName("user_list_data");
+            while (elements[0]) {
+                elements[0].remove();
+            }
+            let table = document.getElementById("user_table");
+            await fetch('/user_list')
+                .then(response => response.json())
+                .then(data => {
+                    for (let entry of data) {
+                        let tr = document.createElement('tr');
+                        tr.classList.add('user_list_data');
+                        for (let datum of entry) {
+                            let td = document.createElement('td');
+                            td.innerHTML = datum;
+                            tr.appendChild(td);
+                        }
+                        table.appendChild(tr);
+                    }
+                });
+        }
     </script>
 
 </body>

utils/sql_utils.py

@@ -16,15 +16,15 @@ def connect_database(host, username, password, database):
 
     return connection
 
-def send_query(connection, query):
+def send_query(connection, query, parameters):
     cursor = connection.cursor()
-    result = None
     try:
-        cursor.execute(query)
+        cursor.execute(query, parameters)
         connection.commit()
-        return result
+        return True
     except Error as err:
         print(f'Error: {err}')
+        return False
 
 def read_query(connection, query):
     cursor = connection.cursor()