source: trip-planner/src/main/resources/templates/homepage.html

Last change on this file was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 3.7 KB
Line 
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
3<head>
4 <meta charset="UTF-8">
5 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
6 <title>Tripco</title>
7</head>
8<body>
9Welcome to Tripco
10<br><br>
11<form action="/create/trip/locations" method="POST" >
12
13 <div class="form-group" style="width: 300px;" >
14 <label><h5>Please select a place</h5></label>
15 <select id="city" class="form-control select2-single" name="locName"
16 onchange="yesnoCheck(this);">
17 <option disabled selected>Please select a place...</option>
18 <option
19 th:each="city: ${cities}"
20 th:text="${city.getName()}"
21 th:value="${city.getName()}"
22 th:id="${city.getId()}">
23 </option>
24 <option
25 th:each="country : ${countries}"
26 th:text="${country.getName()}"
27 th:value="${country.getName()}"
28 th:id = "${country.getName()}">
29 </option>
30 </select>
31 </div>
32
33 <div class="form-group" style="width: 300px; display: none" id="ifYes" >
34 <label><h5>Please select a region</h5></label>
35 <br>
36 <select class="form-control select2-single" name="region">
37 <option disabled selected>Please select a region...</option>
38 <option
39 th:each="region : ${regions}"
40 th:text="${region.getName()}"
41 th:value="${region.getName()}"
42 th:id = "${region.getId()}" >
43 </option>
44 </select>
45 </div>
46
47
48 <div class="form-group" style="width: 300px;">
49 <label><h5>Who are you travelling with?</h5></label>
50 <br>
51 <select id="companion" class="form-control select2-single" name="companion">
52 <option disabled selected>Please select a companion...</option>
53 <option
54 th:each="companion : ${companions}"
55 th:text="${companion.getType()}"
56 th:value="${companion.getType()}"
57 th:id = "${companion.getId()}" >
58 </option>
59 </select>
60 </div>
61
62 <div class="form-outline" style="width: 300px;">
63 <label><h5>How many days are you willing to stay ?</h5></label>
64 <br>
65 <input type="number" id="typeNumber" class="form-control" name="numberOfDays"/>
66 </div>
67
68 <div class="form-group" style="width: 300px;">
69 <label> <h5>What is your priority to visit?</h5> <br> </label>
70 <br>
71 <input type="checkbox" th:each="category : ${categories}" name="categories"
72 th:value="${category.getName()}" th:text="${category.getName()}">
73 </div>
74
75 <button id="submit" type="submit" class="btn btn-primary">Create my planner</button>
76
77</form>
78
79<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
80<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
81
82</body>
83</html>
84
85
86<script>
87 function yesnoCheck(that) {
88 if (that.value == "Macedonia") {
89 document.getElementById("ifYes").style.display = "block";
90 } else {
91 document.getElementById("ifYes").style.display = "none";
92 }
93 }
94</script>
Note: See TracBrowser for help on using the repository browser.