From 157545cae2e9bbba0f053d2d7a717b6fca0e358a Mon Sep 17 00:00:00 2001
From: Rhys Evans <EvansRM17@cardiff.ac.uk>
Date: Thu, 30 Nov 2023 17:05:59 +0000
Subject: [PATCH] Further work on dynamic home page banner(town) selection

---
 .../Team5/SmartTowns/Towns/TownStorage.java   |   1 +
 .../resources/static/css/homePageStyle.css    |   5 +
 .../templates/towns/home/homePageTest.html    | 219 ++++++++++++++----
 3 files changed, 183 insertions(+), 42 deletions(-)

diff --git a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
index 785e4b77..c56bb758 100644
--- a/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
+++ b/src/main/java/Team5/SmartTowns/Towns/TownStorage.java
@@ -13,6 +13,7 @@ public class TownStorage {
           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")
 
 
diff --git a/src/main/resources/static/css/homePageStyle.css b/src/main/resources/static/css/homePageStyle.css
index 6e2a91e3..e2f5323b 100644
--- a/src/main/resources/static/css/homePageStyle.css
+++ b/src/main/resources/static/css/homePageStyle.css
@@ -37,6 +37,10 @@ body{
     background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
 }
 
+.riscaBannerTrail{
+    background-image: linear-gradient(to right, darkslategrey , darkgoldenrod );
+}
+
 .caerphillyBanner{
     grid-area:townBannerC;
     background-image: url('/images/CaerphillyCastle.jpg');
@@ -60,6 +64,7 @@ body{
     background-position: left 65%;
     color: inherit;
     text-decoration: none;
+
 }
 
 .penarthBanner {
diff --git a/src/main/resources/templates/towns/home/homePageTest.html b/src/main/resources/templates/towns/home/homePageTest.html
index f4976d11..a9776fb7 100644
--- a/src/main/resources/templates/towns/home/homePageTest.html
+++ b/src/main/resources/templates/towns/home/homePageTest.html
@@ -5,69 +5,204 @@
   <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 , .riscaBanner,.penarthBanner{
+    margin-top: 20px;
+    background-color: darkslategrey;
+    margin-bottom: 20px;
+    border: solid 2px whitesmoke;
+    /*border colour here at .banner and .bannertrail*/
+    border-right: none;
+  }
+  .BannerTrail ,.riscaBannerTrail,.penarthBannerTrail{
+    background-color: darkslategrey;
+    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%);
+  }
+
+  .caerphillyBannerTrail{
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: solid 2px whitesmoke;
+    border-left: none;
+    background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%);
+  }
+
+  .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%);*/
+  }
+
+  /*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/
+
+  .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;
+  }
+
+  .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;
+  }
+  .caerphillyBannerTrail{
+    grid-area:townBannerDetsC;
+  }
+  /*.Banner th{*/
+  /*  grid-area:townBanner;*/
+  /*}*/
+  .BannerTrail th{
+    grid-area:townBannerDetsR
+  }
+  .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;
+
+  }
+  /*.Banner {*/
+  /*  grid-area:townBanner;*/
+  /*  background-color: #bbbb00;*/
+  /*  !*background-size: 10px 10px;*!*/
+  /*  !*background-repeat: no-repeat;*!*/
+  /*  !*background-position: left 78%;*!*/
+  /*  !*color: inherit;*!*/
+  /*  !*text-decoration: none;*!*/
+  /*}*/
+  .BannerTrail{
+    grid-area:townBannerDets;
+  }
+
+  #aboutUsFlavour{
+    grid-area: textFlavour;
+    margin-top: 25px;
+    margin-bottom: 15px;
+    color: whitesmoke;
+  }
+  #trailCount{
+    flex:1;
+
+
+    /*align-items: center;*/
+    /*justify-content: center;*/
+
+  }
+  #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 . .";
+  }
+
+
+
+
+</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}">
-
-
-
-
-
-
-
-
+      <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
+      <a class="submitLand" href="/landmarkSubmission">  <button> Submit Landmark!</button></a>
+<!--    <div th:text="${towns}">-->
     </div>
 
-    <ul th:each="town:${towns}">
-
-      <a href="/allTrails" class="caerphillyBanner">
-        <H2 th:text="${town.getName()}"> </H2></a>
+    <div th:each="town:${towns}" class="gridContainer2">
 
+      <a href="/allTrails" class="Banner"
+         th:style="'background:url('+ ${town.getImageTown()} +');'"
+         th:styleappend="'background-size: 850px 200px;'+'background-repeat: no-repeat;'+'background-position: left 78%;'"
 
-      <div class="caerphillyBannerTrail">
-        <div id="trailCountCaer" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
-        <div id="trailProgressCaer" th:text="${town.getTrailProgress()}"></div>
-      </div>
-      <!--    //goes through each student in list of students^^-->
-
-      <li th:text="${town.getName()}"></li>
+      >
 
-    </ul>
 
+        <H2 th:text="${town.getName()}"> </H2></a>
 
+      <div class="BannerTrail"
+      th:style=" ${town.getTrailProgress()==0 ? 'background-image:darkslategrey' :  'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey '}
 
-    <a href="/allTrails" class="caerphillyBanner">
-      <H2> Caerphilly</H2></a>
 
+<!--      'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey );'-->
+">
+        <div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>
+        <div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>
+      </div>
+<!--      <div class="BannerTrail"-->
+<!--           th:style="'background-image: linear-gradient(to left, darkgoldenrod ' +${town.getTrailProgress()}+ '%, darkslategrey );'">-->
+<!--        <div id="trailCount" th:text="'Trails: '+ ${town.getTrailNumber()}">Trails: </div>-->
+<!--        <div id="trailProgress" th:text="${town.getTrailProgress()}+'%'"></div>-->
+<!--      </div>-->
 
-    <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>
-- 
GitLab