From b42f7dcda6f69d7a11c6329a63bd76e334e4ae72 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Thu, 16 Nov 2023 11:23:33 +0700
Subject: [PATCH] feat: history page
---
src/components/history/History.php | 48 +++++++++++
src/components/template/HistoryCard.php | 21 +++++
src/components/template/Navbar.php | 1 +
src/controller/history/HistoryController.php | 7 ++
src/styles/history/History.css | 4 +
src/styles/history/HistoryCard.css | 85 ++++++++++++++++++++
6 files changed, 166 insertions(+)
create mode 100644 src/components/history/History.php
create mode 100644 src/components/template/HistoryCard.php
create mode 100644 src/controller/history/HistoryController.php
create mode 100644 src/styles/history/History.css
create mode 100644 src/styles/history/HistoryCard.css
diff --git a/src/components/history/History.php b/src/components/history/History.php
new file mode 100644
index 0000000..2558a59
--- /dev/null
+++ b/src/components/history/History.php
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <title>History</title>
+ <link rel="stylesheet" href="../../styles/Global.css">
+ <link rel="stylesheet" href="../../styles/history/History.css">
+ <link rel="stylesheet" href="../../styles/history/HistoryCard.css">
+</head>
+
+<body>
+ <?php
+ include(dirname(__DIR__) . '/template/Navbar.php');
+ ?>
+ <div>
+ <h1>History pesananmu</h1>
+
+ <span class="background">
+ <span class="centering">
+ <ul>
+ <?php
+ include_once(dirname(__DIR__) . "/template/HistoryCard.php");
+
+ // TODO : fetch data from REST
+ $histories = [
+ ['courierName' => "jamal", 'price' => 100, 'rating' => 4, 'historyId' => 1],
+ ['courierName' => "rusdi", 'price' => 69, 'rating' => 0, 'historyId' => 2],
+ ['courierName' => "Ukin", 'price' => 420, 'rating' => 3, 'historyId' => 3],
+ ];
+ ?>
+ <section class="articles">
+ <?php
+ foreach ($histories as $history) {
+ history_card_template(
+ $history['courierName'],
+ $history['price'],
+ $history['rating'],
+ $history['historyId']);
+ }
+ ?>
+ </section>
+ </ul>
+ </span>
+ </span>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/components/template/HistoryCard.php b/src/components/template/HistoryCard.php
new file mode 100644
index 0000000..7c4e054
--- /dev/null
+++ b/src/components/template/HistoryCard.php
@@ -0,0 +1,21 @@
+<?php
+function history_card_template($courierName, $price, $rating, $historyId) {
+ $href = "href='/historyDetail/$historyId'";
+ $redirectText = "History Detail";
+ $ratingText = ($rating === 0) ? "belum memberi rating" : "rating $rating";
+
+ $html = <<<"EOT"
+ <article>
+ <a $href>
+ <div class="article-preview">
+ <h2>$courierName</h2>
+ <h4>$price</h4>
+ <p>$ratingText</p>
+ <h1>$redirectText</h1>
+ </div>
+ </a>
+ </article>
+EOT;
+
+ echo $html;
+}
\ No newline at end of file
diff --git a/src/components/template/Navbar.php b/src/components/template/Navbar.php
index 93e3767..c77ade1 100644
--- a/src/components/template/Navbar.php
+++ b/src/components/template/Navbar.php
@@ -17,6 +17,7 @@ $title = str_replace('.php', '', $title);
<!-- Display "Cart", "Profile", and "Log out" when logged in as a user -->
<li <?php if ($title == "cart") echo 'aria-current="page"'; ?>><a href="/cart">Cart</a></li>
<li <?php if ($title == "profile") echo 'aria-current="page"'; ?>><a href="/profile">Profile</a></li>
+ <li <?php if ($title == "history") echo 'aria-current="page"'; ?>><a href="/history">History</a></li>
<li><a href="/logout">Log out</a></li>
<?php elseif ($this->userRole === 2) : ?>
<!-- Display "Category", "Profile", and "Log out" when logged in as admin -->
diff --git a/src/controller/history/HistoryController.php b/src/controller/history/HistoryController.php
new file mode 100644
index 0000000..0b88076
--- /dev/null
+++ b/src/controller/history/HistoryController.php
@@ -0,0 +1,7 @@
+<?php
+
+class HistoryController extends Controller{
+ public function index() {
+ $this->render();
+ }
+}
\ No newline at end of file
diff --git a/src/styles/history/History.css b/src/styles/history/History.css
new file mode 100644
index 0000000..b5788b6
--- /dev/null
+++ b/src/styles/history/History.css
@@ -0,0 +1,4 @@
+ul {
+ list-style: none;
+ padding: 0;
+}
diff --git a/src/styles/history/HistoryCard.css b/src/styles/history/HistoryCard.css
new file mode 100644
index 0000000..b01a6f1
--- /dev/null
+++ b/src/styles/history/HistoryCard.css
@@ -0,0 +1,85 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.background{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: start;
+ padding: 64px 32px;
+}
+
+.articles{
+ margin: 0 auto;
+ justify-content: center;
+ max-width: 1200px;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 24px;
+}
+
+.articles article{
+ max-width: 320px;
+ cursor: pointer;
+ position: relative;
+ display: block;
+ transition: all 0.4s ease-in-out;
+ overflow: hidden;
+ border-radius: 16px;
+}
+
+.articles article a{
+ color: #000000;
+ text-decoration: none;
+}
+
+.articles article h1{
+ margin: 0 0 10px 0;
+ font-size: 1.2rem;
+ color: #DD946F;
+ transition: color 0.3s ease-out;
+}
+
+.articles article h2{
+ margin: 0 0 10px 0;
+ font-size: 1.6rem;
+ color: #261E5A;
+ transition: color 0.3s ease-out;
+}
+
+.articles article h4{
+ margin: 0 0 10px 0;
+ font-size: 1.2rem;
+ color: #261E5A;
+ transition: color 0.3s ease-out;
+}
+
+.articles article img{
+ max-width: 100%;
+ transform-origin: center;
+ transition: transform 0.4s ease-in-out;
+}
+
+.articles-preview{
+ padding: 24px;
+ background: white;
+}
+
+.articles figure{
+ width: 100%;
+ height: 200px;
+ overflow: hidden;
+}
+
+.articles figure img{
+ height: 100%;
+ aspect-ratio: 16/9;
+ overflow: hidden;
+ object-fit: cover;
+}
+
+.articles article:hover img {
+ transform: scale(1.5);
+}
\ No newline at end of file
--
GitLab