diff --git a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java index c56bb7582da0545d4d21f46a5c29f517c66f2a49..d2d99ea992086630324fa131ad5bb410acd3c425 100644 --- a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java +++ b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java @@ -12,9 +12,13 @@ public class TownStorage { townList.addAll( List.of( new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"), - new Towns("Risca",02,2,0,"/images/RiscaBanner.jpg"), - new Towns("Penarth",03,5,60,"/images/PenarthBanner.jpg"), - new Towns("Penarth",03,5,60,"/images/PenarthBanner.jpg") + new Towns("Risca",02,2,34,"/images/RiscaBanner.jpg"), + new Towns("Penarth",03,5,0,"/images/PenarthBanner.jpg"), + new Towns("Penarth",03,5,50,"/images/PenarthBanner.jpg"), + new Towns("Caerphilly",01,3,70,"/images/CaerphillyCastle.jpg"), + new Towns("Risca",02,2,90,"/images/RiscaBanner.jpg"), + new Towns("Penarth",03,5,100,"/images/PenarthBanner.jpg") + ) diff --git a/src/main/resources/templates/towns/home/homePageTest.html b/src/main/resources/templates/towns/home/homePageTest.html index 4f98efd71d3b9b67924fc80bb089c546a7f995f0..b8ea329eb71b6328a8e96fae7d294016f2d3b108 100644 --- a/src/main/resources/templates/towns/home/homePageTest.html +++ b/src/main/resources/templates/towns/home/homePageTest.html @@ -21,11 +21,11 @@ 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; } - .BannerTrail, .BannerTrail.overSixty, .BannerTrail.underSixty { + .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete { /*background-color: darkslategrey;*/ margin-top: 20px; margin-bottom: 20px; @@ -34,30 +34,79 @@ text-align: center; } - .BannerTrail th, .BannerTrail.overSixty th, .BannerTrail.underSixty{ + /* .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.overSixty, .BannerTrail.underSixty{ + .BannerTrail, .BannerTrail.Complete, .BannerTrail.closeComplete, .BannerTrail.nearComplete, .BannerTrail.farComplete, .BannerTrail.notComplete{ grid-area:townBannerDets; } - .BannerTrail.overSixty { - background-color: green; - - } .BannerTrail { background-color: darkslategrey; } - .BannerTrail.underSixty { + .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; @@ -160,10 +209,16 @@ <H2 th:text="${town.getName()}"> </H2></a> - <div class="BannerTrail" - th:classappend="(${town.getTrailProgress()>60}?'overSixty' :'underSixty')"> -<!--Rough class append used to distinguish progress, using a class append based on progress can allow for further customisation to banners later on. this only works for -a single % point though, todo research this further in the future--> + <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>