Implement some session storage magic for back buttons

prototype/src/main/resources/static/js/back.js

@@ -0,0 +1,31 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+   let back = document.getElementsByClassName('back')[0];
+   if (!back) {
+      return;
+   }
+
+   let group = back.dataset.group || 'default';
+   let name = back.dataset.name;
+   let insert = back.dataset.insert == "true";
+
+   if (name) {
+      window.sessionStorage.setItem('back-' + 'group', JSON.stringify({
+         'text': name,
+         'location': window.location.toString()
+      }));
+   }
+
+   let history = JSON.parse(window.sessionStorage.getItem('back-' + 'group'));
+   if (insert && history) {
+
+      let a = document.createElement("a");
+      a.href = "#";
+      a.onclick = function() {
+         window.location = history.location;
+      };
+
+      a.innerText = history.text || 'Zurück';
+      back.appendChild(a);
+   }
+
+});

prototype/src/main/resources/templates/fragments/intern.html

@@ -13,7 +13,7 @@
          <ul>
             <li><a th:href="@{/intern/}">Dashboard</a>
             </li>
-            <li><a th:href="@{/intern/listedArticles/}">Gelsistete Artikel</a>
+            <li><a th:href="@{/intern/listedArticles/}">Gelistete Artikel</a>
                <ul>
                   <li><a th:href="@{/intern/articles/}">Händlerangebote</a>
                   </li>

prototype/src/main/resources/templates/intern/accounting/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Alle Buchungen</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zu allen Buchungen." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/accounting/main.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Hauptbuchungskonto</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zu den Hauptbuchungen." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/accounting/vat.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Mehrwertsteuerkonto</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zu den Mehrwertsteuerbuchungen." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/articles/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Übersicht der von Lieferanten angebotenen Artikel</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zur Übersicht der von Lieferanten angebotenen Artikel." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/customerOrders/id.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Bestellung 1010</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-insert="true"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/customerOrders/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Bestellungen</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zu den Kunden Bestellungen." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/customers/id.html

@@ -23,6 +23,9 @@
       <nav></nav>
       <div>
          <h1>Kunde 1510</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-insert="true"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/customers/index.html

@@ -16,6 +16,8 @@
       <nav></nav>
       <div>
          <h1>Kunden</h1>
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zur Kundenübersicht." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/index.html

@@ -74,6 +74,9 @@
       <nav></nav>
       <div>
          <h1>Dashboard</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zum Dashboard." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">
@@ -146,9 +149,6 @@
             <section class="spacer"></section>
             <section class="spacer"></section>
          </div>
-
-
-      </div>
       </div>
    </main>
    <footer th:replace="fragments/footer :: footer"></footer>

prototype/src/main/resources/templates/intern/listedArticles/id.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Gelisteter Artikel 8450</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-insert="true"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/listedArticles/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Gelistete Artikel</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zu den gelisteten Artikeln." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/supplierOrders/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Lieferanten Bestellungen</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zu den Bestellungen bei Lieferanten." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/suppliers/id.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Lierfant Cheap AG</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-insert="true"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/suppliers/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Lieferanten</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zur Übersicht der Lieferanten." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/warehouse/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Lagerbuchungen</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zu den Lagerbuchungen." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/warehouse/slots/index.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Inventar</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zum Inventar." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/intern/warehouse/todo.html

@@ -16,6 +16,9 @@
       <nav></nav>
       <div>
          <h1>Packliste</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <div class="back" data-group="intern" data-name="Zurück zur Packliste." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">

prototype/src/main/resources/templates/shop/articles/id.html

@@ -18,7 +18,11 @@
          <div class="content-width">
             <div class="detailgrid">
                <div class="s">
+
                   <h1>Tolle Kamera</h1>
+                  <script th:src="@{/js/back.js}"></script>
+                  <div class="back" data-group="shop" data-insert="true"></div>
+
                   <h2>25.14&nbsp;EUR</h2>
                   <p>
                      Eine TOLLE Kamera <br>

prototype/src/main/resources/templates/shop/checkout.html

@@ -15,10 +15,12 @@
    <div class="sidebar-layout content-width">
       <div>
          <h1>Warenkorb</h1>
+
+         <script th:src="@{/js/back.js}"></script>
+         <p class="back" data-group="shop" data-insert="true"></p>
       </div>
       <nav></nav>
    </div>
-   <!-- TODO: this is suboptimal on mobile -->
    <main class="content-width sidebar-layout" style="min-height: 100vh;">
       <div style="max-width: 45em; width: 100%;">
          <table>

prototype/src/main/resources/templates/shop/index.html

@@ -15,6 +15,8 @@
       <div class='hero'>
          <div class='content-width'>
             <h1>Angebote</h1>
+             <script th:src="@{/js/back.js}"></script>
+             <div class="back" data-group="shop" data-name="Zurück zur Startseite." data-insert="false"></div>
             <div class='grid m base shadow'>
                <section> <a th:href="@{/shop/articles/1234}" class="section">
 

prototype/src/main/resources/templates/shop/search.html

@@ -16,6 +16,8 @@
       <nav></nav>
       <div>
          <h1>Suchergebnisse</h1>
+          <script th:src="@{/js/back.js}"></script>
+          <div class="back" data-group="shop" data-name="Zurück zur Suche." data-insert="false"></div>
       </div>
    </div>
    <main class="sidebar-layout content-width">