From ef08c8d1c89dc91fd912b2d6826af88f57c0f710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20F=C3=BCrderer?= <l.fuerderer@gmail.com>
Date: Sun, 19 Jan 2020 18:48:09 +0100
Subject: [PATCH] Implement a prototype to add new articles

---
 .../hso/ecommerce/app/RequestController.java  |   5 +
 .../main/resources/static/img/product-8.jpg   | Bin 0 -> 8928 bytes
 .../templates/intern/addarticle.html          |  96 ++++++++++++++++++
 .../resources/templates/intern/articles.html  |  84 ++++++++++++++-
 4 files changed, 184 insertions(+), 1 deletion(-)
 create mode 100644 prototype/src/main/resources/static/img/product-8.jpg
 create mode 100644 prototype/src/main/resources/templates/intern/addarticle.html

diff --git a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
index 389f8ce..f487afb 100644
--- a/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
+++ b/prototype/src/main/java/org/hso/ecommerce/app/RequestController.java
@@ -91,6 +91,11 @@ public class RequestController {
         return "intern/accountingmanual";
     }
 
+    @GetMapping("/intern/addarticle")
+    public String addarticle() {
+        return "intern/addarticle";
+    }
+
     @GetMapping("/intern/articles")
     public String articles() {
         return "intern/articles";
diff --git a/prototype/src/main/resources/static/img/product-8.jpg b/prototype/src/main/resources/static/img/product-8.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cdb829dfd88d18c5080a71d9726c22b05ab53906
GIT binary patch
literal 8928
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
N8_@eV4=b#H`d^spdno__

literal 0
HcmV?d00001

diff --git a/prototype/src/main/resources/templates/intern/addarticle.html b/prototype/src/main/resources/templates/intern/addarticle.html
new file mode 100644
index 0000000..a208726
--- /dev/null
+++ b/prototype/src/main/resources/templates/intern/addarticle.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
+
+<head>
+   <meta charset="utf-8">
+   <title>e-commerce</title>
+   <link rel="stylesheet" th:href="@{/css/ecom.css}" />
+   <link rel="stylesheet" th:href="@{/css/listedArticles.css}" />
+   <script th:src="@{/js/filterTable.js}"></script>
+
+</head>
+
+<body>
+   <nav th:replace="/fragments/header :: header">Header</nav>
+   <main class="sidebar-layout content-width">
+      <nav th:replace="/fragments/intern :: sidebar">Header</nav>
+      <div class="content-width">
+         <h1>Gelistete Artikel</h1>
+
+         <h2>Artikel ins Sortiment aufnehmen</h2>
+         <form class="detailgrid">
+            <p class="m">
+               <label for="title">Titel</label>
+               <input class="linestyle full-width" type="text" name="title" value="Kamera" />
+            </p>
+            <p class="s">
+               <label for="ref-article">Refernzierter Artikel</label>
+               <input class="linestyle full-width" type="text" name="ref-article" value="A-8405" disabled />
+            </p>
+            <div class="spacer"></div>
+            <div class="m">
+               <p>
+                  <label for="img">Bild Hochladen</label>
+                  <input class="full-width" type="file" name="img" />
+               </p>
+               <p>
+                  <img th:src="@{/img/product-1.jpg}" class="m" />
+               </p>
+            </div>
+            <div class="s">
+               <p>
+                  <label for="price">Preis (Netto)</label>
+                  <input class="linestyle" type="number" step="0.01" name="price" value="84.45" /> EUR
+                  ( 19% Mwst. )<br>
+                  = 105.98 EUR Brutto
+               </p>
+               <p>
+                  <label for="max-price-buy">Maximaler Einkaufspreis (Netto)</label>
+                  <input class="linestyle" type="number" step="0.01" name="price" value="80.98" /> EUR
+               </p>
+               <p>
+                  <fieldset>
+                     <label for="is-active">Nachkaufen</label>
+                     <input type="radio" id="mc" name="is-active" value="true" checked> Automatisch nachbestellen
+                     <input type="radio" id="mc" name="is-active" value="false"> Nicht mehr nachkaufen
+                  </fieldset>
+               </p>
+            </div>
+
+            <div class="m">
+               <label for="tags">Kategorien</label>
+               <textarea name="tags" class="full-width" rows="6">
+Überwachung
+Elektronik
+               </textarea>
+               <p>
+                  Bitte schreiben Sie jede Kategorie in eine eigene Zeile
+               </p>
+            </div>
+
+            <div class="s">
+               <p>
+                  <label for="price">Einheiten pro Lagerplatz</label>
+                  <input class="linestyle" type="number" name="units-per-slot" value="20" />
+               </p>
+            </div>
+
+            <p class="l">
+               <label for="description">Beschreibung</label>
+               <textarea name="description" class="full-width" rows="15">
+Eine TOLLE Kamera
+Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein".
+Aber glaub mir, sie is echt echt TOLL!
+Indianerehrenwort!
+               </textarea>
+            </p>
+            <div class="l">
+               <button type="submit">Artikel hinzufügen</button>
+            </div>
+         </form>
+      </div>
+   </main>
+   <footer th:replace="/fragments/footer :: footer"></footer>
+</body>
+
+</html>
diff --git a/prototype/src/main/resources/templates/intern/articles.html b/prototype/src/main/resources/templates/intern/articles.html
index f67beb6..3e01432 100644
--- a/prototype/src/main/resources/templates/intern/articles.html
+++ b/prototype/src/main/resources/templates/intern/articles.html
@@ -5,6 +5,7 @@
    <meta charset="utf-8">
    <title>e-commerce</title>
    <link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}" />
+   <script th:src="@{/js/filterTable.js}"></script>
 </head>
 
 <body>
@@ -13,7 +14,88 @@
       <nav th:replace="/fragments/intern :: sidebar">Header</nav>
       <div class="content-width">
          <h1> Artikel</h1>
-         <p>TODO</p>
+         <p>
+            <table id="main-table">
+               <tr>
+                  <th colspan="8">
+                     <input type="text" placeholder="Filtern" class="smaller jsFilterTable full-width" data-target-id="main-table"></input>
+                  </th>
+               </tr>
+               <tr>
+                  <th>Bild</th>
+                  <th>Name</th>
+                  <th>Kaufpreis</th>
+                  <th>(Netto)</th>
+                  <th>Kategorien</th>
+                  <th>Herstellernummer</th>
+                  <th>Status</th>
+               </tr>
+
+               <tr>
+                  <td><img th:src="@{/img/product-1.jpg}" class="s" /></td>
+                  <td>Kamera</td>
+                  <td>87,77 €</td>
+                  <td> (73,76 €) </td>
+                  <td>Úberwachung, Elektronik</td>
+                  <td>A-5051</td>
+                  <td>Im Sortiment<br><a th:href="@{/intern/listedarticlesedit}">(bearbeiten)</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-2.jpg}" class="s" /></td>
+                  <td>Earbuds</td>
+                  <td>50,54 €</td>
+                  <td>(42,47 €)</td>
+                  <td>Kopfhörer, Elektronik</td>
+                  <td>A-840</td>
+                  <td>Im Sortiment<br><a th:href="@{/intern/listedarticlesedit}">(bearbeiten)</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-3.jpg}" class="s" /></td>
+                  <td>USB-Magic Light</td>
+                  <td>10,17 €</td>
+                  <td>(8,54 €)</td>
+                  <td>Sonstiges, Elektronik</td>
+                  <td>A-8401</td>
+                  <td>Im Sortiment<br><a th:href="@{/intern/listedarticlesedit}">(bearbeiten)</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-5.jpg}" class="s" /></td>
+                  <td>Ersatzfernbedinung</td>
+                  <td>7,08 €</td>
+                  <td>(5,95 €)</td>
+                  <td>Úberwachung, Elektronik</td>
+                  <td>A-4565</td>
+                  <td>Im Sortiment<br><a th:href="@{/intern/listedarticlesedit}">(bearbeiten)</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-6.jpg}" class="s" /></td>
+                  <td>Netzwerkkamera</td>
+                  <td>50,85 €</td>
+                  <td>(42,73 €)</td>
+                  <td>Úberwachung, Elektronik</td>
+                  <td>A-7580</td>
+                  <td>Nicht im Sortiment<br><a th:href="@{/intern/addarticle}">(aufnehmen)</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-7.jpg}" class="s" /></td>
+                  <td>USB 3.0 Festplattenkabel</td>
+                  <td>1,65 €</td>
+                  <td>(1,38 €)</td>
+                  <td>Kabel, Elektronik</td>
+                  <td>A-6107</td>
+                  <td>Nicht im Sortiment<br><a th:href="@{/intern/addarticle}">(aufnehmen)</a></td>
+               </tr>
+               <tr>
+                  <td><img th:src="@{/img/product-8.jpg}" class="s" /></td>
+                  <td>Ubiquiti Networks UAP-AC-PRO, weiß</td>
+                  <td>120,00 €</td>
+                  <td>(100,84 €)</td>
+                  <td>Netzwerk, Elektronik</td>
+                  <td>A-4933</td>
+                  <td>Nicht im Sortiment<br><a th:href="@{/intern/addarticle}">(aufnehmen)</a></td>
+               </tr>
+            </table>
+         <p>
       </div>
    </main>
    <footer th:replace="/fragments/footer :: footer"></footer>