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
This commit is contained in:
		
						commit
						5a71f98a9a
					
				@ -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"));
 | 
			
		||||
}
 | 
			
		||||
@ -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>
 | 
			
		||||
@ -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;
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
}
 | 
			
		||||
@ -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;
 | 
			
		||||
}
 | 
			
		||||
@ -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;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -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));
 | 
			
		||||
}
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
//        }
 | 
			
		||||
//    }));
 | 
			
		||||
// });
 | 
			
		||||
 | 
			
		||||
@ -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);
 | 
			
		||||
    }));
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
@ -1,13 +1,4 @@
 | 
			
		||||
// document.addEventListener("DOMContentLoaded", () =>
 | 
			
		||||
// {
 | 
			
		||||
//    fetch("isLoggedIn.php").then(res => res.json().then(json =>
 | 
			
		||||
//    {
 | 
			
		||||
//        if (json.message !== "ok")
 | 
			
		||||
//        {
 | 
			
		||||
//            window.location.href = "index.html";
 | 
			
		||||
//        }
 | 
			
		||||
//    }));
 | 
			
		||||
// });
 | 
			
		||||
//Search stuff
 | 
			
		||||
 | 
			
		||||
document.querySelector("#searchType").addEventListener("change", e =>
 | 
			
		||||
{
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
@ -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>
 | 
			
		||||
@ -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>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user