SoftwarePatternsWebApplication/index.html at main · grahamrj7/SoftwarePatternsWebApplication · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Clothing Store</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-dark bg-dark mb-4">
    <div class="container">
        <span class="navbar-brand">Clothing Store</span>
        <a href="/add" class="btn btn-success">Add Product</a>
    </div>
</nav>

<div class="container">
    <div class="row">

        <div class="col-md-4 mb-4" th:each="p : ${products}">
            <div class="card h-100 shadow-sm">

                <img th:src="${p.imageUrl}"
                     onerror="this.src='https://via.placeholder.com/300'"
                     class="card-img-top">

                <div class="card-body">
                    <h5 th:text="${p.title}"></h5>

                    <p class="text-muted small" th:text="${p.description}"></p>

                    <p>
                        <strong>Brand:</strong> <span th:text="${p.manufacturer}"></span><br>
                        <strong>Category:</strong> <span th:text="${p.category}"></span><br>
                        <strong>Size:</strong> <span th:text="${p.size}"></span>
                    </p>

                    <h6 class="text-primary">€<span th:text="${p.price}"></span></h6>
                </div>

            </div>
        </div>

    </div>
</div>


    <!DOCTYPE html>
<html>
<head>
    <title>Add Product</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2>Add Product</h2>

    <form method="post" action="/add">

        <select class="form-select mb-3" name="title">
            <option value="">Select Product</option>
            <option>T-Shirt</option>
            <option>Hoodie</option>
            <option>Shoes</option>
        </select>

        <input class="form-control mb-3" name="manufacturer" placeholder="Manufacturer"/>

        <input class="form-control mb-3" name="price" placeholder="Price"/>

        <select class="form-select mb-3" name="category">
            <option value="">Select Category</option>
            <option>Tshirts</option>
            <option>Hoodies</option>
            <option>Shoes</option>
        </select>

        <input class="form-control mb-3" name="size" placeholder="Size"/>

        <input class="form-control mb-3" name="imageUrl" placeholder="Image URL"/>

        <textarea class="form-control mb-3" name="description" placeholder="Description"></textarea>

        <button class="btn btn-primary">Add Product</button>
    </form>
</div>

</body>
</html>

<a href="/register" class="btn btn-warning">Register</a>

</body>
</html>
<form action="/search" class="d-flex mb-4">
    <input class="form-control me-2" name="query" placeholder="Search products...">
    <button class="btn btn-dark">Search</button>
</form>

<form action="/review" method="post">
    <input type="hidden" name="id" th:value="${p.id}">

    <select name="rating" class="form-select mb-2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <input name="review" class="form-control mb-2" placeholder="Leave a review">
    <button class="btn btn-sm btn-success">Submit</button>
</form>
<a th:href="@{/add-to-cart(id=${p.id})}" class="btn btn-primary btn-sm">
    Add to Cart
</a>
<a href="/cart" class="btn btn-info me-2">
    Cart (<span th:text="${cartSize}"></span>)
</a>
<div th:if="${message}" class="alert alert-success">

<p th:text="${message}"></p>

<hr>

<p><strong>Total:</strong> €<span th:text="${total}"></span></p>
<p><strong>Discount:</strong> €<span th:text="${discount}"></span></p>
<p><strong>Final Total:</strong> €<span th:text="${finalTotal}"></span></p>

<p th:if="${user}">
<strong>Loyalty Points:</strong>
<span th:text="${user.loyaltyPoints}"></span>
</p>

</div>
<a href="/admin" class="btn btn-light">Admin</a>
<form action="/review" method="post" class="mt-3">
<input type="hidden" name="id" th:value="${p.id}">

<select name="rating" class="form-select mb-1">
<option value="1">1 ⭐</option>
<option value="2">2 ⭐⭐</option>
<option value="3">3 ⭐⭐⭐</option>
<option value="4">4 ⭐⭐⭐⭐</option>
<option value="5">5 ⭐⭐⭐⭐⭐</option>
</select>

<input name="review" class="form-control mb-1" placeholder="Leave a review">

<button class="btn btn-success btn-sm">Submit</button>
</form>
<div th:if="${p.review}" class="mt-2">
<p><strong>Rating:</strong> <span th:text="${p.rating}"></span>/5</p>
<p><strong>Review:</strong> <span th:text="${p.review}"></span></p>
</div>