Skip to content
Snippets Groups Projects
Commit e7a0ae20 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Created barebones Userpage, added default images for items in page. 

User Class and Controller updated to work with page
parent b0250707
No related branches found
No related tags found
1 merge request!25Resolve "As a user, I would like a place to see all my earned badges, so that I can track my progress."
Hide whitespace changes
Inline Side-by-side
Showing
with 180 additions and 9 deletions
src/main/java/Team5/SmartTowns/users/User.java
+ 12
− 0
View file @ e7a0ae20
......@@ -4,6 +4,7 @@ import Team5.SmartTowns.rewards.Badge;
import Team5.SmartTowns.rewards.Sticker;
import lombok.Data;
import java.io.File;
import java.util.HashMap;
import java.util.Map;
......@@ -13,6 +14,7 @@ public class User {
int id;
String email; //Validation would be done by email, since they will have that
String name;
String imgPath;
Map<Badge, Integer> badgeProgress = new HashMap<>(); // Demonstrates the progress towards a specific badge (0-100)
Map<Sticker, Boolean> hasStickers = new HashMap<>(); // True if User has sticker (key)
......@@ -21,5 +23,15 @@ public class User {
this.id = id;
this.email = email;
this.name = name;
imgPath = findImagePath();
}
private String findImagePath(){
/* Finds the image in the Path folder, if image is not found assigns default image */
String imgPath = "images/users/" + id + ".jpg";
String notFoundPath = "../images/users/0.png";
File imgFile = new File("src/main/resources/static/" + imgPath);
return imgFile.exists() ? "../" + imgPath : notFoundPath;
}
}
src/main/java/Team5/SmartTowns/users/UserController.java
+ 8
− 6
View file @ e7a0ae20
......@@ -2,6 +2,7 @@ package Team5.SmartTowns.users;
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 java.util.List;
......@@ -10,17 +11,18 @@ import java.util.List;
public class UserController {
/* TEMPORARY USER LIST --- TODO REPLACE IT WITH DATABASE LIST*/
List<User> users = List.of(
new User(1, "johndoe@gmail.com", "Chris Redfield"),
new User(2, "johndoe@gmail.com", "Claire Redfield"),
static List<User> users = List.of(
new User(1, "johndoe@gmail.com", "Claire Redfield"),
new User(2, "johndoe@gmail.com", "Albert Wesker"),
new User(3, "johndoe@gmail.com", "Leon Kennedy"),
new User(4, "johndoe@gmail.com", "Jill Valentine")
);
@GetMapping("/allTrails")
public ModelAndView getUserPage(){
@GetMapping("/user/{id}")
public ModelAndView getUserPage(@PathVariable int id){
ModelAndView mav = new ModelAndView("rewards/userProfile");
mav.addObject("trails", users); //Mock data for trails
users.stream().filter(user -> user.getId() == id).findFirst() //Convoluted way of finding the matching user to the id, probably easier to do a hashmap
.ifPresent(result -> mav.addObject("user", result));
return mav;
}
}
src/main/resources/static/css/templatingstyle.css
+ 24
− 2
View file @ e7a0ae20
* {
margin:0;
padding:0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #9f74be, #3e126b);
height: 100svh;
}
main {
background: #1e1e1e;
border-radius: 1vw;
margin-inline: max(1vw, 2em);
margin-block: 1svh;
width: min(90%, 90vw);
padding-block: 2svh;
padding-inline: 1vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
}
/* Header */
.headerBar {
border-bottom: 2px rgb(230, 230, 230) solid;
/*border-bottom: 2px rgb(230, 230, 230) solid;*/
margin-bottom: 20px;
display: flex;
background-color: rgb(84, 33, 128);
......@@ -63,7 +85,7 @@ footer {
display: flex;
justify-content: center;
background-color: rgb(84, 33, 128);
border-top: 2px rgb(230, 230, 230) solid;
/*border-top: 2px rgb(230, 230, 230) solid;*/
font-size: 1vw;
}
.footerBar{
......
src/main/resources/static/css/userProfile.css 0 → 100644
+ 88
− 0
View file @ e7a0ae20
.userInfo {
display: flex;
flex-direction: column;
padding: min(2vw, 4em);
text-align: center;
& #userPicture {
width: min(20vw, 20em);
margin-inline: auto;
border-radius: 100%;
border: solid #a2a2a2 4px;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
}
& h1 {
margin: 1svh 25%;
color:white;
border-bottom: #36454F solid 2px;
border-radius: 5vw;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
}
}
#badgesBar {
background-color: white;
border-radius: 1vw;
margin-inline: max(4vw, 3rem);
display: flex;
flex-direction: column;
& h2 {
margin-inline: 5vw;
padding-inline: 2vw;
margin-block: 0.5svh;
box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
border-bottom: #36454F solid 2px;
}
& .badgesContainer {
margin: 1svh 2vw;
padding: 1svh 1vw;
border-inline: solid rgba(194, 98, 188, 0.7) 5px;
border-radius: 10%;
background: linear-gradient(90deg, rgba(255, 215, 0, 0.75), rgba(184, 134, 11, 0.75));
overflow-x: scroll;
min(18svh, 12em);
align-content: center;
display: flex;
& .badge {
margin-inline: 3vw;
height: min(18svh, 10em);
}
}
}
#stickersBox {
display: flex;
flex-direction: column;
margin-block: 0.5svh;
margin-inline: 0.5vw;
border-radius: 2vw;
background: #9f74be;
& h2 {
font-size: 4em;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
border-bottom: #36454F solid 2px;
margin-block: 1svh;
margin-inline: 25%;
}
& .stickersContainer {
margin-block: 1svh;
display: grid;
grid-template-columns: repeat(4, 1fr);
& img {
width: 20vw;
}
}
}
.locked {
filter: grayscale(100%);
}
\ No newline at end of file
src/main/resources/static/images/users/0.png 0 → 100644
+ 0
− 0
View file @ e7a0ae20
src/main/resources/static/images/users/0.png

21.7 KiB

src/main/resources/templates/rewards/userProfile.html
+ 48
− 1
View file @ e7a0ae20
......@@ -2,9 +2,56 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title th:text="${user.getName()}"></title>
<title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
<link rel="stylesheet" th:href="@{/css/userProfile.css}">
<link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
</head>
<body>
<header></header>
<main>
<!--PICTURE - DATA - BADGES -->
<div class="userInfo">
<img th:src="@{${user.getImgPath()}}"
th:alt="${user.getName()}"
id="userPicture"
>
<h1 th:text="${user.getName()}"></h1>
<!--TODO add some progression info here?-->
</div>
<section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
<article id="badgesBar">
<h2>Your Badges: </h2> <!--Shows first earned badges, followed by greyed out badges-->
<div class="badgesContainer">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge locked">
<img src="../images/badges.png" alt="Badge" class="badge locked">
</div>
</article>
<article id="stickersBox"> <!--Need a controller to show earned stickers -->
<h2> STICKERS! </h2>
<div class="stickersContainer">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge locked">
<img src="../images/badges.png" alt="Badge" class="badge">
<img src="../images/badges.png" alt="Badge" class="badge locked">
<img src="../images/badges.png" alt="Badge" class="badge locked">
<img src="../images/badges.png" alt="Badge" class="badge">
</div>
</article>
</section>
</main>
<footer></footer>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment