Skip to content
Snippets Groups Projects
Commit 207756f9 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Changed method of updaing trail data to a GET request.

Trails now load as nescessary instead of having all trails loaded and then hidding/unhiding as needed
parent 43a8e022
No related branches found
No related tags found
1 merge request!11Resolve "As a user, I want to see all trails across a town and seamlessly move between them."
......@@ -4,10 +4,14 @@ 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")
......@@ -21,4 +25,14 @@ public class TrailsController {
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("searchList", trailList.get(id-1));
return mv;
}
}
......@@ -30,6 +30,6 @@
}
.trailInfoBox {
opacity: 0;
/*opacity: 0;*/
}
......@@ -11,73 +11,27 @@
<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>
<a class="listA" th:onclick="'updateOutputTrail('+ ${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>
<section id="trailInfoBox"></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 updateOutputTrail(id) {
/* Updates the trail being shown on screen to the one requested by ID */
$.get("/allTrails/" + id).done(function (fragment) {
$("#trailInfoBox").html(fragment)
});
}
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)
clicked.style.display="block"
} else if (active !== clicked) {
fade(active);
active.style.display="none"
unfade(clicked)
clicked.style.display="block"
}
}
function selectTrail(string) {
function updateSelectedTrail(string) {
/* Updates the trail bar, so that it highlights the selected trail */
let listEl = document.getElementsByClassName('listA')
for (let i = 0; i < listEl.length; i++) {
listEl[i].classList.remove('selected')
......
<section th:fragment="trailSection" class="trailInfoBox">
<h1 th:text="${searchList.description}"></h1>
</section>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment