From 036c36f6aa31ffdb46f0d82f4c89feb685d887f9 Mon Sep 17 00:00:00 2001
From: sitaamirasyarifah <sitaamira86@gmail.com>
Date: Sat, 24 Feb 2024 10:21:22 +0700
Subject: [PATCH] create car, car list dan edit car html

---
 src/main/resources/templates/CarList.html   | 44 +++++++++++++++++++++
 src/main/resources/templates/CreateCar.html | 33 ++++++++++++++++
 src/main/resources/templates/EditCar.html   | 36 +++++++++++++++++
 3 files changed, 113 insertions(+)
 create mode 100644 src/main/resources/templates/CarList.html
 create mode 100644 src/main/resources/templates/CreateCar.html
 create mode 100644 src/main/resources/templates/EditCar.html
diff --git a/src/main/resources/templates/CarList.html b/src/main/resources/templates/CarList.html
new file mode 100644
index 0000000..4f2057c
--- /dev/null
+++ b/src/main/resources/templates/CarList.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>Car List</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+</head>
+<body>
+
+<div class="container my-2">
+    <h2>Car' List</h2>
+    <a th:href="@{/car/createCar}" class="btn btn-primary btn-sm mb-3">Create Car</a>
+
+    <table border="1" class="table table-striped table-responsive-md">
+        <thead>
+        <tr>
+            <th scope="col">Car Name</th>
+            <th scope="col">Quantity</th>
+            <th scope="col">Color</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr th:each="car: ${cars}">
+            <td th:text="${car.carName}"></td>
+            <td th:text="${car.carColor}"></td>
+            <td th:text="${car.carQuantity}"></td>
+            <td>
+                <a th:href="@{/car/editCar/{id}(id=${car.carId})}" class="btn btn-info btn-sm">Edit</a>
+            </td>
+            <td>
+                <form th:action="@{/car/deleteCar}" method="post" >
+                    <input type="hidden" th:name="carId" th:value="${car.carId}" />
+                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
+                </form>
+            </td>
+        </tr>
+
+        </tbody>
+    </table>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/CreateCar.html b/src/main/resources/templates/CreateCar.html
new file mode 100644
index 0000000..2d73854
--- /dev/null
+++ b/src/main/resources/templates/CreateCar.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>Create New Car</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERd`knLPMO" crossorigin="anonymous">
+</head>
+<body>
+
+<div class="container">
+    <h3>Create New Car</h3>
+
+    <form th:action="@{/car/createCar}" th:object="${car}" method="post">
+        <div class="form-group">
+            <label for="nameInput">Name</label>
+            <input th:field="*{carName}" type="text" class="form-control mb-4 col-4" id="nameInput" placeholder="Enter car' name">
+        </div>
+        <div class="form-group">
+            <label for="colorInput">Color</label>
+            <input th:field="*{carColor}" type="text" class="form-control mb-4 col-4" id="colorInput" placeholder="Enter car' color">
+        </div>
+        <div class="form-group">
+            <label for="quantityInput">Quantity</label>
+            <input th:field="*{carQuantity}" type="text" class="form-control mb-4 col-4" id="quantityInput" placeholder="Enter car' quantity">
+        </div>
+
+        <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/EditCar.html b/src/main/resources/templates/EditCar.html
new file mode 100644
index 0000000..b38d7f5
--- /dev/null
+++ b/src/main/resources/templates/EditCar.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <title>Edit Car</title>
+</head>
+<body class="bg-gray-100">
+<div class="container mx-auto mt-8">
+    <h1 class="text-3xl font-bold mb-4">Edit Car</h1>
+
+    <form th:action="@{/car/editCar}" method="post" th:object="${car}" class="max-w-md bg-white p-6 rounded-md shadow-md">
+        <input type="hidden" th:field="*{carId}" />
+        <div class="mb-4">
+            <label for="carName" class="block text-sm font-medium text-gray-600">Car Name</label>
+            <input type="text" id="carName" th:field="*{carName}" name="carName" th:value="${car.carName}" class="mt-1 p-2 w-full border rounded-md">
+        </div>
+
+        <div class="mb-4">
+            <label for="carColor" class="block text-sm font-medium text-gray-600">Car Color</label>
+            <input th:field="*{carColor}" type="text" id="carColor" name="carQuantity" th:value="${car.carColor}" class="mt-1 p-2 w-full border rounded-md">
+        </div>
+
+        <div class="mb-4">
+            <label for="carQuantity" class="block text-sm font-medium text-gray-600">Car Quantity</label>
+            <input th:field="*{carQuantity}" type="number" id="carQuantity" name="carQuantity" th:value="${car.carQuantity}" class="mt-1 p-2 w-full border rounded-md">
+        </div>
+
+        <div class="flex justify-end">
+            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Save Changes</button>
+        </div>
+    </form>
+</div>
+</body>
+</html>
\ No newline at end of file
