Commiting the controller, css, html and javascript files

b3ed632c · Gabriel Copat · 08b7a18a · b3ed632c · b3ed632c · b3ed632c
Commit b3ed632c authored 1 year ago by Gabriel Copat
--- 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'

--- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
 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 {
 }
--- a/src/main/java/Team5/SmartTowns/trails/Trail.java
+++ b/src/main/java/Team5/SmartTowns/trails/Trail.java
+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;
+    }
+}
--- a/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+++ b/src/main/java/Team5/SmartTowns/trails/TrailsController.java
+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";
+    }
+}
--- a/src/main/resources/static/css/allTrails.css
+++ b/src/main/resources/static/css/allTrails.css
+.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;
+}
--- a/src/main/resources/static/scripts/allTrails.js
+++ b/src/main/resources/static/scripts/allTrails.js
+/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/
--- a/src/main/resources/templates/allTrails/allTrails.html
+++ b/src/main/resources/templates/allTrails/allTrails.html
+<!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
--- a/src/main/resources/templates/allTrails/oneTrail.html
+++ b/src/main/resources/templates/allTrails/oneTrail.html
+test
\ No newline at end of file
--- 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">
+<article class="trailInfo" th:fragment="trailInfo2">
-    <h1 class="titleH1">Trail Info</h1>
+    <h1 class="titleH1" th:text="${trail.name}">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>
\ No newline at end of file