From 065d43e49090d0a3037eda54d69a474477654632 Mon Sep 17 00:00:00 2001
From: Rhys Evans <EvansRM17@cardiff.ac.uk>
Date: Sun, 3 Dec 2023 20:29:42 +0000
Subject: [PATCH] Replacing ahrd-coded home page with current dynamic one
---
.../SmartTowns/Towns/TownController.java | 4 +-
.../Webpages/WebpageController.java | 10 +-
.../resources/static/css/homePageStyle.css | 169 +++++++-----
.../templates/Landmarks/LandmarkFormTh.html | 2 -
.../templates/towns/home/homePage.html | 58 ++--
.../templates/towns/home/homePageOld.html | 66 +++++
.../templates/towns/home/homePageTest.html | 258 ------------------
7 files changed, 206 insertions(+), 361 deletions(-)
create mode 100644 src/main/resources/templates/towns/home/homePageOld.html
delete mode 100644 src/main/resources/templates/towns/home/homePageTest.html
diff --git a/src/main/java/Team5/SmartTowns/Towns/TownController.java b/src/main/java/Team5/SmartTowns/Towns/TownController.java
index 8c2abdac..aa15a341 100644
--- a/src/main/java/Team5/SmartTowns/Towns/TownController.java
+++ b/src/main/java/Team5/SmartTowns/Towns/TownController.java
@@ -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);
diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
index b5b67317..37a30366 100644
--- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
@@ -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)
diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css
index e2f5323b..64f767d4 100644
--- a/src/main/resources/static/css/homePageStyle.css
+++ b/src/main/resources/static/css/homePageStyle.css
@@ -1,3 +1,4 @@
+
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 . . .";
+}
diff --git a/src/main/resources/templates/Landmarks/LandmarkFormTh.html b/src/main/resources/templates/Landmarks/LandmarkFormTh.html
index b54a9143..b77bb90e 100644
--- a/src/main/resources/templates/Landmarks/LandmarkFormTh.html
+++ b/src/main/resources/templates/Landmarks/LandmarkFormTh.html
@@ -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>
diff --git a/src/main/resources/templates/towns/home/homePage.html b/src/main/resources/templates/towns/home/homePage.html
index 0f80da58..2cdc1e85 100644
--- a/src/main/resources/templates/towns/home/homePage.html
+++ b/src/main/resources/templates/towns/home/homePage.html
@@ -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>
diff --git a/src/main/resources/templates/towns/home/homePageOld.html b/src/main/resources/templates/towns/home/homePageOld.html
new file mode 100644
index 00000000..bf35e662
--- /dev/null
+++ b/src/main/resources/templates/towns/home/homePageOld.html
@@ -0,0 +1,66 @@
+<!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>
diff --git a/src/main/resources/templates/towns/home/homePageTest.html b/src/main/resources/templates/towns/home/homePageTest.html
deleted file mode 100644
index b8ea329e..00000000
--- a/src/main/resources/templates/towns/home/homePageTest.html
+++ /dev/null
@@ -1,258 +0,0 @@
-<!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>
--
GitLab