Commit b7378677 by Patryk Czarnik

products - wersja HTML z szablonem

parent 063c409e
......@@ -4,6 +4,7 @@ import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
......@@ -15,6 +16,13 @@ public class ProductController {
@Autowired
private ProductRepository productRepository;
@GetMapping(path="/products", produces="text/html")
public String getProducts(Model model) {
List<Product> products = productRepository.findAll();
model.addAttribute("products", products);
return "products.jsp";
}
@GetMapping(path="/products", produces="text/plain")
@ResponseBody
public String getProductsTxt() {
......@@ -27,5 +35,4 @@ public class ProductController {
}
return sb.toString();
}
}
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Katalog towarów</title>
<link rel="stylesheet" type="text/css" href="/styl.css"/>
</head>
<body>
<c:if test="${not empty basket and not empty basket.elements}">
<div class="basket">
<h4>Koszyk</h4>
<ul>
<c:forEach var="p" items="${basket.elements}">
<li>${p.productName}: ${p.quantity} × ${p.price} = <b>${p.value}</b></li>
</c:forEach>
</ul>
<p>Wartość koszyka: ${basket.totalValue}</p>
</div>
</c:if>
<h1>Wszystkie produkty</h1>
<c:forEach var="product" items="${products}">
<div class="product">
<img class="photo" src="/products/${product.id}/photo" alt=""/>
<p>Towar <a href="/products/${product.id}" class="product-name">${product.productName}</a></p>
<p>Cena: <span class="product-price">${product.price}</span></p>
<p class="product-description">${product.description}</p>
<div class="action"><a href="/products/${product.id}/edit">Edytuj</a></div>
<div class="action"><a href="/products/${product.id}/add-to-basket">Dodaj do koszyka</a></div>
</div>
</c:forEach>
<div><a href="/products/new">Dodaj nowy produkt</a></div>
<div><a href="/">Wróć na stronę główną</a></div>
</body>
</html>
@charset "UTF-8";
body {
background-color: #EEFFDD;
font-family: 'Arial', sans-serif;
}
h1, h4 {
text-align: center;
}
h2, h3, h4 {
margin-top: 0;
}
.product {
border: solid 2px blue;
margin: 1em 400px 1em 50px;
padding: 1em;
background-color: #DDFFDD;
width: 800px;
clear: right;
}
.basket {
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 400px;
background-color: white;
border: outset 3px green;
padding: 1em;
font-size: smaller;
}
.product-name, .product-price {
font-weight: bold;
font-size: larger;
}
.product-description {
font-style: italic;
}
.error {
color: red;
border: 4px solid red;
margin: 1em 400px 1em 50px;
padding: 1em;
background-color: white;
font-weight: bold;
}
.info {
color: green;
border: 4px solid green;
margin: 1em 400px 1em 50px;
padding: 1em;
background-color: white;
font-weight: bold;
min-width: 500px;
}
#wyszukiwarka {
background-color: #AAEEFF;
width: 800px;
border: 2px black solid;
margin: 1em 400px 1em 50px;
padding: 1em;
}
#product-form {
margin: 1em auto;
padding: 1em;
border: 4px solid blue;
background-color: #DDFFFF;
min-width: 500px;
max-width: 1000px;
}
#product-form textarea {
min-width: 360px;
}
.form-error {
color: red;
font-size: smaller;
}
div.action {
font-size: smaller;
font-family: 'Arial', sans-serif;
font-weight: bold;
background-color: #DDDDDD;
border: 2px #444466 outset;
padding: 6px;
margin: 4px auto 4px 4px;
max-width: 200px;
}
.action:hover {
background-color: #EEEEEE;
border: 2px #4455CC outset;
}
.action:active {
background-color: #EEEEEE;
border: 2px #CC4455 inset;
}
.action a {
display: inline-block;
color: inherit;
text-decoration: none;
width: 100%;
}
.action a:hover {
color: #0000CC;
}
.photo {
display: block;
float: right;
max-width: 300px;
max-height: 200px;
margin: 5px;
}
.data-table {
border-collapse: collapse;
border: 2px solid black;
background-color: #AAFFEE;
margin: 1em 100px;
}
.data-table th, .data-table td {
font-size: 0.95em;
padding: 2px 4px;
text-align: center;
border: 1px solid black;
}
.data-table th {
font-weight: bold;
background-color: #EE88DD;
}
Markdown is supported
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