impl. Notifications
This commit is contained in:
		@ -35,6 +35,11 @@ public class RequestController {
 | 
			
		||||
        return "/login";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @PostMapping("/login")
 | 
			
		||||
    public String loginPost() {
 | 
			
		||||
      return "redirect:/";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/register")
 | 
			
		||||
    public String register() {
 | 
			
		||||
        return "/register";
 | 
			
		||||
@ -50,11 +55,30 @@ public class RequestController {
 | 
			
		||||
        return "/shop/search";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/shop/checkout")
 | 
			
		||||
    public String shopCheckout() {
 | 
			
		||||
        return "/shop/checkout";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @PostMapping("/shop/checkoutFinish")
 | 
			
		||||
    public String shopCheckoutFinish() {
 | 
			
		||||
        return "/shop/checkoutFinish";
 | 
			
		||||
    }
 | 
			
		||||
    @GetMapping("/shop/checkoutFinish")
 | 
			
		||||
    public String shopCheckoutFinishGET() {
 | 
			
		||||
        return "/shop/checkoutFinish";
 | 
			
		||||
   }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/shop/articles/{id}")
 | 
			
		||||
    public String shopArticlesById() {
 | 
			
		||||
        return "/shop/articles/id";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @PostMapping("/shop/articles/{id}")
 | 
			
		||||
     public String shopArticlesByIdBuy() {
 | 
			
		||||
         return "redirect:/shop/checkout";
 | 
			
		||||
     }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/user/")
 | 
			
		||||
    public String user() {
 | 
			
		||||
        return "/user/index";
 | 
			
		||||
@ -68,12 +92,7 @@ public class RequestController {
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/user/orders/")
 | 
			
		||||
    public String userOrdeers() {
 | 
			
		||||
        return "/user/orders/";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/user/orders/{id}")
 | 
			
		||||
    public String userOrdersId() {
 | 
			
		||||
        return "/user/orders/id";
 | 
			
		||||
        return "/user/orders/index";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/user/bonuspoints")
 | 
			
		||||
@ -83,12 +102,7 @@ public class RequestController {
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/user/notifications/")
 | 
			
		||||
    public String userNotifications() {
 | 
			
		||||
        return "/user/notifications/";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/user/notifications/{id}")
 | 
			
		||||
    public String userNotificationsId() {
 | 
			
		||||
        return "/user/notifications/id";
 | 
			
		||||
        return "/user/notifications/index";
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    @GetMapping("/about")
 | 
			
		||||
 | 
			
		||||
@ -252,6 +252,28 @@ table tr:nth-child(2n+1) {
 | 
			
		||||
   background-color: var(--c-base-highlight);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
table.key-value {
 | 
			
		||||
   width: inherit;
 | 
			
		||||
   border-collapse: collapse;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
table.key-value th {
 | 
			
		||||
   text-align: right;
 | 
			
		||||
   font-family: "Fira Mono";
 | 
			
		||||
   text-transform: uppercase;
 | 
			
		||||
   background-color: var(--c-base);
 | 
			
		||||
   color: var(--c-black);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
table.key-value tr {
 | 
			
		||||
   background-color: var(--c-base);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
table.key-value td {
 | 
			
		||||
   text-align: left;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
img.xs {
 | 
			
		||||
   width: var(--u2);
 | 
			
		||||
@ -462,6 +484,22 @@ fieldset label {
 | 
			
		||||
   width: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.flowflex {
 | 
			
		||||
   display: flex;
 | 
			
		||||
   flex-direction: row;
 | 
			
		||||
   justify-content: stretch;
 | 
			
		||||
   flex-wrap: wrap;
 | 
			
		||||
}
 | 
			
		||||
.flowflex > * {
 | 
			
		||||
   padding: var(--u0);
 | 
			
		||||
   flex: 1;
 | 
			
		||||
}
 | 
			
		||||
.flowflex > *.spacer {
 | 
			
		||||
   padding-top: 0px;
 | 
			
		||||
   padding-bottom: 0px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.detailflex {
 | 
			
		||||
   display: flex;
 | 
			
		||||
   flex-direction: row;
 | 
			
		||||
@ -776,6 +814,28 @@ fieldset label {
 | 
			
		||||
 * CONTENT
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
.notification {
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.notification:hover {
 | 
			
		||||
   background-color: var(--c-base-highlight);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.notification.unread {
 | 
			
		||||
   background-color: var(--c-primary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.notification.unread > * {
 | 
			
		||||
   --c-primary: var(--root-c-primary-highlight);
 | 
			
		||||
   --c-primary-highlight: var(--root-c-primary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.notification.unread:hover {
 | 
			
		||||
   background-color: var(--c-primary);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.card {
 | 
			
		||||
   padding: var(--u0);
 | 
			
		||||
   background-color: var(--c-primary);
 | 
			
		||||
 | 
			
		||||
@ -0,0 +1,91 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
   <meta charset="utf-8">
 | 
			
		||||
   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
 | 
			
		||||
 | 
			
		||||
   <title>Meine Benachrichtigungen</title>
 | 
			
		||||
   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
   <nav th:replace="/fragments/header :: header">Header</nav>
 | 
			
		||||
 | 
			
		||||
   <div class="sidebar-layout content-width">
 | 
			
		||||
      <nav></nav>
 | 
			
		||||
      <div>
 | 
			
		||||
         <h1>Meine Benachrichtigungen</h1>
 | 
			
		||||
      </div>
 | 
			
		||||
   </div>
 | 
			
		||||
   <main class="sidebar-layout content-width">
 | 
			
		||||
      <nav th:replace="/fragments/customer :: sidebar"></nav>
 | 
			
		||||
      <div>
 | 
			
		||||
         <div class="grid xl">
 | 
			
		||||
            <section class="notification unread">
 | 
			
		||||
               <h2>Nachricht vom 17.08.2020, 14:38 Uhr</h2>
 | 
			
		||||
               <h3>Ihre Bestellung kommt voraussichtlich am Donnerstag, den 20.08.2020</h3>
 | 
			
		||||
               <p>
 | 
			
		||||
                  Vielen Dank für Ihre Bestellung der folgenden Artikel:<br>
 | 
			
		||||
                  <br>
 | 
			
		||||
                  2x tolle Kamera<br>
 | 
			
		||||
                  1x Bluetooth Kopfhörer<br>
 | 
			
		||||
                  3x USB-Magic Light<br>
 | 
			
		||||
                  <br>
 | 
			
		||||
                  Die Sendung wird Ihnen voraussichtlich am Donnerstag, den 20.08.2020 zugestellt.
 | 
			
		||||
                  Den aktuellen Status des Pakets können Sie jederzeit in der <a th:href="@{/shop/orders/}">Bestellübersicht</a> nachvollziehen.
 | 
			
		||||
               </p>
 | 
			
		||||
               <button type="button" name="button">Als gelesen makieren</button>
 | 
			
		||||
            </section>
 | 
			
		||||
            <section class="notification">
 | 
			
		||||
               <h2>Nachricht vom 15.08.2020, 16:38 Uhr</h2>
 | 
			
		||||
               <h3>Jetzt unsere Tagesangebote entdecken.</h3>
 | 
			
		||||
               <p>
 | 
			
		||||
                  Entdecken sie jetzt unseren neusten Angebote:
 | 
			
		||||
               </p>
 | 
			
		||||
               <div class="flowflex">
 | 
			
		||||
                  <div>
 | 
			
		||||
                     <a th:href="@{/shop/articles/1234}" class="section">
 | 
			
		||||
                        <h3>Lorem Ipsum</h3>
 | 
			
		||||
                        <img th:src="@{/img/product-2.jpg}" class="s" />
 | 
			
		||||
                        <p>Nur 15,00 €</p>
 | 
			
		||||
                     </a>
 | 
			
		||||
                  </div>
 | 
			
		||||
 | 
			
		||||
                  <div>
 | 
			
		||||
                     <a th:href="@{/shop/articles/1234}" class="section">
 | 
			
		||||
                        <h3>Stativ</h3>
 | 
			
		||||
                        <img th:src="@{/img/product-4.jpg}" class="s" />
 | 
			
		||||
                        <p>Nur 7,00 €</p>
 | 
			
		||||
                     </a>
 | 
			
		||||
                  </div>
 | 
			
		||||
 | 
			
		||||
                  <div>
 | 
			
		||||
                     <a th:href="@{/shop/articles/1234}" class="section">
 | 
			
		||||
                        <h3>Ersatzfernbedinung</h3>
 | 
			
		||||
                        <img th:src="@{/img/product-6.jpg}" class="s" />
 | 
			
		||||
                        <p>Nur 17,00 €</p>
 | 
			
		||||
                     </a>
 | 
			
		||||
                  </div>
 | 
			
		||||
               </div>
 | 
			
		||||
            </section>
 | 
			
		||||
            <section class="notification">
 | 
			
		||||
               <h2>Nachricht vom 13.08.2020, 14:38 Uhr</h2>
 | 
			
		||||
               <h3>Ihre Bestellung ist angekommen.</h3>
 | 
			
		||||
               <p>
 | 
			
		||||
                  Vielen Dank für Ihre Bestellung der folgenden Artikel:<br>
 | 
			
		||||
                  <br>
 | 
			
		||||
                  3x USB-Magic Light<br>
 | 
			
		||||
                  <br>
 | 
			
		||||
                  Ihre Bestellungen ist angekommen.
 | 
			
		||||
               </p>
 | 
			
		||||
            </section>
 | 
			
		||||
            <section class="spacer"></section>
 | 
			
		||||
            <section class="spacer"></section>
 | 
			
		||||
            <section class="spacer"></section>
 | 
			
		||||
         </div>
 | 
			
		||||
   </main>
 | 
			
		||||
   <footer th:replace="/fragments/footer :: footer"></footer>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
 | 
			
		||||
@ -0,0 +1,175 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
 | 
			
		||||
 | 
			
		||||
<head>
 | 
			
		||||
   <meta charset="utf-8">
 | 
			
		||||
   <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
 | 
			
		||||
 | 
			
		||||
   <title>Meine Bestellungen</title>
 | 
			
		||||
   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
 | 
			
		||||
</head>
 | 
			
		||||
 | 
			
		||||
<body>
 | 
			
		||||
   <nav th:replace="/fragments/header :: header">Header</nav>
 | 
			
		||||
 | 
			
		||||
   <div class="sidebar-layout content-width">
 | 
			
		||||
      <nav></nav>
 | 
			
		||||
      <div>
 | 
			
		||||
         <h1>Meine Bestellungen</h1>
 | 
			
		||||
      </div>
 | 
			
		||||
   </div>
 | 
			
		||||
   <main class="sidebar-layout content-width">
 | 
			
		||||
      <nav th:replace="/fragments/customer :: sidebar"></nav>
 | 
			
		||||
      <div class="content-width detailflex">
 | 
			
		||||
         <div>
 | 
			
		||||
            <h2 id="20202701"> Bestellung vom 27.01.2020 </h2>
 | 
			
		||||
            <div>
 | 
			
		||||
               <table class="key-value">
 | 
			
		||||
                  <tr>
 | 
			
		||||
                     <th>Lieferstatus</th>
 | 
			
		||||
                     <td><b>Unterwegs</b> <br /> Vorraussichtliche Ankunft: 29.01.2020</td>
 | 
			
		||||
                  </tr>
 | 
			
		||||
                  <tr>
 | 
			
		||||
                     <th>Sendeverfolgungsnummer</th>
 | 
			
		||||
                     <td>XE51451436DE</td>
 | 
			
		||||
                  </tr>
 | 
			
		||||
                  <tr>
 | 
			
		||||
                     <th>Eingelösste Bonuspunkte</th>
 | 
			
		||||
                     <td>10</td>
 | 
			
		||||
                  </tr>
 | 
			
		||||
               </table>
 | 
			
		||||
            </div>
 | 
			
		||||
            <table>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <th>Bild</th>
 | 
			
		||||
                  <th>Name</th>
 | 
			
		||||
                  <th>Menge</th>
 | 
			
		||||
                  <th>Preis (Brutto)</th>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-1.jpg}" class="s" /><a></td>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}">Kamera<a /></td>
 | 
			
		||||
                  <td> 1 </td>
 | 
			
		||||
                  <td>100,50 €</td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-2.jpg}" class="s" /><a /></td>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}">Earbuds<a /></td>
 | 
			
		||||
                  <td> 3 </td>
 | 
			
		||||
                  <td>63,95 €</td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <th></th>
 | 
			
		||||
                  <th></th>
 | 
			
		||||
                  <th>Position</th>
 | 
			
		||||
                  <th>Preis</th>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>Artikel (Netto)</td>
 | 
			
		||||
                  <td> 120,00 € </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>Bonuspunkte</td>
 | 
			
		||||
                  <td> 5,00 € </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>Umsatzsteuer (19%)</td>
 | 
			
		||||
                  <td> 42,00 € </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>
 | 
			
		||||
                     <h3>Gesammtpreis</h3>
 | 
			
		||||
                  </td>
 | 
			
		||||
                  <td>
 | 
			
		||||
                     <h3>240,79 €</h3>
 | 
			
		||||
                  </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
            </table>
 | 
			
		||||
         </div>
 | 
			
		||||
         <div>
 | 
			
		||||
            <h2 id="20200101"> Bestellung vom 01.01.2020 </h2>
 | 
			
		||||
            <div>
 | 
			
		||||
               <table class="key-value">
 | 
			
		||||
                  <tr>
 | 
			
		||||
                     <th>Lieferstatus</th>
 | 
			
		||||
                     <td><b>Angekommen</b> <br />  03.01.2020</td>
 | 
			
		||||
                  </tr>
 | 
			
		||||
                  <tr>
 | 
			
		||||
                     <th>Sendeverfolgungsnummer</th>
 | 
			
		||||
                     <td>XE5140684351DE</td>
 | 
			
		||||
                  </tr>
 | 
			
		||||
                  <tr>
 | 
			
		||||
                     <th>Gutgeschriebene Bonuspunkte</th>
 | 
			
		||||
                     <td>5</td>
 | 
			
		||||
                  </tr>
 | 
			
		||||
               </table>
 | 
			
		||||
            </div>
 | 
			
		||||
            <table>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <th>Bild</th>
 | 
			
		||||
                  <th>Name</th>
 | 
			
		||||
                  <th>Menge</th>
 | 
			
		||||
                  <th>Preis pro Artikel (Brutto)</th>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-1.jpg}" class="s" /><a></td>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}"> Billige Kamera<a /></td>
 | 
			
		||||
                  <td> 1 </td>
 | 
			
		||||
                  <td>40,50 €</td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-5.jpg}" class="s" /><a></td>
 | 
			
		||||
                  <td><a th:href="@{/shop/articles/4151}">Apfel<a /></td>
 | 
			
		||||
                  <td> 5 </td>
 | 
			
		||||
                  <td>1,00 €</td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <th></th>
 | 
			
		||||
                  <th></th>
 | 
			
		||||
                  <th>Position</th>
 | 
			
		||||
                  <th>Preis</th>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>Artikel (Netto)</td>
 | 
			
		||||
                  <td> 20,00 € </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>Umsatzsteuer (19%)</td>
 | 
			
		||||
                  <td> 5,00 € </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>Umsatzsteuer (7%)</td>
 | 
			
		||||
                  <td> 2,00 € </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
               <tr>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td></td>
 | 
			
		||||
                  <td>
 | 
			
		||||
                     <h3>Gesammtpreis</h3>
 | 
			
		||||
                  </td>
 | 
			
		||||
                  <td>
 | 
			
		||||
                     <h3>50,79 €</h3>
 | 
			
		||||
                  </td>
 | 
			
		||||
               </tr>
 | 
			
		||||
            </table>
 | 
			
		||||
         </div>
 | 
			
		||||
      </div>
 | 
			
		||||
   </main>
 | 
			
		||||
   <footer th:replace="/fragments/footer :: footer"></footer>
 | 
			
		||||
</body>
 | 
			
		||||
 | 
			
		||||
</html>
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user