diff --git a/src/main/java/Team5/SmartTowns/Towns/TownController.java b/src/main/java/Team5/SmartTowns/Towns/TownController.java index 8c2abdac6fb5f3038702b6bfea125630063de033..aa15a341da7fe2ef346f5278ae1a55faaa3136fc 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 b5b6731787e4026e270493e72a843f8c777b4f23..37a30366e5335d1870c202d1a49b4a5d2bca474d 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 e2f5323b6ec91ff58e271e98946cad37f8e260d4..64f767d40b32ccef413ea7b749e11356ef045aa4 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 b54a9143e3a41726670ad9acdb98c82b1cef3aca..b77bb90ece04cc582bc5fa5ea369bd8ba45e864b 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 0f80da587b942b6f12ef7bce29913df3fa077838..2cdc1e854fba95f89dd2da702bbeb6d5011ed5d8 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 0000000000000000000000000000000000000000..bf35e662607a4b2a101aeef83f3a05a65fd50ad2 --- /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 b8ea329eb71b6328a8e96fae7d294016f2d3b108..0000000000000000000000000000000000000000 --- 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>