search #2
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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";
|
@import "template.css";
|
||||||
|
|
||||||
body, html {
|
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 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 {
|
:root {
|
||||||
--primary: hsla(220, 60%, 50%, 1);
|
--primary: hsla(220, 60%, 50%, 1);
|
||||||
--hover: hsl(240, 50%, 22%);
|
--hover: hsl(240, 50%, 22%);
|
||||||
--secondary: hsla(194, 52%, 67%, 1);
|
--secondary: hsl(210, 100%, 95%, 1);
|
||||||
--accent: hsla(15, 99%, 57%, 1);
|
--accent: hsla(15, 99%, 57%, 1);
|
||||||
--light: hsla(90, 8%, 85%, 1);
|
--light: hsla(90, 8%, 85%, 1);
|
||||||
--mutedBlack: hsla(0, 0%, 0%, 0.25)
|
--mutedBlack: hsla(0, 0%, 0%, 0.25)
|
||||||
@ -13,6 +14,11 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -27,7 +33,7 @@ h1, h2 {
|
|||||||
.btn {
|
.btn {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 14px 28px;
|
padding: 0.875em 1.75em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-border-radius: 1em;
|
-webkit-border-radius: 1em;
|
||||||
-moz-border-radius: 1em;
|
-moz-border-radius: 1em;
|
||||||
@ -39,6 +45,9 @@ h1, h2 {
|
|||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btnPrimary:hover {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
div.formControl {
|
div.formControl {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -49,7 +58,7 @@ div.formControl {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form .formControl input:not([type="submit"]), form .formControl textarea {
|
input:not([type="submit"]), form .formControl textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 4px solid var(--primary);
|
border: 4px solid var(--primary);
|
||||||
background: 0 0;
|
background: 0 0;
|
||||||
@ -61,3 +70,31 @@ form .formControl input:not([type="submit"]), form .formControl textarea {
|
|||||||
height: 3em;
|
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>
|
<main>
|
||||||
<div class="login">
|
<div class="login">
|
||||||
<h1>Login To Traffic Reporter</h1>
|
<h1>Login To Traffic Reporter</h1>
|
||||||
<form class="loginForm" id="login">
|
<form method="POST" class="loginForm" id="login">
|
||||||
<div class="formControl">
|
<div class="formControl">
|
||||||
<label for="username">Username</label>
|
<label for="username">Username</label>
|
||||||
<input type="text" name="username" id="username">
|
<input type="text" name="username" id="username">
|
||||||
|
|||||||
@ -0,0 +1,11 @@
|
|||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
if (isset($_SESSION["username"]))
|
||||||
|
{
|
||||||
|
echo json_encode(array("message" => "ok"));
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
echo json_encode(array("message" => "not logged in"));
|
||||||
|
}
|
||||||
@ -6,8 +6,7 @@ document.querySelector("#login").addEventListener("submit", e =>
|
|||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
formData.append("username", document.querySelector("#username").value);
|
formData.append("username", document.querySelector("#username").value);
|
||||||
formData.append("password", document.querySelector("#password").value);
|
formData.append("password", document.querySelector("#password").value);
|
||||||
fetch("login.php",
|
fetch("login.php", {
|
||||||
{
|
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: formData
|
body: formData
|
||||||
}).then(res => res.json().then(json =>
|
}).then(res => res.json().then(json =>
|
||||||
@ -18,7 +17,7 @@ document.querySelector("#login").addEventListener("submit", e =>
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
alert("Invalid username or password");
|
alert(json.message);
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
@ -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 = $conn->prepare("SELECT * FROM Users WHERE Users_username = :username AND Users_password = :password");
|
||||||
$stmt->bindParam(":username", $username);
|
$stmt->bindParam(":username", $username);
|
||||||
$stmt->bindParam(":password", $password);
|
$stmt->bindParam(":password", $password);
|
||||||
|
$stmt->execute();
|
||||||
|
|
||||||
if ($stmt->execute())
|
if (count($stmt->fetchAll(PDO::FETCH_ASSOC)) > 0)
|
||||||
{
|
{
|
||||||
$_SESSION["username"] = $username;
|
$_SESSION["username"] = $username;
|
||||||
echo json_encode(array("message" => "ok"));
|
echo json_encode(array("message" => "ok"));
|
||||||
|
|||||||
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<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" 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 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>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<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"));
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user