| [6a3a178] | 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>
|
|---|
| 9 | Welcome 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>
|
|---|
