source: src/main/resources/templates/user-schedule-reservation.ftl@ 4d7e387

Last change on this file since 4d7e387 was 4d7e387, checked in by makyjovanovsky <mjovanovski04@…>, 18 months ago

commit 1
  • Property mode set to 100644
File size: 6.9 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Schedule Reservation</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 <script>
26 async function sendRequest() {
27 let date = document.getElementById("date").value;
28 let type = document.getElementById("type").value;
29 console.log(date)
30 const params = {
31 "date": String(date),
32 "type": String(type)
33 };
34 const options = {
35 method: 'POST',
36 body: JSON.stringify(params)
37 };
38 fetch('http://localhost:8080/reservation', options)
39 .then(response => response.json())
40 .then(response => {
41 console.log(response)
42 });
43
44 }
45 </script>
46</head>
47<body>
48<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
49 <a class="navbar-brand" href="#">Salon Bella</a>
50 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
51 <span class="navbar-toggler-icon"></span>
52 </button>
53
54 <div class="collapse navbar-collapse" id="navbarSupportedContent">
55 <ul class="navbar-nav mr-auto">
56 <li class="nav-item ">
57 <a class="nav-link" href="/userDashboard">Home <span class="sr-only">(current)</span></a>
58 </li>
59
60 <li class="nav-item dropdown">
61 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
62 Functions - Reservations
63 </a>
64 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
65 <a class="dropdown-item" href="/schedule-reservation">Schedule Reservations</a>
66 <a class="dropdown-item" href="/my-reservations">My scheduled reservations</a>
67 </div>
68 </li>
69
70 <li class="nav-item dropdown">
71 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
72 Functions - Orders
73 </a>
74 <div class="dropdown-menu" aria-labelledby="navbarDropdown">
75 <a class="dropdown-item" href="/order">Order Products</a>
76 <a class="dropdown-item" href="/my-orders">Ordered Products</a>
77 </div>
78 </li>
79
80 </ul>
81 <form class="form-inline my-2 my-lg-0" method="get" action="/logout">
82 <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Log out</button>
83 </form>
84 </div>
85</nav>
86<br>
87<div class="h-100 d-flex align-items-center justify-content-center">
88 <form method="post" action="/get-free-reservations">
89 <#if date??>
90 <div class="d-flex justify-content-center">
91 <input type="date" min="" name="date" id="date" value="${date}" required/>
92 </div>
93 <#else>
94 <div class="d-flex justify-content-center">
95 <input type="date" min="" name="date" id="date" required/>
96 </div>
97 </#if>
98
99 <br>
100 <div class="d-flex justify-content-center">
101 <select name="type" id="type" required>
102 <option value="NAILS">NAILS</option>
103 <option value="MAKEUP">MAKEUP</option>
104 <option value="WAXING">WAXING</option>
105 </select>
106 </div>
107 <br>
108 <button class="btn btn-primary" type="submit">Get Free Reservations</button>
109 </form>
110</div>
111
112<br>
113<div class="h-100 d-flex align-items-center justify-content-center">
114 <#if tip??>
115
116 <form method="post" action="/make-reservation">
117 <div class="d-flex justify-content-center">
118 <input type="date" name="date" value="${date}" hidden/>
119 </div>
120
121 <div class="d-flex justify-content-center">
122 <select name="type" id="type" hidden>
123 <option value="NAILS">NAILS</option>
124 <option value="MAKEUP">MAKEUP</option>
125 <option value="WAXING">WAXING</option>
126 </select>
127 </div>
128
129 <div class="d-flex justify-content-center">
130 <#if free_reservations??>
131 <select name="time" id="time">
132 <#list free_reservations as reservation>
133 <option value="${reservation}">${reservation}</option>
134 </#list>
135 </select>
136 </#if>
137 </div>
138 <br>
139 <button class="btn btn-primary" type="submit">Reserve</button>
140 </form>
141 </#if>
142</div>
143
144
145<#if tip??>
146 <script>
147 let array = document.getElementsByTagName("option");
148 for (let i = 0; i < array.length; i++) {
149 if (array[i].value == "${tip}") {
150 array[i].setAttribute("selected", "");
151 }
152 }
153 </script>
154</#if>
155<script>
156 document.getElementById("date").setAttribute("min", new Date().toISOString().split('T')[0])
157</script>
158<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
159<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
160<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
161<script
162 type="text/javascript"
163 src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
164></script>
165</body>
166</html>
Note: See TracBrowser for help on using the repository browser.