Merge pull request 'Added in ability to add new vehicle with new owner or existing owner' (#4) from add-new-vehicle into master

Reviewed-on: #4

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/addVehicle.php

@@ -0,0 +1,41 @@
+<?php
+session_start();
+require_once 'config.php';
+header('Content-Type: application/json');
+if (isset($_SESSION["username"]))
+{
+    $conn = dbConn();
+    $stmt = $conn->prepare("INSERT INTO Vehicle (Vehicle_type, Vehicle_colour, Vehicle_licence) VALUES (:type, :colour, :plateNum)");
+    $stmt->bindParam(":type", $_POST["type"]);
+    $stmt->bindParam(":colour", $_POST["colour"]);
+    $stmt->bindParam(":plateNum", $_POST["plateNum"]);
+    $stmt->execute();
+    $vehicleID = $conn->lastInsertId();
+    if (isset($_POST["name"]) && isset($_POST["address"]) && isset($_POST["licence"]))
+    {
+        $stmtPeople = $conn->prepare("INSERT INTO People (People_name, People_address, People_licence) VALUES (:name, :address, :licence)");
+        $stmtPeople->bindParam(":name", $_POST["name"]);
+        $stmtPeople->bindParam(":address", $_POST["address"]);
+        $stmtPeople->bindParam(":licence", $_POST["licence"]);
+        $stmtPeople->execute();
+        $peopleID = $conn->lastInsertId();
+
+        $stmtOwner = $conn->prepare("INSERT INTO Ownership (Vehicle_ID, People_ID) VALUES (:vehicleID, :peopleID)");
+        $stmtOwner->bindParam(":vehicleID", $vehicleID);
+        $stmtOwner->bindParam(":peopleID", $peopleID);
+        $stmtOwner->execute();
+        echo json_encode(array("message" => "Vehicle and new owner added successfully"));
+    }
+    else
+    {
+        $stmt = $conn->prepare("INSERT INTO Ownership (Vehicle_ID, People_ID) VALUES (:vehicleID, :peopleID)");
+        $stmt->bindParam(":vehicleID", $vehicleID);
+        $stmt->bindParam(":peopleID", $_POST["peopleID"]);
+        $stmt->execute();
+        echo json_encode(array("message" => "Vehicle added successfully and assigned to existing owner"));
+    }
+}
+else
+{
+    echo json_encode(array("message" => "Not logged in"));
+}

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/changePassword.html

@@ -12,7 +12,7 @@
             <li><a href="newVehicle.html" class="btn">Add new vehicle</a></li>
             <li><a href="newReport.html" class="btn">Create new report</a></li>
             <li><a href="newUser.html" class="btn">Create new user</a></li>
-        <li><a href="addFines.html" class="btn">Add Fines</a></li>
+            <li><a href="addFines.html" class="btn">Add fines</a></li>
             <li><a href="viewLog.html" class="btn">View log</a></li>
             <li><a href="changePassword.html" class="btn active">Change password</a></li>
             <li><a href="#" class="btn">Logout</a></li>
@@ -20,19 +20,26 @@
     </nav>
 
     <main>
-    <form action="" method="POST" id="changePass">
+        <header id="title">
+            <h1></h1>
+        </header>
+
+        <form method="POST" id="changePass">
             <div class="formControl">
                 <label for="pass">Password</label>
                 <input type="password" name="pass" id="pass">
             </div>
+
             <div class="formControl">
                 <label for="rePass">Retype Password</label>
                 <input type="password" name="rePass" id="rePass">
             </div>
+
             <input type="submit" value="Change Password" class="btn btnPrimary">
         </form>
     </main>
 
+    <script src="js/checkUser.js"></script>
     <script src="js/changePassword.js"></script>
 </body>
 </html>

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/nav.css

@@ -24,7 +24,7 @@ nav ul li a {
 }
 
 nav ul li a.active, nav ul li a:hover {
-    padding: 1.4em 1.75em;
+    padding: 1.5em 1.75em;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/newVehicle.css

@@ -0,0 +1,64 @@
+@import "nav.css";
+
+main {
+    padding-top: 2.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+main .formGroup {
+    width: 30%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 2em;
+}
+
+main form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1em;
+    flex: 1;
+}
+
+main form .formControl .selectDiv {
+    width: 100%;
+}
+
+.formSpace {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 1em;
+    flex: 1;
+}
+
+
+#addOwner {
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: visibility 0s linear 300ms, opacity 300ms;
+    -moz-transition: visibility 0s linear 300ms, opacity 300ms;
+    -ms-transition: visibility 0s linear 300ms, opacity 300ms;
+    -o-transition: visibility 0s linear 300ms, opacity 300ms;
+    transition: visibility 0s linear 300ms, opacity 300ms;
+}
+
+#addOwner.shown{
+    visibility: visible;
+    opacity: 1;
+    -webkit-transition: visibility 0s linear 0s, opacity 300ms;
+    -moz-transition: visibility 0s linear 0s, opacity 300ms;
+    -ms-transition: visibility 0s linear 0s, opacity 300ms;
+    -o-transition: visibility 0s linear 0s, opacity 300ms;
+    transition: visibility 0s linear 0s, opacity 300ms;
+}

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/search.css

@@ -58,73 +58,6 @@ main#search div.searchBtnContainer:hover button {
     background-color: var(--hover);
 }
 
-.selectDiv {
-    position: relative;
-    min-width: 300px;
-    cursor: pointer;
-}
-
-.selectDiv:before {
-    content: '';
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-    right: -5px;
-    top: 13px;
-    padding: 0 0 2px;
-    position: absolute;
-    width: 46px;
-    background-color: var(--primary);
-    height: 30px;
-    border-top-right-radius: 0.5em;
-    border-top-left-radius: 0.5em;
-}
-
-.selectDiv:after {
-    content: '<>';
-    font: 18px "Consolas", monospace;
-    color: #FFFFFF;
-    -webkit-transform: rotate(90deg);
-    -moz-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-    right: 6px;
-    top: 18px;
-    padding: 0 0 2px;
-    position: absolute;
-}
-
-.selectDiv select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    display: block;
-    outline: none;
-    width: 100%;
-    max-width: 30em;
-    height: 3em;
-    float: right;
-    margin: 6px 0;
-    padding: 0 24px;
-    background-color: #ffffff;
-    background-image: none;
-    border: 4px solid var(--primary);
-    -webkit-border-radius: 0.5em;
-    -moz-border-radius: 0.5em;
-    border-radius: 0.5em;
-    word-break: normal;
-}
-
-.selectDiv:hover select, .selectDiv select:hover {
-    border: 4px solid var(--hover);
-}
-
-.selectDiv:hover:before {
-    background-color: var(--hover);
-}
-
 .content {
     margin-top: 3em;
 }

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css

@@ -74,6 +74,71 @@ input:not([type="submit"]):hover, form .formControl textarea:hover {
     border: 4px solid var(--hover);
 }
 
+.selectDiv {
+    position: relative;
+    min-width: 300px;
+    cursor: pointer;
+}
+
+.selectDiv:before {
+    content: '';
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    right: -5px;
+    top: 13px;
+    padding: 0 0 2px;
+    position: absolute;
+    width: 46px;
+    background-color: var(--primary);
+    height: 30px;
+    border-top-right-radius: 0.5em;
+    border-top-left-radius: 0.5em;
+}
+
+.selectDiv:after {
+    content: '<>';
+    font: 18px "Consolas", monospace;
+    color: #FFFFFF;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    right: 6px;
+    top: 18px;
+    padding: 0 0 2px;
+    position: absolute;
+}
+
+.selectDiv select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    display: block;
+    outline: none;
+    width: 100%;
+    height: 3em;
+    margin: 6px 0;
+    padding: 0 24px;
+    background-color: #ffffff;
+    background-image: none;
+    border: 4px solid var(--primary);
+    -webkit-border-radius: 0.5em;
+    -moz-border-radius: 0.5em;
+    border-radius: 0.5em;
+    word-break: normal;
+}
+
+.selectDiv:hover select, .selectDiv select:hover {
+    border: 4px solid var(--hover);
+}
+
+.selectDiv:hover:before {
+    background-color: var(--hover);
+}
+
 table {
     border-collapse: collapse;
 }
@@ -98,3 +163,7 @@ table th {
     background-color: var(--primary);
     color: #FFFFFF;
 }
+
+main #title {
+    align-self: flex-start;
+}

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/getOwners.php

@@ -0,0 +1,13 @@
+<?php
+session_start();
+require_once 'config.php';
+header('Content-Type: application/json');
+
+if (isset($_SESSION["username"]))
+{
+    $conn = dbConn();
+    $stmt = $conn->prepare("SELECT People_ID, People_name FROM People");
+    $stmt->execute();
+    $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    echo json_encode(array("message" => "ok", "owners" => $result));
+}

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/index.html

@@ -12,15 +12,18 @@
 <main>
     <div class="login">
         <h1>Login To Traffic Reporter</h1>
+
         <form method="POST" class="loginForm" id="login">
             <div class="formControl">
                 <label for="username">Username</label>
                 <input type="text" name="username" id="username" required>
             </div>
+
             <div class="formControl">
                 <label for="password">Password</label>
                 <input type="password" name="password" id="password" required>
             </div>
+
             <input type="submit" value="Login" class="btn btnPrimary">
         </form>
     </div>

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/checkUser.js

@@ -0,0 +1,15 @@
+// document.addEventListener("DOMContentLoaded", () =>
+// {
+//    fetch("isLoggedIn.php").then(res => res.json().then(json =>
+//    {
+//        if (json.message !== "ok")
+//        {
+//            window.location.href = "index.html";
+//        }
+//        else
+//        {
+//            document.querySelector("#title h1").innerText = "Logged in as: " + json.username;
+//        }
+//    }));
+// });
+

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/newVehicle.js

@@ -0,0 +1,67 @@
+
+document.addEventListener("DOMContentLoaded", () =>
+{
+    fetch("getOwners.php").then(res => res.json().then(json =>
+    {
+        if(json.message === "ok")
+        {
+            let body = "";
+            for (const owner of json.owners)
+            {
+                body += `<option value="${owner.People_ID}">${owner.People_name}</option>`;
+            }
+            body += `<option value="new">New Owner</option>`;
+            document.querySelector("#owner").innerHTML = body;
+        }
+    }));
+
+});
+
+document.querySelector("#owner").addEventListener("change", e =>
+{
+    let inputs = document.querySelectorAll("#addOwner input");
+    if (e.target.value === "new")
+    {
+        document.querySelector("#addOwner").classList.add("shown");
+        for (const input of inputs)
+        {
+            input.setAttribute("required", "");
+        }
+    }
+    else
+    {
+        document.querySelector("#addOwner").classList.remove("shown");
+        for (const input of inputs)
+        {
+            input.removeAttribute("required");
+        }
+    }
+});
+
+document.querySelector("#vehicleForm").addEventListener("submit", e =>
+{
+    e.preventDefault();
+    let formData = new FormData();
+    formData.append("type", document.querySelector("#type").value);
+    formData.append("colour", document.querySelector("#colour").value);
+    formData.append("plateNum", document.querySelector("#plateNum").value);
+    if (document.querySelector("#owner").value === "new")
+    {
+        formData.append("name", document.querySelector("#name").value);
+        formData.append("address", document.querySelector("#address").value);
+        formData.append("licence", document.querySelector("#licence").value);
+    }
+    else
+    {
+        formData.append("peopleID", document.querySelector("#owner").value);
+    }
+
+    fetch("addVehicle.php", {
+        method: "POST",
+        body: formData
+    }).then(res => res.json().then(json =>
+    {
+        alert(json.message);
+    }));
+
+});

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/search.js

@@ -1,13 +1,4 @@
-// document.addEventListener("DOMContentLoaded", () =>
+//Search stuff
-// {
-//    fetch("isLoggedIn.php").then(res => res.json().then(json =>
-//    {
-//        if (json.message !== "ok")
-//        {
-//            window.location.href = "index.html";
-//        }
-//    }));
-// });
 
 document.querySelector("#searchType").addEventListener("change", e =>
 {

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/newVehicle.html

@@ -2,9 +2,78 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>Add New Vehicle</title>
+    <link rel="stylesheet" href="css/newVehicle.css">
 </head>
 <body>
+    <nav>
+        <ul>
+            <li><a href="search.html" class="btn">Search</a></li>
+            <li><a href="newVehicle.html" class="btn active">Add new vehicle</a></li>
+            <li><a href="newReport.html" class="btn">Create new report</a></li>
+            <li><a href="newUser.html" class="btn">Create new user</a></li>
+            <li><a href="addFines.html" class="btn">Add fines</a></li>
+            <li><a href="viewLog.html" class="btn">View log</a></li>
+            <li><a href="changePassword.html" class="btn">Change password</a></li>
+            <li><a href="#" class="btn">Logout</a></li>
+        </ul>
+    </nav>
 
+    <main>
+        <header id="title">
+            <h1></h1>
+        </header>
+
+        <form action="" id="vehicleForm">
+            <div class="formGroup">
+                <div class="formSpace">
+
+                    <div class="formControl">
+                        <label for="type">Type</label>
+                        <input type="text" name="type" id="type" required>
+                    </div>
+
+                    <div class="formControl">
+                        <label for="colour">Colour</label>
+                        <input type="text" name="colour" id="colour" required>
+                    </div>
+
+                    <div class="formControl">
+                        <label for="plateNum">Plate Number</label>
+                        <input type="text" name="plateNum" id="plateNum" required>
+                    </div>
+
+                    <div class="formControl">
+                        <label for="owner">Owner</label>
+                        <div class="selectDiv">
+                            <select name="owner" id="owner" required>
+
+                            </select>
+                        </div>
+                    </div>
+
+                    <input type="submit" value="Add new vehicle" class="btn btnPrimary">
+                </div>
+
+                <div class="formSpace" id="addOwner">
+                    <div class="formControl">
+                        <label for="name">Name</label>
+                        <input type="text" name="name" id="name">
+                    </div>
+                    <div class="formControl">
+                        <label for="address">Address</label>
+                        <input type="text" name="address" id="address">
+                    </div>
+                    <div class="formControl">
+                        <label for="licence">Licence number</label>
+                        <input type="text" name="licence" id="licence" maxlength="16" max="16">
+                    </div>
+                </div>
+
+            </div>
+        </form>
+    </main>
+
+    <script src="js/newVehicle.js"></script>
 </body>
 </html>

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/newVehicle2Forms.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Add New Vehicle</title>
+    <link rel="stylesheet" href="css/newVehicle.css">
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="search.html" class="btn">Search</a></li>
+            <li><a href="newVehicle.html" class="btn active">Add new vehicle</a></li>
+            <li><a href="newReport.html" class="btn">Create new report</a></li>
+            <li><a href="newUser.html" class="btn">Create new user</a></li>
+            <li><a href="addFines.html" class="btn">Add fines</a></li>
+            <li><a href="viewLog.html" class="btn">View log</a></li>
+            <li><a href="changePassword.html" class="btn">Change password</a></li>
+            <li><a href="#" class="btn">Logout</a></li>
+        </ul>
+    </nav>
+
+    <main>
+        <header id="title">
+            <h1></h1>
+        </header>
+
+        <div class="formGroup">
+            <form method="post" id="vehicleForm">
+                <div class="formControl">
+                    <label for="plateNum">Plate Number</label>
+                    <input type="text" name="plateNum" id="plateNum">
+                </div>
+
+                <div class="formControl">
+                    <label for="make">Make</label>
+                    <input type="text" name="make" id="make">
+                </div>
+
+                <div class="formControl">
+                    <label for="model">Model</label>
+                    <input type="text" name="model" id="model">
+                </div>
+
+                <div class="formControl">
+                    <label for="owner">Owner</label>
+                    <div class="selectDiv">
+                        <select name="owner" id="owner">
+                            <option value="james-smith">James Smith</option>
+                        </select>
+                    </div>
+                </div>
+
+                <input type="submit" value="Add new vehicle" class="btn btnPrimary">
+            </form>
+
+            <form method="post" id="ownerForm">
+                <div class="formSpace">
+                    <div class="formControl">
+                        <label for="name">Name</label>
+                        <input type="text" name="name" id="name">
+                    </div>
+                    <div class="formControl">
+                        <label for="address">Address</label>
+                        <input type="text" name="address" id="address">
+                    </div>
+                    <div class="formControl">
+                        <label for="licence">Licence number</label>
+                        <input type="text" name="licence" id="licence">
+                    </div>
+                </div>
+
+                <div class="formSpace">
+                    <input type="submit" value="Add new Owner" class="btn btnPrimary">
+                </div>
+            </form>
+        </div>
+    </main>
+
+    <script src=""></script>
+</body>
+</html>

DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.html

@@ -20,6 +20,10 @@
     </ul>
 </nav>
     <main id="search">
+        <header id="title">
+            <h1></h1>
+        </header>
+
         <div class="searchContainer">
             <form method="POST" id="searchForm">
                 <div class="selectDiv">
@@ -28,6 +32,7 @@
                         <option value="pn">Plate Number</option>
                     </select>
                 </div>
+
                 <div class="searchBtnContainer">
                     <input type="text" id="searchField" name="searchField" placeholder="Find owner">
                     <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
@@ -47,6 +52,7 @@
         </div>
     </main>
 
+    <script src="js/checkUser.js"></script>
     <script src="js/search.js"></script>
 </body>
 </html>