Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • d1656298/client-project
  • d1634883/client-project
2 results
Show changes
Commits on Source (3)
......@@ -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'
......
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 {
}
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;
}
}
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("searchList", trailList.get(id-1));
return mv;
}
}
.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;*/
}
/* Functions taken from https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css*/
<!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="'updateOutputTrail('+ ${trail.id} +');'" th:id="'li' + ${trail.id}" th:text="${trail.name}"></a>
</li>
</ul>
</header>
<main>
<section id="trailInfoBox"></section>
</main>
<script type="text/javascript" th:src="@{scripts/allTrails.js}"></script>
<script th:inline="javascript">
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 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')
}
document.getElementById(string).classList.add("selected")
}
</script>
</body>
</html>
\ No newline at end of file
test
\ No newline at end of file
<section th:fragment="trailSection" class="trailInfoBox">
<h1 th:text="${searchList.description}"></h1>
</section>
\ No newline at end of file
......@@ -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