Finished of the ability to search for a name or plate number. Results shown as a table. Any empty's shown as N/A
This commit is contained in:
parent
f03023a000
commit
7eefeaf7ad
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Change Password</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +1,3 @@
|
||||
@import "normalize.css";
|
||||
@import "template.css";
|
||||
|
||||
body, html {
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
@import "template.css";
|
||||
|
||||
nav {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav ul li a.active, nav ul li a:hover {
|
||||
padding: 1.4em 1.75em;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
background: var(--mutedBlack);
|
||||
}
|
||||
|
||||
nav ul li a.active {
|
||||
background-color: var(--hover);
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
@import "nav.css";
|
||||
|
||||
main {
|
||||
padding-top: 2.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.searchContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
main#search form input:not([type="submit"]) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
main#search form button {
|
||||
border-top-right-radius: 0.5em;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
width: 20%;
|
||||
height: 3em;
|
||||
background-color: var(--primary);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.searchBtnContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.searchBtnContainer:hover input {
|
||||
border: 4px solid var(--hover);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@ -1,9 +1,10 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Yeseva+One&display=swap');
|
||||
@import "normalize.css";
|
||||
|
||||
:root {
|
||||
--primary: hsla(220, 60%, 50%, 1);
|
||||
--hover: hsl(240, 50%, 22%);
|
||||
--secondary: hsla(194, 52%, 67%, 1);
|
||||
--secondary: hsl(210, 100%, 95%, 1);
|
||||
--accent: hsla(15, 99%, 57%, 1);
|
||||
--light: hsla(90, 8%, 85%, 1);
|
||||
--mutedBlack: hsla(0, 0%, 0%, 0.25)
|
||||
@ -13,6 +14,11 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
@ -27,7 +33,7 @@ h1, h2 {
|
||||
.btn {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 14px 28px;
|
||||
padding: 0.875em 1.75em;
|
||||
cursor: pointer;
|
||||
-webkit-border-radius: 1em;
|
||||
-moz-border-radius: 1em;
|
||||
@ -39,6 +45,9 @@ h1, h2 {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.btnPrimary:hover {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
div.formControl {
|
||||
display: flex;
|
||||
@ -49,7 +58,7 @@ div.formControl {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form .formControl input:not([type="submit"]), form .formControl textarea {
|
||||
input:not([type="submit"]), form .formControl textarea {
|
||||
width: 100%;
|
||||
border: 4px solid var(--primary);
|
||||
background: 0 0;
|
||||
@ -61,3 +70,31 @@ form .formControl input:not([type="submit"]), form .formControl textarea {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
input:not([type="submit"]):hover, form .formControl textarea:hover {
|
||||
border: 4px solid var(--hover);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px solid #DDDDDD;
|
||||
padding: 0.5em;
|
||||
min-width: 7.5em;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: 0.75em 0;
|
||||
text-align: left;
|
||||
background-color: var(--primary);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
@ -12,7 +12,7 @@
|
||||
<main>
|
||||
<div class="login">
|
||||
<h1>Login To Traffic Reporter</h1>
|
||||
<form class="loginForm" id="login">
|
||||
<form method="POST" class="loginForm" id="login">
|
||||
<div class="formControl">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" name="username" id="username">
|
||||
|
||||
@ -6,8 +6,7 @@ document.querySelector("#login").addEventListener("submit", e =>
|
||||
let formData = new FormData();
|
||||
formData.append("username", document.querySelector("#username").value);
|
||||
formData.append("password", document.querySelector("#password").value);
|
||||
fetch("login.php",
|
||||
{
|
||||
fetch("login.php", {
|
||||
method: "POST",
|
||||
body: formData
|
||||
}).then(res => res.json().then(json =>
|
||||
@ -18,7 +17,7 @@ document.querySelector("#login").addEventListener("submit", e =>
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("Invalid username or password");
|
||||
alert(json.message);
|
||||
}
|
||||
}));
|
||||
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
// document.addEventListener("DOMContentLoaded", () =>
|
||||
// {
|
||||
// fetch("isLoggedIn.php").then(res => res.json().then(json =>
|
||||
// {
|
||||
// if (json.message !== "ok")
|
||||
// {
|
||||
// window.location.href = "index.html";
|
||||
// }
|
||||
// }));
|
||||
// });
|
||||
@ -0,0 +1,66 @@
|
||||
// document.addEventListener("DOMContentLoaded", () =>
|
||||
// {
|
||||
// fetch("isLoggedIn.php").then(res => res.json().then(json =>
|
||||
// {
|
||||
// if (json.message !== "ok")
|
||||
// {
|
||||
// window.location.href = "index.html";
|
||||
// }
|
||||
// }));
|
||||
// });
|
||||
|
||||
document.querySelector("#searchType").addEventListener("change", e =>
|
||||
{
|
||||
if (e.target.value === "pn")
|
||||
{
|
||||
document.querySelector("#searchField").placeholder = "Find vehicle";
|
||||
}
|
||||
else
|
||||
{
|
||||
document.querySelector("#searchField").placeholder = "Find owner";
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector("#searchForm").addEventListener("submit", e =>
|
||||
{
|
||||
e.preventDefault();
|
||||
let formData = new FormData();
|
||||
formData.append("searchType", document.querySelector("#searchType").value);
|
||||
formData.append("searchField", document.querySelector("#searchField").value);
|
||||
|
||||
fetch("search.php", {
|
||||
method: "POST",
|
||||
body: formData
|
||||
}).then(res => res.json().then(json =>
|
||||
{
|
||||
if (json.message === "ok")
|
||||
{
|
||||
document.querySelector("#searchResults thead tr").innerHTML = "";
|
||||
document.querySelector("#searchResults tbody").innerHTML = "";
|
||||
console.log(Object.keys(json.data[0]));
|
||||
Object.keys(json.data[0]).forEach(key =>
|
||||
{
|
||||
let header = key.substring(key.indexOf("_") + 1)
|
||||
header = header.charAt(0).toUpperCase() + header.slice(1);
|
||||
document.querySelector("#searchResults thead tr").innerHTML += `<th>${header}</th>`;
|
||||
});
|
||||
let body = "";
|
||||
json.data.forEach(row =>
|
||||
{
|
||||
body += "<tr>";
|
||||
Object.keys(row).forEach(key =>
|
||||
{
|
||||
body += `<td>${(row[key] === "null" || row[key] === null) ? "N/A" : row[key]}</td>`;
|
||||
});
|
||||
body += "</tr>";
|
||||
});
|
||||
document.querySelector("#searchResults tbody").innerHTML = body;
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("No search results found");
|
||||
}
|
||||
}));
|
||||
|
||||
});
|
||||
@ -10,8 +10,9 @@ $conn = dbConn();
|
||||
$stmt = $conn->prepare("SELECT * FROM Users WHERE Users_username = :username AND Users_password = :password");
|
||||
$stmt->bindParam(":username", $username);
|
||||
$stmt->bindParam(":password", $password);
|
||||
$stmt->execute();
|
||||
|
||||
if ($stmt->execute())
|
||||
if (count($stmt->fetchAll(PDO::FETCH_ASSOC)) > 0)
|
||||
{
|
||||
$_SESSION["username"] = $username;
|
||||
echo json_encode(array("message" => "ok"));
|
||||
|
||||
@ -2,27 +2,51 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Reports</title>
|
||||
<title>Search</title>
|
||||
<link rel="stylesheet" href="css/search.css">
|
||||
<script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="search.html">Search</a></li>
|
||||
<li><a href="newVehicle.html">Add new vehicle</a></li>
|
||||
<li><a href="newReport.html">Create new report</a></li>
|
||||
<li><a href="newUser.html">Create new user</a></li>
|
||||
<li><a href="addFines.html">Add Fines</a></li>
|
||||
<li><a href="viewLog.html">View log</a></li>
|
||||
<li><a href="#">Logout</a></li>
|
||||
<li><a href="search.html" class="btn active">Search</a></li>
|
||||
<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="viewLog.html" class="btn">View log</a></li>
|
||||
<li><a href="changePassword.html">Change password</a></li>
|
||||
<li><a href="#" class="btn">Logout</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="search-container">
|
||||
<fom><input type="text"><input type="submit" value=""></fom>
|
||||
<main id="search">
|
||||
<div class="searchContainer">
|
||||
<form method="POST" id="searchForm">
|
||||
<div class="selectDiv">
|
||||
<select name="searchType" id="searchType">
|
||||
<option value="dln">Name/Driving licence number</option>
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<table id="searchResults">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="content"></div>
|
||||
</main>
|
||||
|
||||
<script src="js/reports.js"></script>
|
||||
<script src="js/search.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,39 @@
|
||||
<?php
|
||||
session_start();
|
||||
require_once 'config.php';
|
||||
|
||||
if (isset($_SESSION["username"]))
|
||||
{
|
||||
$searchType = $_POST["searchType"];
|
||||
$searchField = $_POST["searchField"];
|
||||
|
||||
$conn = dbConn();
|
||||
if ($searchType === "dln")
|
||||
{
|
||||
$stmt = $conn->prepare("SELECT People_name, People_address, People_licence FROM People WHERE People_name LIKE :name OR People_licence = :searchField");
|
||||
$name = "%" . $searchField . "%";
|
||||
$stmt->bindParam(":name", $name);
|
||||
}
|
||||
else
|
||||
{
|
||||
$stmt = $conn->prepare("SELECT P.People_name, Vehicle_type, Vehicle_colour, Vehicle_licence FROM Vehicle LEFT JOIN Ownership O on Vehicle.Vehicle_ID = O.Vehicle_ID LEFT JOIN People P on O.People_ID = P.People_ID WHERE Vehicle_licence = :searchField");
|
||||
}
|
||||
|
||||
$stmt->bindParam(":searchField", $searchField);
|
||||
$stmt->execute();
|
||||
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
|
||||
if (count($result) > 0)
|
||||
{
|
||||
echo json_encode(array("message" => "ok", "data" => $result));
|
||||
}
|
||||
else
|
||||
{
|
||||
echo json_encode(array("message" => "No results found"));
|
||||
}
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
echo json_encode(array("message" => "Not logged in"));
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user