source: src/main/resources/templates/myDeliveries.html@ f4b4afa

main
Last change on this file since f4b4afa was f4b4afa, checked in by Nikola Todoroski <nikola.todoroski@…>, 6 months ago

Pushed whole project, original project location on github:https://github.com/hehxd/Tech-Harbor
  • Property mode set to 100644
File size: 6.1 KB
Line 
1<!DOCTYPE html>
2<html lang="en" xmlns:th="http://www.thymeleaf.org">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Checkout</title>
7 <!-- Add your CSS styles or links to external stylesheets if needed -->
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9 <!-- Tailwind CSS from CDN for development purposes -->
10 <script src="https://cdn.tailwindcss.com"></script>
11 <link href="./output.css" rel="stylesheet">
12</head>
13
14<body class="font-sans antialiased bg-gray-100 flex flex-col min-h-screen">
15
16<nav class="bg-gray-800 text-white p-4 text-lg sm:text-xl"> <!-- Responsive font size -->
17 <div class="container mx-auto flex justify-between items-center">
18 <div class="flex items-center">
19 <img src="/images/logoWhite.png" alt="Logo" class="object-cover h-32 w-32 rounded-lg">
20 <h1 class="text-2xl font-semibold ml-4 sm:text-3xl">Tech Harbor</h1> <!-- Responsive font size -->
21 </div>
22 <ul class="flex space-x-8">
23 <li><a href="/" class="hover:text-emerald-500">Home</a></li>
24 <li><a th:href="@{'/aboutUs'}" class="hover:text-emerald-500">About Us</a></li>
25 <li th:if="${user != null}">
26 <a th:href="@{'/orders/{id}' (id=${user.userId})}" class="hover:text-emerald-500">My Orders</a>
27 </li>
28 <li th:if="${user != null}">
29 <a th:href="@{'/reviews/{id}' (id=${user.userId})}" class="hover:text-emerald-500">My Reviews</a>
30 </li>
31 <li th:if="${deliveryMan != null}">
32 <a th:href="@{'/myDeliveries/{id}' (id=${deliveryMan.userId})}"
33 class="text-emerald-500 hover:text-emerald-500">My Deliveries</a>
34 </li>
35 </ul>
36 <ul class="flex space-x-4">
37 <li th:if="${user != null}">
38 <span>Welcome <span th:text="${user.nameUser}"></span></span>
39 </li>
40 <li th:if="${deliveryMan != null}">
41 <span>Welcome Delivery Man <span th:text="${deliveryMan.nameUser}"></span></span>
42 </li>
43 <li th:if="${user != null}">
44 <a th:href="@{'/shoppingCart'}"><i class="fa-solid fa-cart-shopping"></i></a>
45 </li>
46 <li th:if="${user != null || deliveryMan != null}">
47 <a class="hover:text-emerald-500" th:href="@{/logout}">Log out</a>
48 </li>
49 <li th:if="${user == null && deliveryMan == null}">
50 <a th:href="@{/login}" class="hover:text-emerald-500">Sign In</a>
51 </li>
52 <li th:if="${user == null && deliveryMan == null}">
53 <a th:href="@{/register}" class="hover:text-emerald-500">Register</a>
54 </li>
55 </ul>
56
57 </div>
58</nav>
59
60
61<main class="container mx-auto mt-8 flex-grow">
62
63 <h2 class="text-2xl font-bold mb-4">My Deliveries</h2>
64
65 <div th:if="${deliveries.isEmpty()}" class="text-center p-4">
66 <p>You have no Deliveries.</p>
67 </div>
68
69 <div th:unless="${deliveries.isEmpty()}" class="my-8">
70 <table class="w-full rounded-md border shadow">
71 <thead>
72 <tr class="text-center">
73 <th class="px-4 py-2">Delivery ID</th>
74 <th class="px-4 py-2">Order ID</th>
75 <th class="px-4 py-2">Delivery Address</th>
76 <th class="px-4 py-2">Delivery Status</th>
77 </tr>
78 </thead>
79 <tbody>
80 <tr th:each="delivery : ${deliveries}" class="text-center bg-white hover:bg-gray-100">
81 <td class="px-4 py-2">
82 <span th:text="${delivery.getDeliveryId()}"></span>
83 </td>
84 <td class="px-4 py-2">
85 <span th:text="${delivery.getOrderId()}"></span>
86 </td>
87 <td class="px-4 py-2">
88 <span th:text="${delivery.getDeliveryAddress()}"></span>
89 </td>
90 <td class="px-4 py-2">
91 <form id="deliveryForm" action="/update-delivery-status" method="post">
92 <input type="hidden" name="deliveryId" th:value="${delivery.deliveryId}"/>
93 <input type="hidden" name="orderId" th:value="${delivery.orderId}"/>
94 <label>
95 <select id="deliveryStatusSelect" name="newStatus" class="w-full border p-2"
96 th:classappend="${delivery.deliveryStatus == 'Delivered'} ? 'bg-green-200' : 'bg-orange-200'"
97 onchange="this.form.submit()"
98 th:disabled="${delivery.deliveryStatus == 'Delivered'}">
99 <option value="Pending" th:selected="${delivery.deliveryStatus == 'Pending'}">Pending
100 </option>
101 <option value="Delivered" th:selected="${delivery.deliveryStatus == 'Delivered'}">
102 Delivered
103 </option>
104 </select>
105 </label>
106 </form>
107 </td>
108 </tr>
109 </tbody>
110 </table>
111 </div>
112</main>
113
114<!-- Footer -->
115<footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800 flex-shrink-0">
116 <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
117 <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2024 Tech Harbor. All rights reserved.™
118 </span>
119 <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
120 <li>
121 <a th:href="@{'/aboutUs'}" class="hover:underline me-4 md:me-6">About</a>
122 </li>
123 <li>
124 <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
125 </li>
126 <li>
127 <a href="#" class="hover:underline">Contact</a>
128 </li>
129 </ul>
130 </div>
131</footer>
132
133
134</body>
135</html>
Note: See TracBrowser for help on using the repository browser.