From 5a96d03a0eacac4b4724c5b43d1ad1eb122e1e4e Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Fri, 24 Nov 2023 17:05:58 -0300
Subject: [PATCH] Refactored some files, testing out some javascript, jquery
and ajax
---
html-ideas/home.html | 78 ------------------
.../Webpages/WebpageController.java | 14 ++++
.../main/resources/static}/css/style.css | 70 ++++++++--------
.../main/resources/static}/images/badges.png | Bin
.../main/resources/static}/images/stats.png | Bin
.../main/resources/static}/images/trails.jpg | Bin
.../resources/static/scripts/gabScripts.js | 16 ++++
.../templates/fragments/temp_frags.html | 36 ++++++++
src/main/resources/templates/home.html | 52 ++++++++++++
9 files changed, 153 insertions(+), 113 deletions(-)
delete mode 100644 html-ideas/home.html
rename {html-ideas => src/main/resources/static}/css/style.css (81%)
rename {html-ideas => src/main/resources/static}/images/badges.png (100%)
rename {html-ideas => src/main/resources/static}/images/stats.png (100%)
rename {html-ideas => src/main/resources/static}/images/trails.jpg (100%)
create mode 100644 src/main/resources/static/scripts/gabScripts.js
create mode 100644 src/main/resources/templates/fragments/temp_frags.html
create mode 100644 src/main/resources/templates/home.html
diff --git a/html-ideas/home.html b/html-ideas/home.html
deleted file mode 100644
index 5a576891..00000000
--- a/html-ideas/home.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
- <title>Website Web</title>
- <link rel="stylesheet" href="./css/style.css">
-</head>
-
-<body>
- <header>
- <h1 class="header1">SMART-TOWNS</h1>
- </header>
-
- <main>
- <div class="mainTrails">
- <img src="./images/trails.jpg" alt="Trails" class="background">
- <div class="bannerText">
- <h1 class="bigTitle">Smart Town Trails</h1>
- <h2 class="smallTitle">Information about trails for your town</h2>
- </div>
- </div>
-
- <div class="trailList">
- <ul class="ulHeader">
- <li class="liHeader">Trail 1</li>
- <li class="selected">Trail 2</li>
- <li class="liHeader">Trail 3</li>
- <li class="liHeader">Trail 4</li>
- </ul>
- </div>
-
- <section class="mainBlock">
- <article class="trailStats">
- <h1 class="titleH1">Trail Stats</h1>
- <img src="images/stats.png" alt="Stats" class="stats">
- <div class="textStats">
- <p><b>Explored:</b> 60%</p>
- <p><b>Landmarks Visited:</b> 3/5</p>
- <p><b>Shops Visited:</b> 6/10</p>
- </div>
- </article>
- <article class="trailInfo">
- <h1 class="titleH1">Trail Info</h1>
- <p class="trailInfoTxt">Lorem ipsum dolor sit amet,
- consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi
- ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in
- voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
- </article>
- <article class="badgesBlock">
- <h1 class="titleH1">Badges</h1>
- <div class="badgesList">
- <img src="images/badges.png" alt="Badge" class="badgeImg">
- <img src="images/badges.png" alt="Badge" class="badgeImg">
- <img src="images/badges.png" alt="Badge" class="badgeImg">
- <img src="images/badges.png" alt="Badge" class="badgeImg">
- <img src="images/badges.png" alt="Badge" class="badgeImg">
- </div>
-
- </article>
- </section>
- </main>
-
- <footer>
- <ul class="footerBar">
- <li class="footerButton">Home</li>
- <li class="footerButton">About</li>
- <li class="footerButton">Map</li>
- <li class="footerButton">Facilities</li>
- <li class="footerButton">Search</li>
- </ul>
- </footer>
-</body>
-</html>
\ No newline at end of file
diff --git a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
index 9b6e9d2d..ba532c16 100644
--- a/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
+++ b/src/main/java/Team5/SmartTowns/Webpages/WebpageController.java
@@ -1,7 +1,10 @@
package Team5.SmartTowns.Webpages;
+import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.stereotype.Controller;
@Controller
@@ -26,6 +29,17 @@ public class WebpageController {
return modelAndView;
}
+ @GetMapping("/home")
+ public ModelAndView getHome(){
+ ModelAndView modelAndView = new ModelAndView("home");
+ return modelAndView;
+ }
+
+ @RequestMapping(value="/test_ajax_frag", method=RequestMethod.POST)
+ public String sendHtmlFragment(Model map) {
+ //map.addAttribute("foo", "bar");
+ return "fragments/temp_frags.html :: trailInfo2";
+ }
diff --git a/html-ideas/css/style.css b/src/main/resources/static/css/style.css
similarity index 81%
rename from html-ideas/css/style.css
rename to src/main/resources/static/css/style.css
index 8cc7e31d..c116f655 100644
--- a/html-ideas/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -10,11 +10,11 @@ body {
background-color: rgb(41, 41, 41);
margin: 0%;
}
-header {
+.headerBlock {
background-color: rgb(15, 15, 15);
padding-bottom: 20px;
box-shadow: 0 10px 20px black;
- .header1 {
+ .headerTitle {
text-align: center;
padding: 10px 10px 0 10px;
margin: 0 50px 0 50px;
@@ -25,48 +25,48 @@ header {
text-shadow: black 3px 3px 5px;
border-bottom: 3px blueviolet solid;
}
+ .headerBanner {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ height: 200px;
+ border-top: grey solid 2px;
+ border-bottom: grey solid 2px;
+
+ .bannerBack {
+ opacity: 0.6;
+ width: 100%;
+ left: 0;
+ top: 0;
+ position: absolute
+ }
+ .bigTitle {
+ color:white;
+ text-align: center;
+ position: relative;
+ font-size: 50px;
+ margin: 20px 20px 5px;
+ }
+ .smallTitle {
+ position: relative;
+ color:white;
+ text-align: center;
+ font-size: 20px;
+ margin: 5px 20px 20px;
+ }
+ }
}
+
.mainTrails{
overflow: hidden;
position: relative;
height: 200px;
border-top: grey solid 2px;
border-bottom: grey solid 2px;
-
-
- .background {
- opacity: 0.6;
- width: 100%;
- left: 0;
- top: 0;
- position: absolute
-
- }
- .bannerText{
- position: absolute;
- top:20%;
- margin:0;
- padding:0;
- transform: translateX(25%);
- }
- .bigTitle {
- color:white;
- text-align: center;
- position: relative;
- font-size: 50px;
- margin: 20px;
- margin-bottom: 5px;
- }
- .smallTitle {
- position: relative;
- color:white;
- text-align: center;
- font-size: 20px;
- margin: 20px;
- margin-top: 5px;
- }
}
.trailList {
.ulHeader {
diff --git a/html-ideas/images/badges.png b/src/main/resources/static/images/badges.png
similarity index 100%
rename from html-ideas/images/badges.png
rename to src/main/resources/static/images/badges.png
diff --git a/html-ideas/images/stats.png b/src/main/resources/static/images/stats.png
similarity index 100%
rename from html-ideas/images/stats.png
rename to src/main/resources/static/images/stats.png
diff --git a/html-ideas/images/trails.jpg b/src/main/resources/static/images/trails.jpg
similarity index 100%
rename from html-ideas/images/trails.jpg
rename to src/main/resources/static/images/trails.jpg
diff --git a/src/main/resources/static/scripts/gabScripts.js b/src/main/resources/static/scripts/gabScripts.js
new file mode 100644
index 00000000..3053fc23
--- /dev/null
+++ b/src/main/resources/static/scripts/gabScripts.js
@@ -0,0 +1,16 @@
+function selectTrail(string, element) {
+ console.log('Clicked')
+ let listEl = document.getElementsByClassName('liHeader')
+ for (let i = 0; i < listEl.length; i++) {
+ listEl[i].classList.remove('selected')
+ }
+ document.getElementById(string).classList.add("selected")
+
+}
+
+function updateOutput() {
+ $.post("test_ajax_frag").done(function (fragment) {
+ console.log(fragment);
+ $("#trailInfoBox").replaceWith(fragment);
+ });
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/temp_frags.html b/src/main/resources/templates/fragments/temp_frags.html
new file mode 100644
index 00000000..e2bd9778
--- /dev/null
+++ b/src/main/resources/templates/fragments/temp_frags.html
@@ -0,0 +1,36 @@
+<header th:fragment="header" class="headerBlock">
+ <h1 class="headerTitle">SMART-TOWNS</h1>
+ <div class="headerBanner">
+ <img src="images/trails.jpg" alt="Trails" class="bannerBack">
+<!-- <div class="bannerText">-->
+ <h1 class="bigTitle">Smart Town Trails</h1>
+ <h2 class="smallTitle">Information about trails for your town</h2>
+<!-- </div>-->
+ </div>
+</header>
+<footer th:fragment="footer">
+ <ul class="footerBar">
+ <li class="footerButton">Home</li>
+ <li class="footerButton">About</li>
+ <li class="footerButton">Map</li>
+ <li class="footerButton">Facilities</li>
+ <li class="footerButton">Search</li>
+ </ul>
+</footer>
+
+<article class="trailInfo" th:fragment="trailInfo1">
+ <h1 class="titleH1">Trail Info</h1>
+ <p class="trailInfoTxt">Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi
+ ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in
+ voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+</article>
+<article id="trailInfoBox" class="trailInfo" th:fragment="trailInfo2">
+ <h1 class="titleH1">Trail Info</h1>
+ <p class="trailInfoTxt">TESTTESTETSTESdent, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
+</article>
\ No newline at end of file
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
new file mode 100644
index 00000000..39906f23
--- /dev/null
+++ b/src/main/resources/templates/home.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Website Web</title>
+ <link rel="stylesheet" th:href="@{css/style.css}">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+
+<body>
+ <header th:replace="fragments/temp_frags.html :: header"></header>
+
+ <main>
+ <div class="trailList">
+ <ul class="ulHeader">
+ <li onclick="selectTrail('trail1', this)" class="liHeader" id="trail1" >Trail 1</li>
+ <li onclick="selectTrail('trail2', this)" class="liHeader selected" id="trail2" >Trail 2</li>
+ <li onclick="selectTrail('trail3', this)" class="liHeader" id="trail3" >Trail 3</li>
+ <li onclick="updateOutput()" class="liHeader" id="trail4" >Trail 4</li>
+ </ul>
+ </div>
+
+ <section class="mainBlock">
+ <article class="trailStats">
+ <h1 class="titleH1">Trail Stats</h1>
+ <img src="../static/images/stats.png" alt="Stats" class="stats">
+ <div class="textStats">
+ <p><b>Explored:</b> 60%</p>
+ <p><b>Landmarks Visited:</b> 3/5</p>
+ <p><b>Shops Visited:</b> 6/10</p>
+ </div>
+ </article>
+ <article id="trailInfoBox" class="trailInfo"></article>
+ <article class="badgesBlock">
+ <h1 class="titleH1">Badges</h1>
+ <div class="badgesList">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ <img src="../static/images/badges.png" alt="Badge" class="badgeImg">
+ </div>
+
+ </article>
+ </section>
+ </main>
+
+ <footer th:replace="fragments/temp_frags.html :: footer"></footer>
+ <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
+ <script type="text/javascript" th:src="@{scripts/gabScripts.js}"></script>
+</body>
+</html>
\ No newline at end of file
--
GitLab