source: src/main/resources/templates/room-reservations.html

Last change on this file was f7c05a1, checked in by Elena Shulevska <elena.shulevska@…>, 16 months ago

initial commit of the source code on origin
  • Property mode set to 100644
File size: 9.1 KB
Line 
1<!DOCTYPE html>
2<html lang="en" xmln="http://www.w3.org/1999/xhtml">
3<head>
4 <!-- Required meta tags -->
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
8 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
9 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
10 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
11 <!-- Bootstrap CSS -->
12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
13 integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
14 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
15 <title>Room Reservations</title>
16 <style>
17 header{
18 font-size: 30px;
19 }
20 body {
21 font-family: 'Montserrat', sans-serif;
22 }
23 h1{
24 font-size:25px;
25 }
26 table{
27 font-size: 20px;
28 text-align: center;
29 }
30 .buttons
31 {
32 width: 100px;
33 }
34 .dropbtn {
35 background: white;
36 border: none;
37 }
38 .dropdown {
39 position: relative;
40 display: inline-block;
41 }
42 .dropdown-content {
43 display: none;
44 position: absolute;
45 background-color: #f1f1f1;
46 font-size: 20px;
47 min-width: 160px;
48 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
49 z-index: 1;
50 }
51 .dropdown-content a {
52 padding: 12px 16px;
53 text-decoration: none;
54 display: block;
55 }
56 .dropdown-content a:hover {background-color: #ddd;}
57 .dropdown:hover .dropdown-content {display: block;}
58 /*.dropdown:hover .dropbtn {background-color: darkolivegreen;}*/
59 </style>
60</head>
61<body>
62<header>
63 <nav class="navbar navbar-expand-lg navbar-light bg-white">
64 <div class="container-fluid">
65 <img th:src="@{../logo.png}" class="img-fluid mx-auto d-block ms-0" width="200px" height="150px" alt="Logo">
66 <div class="collapse navbar-collapse justify-content-end mr-5" id="navbarNavAltMarkup">
67 <div class="navbar-nav me-0 text-black ml-5">
68 <a class="nav-link active mr-5 " aria-current="page" th:href="@{/home}">Home</a>
69 <div class="dropdown">
70 <button class="dropbtn nav-link mr-5">Reservations</button>
71 <div class="dropdown-content">
72 <li><a th:href="@{/reservations/rooms}" class="text-secondary">New Reservations</a></li>
73 <li><a th:href="@{/rooms/available}" class="text-secondary">Available Reservations</a></li>
74 </div>
75 </div>
76 <a class="nav-link mr-5" th:href="@{/home/contact}">Contact</a>
77 <a class="nav-link mr-5" href="/logout" th:if="${session.user != null}">Log Out</a>
78 </div>
79 </div>
80 </div>
81 </nav>
82</header>
83<div class="row mt-5 bg-light" >
84 <div class="col-12 pl-5 my-5 ml-0 justify-content-center text-secondary">
85 <h1>All your reservations are here!</h1>
86 </div>
87 <div class="col-12 justify-content-center d-flex mb-5">
88 <button type="submit" class="btn btn-secondary mx-3 my-2 btn-block" th:onclick="'location.href = \'/reservations/rooms\''">Rooms</button>
89 <button type="submit" class="btn btn-secondary mx-3 my-2 btn-block" th:onclick="'location.href = \'/reservations/food\''">Food</button>
90 <button type="submit" class="btn btn-secondary mx-3 my-2 btn-block" th:onclick="'location.href = \'/reservations/beverage\''">Beverages</button>
91 <button type="submit" class="btn btn-secondary mx-3 my-2 btn-block" th:onclick="'location.href = \'/reservations/event\''">Events</button>
92 <button type="submit" class="btn btn-secondary mx-3 my-2 btn-block" th:onclick="'location.href = \'/reservations/activity\''">Activities</button>
93 <button type="submit" class="btn btn-secondary mx-3 my-2 btn-block" th:onclick="'location.href = \'/reservations/service\''">Service</button>
94 </div>
95 <br> <br>
96 <div class="container-fluid">
97 <div th:each="reservation : ${roomReservations}" class="d-flex">
98 <table class="table table-striped table-bordered table-hover">
99 <tr>
100 <td rowspan="2" style="width: 550px">
101 <div th:switch="${reservation.room_type}">
102 <img th:case="'Single'" th:src="@{../single_room.jpg}" width="350px" height="200px" alt="Single Room">
103 <img th:case="'Double'" th:src="@{../double_room.jpg}" width="350px" height="200px" alt="Double Room">
104 </div>
105<!-- <img th:src="@{../room.jpg}" width="350px" height="200px">-->
106 </td>
107 <td>
108 <h6 class="text-secondary">Room type</h6>
109 <th:block th:text="${reservation.room_type}"></th:block>
110 </td>
111 <td>
112 <h6 class="text-secondary">Price</h6>
113 <th:block th:text="${reservation.price}">евра</th:block>
114 </td>
115 <td>
116 <h6 class="text-secondary">Villa</h6>
117 <th:block th:text="${reservation.name}"></th:block>
118 </td>
119 <td>
120 <h6 class="text-secondary" >Full Name</h6>
121 <th:block th:text="${reservation.full_name}"></th:block>
122 </td>
123 <td>
124 <h6 class="text-secondary">Phone Number</h6>
125 <th:block th:text="${reservation.phone_number}"></th:block>
126 </td>
127 </tr>
128 <tr>
129 <td>
130 <h6 class="text-secondary">Start Date</h6>
131 <th:block th:text="${reservation.start_date}"></th:block>
132 </td>
133 <td>
134 <h6 class="text-secondary">End Date</h6>
135 <th:block th:text="${reservation.end_date}"></th:block>
136 </td>
137 <td>
138 <h6 class="text-secondary">Number of guests</h6>
139 <th:block th:text="${reservation.number_guests}"></th:block>
140 </td>
141 <td>
142 <h6 class="text-secondary">Adults</h6>
143 <th:block th:text="${reservation.adults}"></th:block>
144 </td>
145 <td>
146 <h6 class="text-secondary">Children</h6>
147 <th:block th:text="${reservation.children}"></th:block>
148 </td>
149 </tr>
150 </table>
151
152 <div class="row mr-5">
153 <div class="col-sm-4 offset-sm-8 ml-5 mt-5">
154 <a class="btn btn-info buttons" th:href="@{'/reservations/rooms/edit-form/{id}' (id = ${reservation.reservation_id})}">Edit</a>
155 <form th:method="DELETE" th:action="@{'/reservations/rooms/delete/{id}' (id = ${reservation.reservation_id})}" >
156 <button type="submit" class="btn btn-danger buttons mt-2">Delete</button>
157 </form>
158 </div>
159 </div>
160 </div>
161</div>
162</div>
163</body>
164</html>
165
166<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
167<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.16.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
168<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min"></script>
Note: See TracBrowser for help on using the repository browser.