Fakultas Ilmu Komputer UI

Commit 73e635e3 authored by RYAN PUTRA BUDIANTO's avatar RYAN PUTRA BUDIANTO
Browse files

polish ui and add quality of life features

parent fc25873e
......@@ -48,12 +48,19 @@ public class BaseController {
@GetMapping(path = "/articles")
@Timed("allarticles")
public String getArticles(Model model,Principal principal) {
model.addAttribute(usernameAttr, (principal != null) ? principal.getName() : "");
String username;
if (principal != null) {
model.addAttribute(usernameAttr, principal.getName());
username = principal.getName();
} else {
model.addAttribute(usernameAttr, "");
username = "";
}
List<Articles> allArticles = articleService.getAllArticles();
model.addAttribute("all_art",allArticles);
try{
model.addAttribute("user" , userService.getUserByName(principal.getName()));
model.addAttribute("user" , userService.getUserByName(username));
}
catch(Exception e){
logger.info("Not logged in.");
......
......@@ -29,12 +29,15 @@ public class CartController {
@GetMapping(path = {"", "/"})
public String getCartPage(Principal principal, Model model) {
String username;
if (principal != null) {
model.addAttribute(usernameAttr, principal.getName());
username = principal.getName();
} else {
model.addAttribute(usernameAttr, "");
username = "";
}
var cart = cartService.findCartByUsername(principal.getName());
var cart = cartService.findCartByUsername(username);
cartService.updateCart(cart);
model.addAttribute("cart", cart);
model.addAttribute("bookorders", cartService.getAllBookOrders(userService.getUserByName(principal.getName())));
......@@ -68,13 +71,16 @@ public class CartController {
@GetMapping(path = "/purchase")
@Timed("purchase")
public String purchaseCart(Principal principal, Model model) {
String username;
if (principal != null) {
model.addAttribute(usernameAttr, principal.getName());
username = principal.getName();
} else {
model.addAttribute(usernameAttr, "");
username = "";
}
var cart = cartService.findCartByUsername(principal.getName());
var user = userService.getUserByName(principal.getName());
var cart = cartService.findCartByUsername(username);
var user = userService.getUserByName(username);
cartService.updateCart(cart);
model.addAttribute("cart", cart);
model.addAttribute("bookorders", cartService.getAllBookOrders(userService.getUserByName(principal.getName())));
......@@ -94,12 +100,15 @@ public class CartController {
@GetMapping(path = "/purchase/scs")
public String purchaseCartSuccess(Principal principal, Model model) {
String username;
if (principal != null) {
model.addAttribute(usernameAttr, principal.getName());
username = principal.getName();
} else {
model.addAttribute(usernameAttr, "");
username = "";
}
cartService.clearCart(cartService.findCartByUsername(principal.getName()));
cartService.clearCart(cartService.findCartByUsername(username));
return "purchase-success";
}
}
......@@ -39,7 +39,8 @@ public class CuratorController {
@GetMapping(path={"/book-list/{page}", "/book-list"})
@Timed("booklist")
public String bookList(Model model, @PathVariable(required = false) Integer page){
public String bookList(Principal principal, Model model, @PathVariable(required = false) Integer page){
model.addAttribute("username", (principal != null) ? principal.getName() : "");
if(page == null) page = 0;
model.addAttribute("books", bookService.getBookPage(page));
model.addAttribute("page", page);
......@@ -93,7 +94,8 @@ public class CuratorController {
}
@GetMapping(path={ "/create-article"})
public String createArticle(Model model){
public String createArticle(Principal principal, Model model){
model.addAttribute("username", (principal != null) ? principal.getName() : "");
model.addAttribute("form", new CreateArticleForm());
return "article-create";
}
......@@ -129,8 +131,9 @@ public class CuratorController {
@GetMapping(path={"/genre-list/{page}", "/genre-list"})
@Timed("genrelist")
public String genreList(Model model, @PathVariable(required = false) Integer page){
public String genreList(Principal principal, Model model, @PathVariable(required = false) Integer page){
if(page == null) page = 0;
model.addAttribute("username", (principal != null) ? principal.getName() : "");
model.addAttribute(genresAttr, genreService.getGenrePage(page));
model.addAttribute("page", page);
return "genre-list";
......
......@@ -9,6 +9,8 @@ import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import java.security.Principal;
@Controller
@RequiredArgsConstructor
public class WishlistController {
......@@ -16,9 +18,11 @@ public class WishlistController {
private final BookServiceImpl bookService;
private final WishlistServiceImpl wishlistService;
private final static String usernameAttr = "username";
@GetMapping(path = {"/wishlist"})
public String getWishlist(Model model) {
public String getWishlist(Principal principal, Model model) {
model.addAttribute(usernameAttr, (principal != null) ? principal.getName() : "");
model.addAttribute("wishlist", wishlistService.getUserWishlist().getWishlistItems());
return "wishlist";
}
......
......@@ -59,8 +59,6 @@ body{
.cards_wrap .card_item .role_name{
color: black;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
......
......@@ -6,8 +6,76 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body{
background-color: #F2FCFD;
background-image: url("https://i.imgur.com/BnSpO0s.png");
height: 100%;
background-position: center;
background-repeat: repeat-y;
background-size: cover;
}
.header {
padding-bottom: 10px;
display:flex;
flex-direction: row;
align-items: center;
text-align: left;
background: #448498;
color: white;
font-size: 25px;
font-family: "Helvetica",serif;
}
/* Style the search box inside the navigation bar */
.search[type=text] {
float: left;
width: 80%;
padding: 6px;
border: none;
margin-right: 10px;
padding-left: 10px;
font-size: 17px;
}
.sign-in-text{
padding-top: 5px;
min-width: 150px;
}
.forminput{
width:100%;
}
.submit-button{
background: #448498;
border:0px;
height:40px;
width:50px;
}
</style>
</head>
<body>
<div class="header mb-4">
<div style="width: 1%"></div>
<a href="/"><img src="https://i.imgur.com/cyBT3sP.png" alt="RBS" width="100" height="100" style="padding-left: 5px"></a>
<a href="/"><img src="https://i.imgur.com/aREsEE8.png" alt="Ryan's Book Store" height="100"></a>
<div style="width: 1%"></div>
<div class="forminput">
<form id="search-form" th:action="@{/book/search/}" method="get">
<input id = "bookTitle" class="search" type="text" placeholder="Search by title..">
<button type="submit" class = "submit-button">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
</button>
</form>
</div>
<div style="width: 3%"></div>
<a href="/wishlist"><img src="https://i.imgur.com/HwTZHG8.png" class = "wishlist-button" alt="wishlist" height="40"></a>
<div style="width: 3%"></div>
<a href="/cart"><img src="https://i.imgur.com/EPveDOI.png" class = "cart-button" alt="cart" height="40"></a>
<div style="width: 3%"></div>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}"><img src="https://i.imgur.com/KxpWso4.png" class = "signin-button" alt="sign in" height="40" style="padding-right: 10px"></a>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}" class="sign-in-text" style="text-decoration: none; color: inherit" th:text="${username.isBlank()} ? 'Sign In' : ${username}"></a>
</div>
<div class="container">
<form action="" th:action="@{/curator/create-article}" enctype="multipart/form-data" method="post" id="input-form">
<div class="form-group">
......
......@@ -31,11 +31,11 @@
/* Style the search box inside the navigation bar */
.search[type=text] {
float: right;
width: 50%;
float: left;
width: 80%;
padding: 6px;
border: none;
margin-right: 2px;
margin-right: 10px;
padding-left: 10px;
font-size: 17px;
}
......@@ -43,18 +43,39 @@
padding-top: 5px;
min-width: 150px;
}
.forminput{
width:100%;
}
.submit-button{
background: #448498;
border:0px;
height:40px;
width:50px;
}
</style>
</head>
<body>
<div class="header">
<div class="header mb-4">
<div style="width: 1%"></div>
<a href="/"><img src="https://i.imgur.com/cyBT3sP.png" alt="RBS" width="100" height="100" style="padding-left: 5px"></a>
<a href="/"><img src="https://i.imgur.com/aREsEE8.png" alt="Ryan's Book Store" height="100"></a>
<div style="width: 1%"></div>
<input class="search" type="text" placeholder="Search by title..">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
<img src="https://i.imgur.com/KxpWso4.png" class = "signin-button" alt="sign in" height="40" style="padding-right: 10px">
<a href ="/profile" class="sign-in-text" style="text-decoration: none; color: inherit" th:inline="text">[[${#httpServletRequest.remoteUser}]]!</a>
<div class="forminput">
<form id="search-form" th:action="@{/book/search/}" method="get">
<input id = "bookTitle" class="search" type="text" placeholder="Search by title..">
<button type="submit" class = "submit-button">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
</button>
</form>
</div>
<div style="width: 3%"></div>
<a href="/wishlist"><img src="https://i.imgur.com/HwTZHG8.png" class = "wishlist-button" alt="wishlist" height="40"></a>
<div style="width: 3%"></div>
<a href="/cart"><img src="https://i.imgur.com/EPveDOI.png" class = "cart-button" alt="cart" height="40"></a>
<div style="width: 3%"></div>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}"><img src="https://i.imgur.com/KxpWso4.png" class = "signin-button" alt="sign in" height="40" style="padding-right: 10px"></a>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}" class="sign-in-text" style="text-decoration: none; color: inherit" th:text="${username.isBlank()} ? 'Sign In' : ${username}"></a>
</div>
<div class="container">
<h2>Book List</h2>
......
......@@ -53,10 +53,16 @@
width:50px;
}
.container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 5%;
}
</style>
</head>
<body>
<div th:fragment="myheader">
<div class="header">
<div style="width: 1%"></div>
......@@ -81,13 +87,15 @@
</div>
<div class="container">
<a href="/curator/book-list">
<h2 class="subtitle">Book List</h2>
<img src="https://i.imgur.com/FRCtuEl.png" class="book-list-button" alt="booklist" height="60" >
</a>
<div style="width: 2%"></div>
<a href="/curator/genre-list">
<h2 class="subtitle">Genre List</h2>
<img src="https://i.imgur.com/BihwhtS.png" class="genre-list-button" alt="genrelist" height="60" >
</a>
<div style="width: 2%"></div>
<a href="/curator/create-article">
<h2 class="subtitle">Create Article</h2>
<img src="https://i.imgur.com/UJ6Xcs1.png" class="create-article-button" alt="createarticle" height="60" >
</a>
</div>
</div>
......
......@@ -31,11 +31,11 @@
/* Style the search box inside the navigation bar */
.search[type=text] {
float: right;
width: 50%;
float: left;
width: 80%;
padding: 6px;
border: none;
margin-right: 2px;
margin-right: 10px;
padding-left: 10px;
font-size: 17px;
}
......@@ -43,19 +43,40 @@
padding-top: 5px;
min-width: 150px;
}
.forminput{
width:100%;
}
.submit-button{
background: #448498;
border:0px;
height:40px;
width:50px;
}
</style>
</head>
<body>
<div class="header">
<div style="width: 1%"></div>
<a href="/"><img src="https://i.imgur.com/cyBT3sP.png" alt="RBS" width="100" height="100" style="padding-left: 5px"></a>
<a href="/"><img src="https://i.imgur.com/aREsEE8.png" alt="Ryan's Book Store" height="100"></a>
<div style="width: 1%"></div>
<input class="search" type="text" placeholder="Search by title..">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
<img src="https://i.imgur.com/KxpWso4.png" class = "signin-button" alt="sign in" height="40" style="padding-right: 10px">
<a href ="/profile" class="sign-in-text" style="text-decoration: none; color: inherit" th:inline="text">[[${#httpServletRequest.remoteUser}]]!</a>
<div class="header mb-4">
<div style="width: 1%"></div>
<a href="/"><img src="https://i.imgur.com/cyBT3sP.png" alt="RBS" width="100" height="100" style="padding-left: 5px"></a>
<a href="/"><img src="https://i.imgur.com/aREsEE8.png" alt="Ryan's Book Store" height="100"></a>
<div style="width: 1%"></div>
<div class="forminput">
<form id="search-form" th:action="@{/book/search/}" method="get">
<input id = "bookTitle" class="search" type="text" placeholder="Search by title..">
<button type="submit" class = "submit-button">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
</button>
</form>
</div>
<div style="width: 3%"></div>
<a href="/wishlist"><img src="https://i.imgur.com/HwTZHG8.png" class = "wishlist-button" alt="wishlist" height="40"></a>
<div style="width: 3%"></div>
<a href="/cart"><img src="https://i.imgur.com/EPveDOI.png" class = "cart-button" alt="cart" height="40"></a>
<div style="width: 3%"></div>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}"><img src="https://i.imgur.com/KxpWso4.png" class = "signin-button" alt="sign in" height="40" style="padding-right: 10px"></a>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}" class="sign-in-text" style="text-decoration: none; color: inherit" th:text="${username.isBlank()} ? 'Sign In' : ${username}"></a>
</div>
<div class="container">
<h2>Genre List</h2>
<p th:inline="text">Page [[${page}]]</p>
......
......@@ -46,6 +46,13 @@
.forminput{
width:100%;
}
.submit-button{
background: #448498;
border:0px;
height:40px;
width:50px;
}
</style>
</head>
......@@ -58,7 +65,7 @@
<div class="forminput">
<form id="search-form" th:action="@{/book/search/}" method="get">
<input id = "bookTitle" class="search" type="text" placeholder="Search by title..">
<button type="submit">
<button class="submit-button" type="submit">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
</button>
</form>
......@@ -91,9 +98,10 @@
<div th:each="users :${user}">
<p th:text="${user.username}"></p>
<p th:text="'E-mail: ' + ${user.getEmail()}"></p>
<button type="button" th:onclick="|window.location.href='/edit-profile'|">Edit Information <List></List></button>
<button type="button" class="btn btn-primary" th:onclick="|window.location.href='/edit-profile'|">Edit Information <List></List></button>
<a href="/forgot_password" class="btn btn-primary">Change Password</a>
</div>
<button type="button" class="btn btn-primary" th:onclick="|window.location.href='/logout'|">Log Out<List></List></button>
</div>
</div>
</div>
......
......@@ -28,14 +28,28 @@
font-size: 25px;
font-family: "Helvetica",serif;
}
/* Style the search box inside the navigation bar */
.center{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.wishlist{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
button{
height: 40px;
}
.search[type=text] {
float: right;
width: 50%;
float: left;
width: 80%;
padding: 6px;
border: none;
margin-right: 2px;
margin-right: 10px;
padding-left: 10px;
font-size: 17px;
}
......@@ -43,33 +57,49 @@
padding-top: 5px;
min-width: 150px;
}
.forminput{
width:100%;
}
.submit-button{
background: #448498;
border:0px;
height:40px;
width:50px;
}
</style>
</head>
<body>
<div class="header">
<div class="header mb-4">
<div style="width: 1%"></div>
<a href="/"><img src="https://i.imgur.com/cyBT3sP.png" alt="RBS" width="100" height="100" style="padding-left: 5px"></a>
<a href="/"><img src="https://i.imgur.com/aREsEE8.png" alt="Ryan's Book Store" height="100"></a>
<div style="width: 1%"></div>
<input class="search" type="text" placeholder="Search by title..">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
<div class="forminput">
<form id="search-form" th:action="@{/book/search/}" method="get">
<input id = "bookTitle" class="search" type="text" placeholder="Search by title..">
<button type="submit" class = "submit-button">
<img src="https://i.imgur.com/WWk7FEt.png" class = "search-button" alt="search" height="40">
</button>
</form>
</div>
<div style="width: 3%"></div>
<a href="/wishlist"><img src="https://i.imgur.com/HwTZHG8.png" class = "wishlist-button" alt="wishlist" height="40"></a>
<div style="width: 3%"></div>
<a href="/cart"><img src="https://i.imgur.com/EPveDOI.png" class = "cart-button" alt="cart" height="40"></a>
<div style="width: 3%"></div>
<a th:href ="${'/profile'}"><img src="https://i.imgur.com/KxpWso4.png" class = "signin-button" alt="sign in" height="40" style="padding-right: 10px"></a>
<a th:href =" ${'/profile'}" class="sign-in-text" style="text-decoration: none; color: inherit" >Sign In</a>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}"><img src="https://i.imgur.com/KxpWso4.png" class = "signin-button" alt="sign in" height="40" style="padding-right: 10px"></a>
<a th:href ="${username.isBlank() ? '/login' : '/profile'}" class="sign-in-text" style="text-decoration: none; color: inherit" th:text="${username.isBlank()} ? 'Sign In' : ${username}"></a>
</div>
<div class="container">
<h1 class="title">WISHLIST</h1>
<div class="center">
<h1 class="title">Your Wishlist</h1>
<div class="list-group">
<div th:each="wishlist :${wishlist}">
<div class ="wishlist" th:each="wishlist :${wishlist}">
<a th:attr="onclick=|window.location.href='/book/${wishlist.getBookId()}'|" class="list-group-item list-group-item-action mt-3" th:text="${wishlist.getTitle()}"></a>
<button type="button" class="btn btn-danger btn-sm padding " th:attr="onclick=|window.location.href='/remove-wishlist/${wishlist.getBookId()}'|">Remove</button>
</div>
</div>
</div>
</div>
</body>
......
Supports Markdown
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