source: target/classes/templates/user-cart.ftl

Last change on this file was e9b70f6, checked in by makyjovanovsky <mjovanovski04@…>, 22 months ago

order
  • Property mode set to 100644
File size: 10.0 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>My Cart</title>
6 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7 <!-- Font Awesome -->
8 <link
9 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
10 rel="stylesheet"
11 />
12 <!-- Google Fonts -->
13 <link
14 href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
15 rel="stylesheet"
16 />
17 <!-- MDB -->
18 <link
19 href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css"
20 rel="stylesheet"
21 />
22 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
23 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
24 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
25
26 <style>
27 @media (min-width: 1025px) {
28 .h-custom {
29 height: 100vh !important;
30 }
31 }
32
33 .card-registration .select-input.form-control[readonly]:not([disabled]) {
34 font-size: 1rem;
35 line-height: 2.15;
36 padding-left: .75em;
37 padding-right: .75em;
38 }
39
40 .card-registration .select-arrow {
41 top: 13px;
42 }
43
44 .bg-grey {
45 background-color: #eae8e8;
46 }
47
48 @media (min-width: 992px) {
49 .card-registration-2 .bg-grey {
50 border-top-right-radius: 16px;
51 border-bottom-right-radius: 16px;
52 }
53 }
54
55 @media (max-width: 991px) {
56 .card-registration-2 .bg-grey {
57 border-bottom-left-radius: 16px;
58 border-bottom-right-radius: 16px;
59 }
60 }
61 </style>
62</head>
63<body>
64
65<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
66 <a class="navbar-brand" href="#">Salon Bella</a>
67 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
68 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
69 <span class="navbar-toggler-icon"></span>
70 </button>
71
72 <div class="collapse navbar-collapse" id="navbarSupportedContent">
73 <ul class="navbar-nav mr-auto">
74 <li class="nav-item ">
75 <a class="nav-link" href="/userDashboard">Home <span class="sr-only">(current)</span></a>
76 </li>
77
78 <li class="nav-item dropdown">
79 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
80 aria-haspopup="true" aria-expanded="false">
81 Functions - Reservations
82 </a>
83 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
84 <a class="dropdown-item" href="/schedule-reservation">Schedule Reservations</a>
85 <a class="dropdown-item" href="/my-reservations">My scheduled reservations</a>
86 </div>
87 </li>
88
89 <li class="nav-item dropdown">
90 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
91 aria-haspopup="true" aria-expanded="false">
92 Functions - Orders
93 </a>
94 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
95 <a class="dropdown-item" href="/order">Order Products</a>
96 <a class="dropdown-item" href="/my-orders">Ordered Products</a>
97 </div>
98 </li>
99
100 </ul>
101 <form class="form-inline my-2 my-lg-0" method="get" action="/logout">
102 <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Log out</button>
103 </form>
104 </div>
105</nav>
106<br>
107
108<section class="h-100 h-custom">
109 <div class="container py-5 h-100">
110 <div class="row d-flex justify-content-center align-items-center h-100">
111 <div class="col-12">
112 <div class="card card-registration card-registration-2" style="border-radius: 15px;">
113 <div class="card-body p-0">
114 <div class="row g-0">
115 <div class="col-lg-8">
116 <div class="p-5">
117 <div class="d-flex justify-content-between align-items-center mb-5">
118 <h1 class="fw-bold mb-0 text-black">Shopping Cart</h1>
119 <h6 class="mb-0 text-muted"></h6>
120 </div>
121 <hr class="my-4">
122 <form method="post" action="/order">
123 <#if products ??>
124 <#list products as product>
125 <div class="row mb-4 d-flex justify-content-between align-items-center">
126 <div class="col-md-2 col-lg-2 col-xl-2">
127 <img
128 src="data:image/jpeg;base64,${product['base64']}"
129 class="img-fluid rounded-3" alt="Cotton T-shirt">
130 </div>
131 <div class="col-md-3 col-lg-3 col-xl-3">
132 <h6 class="text-muted">${product['category']}</h6>
133 <h6 class="text-black mb-0">${product['name']}</h6>
134 </div>
135 <div class="col-md-3 col-lg-3 col-xl-3">
136 <h6 class="text-muted">Quantity</h6>
137 <input id="form1" min="0" name="${product['id']}" value="1" type="number"
138 class="form-control form-control-sm" onclick="myFunction()"/>
139 </div>
140 <div class="col-md-3 col-lg-3 col-xl-3">
141 <h6 class="text-muted">Product Price</h6>
142 <h6 class="mb-0" name="price" >${product['price']} ден.</h6>
143 </div>
144 <div class="col-md-1 col-lg-1 col-xl-1 text-end">
145 <a href="/delete-product-from-cart?id=${product['id']}" class="text-muted">
146 <i class="fas fa-times"></i>
147 </a>
148 </div>
149 </div>
150 <hr class="my-4">
151 </#list>
152 </#if>
153
154
155
156 </div>
157 </div>
158 <div class="col-lg-4 bg-grey">
159 <div class="p-5">
160 <h3 class="fw-bold mb-5 mt-2 pt-1">Summary</h3>
161 <hr class="my-4">
162
163 <div class="d-flex justify-content-between mb-5">
164 <h5 class="text-uppercase">Total price</h5>
165 <h5 id="total-price"></h5>
166 </div>
167
168 <button type="submit" class="btn btn-dark btn-block btn-lg" data-mdb-ripple-color="dark">Order</button>
169 </form>
170 </div>
171 </div>
172 </div>
173 </div>
174 </div>
175 </div>
176 </div>
177 </div>
178</section>
179<script>
180 let prices = document.getElementsByName("price")
181 let quantities = document.getElementsByClassName("form-control form-control-sm")
182 let total = 0
183 for(let i=0;i<prices.length;i++) {
184 total += (parseInt(prices[i].innerText.split(" ")[0]) * parseInt(quantities[i].value))
185 }
186
187 document.getElementById("total-price").innerText = total + " ден."
188
189 function myFunction() {
190 let prices = document.getElementsByName("price")
191 let quantities = document.getElementsByClassName("form-control form-control-sm")
192 let total = 0
193 for(let i=0;i<prices.length;i++) {
194 total += (parseInt(prices[i].innerText.split(" ")[0]) * parseInt(quantities[i].value))
195 }
196 document.getElementById("total-price").innerText = total + " ден."
197 }
198</script>
199
200<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
201<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
202<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
203<script
204 type="text/javascript"
205 src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
206></script>
207</body>
208</html>
Note: See TracBrowser for help on using the repository browser.