AdamMcNeilly · jbclulow · Jan 24, 2025 · Jan 24, 2025 · Jan 24, 2025
diff --git a/services/readDeleteUser.js b/services/readDeleteUser.js
@@ -0,0 +1,31 @@
+const fs = require('fs');
+
+class readDeleteUser {
+    constructor() {
+        this.filePath = "users.json";
+    }
+
+    // Helper function to read users from JSON file
+    readUsers() {
+        try {
+            const data = fs.readFileSync(this.filePath, 'utf8');
+            return JSON.parse(data);
+        } catch (err) {
+            console.error('Error reading users:', err);
+            return [];
+        }
+    }
+
+    // Delete a user by ID
+    deleteUser(id) {
+        const users = this.readUsers();
+        const userIndex = users.findIndex(user => user.id === id);
+        if (userIndex === -1) return null;
+
+        const deletedUser = users.splice(userIndex, 1);
+        this.writeUsers(users);
+        return deletedUser[0];
+    }
+}
+
+module.exports = readDeleteUser;
diff --git a/services/readWriteUser.js b/services/readWriteUser.js
@@ -0,0 +1,27 @@
+const fs = require('fs');
+
+class readWriteUser {
+    constructor() {
+        this.filePath = "users.json";
+    }
+
+    // Helper function to write users to JSON file
+    writeUsers(users) {
+        try {
+            fs.writeFileSync(this.filePath, JSON.stringify(users, null, 2), 'utf8');
+        } catch (err) {
+            console.error('Error writing users:', err);
+        }
+    }
+
+    // Create a new user
+    createUser(newUser) {
+        const users = this.readUsers();
+        newUser.id = users.length ? users[users.length - 1].id + 1 : 1;
+        users.push(newUser);
+        this.writeUsers(users);
+        return newUser;
+    }
+}
+
+module.exports = readWriteUser;
diff --git a/users.json b/users.json
@@ -5,7 +5,6 @@
     "email": "shaun@test.com",
     "role": "Software Engineer",
     "salary": "40,000"
-
   },
   {
     "id": 2,
@@ -34,7 +33,28 @@
     "email": "noah@test.com",
     "role": "DevOps Engineer",
     "salary": "48,000"
+  },
+  {
+    "name": "John Doe",
+    "address": "14 Malone Road",
+    "salary": "46000",
+    "role": "Employee",
+    "employeenumber": "46582",
+    "id": 6
+  },
+  {
+    "name": "Dave Smith",
+    "address": "24 Street Street",
+    "salary": "39000",
+    "role": "",
+    "employeenumber": "1234567",
+    "id": 7
+  },
+  {
+    "name": "James Clulow",
+    "address": "14 Malone Road",
+    "salary": "100000",
+    "employeenumber": "678786",
+    "id": 8
   }
-]
-
-
+]
diff --git a/views/addUser.ejs b/views/addUser.ejs
@@ -1,26 +1,75 @@
 <!-- index.ejs -->
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Add New User</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/x-icon" href="./media/favicon.png">
+    <link rel="stylesheet" href="viewDesign.css">
 </head>
+
 <body>
-    <h1>Add New User</h1>
 
-    <form action="/users/add" method="post">
-        <label for="name">Name:</label><br>
-        <input type="name" id="name" name="name"><br>
+    <div class="adduserpage">
+        <div class="logoimage">
+            <img src="./media/Kainos 800x250 Logo (Transparent BG).png" alt="kainos_logo">
+        </div>
+
+
+        <nav>
+            <a href="addUser.ejs">Add Users</a>
+            <a href="deleteUser.ejs">Delete Users</a>
+            <a href="updateUser.ejs">Update Users</a>
+        </nav>
+
+        <div class="addnewuser">
+            <h1>Add New User</h1>
+        </div>
+
+        <div class="infoboxes">
+            <form action="/users/add" method="post">
+                <label for="name">Name:</label><br>
+                <input type="text" id="name" name="name"><br>
 
-        <label for="email">Email:</label><br>
-        <input type="email" id="email" name="email"><br>
+                <label for="address">Address:</label><br>
+                <input type="text" id="address" name="address"><br>
 
-        <label for="role">Role:</label><br>
-        <input type="role" id="role" name="role"><br>
+                <label for="salary">Salary:</label><br>
+                <input type="number" id="salary" name="salary"><br>
 
-        <input type="submit" value="Submit">
-    </form> 
+                <div class="roledropdown">
+                     <label for="role">Role:</label><br>
+                <!-- <input type="text" id="role" name="role"><br> -->
+                <select id="text" class="input col-lg-12">
+                    <option hidden value="">Select one</option>
+                    <option value="SE">Software Engineer</option>
+                    <option value="TE">Test Engineer</option>
+                    <option value="QA">Quality Assurance</option>
+                    <option value="RD">Research and Development</option>
+                    <option value="MA">Marketing</option>
+                </select>
+                </div>
+
+                <label for="employeenumber">Employee Number:</label><br>
+                <input type="number" id="employeenumber" name="employeenumber"><br>
+
+                <div class="spacebelowinfo">
+                </div>
+
+                <input type="submit" value="Submit">
+            </form>
+
+            <script>src = "readWriteUser.js"</script>
+        </div>
+
+        <footer>
+            <p>Kainos House 4-6 Upper Crescent Belfast BT7 1NT Nothern Ireland</p>
+            <p>investorrelations@kainos.com</p>
+        </footer>
+
+    </div>
 </body>
-</html>
+
+</html>
diff --git a/views/deleteUser.ejs b/views/deleteUser.ejs
@@ -5,12 +5,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Delete User</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="viewdesign.css">
 </head>
 <body>
     <h1>Delete User</h1>
 
-    <form action="/users/delete/<%= user.id %>" method="post">
+    <form action="/users/delete" method="post">
         <h3>
             Are you sure you want to delete <%= user.name %>?
         </h3>

diff --git a/views/index.ejs b/views/index.ejs
@@ -2,7 +2,7 @@
 <html>
   <head>
     <title><%= title %></title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <link rel='stylesheet' href='viewDesign.css' />
   </head>
   <body>
     <h1><%= title %></h1>

diff --git a/views/media/Kainos 800x250 Logo (Transparent BG).png b/views/media/Kainos 800x250 Logo (Transparent BG).png
diff --git a/views/media/favicon.png b/views/media/favicon.png
diff --git a/views/updateUser.ejs b/views/updateUser.ejs
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Update User</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="viewDesign.css">
 </head>
 <body>
     <h1>Update User</h1>

diff --git a/views/user.ejs b/views/user.ejs
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>User Information</title>
-    <link rel="stylesheet" href="/public/stylesheets/style.css">
+    <link rel="stylesheet" href="viewDesign.css">
 </head>
 <body>
     <h1>User Information</h1>

diff --git a/views/users.ejs b/views/users.ejs
@@ -5,8 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>User List</title>
-    <link rel="stylesheet" href='/stylesheets/style.css'/>
-
+    <link rel="stylesheet" href="viewDesign.css">
 </head>
 <body>
     <h1 class="head">User List</h1>
@@ -45,7 +44,7 @@
     <% } %>
 
     <form action="/users/add" method="get">
-        <input type="submit" value="Create New User">
+        <input type="submit" value="Create New User" href="addUser.ejs">
     </form> 
 </body>
 </html>
diff --git a/views/viewDesign.css b/views/viewDesign.css
@@ -0,0 +1,67 @@
+.adduserpage {
+    width: 100%;
+  }
+
+  body {
+      background-image: url("https://media.istockphoto.com/id/1390799493/vector/turquoise-gradation-background.jpg?s=612x612&w=0&k=20&c=7CgX9ySU7SkuZ-idIZh3xNuvYqokFuJCA3i7hN7rmVY=");
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      background-repeat: no-repeat;
+      background-size: 2000px 2000px;
+      font-family: Verdana, Geneva, Tahoma, sans-serif;
+  }
+
+  .infoboxes {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: 25px;
+    }
+
+    .addnewuser {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .spacebelowinfo {
+      margin-bottom: 25px;
+    }
+
+    nav a {
+      display: flex;
+      color: black;
+      text-decoration: none;
+      padding-bottom: 15px;
+      width: 200px;
+      padding-left: 100px;
+    }
+
+    a :hover {
+      color: blue;
+    }
+
+    nav {
+      width: auto;
+      display: flex;
+      justify-content: center;
+    }
+
+    .logoimage {
+      margin-left: 370px;
+    }
+
+    footer {
+      font-size: small;
+      display: flex;
+      justify-content: center;
+      background-color: #1e1342;
+      color: white;
+      width: 100%;
+    }
+
+    footer p {
+      margin-left: 20px;
+      margin-right: 20px;
+    }