Merge branch...

Merge branch '27-as-a-user-i-want-to-see-all-trails-across-a-town-and-seamlessly-move-between-them' into 'main'

Resolve "As a user, I want to see all trails across a town and seamlessly move between them."

Closes #27

See merge request !11

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'

src/main/java/Team5/SmartTowns/trails/Trail.java

+package Team5.SmartTowns.trails;
+
+import lombok.Data;
+
+import java.io.File;
+import java.util.List;
+
+@Data
+public class Trail {
+    public static List<Trail> trails = List.of(
+            new Trail(1,"Caerphilly Castle Trail", "Take a stroll through the grounds of one of Europe's finest historic buildings and you will see stunning views of the castle and the lakes. The route of the trail is marked with eight special circular markers, which depict various fascinating historical facts relating to the castle. Pupils from Ysgol Gynradd Gymraeg Caerffili, Plasyfelin Junior School, Ysgol Y Castell and Twyn Primary worked with the artist to come up with the different designs. You do not need to pay to go in the castle to complete this trail. This Trail is fairly short at 1.5 miles and very suitable for wheelchairs and pushchairs as the route stays mostly on well-marked and ramped paths with just a couple of short diversions onto grassed areas."),
+            new Trail(2,"Trail2", "This is trail two"),
+            new Trail(3,"Trail3", "This is trail three"),
+            new Trail(4,"Trail4", "This is trail four"),
+            new Trail(5,"Trail5", "EDITING THIS")
+    );
+    int id;
+    String name;
+    String description;
+    int nLandmarks;
+    int difficulty; //1-5
+    String imgPath;
+
+    public Trail(int id, String name, String description) {
+        this.id = id;
+        this.name = name;
+        this.description = description;
+        imgPath = findImagePath();
+    }
+
+    private String findImagePath(){
+        /* Finds the image in the Path folder, if image is not found assigns default image */
+        String imgPath = "images/trails/trail" + id + ".jpg";
+        String notFoundPath = "images/trails/trailNotFound.jpg";
+
+        File imgFile = new File("src/main/resources/static/" + imgPath);
+        return imgFile.exists() ? imgPath : notFoundPath;
+    }
+}

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.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.servlet.ModelAndView;
+
+import java.util.ArrayList;
+import java.util.List;
+
+@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";
+    }
+
+    @GetMapping("/allTrails/{id}")
+    public ModelAndView getResultBySearchKey(@PathVariable int id)
+    {
+        List<Trail> trailList= Trail.trails;//results from db
+        ModelAndView mv= new ModelAndView("fragments/allTrailsFrags :: trailSection");
+        mv.addObject("trail", trailList.get(id-1));
+
+        return mv;
+    }
+}

src/main/resources/static/css/allTrails.css

+* {
+    box-sizing: border-box;
+}
+body {
+    background-color: rgb(41, 41, 41);
+    margin: 0;
+}
+main {
+}
+.centerFlex {
+    display: flex;
+    justify-content: center;
+}
+#allTrailsBar {
+    padding:0;
+    max-width: 80%;
+    height: 11svh;
+    margin: 1svh auto;
+    display: flex;
+    justify-content: space-between;
+    /*border-bottom: solid grey 2px;*/
+    /*border-top: solid grey 4px;*/
+
+}
+.trailsImages {
+    margin: auto;
+    height: 10svh;
+    width: 10svh;
+    border-radius: 20px;
+    border: solid grey 2px;
+    transition: 0.5s ease-out 100ms;
+
+}
+.trailsImages:hover {
+    box-shadow: 0 0 20px 10px #bbbb00;
+    transform: scale(1.2,1.2);
+    !important; overflow: visible;
+}
+
+.selected {
+    box-shadow: 0 0 20px 10px #bbbb00;
+}
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+main {
+    margin: 0;
+}
+
+#trailInfoContainer {
+    margin: auto;
+    width: 95svw;
+    min-height: 40svh;
+    min-width: 30svw;
+}
+
+.trailInfoFrag {
+    background-color: rgb(84, 33, 128);
+    border: #000000 solid 2px;
+    border-radius: 10px;
+    box-shadow: 0 5px 20px 0 #000000;
+    margin:0;
+    padding:0;
+    animation: fadeIn 3s;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-width: 30svh;
+
+    & h1 {
+        color: white;
+        grid-area: header;
+        margin: 10px 25%;
+        font-size: xx-large;
+        text-align: center;
+        border-bottom: #1e1e1e solid 2px;
+    }
+}
+
+#trailFragContent {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    overflow: hidden;
+    min-height: 40svh;
+    max-height: 60svh;
+
+    & img {
+        border-radius: 10px;
+        border: black solid 1px;
+        margin: 1%;
+        flex: 1 1;
+
+        min-width: 20%;
+        max-width: 40%;
+        min-height: 20svh;
+        max-height: 90%;
+        overflow: hidden;
+    }
+    & p {
+        color: white;
+        flex: 1 1;
+        padding: 5%;
+        width: 60%;
+        border-left: solid darkgrey 2px;
+        font-size: x-large;
+        text-align: justify;
+        text-justify: inter-character;
+        line-height: 1.5;
+    }
+}
+
+header {
+    box-shadow: #1e1e1e 0 0 10px 10px;
+}
+
+footer {
+    position: relative;
+    bottom: 0;
+}
\ No newline at end of file

src/main/resources/static/scripts/allTrails.js

+function updateOutputTrail(id) {
+    /* Updates the trail being shown on screen to the one requested by ID */
+    $.get("/allTrails/" + id).done(function (fragment) {
+        $("#trailInfoContainer").html(fragment)
+    });
+    updateSelectedTrail(id);
+}
+function updateSelectedTrail(id) {
+    /* Updates the trail bar, so that it highlights the selected trail */
+    let list = document.getElementsByClassName('trailsImages')
+    for (let i = 0; i < list.length; i++) {
+        if (list[i].classList.contains('selected')) {
+            list[i].classList.remove('selected')
+            break
+        }
+    }
+    document.getElementById("img" + id).classList.add("selected")
+}
\ No newline at end of file

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}">
+    <link rel="stylesheet" th:href="@{css/templatingstyle.css}">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+
+<header th:replace="~{/towns/Templating.html :: header}"></header>
+
+<main>
+    <section id="allTrailsBar" class="centerFlex">
+        <img class="trailsImages"
+             th:each="trail : ${trails}"
+             th:src="@{${trail.getImgPath()}}"
+             th:onclick="'updateOutputTrail('+ ${trail.getId()} +');'"
+             th:id="'img' + ${trail.getId()}" th:alt="${trail.getName()}"
+        >
+    </section>
+
+    <section id="trailInfoContainer">
+        <h1 class="centerFlex">Please select your trail</h1>
+        <!--Loaded from thymeleaf-->
+    </section>
+
+</main>
+<footer th:insert="~{/towns/Templating.html :: footer}"></footer>
+
+
+<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
+
+</body>
+</html>
\ No newline at end of file

src/main/resources/templates/fragments/allTrailsFrags.html

+<article th:fragment="trailSection" class="trailInfoFrag">
+    <h1 th:text="${trail.getName()}"></h1>
+
+    <div id="trailFragContent">
+        <img th:src="@{${trail.getImgPath()}}" th:alt="${trail.getName()} ">
+        <p th:text="${trail.getDescription()}"></p>
+    </div>
+
+
+    <!--TODO add more to this fragment and then add styling to it-->
+</article>

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