Skip to content
Snippets Groups Projects
Commit 065d43e4 authored by Rhys Evans's avatar Rhys Evans
Browse files

Replacing ahrd-coded home page with current dynamic one

parent 1b7263ae
No related branches found
No related tags found
1 merge request!20Resolve "As a user I want to see a list of all available towns with trails so I can plan where to go"
Hide whitespace changes
Inline Side-by-side
Showing
with 206 additions and 361 deletions
src/main/java/Team5/SmartTowns/Towns/TownController.java
+ 2
− 2
View file @ 065d43e4
......@@ -9,9 +9,9 @@ import java.util.List;
@Controller
public class TownController {
@GetMapping("/townTest")
@GetMapping("/home")
public ModelAndView getTownList(){
ModelAndView modelAndView = new ModelAndView("Towns/home/homePageTest");
ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
TownStorage townsCurrent= new TownStorage().getInstance();
List<Towns> towns = townsCurrent.getTownList();
modelAndView.addObject("towns",towns);
......
src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+ 5
− 5
View file @ 065d43e4
......@@ -27,11 +27,11 @@ public class WebpageController {
return modelAndView;
}
@GetMapping("/home")
public ModelAndView getHome(){
ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
return modelAndView;
}
// @GetMapping("/home")
// public ModelAndView getHome(){
// ModelAndView modelAndView = new ModelAndView("Towns/home/homePage");
// return modelAndView;
// }
@RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
......
src/main/resources/static/css/homePageStyle.css
+ 106
− 63
View file @ 065d43e4
body{
background-color: rgb(41, 41, 41)
}
......@@ -8,122 +9,164 @@ body{
.submitLand{
grid-area: submitButton;
}
.caerphillyBanner , .riscaBanner,.penarthBanner{
.Banner {
margin-top: 20px;
background-color: darkslategrey;
margin-bottom: 20px;
border: solid 2px whitesmoke;
/*border: solid 2px whitesmoke;*/
/*border colour here at .banner and .bannertrail*/
border-right: none;
}
.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
background-color: darkslategrey;
/* .BannerTrail.Complete(100%) .BannerTrail.closeComplete(90-99%) .BannerTrail.nearComplete(70-99%) .BannerTrail.farComplete(50-69%) .BannerTrail.notComplete(0-49%) */
.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
margin-top: 20px;
margin-bottom: 20px;
border: solid 2px whitesmoke;
border-left: none;
text-align: center;
}
.penarthBannerTrail{
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%);
.BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
grid-area:townBannerDetsR
}
.caerphillyBannerTrail{
margin-top: 20px;
margin-bottom: 20px;
border: solid 2px whitesmoke;
border-left: none;
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
grid-area:townBannerDets;
}
.riscaBannerTrail{
background-image: linear-gradient(to right, darkslategrey , darkgoldenrod );
.BannerTrail {
background-color: darkslategrey;
}
.caerphillyBanner{
grid-area:townBannerC;
background-image: url('/images/CaerphillyCastle.jpg');
/*// from cadw*/
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 35%;
color: inherit;
text-decoration: none;
/*filter: grayscale(30%);*/
.BannerTrail.Complete {
background-color: gold;
border: 2px solid gold;
border-left: solid 2px whitesmoke;
}
.BannerTrail.closeComplete {
background-color: darkgoldenrod;
background-color: darkgoldenrod;
border: 2px solid darkgoldenrod;
border-left: solid 2px whitesmoke;
}
/*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/
.BannerTrail.nearComplete {
background-color: deepskyblue;
background-color: deepskyblue;
border: 2px solid deepskyblue;
border-left: solid 2px whitesmoke;
}
.riscaBanner {
/* #caerUrl{*/
grid-area: townBannerR;
background-image: url('/images/RiscaBanner.jpg');
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 65%;
color: inherit;
text-decoration: none;
.BannerTrail.farComplete {
background-color: green;
background-color: green;
border: 2px solid green;
border-left: solid 2px whitesmoke;
}
.BannerTrail.notComplete {
background-color: red;
background-color: red;
border: 2px solid red;
border-left: solid 2px whitesmoke;
}
.penarthBanner {
grid-area: townBannerP;
background-image: url('/images/PenarthBanner.jpg');
background-size: 850px 200px;
background-repeat: no-repeat;
background-position: left 78%;
color: inherit;
text-decoration: none;
/*Below selects banner that has the Complete class to change color*/
.Banner:has(+.BannerTrail.Complete){
border: 2px solid gold;
border-right: solid 2px whitesmoke;
}
.Banner:has(+.BannerTrail.closeComplete){
border: 2px solid darkgoldenrod;
border-right: solid 2px whitesmoke;
}
.Banner:has(+.BannerTrail.nearComplete){
border: 2px solid deepskyblue;
border-right: solid 2px whitesmoke;
}
.caerphillyBannerTrail{
grid-area:townBannerDetsC;
.Banner:has(+.BannerTrail.farComplete){
border: 2px solid green;
border-right: solid 2px whitesmoke;
}
.riscaBanner{
grid-area:townBannerR;
.Banner:has(+.BannerTrail.notComplete){
border: 2px solid red;
border-right: solid 2px whitesmoke;
}
.riscaBannerTrail{
grid-area:townBannerDetsR;
.BannerTrail {
background-color: darkslategrey;
}
.penarthBanner{
grid-area:townBannerP;
.Banner {
grid-area:townBanner;
color: inherit;
text-decoration: none;
background-color: hotpink;
}
.penarthBannerTrail{
grid-area:townBannerDetsP;
a{
background-size: contain;
}
#aboutUsFlavour{
grid-area: textFlavour;
margin-top: 25px;
margin-bottom: 15px;
color: whitesmoke;
}
#trailCountCaer,#trailCountRisca,#trailCountPenarth{
#trailCount{
flex:1;
/*align-items: center;*/
/*justify-content: center;*/
}
#trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{
#trailProgress{
flex:2;
align-content: center;
}
.gridContainer1{
.gridContainer1 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". pageTitle pageTitle pageTitle pageTitle ."
". . . submitButton submitButton ."
". townBannerC townBannerC townBannerDetsC . ."
". townBannerR townBannerR townBannerDetsR . ."
". townBannerP townBannerP townBannerDetsP . ."
" . . textFlavour . . .";
". . . submitButton submitButton .";
}
.gridContainer2 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". townBanner townBanner townBannerDets . .";
}
.gridContainer3 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
" . . textFlavour . . .";
}
src/main/resources/templates/Landmarks/LandmarkFormTh.html
+ 0
− 2
View file @ 065d43e4
......@@ -5,9 +5,7 @@
<title>Landmark Sign Up</title>
<link rel="stylesheet" th:href="@{css/landmarkFormStyle.css}">
<link rel="stylesheet" th:href="@{css/templatingstyle.css}">
<!-- <link rel="script" th:href="@{scripts/landmarkFormThScript.js}">-->
<script src="scripts/landmarkFormThScript.js"></script>
<!-- <style in="scripts/landmarkFormThScript.js"></style>-->
</head>
......
src/main/resources/templates/towns/home/homePage.html
+ 27
− 31
View file @ 065d43e4
......@@ -2,62 +2,58 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<title>VZTA - Smart Towns Trails</title>
<link rel="stylesheet" th:href="@{/css/homePageStyle.css}">
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head>
<body>
<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="gridContainer1">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
<a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
<a href="/allTrails" class="caerphillyBanner">
<H2> Caerphilly</H2></a>
<div class="caerphillyBannerTrail">
<div id="trailCountCaer">Trails: 3</div>
<div id="trailProgressCaer">70%</div>
</div>
<a href="/allTrails" class="riscaBanner">
<H2> Risca</H2> </a>
<div class="riscaBannerTrail">
<div id="trailCountRisca">Trails: 2</div>
<div id="trailProgressRisca">0%</div>
<div class="gridContainer1">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
<a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
<!-- <div th:text="${towns}">-->
</div>
<div th:each="town:${towns}" class="gridContainer2">
<a href="/allTrails" class="penarthBanner">
<H2> Penarth</H2> </a>
<div class="penarthBannerTrail">
<div id="trailCountPenarth">Trails: 5</div>
<div id="trailProgressPenarth">60%</div>
</div>
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
the trails and towns and resultant awards written in an excitable manner!!</div>
<a href="/allTrails" class="Banner"
th:style="'background:url('+ ${town.getImageTown()} +');'"
th:styleappend="'background-size: 80vw 24vh;'+'background-repeat: no-repeat;'+'background-position: left 30%;'" />
</div>
<H2 th:text="${town.getName()}"> </H2></a>
<div class="BannerTrail"th:classappend="|${town.getTrailProgress()==100 ? 'Complete' : ''} ${town.getTrailProgress()<100 and town.getTrailProgress()>=90 ? 'closeComplete' : ''''} ${town.getTrailProgress()<90 and town.getTrailProgress()>=70 ? 'nearComplete' : ''''} ${town.getTrailProgress()<70 and town.getTrailProgress()>=50 ? 'farComplete' : ''''} ${town.getTrailProgress()<50 ? 'notComplete' : ''''}|"
>
<!--Rough class append used to distinguish progress, using a class append based on progress can allow for further customisation to banners later on
rough % outline;
100 -gold
90-99 - darkgold
70-89 - blue
50-69-green
0-49-red-->
<div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
<div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>
</div>
</div>
<div class="gridContainer3">
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
the trails and towns and resultant awards written in an excitable manner!!</div>
</div>
</main>
<footer th:insert="~{/towns/Templating.html::footer}"></footer>
......
src/main/resources/templates/towns/home/homePageOld.html 0 → 100644
+ 66
− 0
View file @ 065d43e4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">-->
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head>
<body>
<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="gridContainer1">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
<a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
<a href="/allTrails" class="caerphillyBanner">
<H2> Caerphilly</H2></a>
<div class="caerphillyBannerTrail">
<div id="trailCountCaer">Trails: 3</div>
<div id="trailProgressCaer">70%</div>
</div>
<a href="/allTrails" class="riscaBanner">
<H2> Risca</H2> </a>
<div class="riscaBannerTrail">
<div id="trailCountRisca">Trails: 2</div>
<div id="trailProgressRisca">0%</div>
</div>
<a href="/allTrails" class="penarthBanner">
<H2> Penarth</H2> </a>
<div class="penarthBannerTrail">
<div id="trailCountPenarth">Trails: 5</div>
<div id="trailProgressPenarth">60%</div>
</div>
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
the trails and towns and resultant awards written in an excitable manner!!</div>
</div>
</main>
<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body>
</html>
src/main/resources/templates/towns/home/homePageTest.html deleted 100644 → 0
+ 0
− 258
View file @ 1b7263ae
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" th:href="@{/css/homePageStyle.css}">-->
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
<style>
body{
background-color: rgb(41, 41, 41)
}
#homeTitle{
grid-area: pageTitle;
color: whitesmoke;
}
.submitLand{
grid-area: submitButton;
}
.Banner {
margin-top: 20px;
background-color: darkslategrey;
margin-bottom: 20px;
/*border: solid 2px whitesmoke;*/
/*border colour here at .banner and .bannertrail*/
border-right: none;
}
.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete {
/*background-color: darkslategrey;*/
margin-top: 20px;
margin-bottom: 20px;
border: solid 2px whitesmoke;
/*border-left: none;*/
text-align: center;
}
/* .BannerTrail.Complete .BannerTrail.closeComplete .BannerTrail.nearComplete .BannerTrail.farComplete .BannerTrail.notComplete */
.BannerTrail th, .BannerTrail.Complete th, .BannerTrail.closeComplete th, .BannerTrail.nearComplete th, .BannerTrail.farComplete th, .BannerTrail.notComplete th{
grid-area:townBannerDetsR
}
.BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{
grid-area:townBannerDets;
}
.BannerTrail {
background-color: darkslategrey;
}
.BannerTrail.Complete {
background-color: gold;
border: 2px solid gold;
border-left: solid 2px whitesmoke;
}
.BannerTrail.closeComplete {
background-color: darkgoldenrod;
background-color: darkgoldenrod;
border: 2px solid darkgoldenrod;
border-left: solid 2px whitesmoke;
}
.BannerTrail.nearComplete {
background-color: deepskyblue;
background-color: deepskyblue;
border: 2px solid deepskyblue;
border-left: solid 2px whitesmoke;
}
.BannerTrail.farComplete {
background-color: green;
background-color: green;
border: 2px solid green;
border-left: solid 2px whitesmoke;
}
.BannerTrail.notComplete {
background-color: red;
background-color: red;
border: 2px solid red;
border-left: solid 2px whitesmoke;
}
/*Below selects banner that has the Complete class to change color*/
.Banner:has(+.BannerTrail.Complete){
border: 2px solid gold;
border-right: solid 2px whitesmoke;
}
.Banner:has(+.BannerTrail.closeComplete){
border: 2px solid darkgoldenrod;
border-right: solid 2px whitesmoke;
}
.Banner:has(+.BannerTrail.nearComplete){
border: 2px solid deepskyblue;
border-right: solid 2px whitesmoke;
}
.Banner:has(+.BannerTrail.farComplete){
border: 2px solid green;
border-right: solid 2px whitesmoke;
}
.Banner:has(+.BannerTrail.notComplete){
border: 2px solid red;
border-right: solid 2px whitesmoke;
}
.BannerTrail {
background-color: darkslategrey;
}
.Banner {
grid-area:townBanner;
/*background-size: 10px 10px;*/
/*background-size: contain;*/
/*background-position: left 78%;*/
color: inherit;
text-decoration: none;
background-color: hotpink;
}
a{
background-size: contain;
}
#aboutUsFlavour{
grid-area: textFlavour;
margin-top: 25px;
margin-bottom: 15px;
color: whitesmoke;
}
#trailCount{
flex:1;
}
#trailProgress{
flex:2;
align-content: center;
}
.gridContainer1 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". pageTitle pageTitle pageTitle pageTitle ."
". . . submitButton submitButton .";
}
.gridContainer2 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". townBanner townBanner townBannerDets . .";
}
.gridContainer3 {
display:grid;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
" . . textFlavour . . .";
}
.a .banner{
background-color: #36454F;
}
</style>
</head>
<body>
<header th:insert="~{/towns/Templating.html::header}"></header>
<main>
<div class="gridContainer1">
<H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
<a class="submitLand" href="/landmarkSubmission"> <button> Submit Landmark!</button></a>
<!-- <div th:text="${towns}">-->
</div>
<div th:each="town:${towns}" class="gridContainer2">
<a href="/allTrails" class="Banner"
th:style="'background:url('+ ${town.getImageTown()} +');'"
th:styleappend="'background-size: 80vw 24vh;'+'background-repeat: no-repeat;'+'background-position: left 30%;'" />
<H2 th:text="${town.getName()}"> </H2></a>
<div class="BannerTrail"th:classappend="|${town.getTrailProgress()==100 ? 'Complete' : ''} ${town.getTrailProgress()<100 and town.getTrailProgress()>=90 ? 'closeComplete' : ''''} ${town.getTrailProgress()<90 and town.getTrailProgress()>=70 ? 'nearComplete' : ''''} ${town.getTrailProgress()<70 and town.getTrailProgress()>=50 ? 'farComplete' : ''''} ${town.getTrailProgress()<50 ? 'notComplete' : ''''}|"
>
<!--Rough class append used to distinguish progress, using a class append based on progress can allow for further customisation to banners later on
rough % outline;
100 -gold
90-99 - darkgold
70-89 - blue
50-69-green
0-49-red-->
<div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
<div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>
</div>
</div>
<div class="gridContainer3">
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
the trails and towns and resultant awards written in an excitable manner!!</div>
</div>
<div class="aa aa">asdasdasdf gsddfsfsadf</div>
</main>
<footer th:insert="~{/towns/Templating.html::footer}"></footer>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment