From 29f464d0dea12087108c8d419b46c631721c503b Mon Sep 17 00:00:00 2001
From: Gabriel Copat <copatg@cardiff.ac.uk>
Date: Tue, 5 Dec 2023 14:56:54 +0000
Subject: [PATCH] Added Controller and Display for Packs in sticker
---
.../smartTowns/rewards/RewardsController.java | 41 ++++++++++++++++++
src/main/resources/static/css/userProfile.css | 42 ++++++++++++++++---
src/main/resources/static/scripts/userPage.js | 11 +++++
.../templates/users/userProfile.html | 14 +++++--
4 files changed, 99 insertions(+), 9 deletions(-)
create mode 100644 src/main/java/team5/smartTowns/rewards/RewardsController.java
create mode 100644 src/main/resources/static/scripts/userPage.js
diff --git a/src/main/java/team5/smartTowns/rewards/RewardsController.java b/src/main/java/team5/smartTowns/rewards/RewardsController.java
new file mode 100644
index 00000000..ca4ba5db
--- /dev/null
+++ b/src/main/java/team5/smartTowns/rewards/RewardsController.java
@@ -0,0 +1,41 @@
+package team5.smartTowns.rewards;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.servlet.ModelAndView;
+import team5.smartTowns.users.User;
+import team5.smartTowns.users.UserRepository;
+
+import java.util.List;
+import java.util.Map;
+
+@Controller
+public class RewardsController {
+
+ @Autowired
+ RewardsRepository rewardsRepository;
+
+ @Autowired
+ UserRepository userRepository;
+
+ @GetMapping("/packInfo/{userID}/{packID}")
+ public ModelAndView getPackInfo(@PathVariable int userID, @PathVariable int packID) {
+ ModelAndView mav = new ModelAndView("users/userFrags :: stickersBox");
+ List<Sticker> allStickers = rewardsRepository.getAllStickersFromPack(packID);
+ Map<Long, Boolean> userStickers = userRepository.getStickers(userID);
+
+ for (Long stickerID : userStickers.keySet()) { //Finds and updates visibility of stickers based on what the user has
+ allStickers.stream()
+ .filter(sticker -> sticker.getId()==stickerID)
+ .findFirst().ifPresent(sticker -> sticker.setVisibility(userStickers.get(stickerID)));
+ }
+
+ mav.addObject("stickers", allStickers);
+
+ return mav;
+ }
+
+
+}
diff --git a/src/main/resources/static/css/userProfile.css b/src/main/resources/static/css/userProfile.css
index 0e567033..57265006 100644
--- a/src/main/resources/static/css/userProfile.css
+++ b/src/main/resources/static/css/userProfile.css
@@ -40,7 +40,7 @@
body {
background: linear-gradient(135deg, #f7e8fd, #9914d1);
- height: 100svh;
+ height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
@@ -55,8 +55,11 @@ main {
margin-top: 6em;
padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+ transition: all linear 2s;
-
+}
+.rewards {
+ position: relative;
}
.userInfo {
display: flex;
@@ -86,6 +89,7 @@ main {
-ms-scrollbar-darkshadow-color: transparent;
}
#packsBar {
+ position: static;
display: grid;
grid-template-areas:
"header"
@@ -110,20 +114,34 @@ main {
height: 1.2em;
}
- & #allBadgesContainer {
+ & #allPacksContainer {
margin-top: 3svh;
grid-area: packs;
- height: 10svh;
- align-content: center;
+ height: 12svh;
+ width: 100%;
display: flex;
+ justify-content: space-between;
@media only screen and (min-device-width: 501px) {
height: 20vw;
margin-top: 6vw;
}
}
+ & .packContainer{
+ position: relative;
+ height: 12svh;
+ width: 20vw;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: center;
+ overflow: visible;
+ }
+
& .packImg {
+ position: relative;
margin-inline: 3vw;
height: 8svh;
+ /*width: 25%;*/
z-index: 50;
@media only screen and (min-device-width: 501px) {
height: 15vw;
@@ -135,6 +153,15 @@ main {
transform: scale(1.5,1.5);
}
+ & .packName {
+ height: 4svh;
+ display: flex;
+ justify-content: center;
+ font-size: 2em;
+ overflow: hidden;
+ align-items: flex-end;
+
+ }
}
#stickersBox {
@@ -145,6 +172,7 @@ main {
/* border-bottom-right-radius: 2vw; */
/*background: linear-gradient(to bottom, darkgoldenrod, transparent 90%);*/
margin-top: -1%;
+ height: 500px;
& h2 {
font-size: 4em;
text-align: center;
@@ -360,4 +388,8 @@ header .footerButton:hover {
font-size: 0.6em;
opacity: 0;
transition: 0.5s ease-in-out 1ms;
+}
+
+.rewards {
+ transition: 1s ease-in-out 1ms;
}
\ No newline at end of file
diff --git a/src/main/resources/static/scripts/userPage.js b/src/main/resources/static/scripts/userPage.js
new file mode 100644
index 00000000..c61be8b1
--- /dev/null
+++ b/src/main/resources/static/scripts/userPage.js
@@ -0,0 +1,11 @@
+function updatePack(userid, packid) {
+ /* Updates the trail being shown on screen to the one requested by ID */
+ $.get("/packInfo/" + userid + "/" + packid).done(function (fragment) {
+ let stickerBox = $("#stickersBox");
+
+ stickerBox.fadeTo("slow", 0, function () {
+ stickerBox.html(fragment)
+ stickerBox.fadeTo("slow", 1);
+ })
+ });
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/users/userProfile.html b/src/main/resources/templates/users/userProfile.html
index f8132a5f..208d6029 100644
--- a/src/main/resources/templates/users/userProfile.html
+++ b/src/main/resources/templates/users/userProfile.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
<link rel="stylesheet" th:href="@{/css/userProfile.css}">
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
</head>
<body>
@@ -30,11 +31,16 @@
<!--TODO add some progression info here?-->
</div>
<section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
+ <h2>Packs</h2>
<article id="packsBar">
- <h2>Packs</h2> <!--Shows first earned badges, followed by greyed out badges-->
+ <!--Shows first earned badges, followed by greyed out badges-->
<div id="allPacksContainer" class="centerFlex">
- <img class="packImg" th:each="pack : ${packs}" th:src="@{'../' + ${pack.getDisplayImg()}}"
- th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}" >
+ <div th:each="pack : ${packs}" class="packContainer">
+ <h4 class="packName" th:text="${pack.getName()}"></h4>
+ <img class="packImg" th:src="@{'../' + ${pack.getDisplayImg()}}"
+ th:id="'packImg' + ${pack.getId()}" th:alt="${pack.getName()}"
+ th:onclick="'updatePack(' + ${user.getId()} +',' + ${pack.getId()} +');'">
+ </div>
</div>
</article>
@@ -49,7 +55,7 @@
<footer>
</footer>
-
+<script type="text/javascript" th:src="@{../scripts/userPage.js}"></script>
<script>
</script>
--
GitLab