From 22da92dd3d4d22367f4d919007f220557c20cff6 Mon Sep 17 00:00:00 2001
From: Philipp Lang <zoomyboy@intern.zoomyboy.de>
Date: Sun, 24 Jan 2021 11:46:40 +0100
Subject: [PATCH] put progress bar on top

---
 assets/css/app.css     |  1 +
 assets/js/app.js       |  2 ++
 src/Stepper.php        |  1 +
 views/stepper.twig.htm | 10 ++++++++--
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 9ecc0e7..663ffd7 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -16,6 +16,7 @@ body {
         background: var(--bg-color);
         & > div {
             h2 {
+                margin: 3rem auto;
                 font-size: 2.3rem;
                 color: var(--secondary);
                 text-align: center;
diff --git a/assets/js/app.js b/assets/js/app.js
index 3b86166..21f2664 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -95,6 +95,8 @@ window.stepper = {
     submit() {
         axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
             ...this.value
+        }).then(ret => {
+            this.step++;
         });
     }
 };
diff --git a/src/Stepper.php b/src/Stepper.php
index 555d63c..385148a 100644
--- a/src/Stepper.php
+++ b/src/Stepper.php
@@ -27,6 +27,7 @@ class Stepper {
     public function init() {
         add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]);
         add_action('wp_ajax_nopriv_stepper_submit', [ $this, 'onSubmit' ]);
+        add_action('wp_ajax_stepper_submit', [ $this, 'onSubmit' ]);
         add_shortcode('stepper', [ $this, 'handle' ]);
     }
 
diff --git a/views/stepper.twig.htm b/views/stepper.twig.htm
index fd39f93..2210439 100644
--- a/views/stepper.twig.htm
+++ b/views/stepper.twig.htm
@@ -15,6 +15,7 @@
             </div>
         </div>
 
+        <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
         {% include 'vorhaben.twig.htm' with {
             'kind': "bau",
             bezahlt: true,
@@ -56,14 +57,19 @@
                 <div class="separator primary"></div>
                 <div>
                     <div>Darlehensbetrag</div>
-                    <div x-text="units.currency.to(value.anschluss.objektwert + value.anschluss.umschuldung + value.anschluss.zuskap)"></div>
+                    <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
                 </div>
                 <div class="separator gray"></div>
                 <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
             </div>
         </div>
 
-        <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
+        <div x-show="step === 3">
+            <div class="form-container">
+                Vielen Dank für Ihre Anfrage.
+            </div>
+        </div>
+
 
     </form>
 </div>