From 7eefeaf7add6b52dae7cf937a65b38527f774431 Mon Sep 17 00:00:00 2001 From: rodude123 Date: Tue, 29 Nov 2022 15:48:18 +0000 Subject: [PATCH] Finished of the ability to search for a name or plate number. Results shown as a table. Any empty's shown as N/A --- .../changePassword.html | 10 ++ .../css/login.css | 1 - .../css/nav.css | 39 ++++++ .../css/search.css | 130 ++++++++++++++++++ .../css/template.css | 43 +++++- .../index.html | 4 +- .../js/login.js | 5 +- .../js/reports.js | 10 -- .../js/search.js | 66 +++++++++ .../login.php | 3 +- .../search.html | 52 +++++-- .../search.php | 39 ++++++ 12 files changed, 368 insertions(+), 34 deletions(-) create mode 100644 DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/changePassword.html create mode 100644 DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/nav.css create mode 100644 DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/search.css delete mode 100644 DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/reports.js create mode 100644 DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/search.js create mode 100644 DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.php diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/changePassword.html b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/changePassword.html new file mode 100644 index 0000000..1604cbc --- /dev/null +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/changePassword.html @@ -0,0 +1,10 @@ + + + + + Change Password + + + + + \ No newline at end of file diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/login.css b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/login.css index ebd801a..135323f 100644 --- a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/login.css +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/login.css @@ -1,4 +1,3 @@ -@import "normalize.css"; @import "template.css"; body, html { diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/nav.css b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/nav.css new file mode 100644 index 0000000..8e15178 --- /dev/null +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/nav.css @@ -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); +} \ No newline at end of file diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/search.css b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/search.css new file mode 100644 index 0000000..4368ac1 --- /dev/null +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/search.css @@ -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; +} \ No newline at end of file diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css index 421b535..a33e69b 100644 --- a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/css/template.css @@ -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; +} \ No newline at end of file diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/index.html b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/index.html index 1c2bde7..79b7f3d 100644 --- a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/index.html +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/index.html @@ -12,7 +12,7 @@
- \ No newline at end of file + diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/login.js b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/login.js index efdee3a..f672ecf 100644 --- a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/login.js +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/login.js @@ -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); } })); diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/reports.js b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/reports.js deleted file mode 100644 index c5b1cd5..0000000 --- a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/reports.js +++ /dev/null @@ -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"; -// } -// })); -// }); \ No newline at end of file diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/search.js b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/search.js new file mode 100644 index 0000000..fe0f9d5 --- /dev/null +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/js/search.js @@ -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 += `${header}`; + }); + let body = ""; + json.data.forEach(row => + { + body += ""; + Object.keys(row).forEach(key => + { + body += `${(row[key] === "null" || row[key] === null) ? "N/A" : row[key]}`; + }); + body += ""; + }); + document.querySelector("#searchResults tbody").innerHTML = body; + + } + else + { + alert("No search results found"); + } + })); + +}); \ No newline at end of file diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/login.php b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/login.php index 1968206..5c44d7c 100644 --- a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/login.php +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/login.php @@ -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")); diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.html b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.html index 3d774f4..e0b6c06 100644 --- a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.html +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.html @@ -2,27 +2,51 @@ - Reports + Search + + -
-
- +
+
+ +
+ +
+
+ + +
+ +
+ +
+ + + + + + + +
-
- + - \ No newline at end of file + diff --git a/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.php b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.php new file mode 100644 index 0000000..8b00f44 --- /dev/null +++ b/DIS-COMP4039-CW2-psxrp11-20450011/psxrp11-20450011_InstallationFiles/search.php @@ -0,0 +1,39 @@ +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")); +} \ No newline at end of file