pay up implementation

views/payup.eta

@@ -5,28 +5,57 @@
 <h1 class="title">Abrechnung</h1>
 <h2 class="subtitle">Ausstehend</h2>
 
-<table class="table">
+<div class="notification is-info is-light is-hidden" id="noBalance">
+  Für diesen Benutzer stehen keine Transaktionen aus. <strong>Es gibt nichts zu bezahlen.</strong>
+  <br>
+  <button class="button is-info is-large" id="logout">Abmelden</button>
+</div>
+
+<div id="balanceSheet">
+<table class="table is-striped is-hoverable" id="payTable">
+
          <thead>
      <tr>
-      <th><abbr title="Bezeichner">Bez.</abbr></th>
+      <th>Austellungsdatum</th>
       <th>Preis</th>
-      <th></th>
-       
-
     </tr>
   </thead>
   <tfoot>
     <tr>
       <th></th>
       <th id="table-sum"></th>
-      <th></th>
     </tr>
   </tfoot>
   <tbody id="table-content">
        </tbody>
        </table>
+
+       <button class="button is-success is-large" id="paynow">Jetzt bezahlen <i class="bi bi-wallet2"></i></button>
+       </div>
 </section>
 
+<!-- Confirmation modal -->
+<div class="modal" id="confirmModal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Bezahlung bestätigen</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="content">
+        <p>
+          Wurde der Betrag in die Kasse eingezahlt?
+        </p>
+        <h2 class="title is-2" id="ModalSum"></h2>
+      </div>
+    </section>
+    <footer class="modal-card-foot buttons">
+      <button class="button is-success" id="confirmCheckout">Bestätigen</button>
+      <button class="button" id="cancelCheckout">Abbrechen</button>
+    </footer>
+  </div>
+</div>
 <%~ include("partials/footer.eta") %>
 <script src="/static/pages/payup.js"></script>
 <%~ include("partials/base_foot.eta") %>