From b3ed632cdefaba78d22d15025ec38c6d306d9a47 Mon Sep 17 00:00:00 2001 From: Gabriel Copat <copatg@cardiff.ac.uk> Date: Mon, 27 Nov 2023 17:01:37 +0000 Subject: [PATCH] Commiting the controller, css, html and javascript files --- build.gradle | 3 +- .../Webpages/WebpageController.java | 7 ++ .../java/Team5/SmartTowns/trails/Trail.java | 26 ++++++ .../SmartTowns/trails/TrailsController.java | 24 +++++ src/main/resources/static/css/allTrails.css | 35 ++++++++ .../resources/static/scripts/allTrails.js | 2 + .../templates/allTrails/allTrails.html | 87 +++++++++++++++++++ .../templates/allTrails/oneTrail.html | 1 + .../templates/fragments/temp_frags.html | 17 +--- 9 files changed, 186 insertions(+), 16 deletions(-) create mode 100644 src/main/java/Team5/SmartTowns/trails/Trail.java create mode 100644 src/main/java/Team5/SmartTowns/trails/TrailsController.java create mode 100644 src/main/resources/static/css/allTrails.css create mode 100644 src/main/resources/static/scripts/allTrails.js create mode 100644 src/main/resources/templates/allTrails/allTrails.html create mode 100644 src/main/resources/templates/allTrails/oneTrail.html diff --git a/build.gradle b/build.gradle index de322fce..599ec4e1 100644 --- a/build.gradle +++ b/build.gradle @@ -24,7 +24,8 @@ repositories { dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' - compileOnly 'org.projectlombok:lombok' + testImplementation 'org.projectlombok:lombok:1.18.28' + compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java index 612aa553..c9df9c7d 100644 --- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java +++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java @@ -1,12 +1,17 @@ package Team5.SmartTowns.Webpages; + +import Team5.SmartTowns.trails.Trail; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.servlet.ModelAndView; import org.springframework.stereotype.Controller; + +import static Team5.SmartTowns.trails.Trail.trails; + @Controller public class WebpageController { @GetMapping("/Caerleon") @@ -41,4 +46,6 @@ public class WebpageController { + + } diff --git a/src/main/java/Team5/SmartTowns/trails/Trail.java b/src/main/java/Team5/SmartTowns/trails/Trail.java new file mode 100644 index 00000000..be2d5aaa --- /dev/null +++ b/src/main/java/Team5/SmartTowns/trails/Trail.java @@ -0,0 +1,26 @@ +package Team5.SmartTowns.trails; + +import lombok.Data; + +import java.util.List; + +@Data +public class Trail { + public static List<Trail> trails = List.of( + new Trail(1,"Trail1", "This is trail one"), + new Trail(2,"Trail2", "This is trail two"), + new Trail(3,"Trail3", "This is trail three"), + new Trail(4,"Trail4", "This is trail four") + ); + int id; + String name; + String description; + int nLandmarks; + int difficulty; //1-5 + + public Trail(int id, String name, String description) { + this.id = id; + this.name = name; + this.description = description; + } +} diff --git a/src/main/java/Team5/SmartTowns/trails/TrailsController.java b/src/main/java/Team5/SmartTowns/trails/TrailsController.java new file mode 100644 index 00000000..0e5f2192 --- /dev/null +++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java @@ -0,0 +1,24 @@ +package Team5.SmartTowns.trails; + + +import org.springframework.stereotype.Controller; +import org.springframework.ui.Model; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RequestMethod; +import org.springframework.web.servlet.ModelAndView; + +@Controller +public class TrailsController { + @GetMapping("/allTrails") + public ModelAndView getAllTrails(){ + ModelAndView mav = new ModelAndView("allTrails/allTrails"); + mav.addObject("trails", Trail.trails); //Mock data for trails + return mav; + } + @RequestMapping(value="/id", method=RequestMethod.POST) + public String sendHtmlFragment(Model map) { + map.addAttribute("foo", "bar"); + return "allTrails/allTrails"; + } +} diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css new file mode 100644 index 00000000..b718322e --- /dev/null +++ b/src/main/resources/static/css/allTrails.css @@ -0,0 +1,35 @@ +.flexList { + display: flex; + list-style: none; + width: 100%; + padding-left:0; + margin-left:0; + justify-content: center; +} + +.listButton { + flex: 1 1; + display: flex; + text-align: center; +} + +.listA{ + flex: 1 1; + background-color: black; + color: white; + padding: 10px; + +} +.listA:hover{ + background-color: #656565; + color: white; + +} +.selected { + color: red; +} + +.trailInfoBox { + opacity: 0; +} + diff --git a/src/main/resources/static/scripts/allTrails.js b/src/main/resources/static/scripts/allTrails.js new file mode 100644 index 00000000..ea21bb4e --- /dev/null +++ b/src/main/resources/static/scripts/allTrails.js @@ -0,0 +1,2 @@ + +/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/ diff --git a/src/main/resources/templates/allTrails/allTrails.html b/src/main/resources/templates/allTrails/allTrails.html new file mode 100644 index 00000000..903ebcd4 --- /dev/null +++ b/src/main/resources/templates/allTrails/allTrails.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>All Trails</title> + <link rel="stylesheet" th:href="@{css/allTrails.css}"> + <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> +</head> +<body> + +<header> + <ul class="flexList"> + <li class="listButton" th:each="trail : ${trails}"> + <a class="listA" th:onclick="'update(' + ${trail.id} + ');'" th:id="'li' + ${trail.id}" th:text="${trail.name}"></a> + </li> + </ul> +</header> + +<main> + <section class="trailInfoBox" th:each="trail : ${trails}" th:id="${trail.id}"> + <h1 th:text="${trail.description}"></h1> + </section> + + + +</main> + + +<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script> +<script th:inline="javascript"> + function fade(element) { + var op = 1; // initial opacity + var timer = setInterval(function () { + if (op <= 0.1){ + clearInterval(timer); + element.style.display = 'none'; + } + element.style.opacity = op; + element.style.filter = 'alpha(opacity=' + op * 100 + ")"; + op -= op * 0.1; + }, 50); + } + + function unfade(element) { + var op = 0.1; // initial opacity + element.style.display = 'block'; + var timer = setInterval(function () { + if (op >= 1){ + clearInterval(timer); + } + element.style.opacity = op; + element.style.filter = 'alpha(opacity=' + op * 100 + ")"; + op += op * 0.1; + }, 10); + } + async function update(id){ + await updateTrailInfo(id); + selectTrail('li' + id); + } + async function updateTrailInfo(id){ + let blocks = document.getElementsByClassName('trailInfoBox'); + let clicked = document.getElementById(id); + let active = null; + for (let i = 0; i < blocks.length; i++) { + if (blocks[i].style.display === 'block') { + active = blocks[i]; + } + } + if (active == null) { + unfade(clicked) + } else if (active !== clicked) { + fade(active); + unfade(clicked) + } + + } + function selectTrail(string) { + let listEl = document.getElementsByClassName('listA') + for (let i = 0; i < listEl.length; i++) { + listEl[i].classList.remove('selected') + } + document.getElementById(string).classList.add("selected") + + } +</script> +</body> +</html> \ No newline at end of file diff --git a/src/main/resources/templates/allTrails/oneTrail.html b/src/main/resources/templates/allTrails/oneTrail.html new file mode 100644 index 00000000..30d74d25 --- /dev/null +++ b/src/main/resources/templates/allTrails/oneTrail.html @@ -0,0 +1 @@ +test \ No newline at end of file diff --git a/src/main/resources/templates/fragments/temp_frags.html b/src/main/resources/templates/fragments/temp_frags.html index e2bd9778..03efad3e 100644 --- a/src/main/resources/templates/fragments/temp_frags.html +++ b/src/main/resources/templates/fragments/temp_frags.html @@ -18,19 +18,6 @@ </ul> </footer> -<article class="trailInfo" th:fragment="trailInfo1"> - <h1 class="titleH1">Trail Info</h1> - <p class="trailInfoTxt">Lorem ipsum dolor sit amet, - consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi - ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> -</article> -<article id="trailInfoBox" class="trailInfo" th:fragment="trailInfo2"> - <h1 class="titleH1">Trail Info</h1> - <p class="trailInfoTxt">TESTTESTETSTESdent, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> +<article class="trailInfo" th:fragment="trailInfo2"> + <h1 class="titleH1" th:text="${trail.name}">Trail Info</h1> </article> \ No newline at end of file -- GitLab