localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

initial searchresult and detailview

Browse Source
This commit is contained in:
Hannes Huber 2020-01-11 16:39:34 +01:00
parent 0738a4402e
commit 213c5a2c94
7 changed files with 308 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
View File

@ -37,6 +37,12 @@ public class RequestController {
return "greeting"; return "greeting";
} }
@GetMapping("/articledetail")
public String articledetail() { return "articledetail";}
@GetMapping("/searchresults")
public String searchresults() { return "searchresults";}
@GetMapping("/login") @GetMapping("/login")
public String login(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) { public String login(@CookieValue(value = "loginToken", defaultValue = "") String loginToken, Model model) {
model.addAttribute(new Customer()); model.addAttribute(new Customer());

26
prototype/src/main/resources/static/css/articleDetail.css Normal file
View File

@ -0,0 +1,26 @@
.articledetail {
max-width: 100%;
padding: 2em;
background-color: var(--root-c-secondary);
}
.availability {
color: var(--c-primary);
}
.checkout {
border: 0px;
border-left: 2px;
border-color: var(--c-white);
border-style: solid;
}
.quantity {
display: flex;
}
.quantity label {
min-width: 5em;
margin-bottom: 0px;
padding-left: 15px;
}

7
prototype/src/main/resources/static/css/ecom.css
View File

@ -384,7 +384,7 @@ label {
box-shadow: none; box-shadow: none;
} }
.input-icon > button { .input-icon > form > button {
margin: 0px; margin: 0px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
@ -393,6 +393,8 @@ label {
} }
/* /*
* CONTENT * CONTENT
*/ */
@ -427,6 +429,3 @@ label {
} }
.container {
padding: 16px;
}

56
prototype/src/main/resources/static/css/searchResults.css Normal file
View File

@ -0,0 +1,56 @@
.container {
}
.searchresults {
max-width: 100%;
padding: 2em;
background-color: var(--root-c-secondary);
border: 0px;
}
.sidebar {
border: 0px;
border-right: 2px;
border-style: solid;
border-color: white;
}
.articlelist {
background-color: var(--root-c-secondary);
}
.article {
padding: 1em;
}
img {
width: 75%
}
h2 {
padding-bottom: 0px;
}
.articlelink {
color: var(--c-white);
background-color: var(--root-c-secondary);
border: 0px;
}
.articlelink:hover {
color: var(--c-primary)
}
h1 {
padding: 0px;
padding-bottom: 0.5em;
}
hr {
border-top: 2px solid white;
width: 75%;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
}

88
prototype/src/main/resources/templates/articleDetail.html Normal file
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>e-commerce</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/css/ecom.css" rel="stylesheet"/>
<link href="/css/articleDetail.css" rel="stylesheet"/>
</head>
<body>
<nav class='hero'>
<div class='content-width flex'>
<h1>Project eCommerce</h1>
<button>Angebote</button>
<div class='spacer input-icon secondary'>
<input type="text" placeholder="Nach Produkten suchen..."/>
<form action="/searchresults" method="GET">
<button class='searchbutton' type="submit">Finden</button>
</form>
</div>
<form class="button" action="/login" method="GET">
<button type="submit">Login</button>
</form>
</div>
</nav>
<main>
<div class="hero">
<div class="articledetail">
<div class="row">
<div class="picture col-4">
<img src="/img/product-1.jpg" />
</div>
<div class="articleinfo col-6">
<h2>Tolle Kamera</h2>
<p>25.14 €</p>
<p>
Eine TOLLE Kamera <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
Aber glaub mir, sie is echt echt TOLL! <br>
Indianerehrenwort!
</p>
</div>
<div class="checkout col-2">
<h2>50.28 €</h2>
<p class="availability">Auf Lager</p>
<br>
<form>
<div class="quantity row">
<label>Menge:</label>
<select size="1">
<option>2</option>
</select>
</div>
</form>
<br>
<br>
<button>In den Einkaufswagen</button>
</div>
</div>
</div>
</div>
</main>
<footer class="hero-black">
<div class='content-width flex'>
<h3>Project eCommerce</h3>
<div class="spacer"></div>
<div>
<h4>Seite</h4>
<ul>
<li><a>Login</a></li>
<li><a>Angebote</a></li>
<li><a>Suche</a></li>
<li><a>Mitarbeiter Login</a></li>
</ul>
</div>
<div>
<h4>Mehr</h4>
<ul>
<li><a>Nutzungsbedingungen</a></li>
<li><a>Datenschutz</a></li>
<li><a>Über</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>

4
prototype/src/main/resources/templates/fragments/header.html
View File

@ -11,7 +11,9 @@
<button>Angebote</button> <button>Angebote</button>
<div class='spacer input-icon secondary'> <div class='spacer input-icon secondary'>
<input type="text" placeholder="Nach Produkten suchen..."/> <input type="text" placeholder="Nach Produkten suchen..."/>
<button>Finden</button> <form class="button" th:action="@{/searchresults}" method="GET">
<button type="submit">Finden</button>
</form>
</div> </div>
<form class="button" th:action="@{/login}" method="GET"> <form class="button" th:action="@{/login}" method="GET">

126
prototype/src/main/resources/templates/searchResults.html Normal file
View File

@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>e-commerce</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/css/ecom.css" rel="stylesheet"/>
<link href="/css/searchResults.css" rel="stylesheet"/>
</head>
<body>
<nav class='hero'>
<div class='content-width flex'>
<h1>Project eCommerce</h1>
<button>Angebote</button>
<div class='spacer input-icon secondary'>
<input type="text" placeholder="Nach Produkten suchen..."/>
<form action="/searchresults" method="GET">
<button class='searchbutton' type="submit">Finden</button>
</form>
</div>
<form class="button" action="/login" method="GET">
<button type="submit">Login</button>
</form>
</div>
</nav>
<main>
<div class="hero">
<div class="searchresults">
<div class="row">
<div class="sidebar col-2">
<h1>Kategorie</h1>
<ul>
<li><span>Aufnahmegeräte</span></li>
<li><span>Computer</span></li>
<li><span>Fernseher</span></li>
<li><span>Handys</span></li>
<li><span>Unterhaltungselektronik</span></li>
<li><span>Sonstiges</span></li>
</ul>
</div>
<div class="articlelist col-10">
<div class="row article">
<div class="col-3 articleimg">
<img src="/img/product-1.jpg" />
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articledetail" method="GET">
<input type="submit" value="Tolle Kamera" class="articlelink">
</form>
</h2>
<h1> 25.14 €</h1>
<p>
Eine TOLLE Kamera <br>
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
Aber glaub mir, sie is echt echt TOLL! <br>
Indianerehrenwort!
</p>
</div>
</div>
<hr>
<div class="row article">
<div class="col-3 articleimg">
<img src="/img/product-2.jpg" />
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articledetail" method="GET">
<input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
</form>
</h2>
<h1> 10.14 €</h1>
<p>
Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
</p>
</div>
</div>
<hr>
<div class="row article">
<div class="col-3 articleimg">
<img src="/img/product-3.jpg" />
</div>
<div class="col-9 articledesc">
<h2>
<form action="/articledetail" method="GET">
<input type="submit" value="???" class="articlelink">
</form>
</h2>
<h1> 44.14 €</h1>
<p>
Ich weiß selbst nich was das genau sein soll.<br>
Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="hero-black">
<div class='content-width flex'>
<h3>Project eCommerce</h3>
<div class="spacer"></div>
<div>
<h4>Seite</h4>
<ul>
<li><a>Login</a></li>
<li><a>Angebote</a></li>
<li><a>Suche</a></li>
<li><a>Mitarbeiter Login</a></li>
</ul>
</div>
<div>
<h4>Mehr</h4>
<ul>
<li><a>Nutzungsbedingungen</a></li>
<li><a>Datenschutz</a></li>
<li><a>Über</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>