From 39f5cf71ce7f92667d0c28d7958ae8e307e1e7b6 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Tue, 9 Jan 2024 17:06:04 -0300
Subject: [PATCH] add spinner button

---
 content/contents/leistungen.blade.php | 78 +++++++++++++++------------
 content/includes/scripts.blade.php    |  2 +-
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/content/contents/leistungen.blade.php b/content/contents/leistungen.blade.php
index b065a86..3045180 100644
--- a/content/contents/leistungen.blade.php
+++ b/content/contents/leistungen.blade.php
@@ -76,8 +76,7 @@
                                 </div>
                             </div>
                         @else
-                            <x-form id="anfrage" id-name="anfrage" channels="email-anfrage,bestaetigung-kunde" >
-
+                            <x-form id="anfrage" class="form-load" id-name="anfrage" channels="email-anfrage,bestaetigung-kunde">
                                 <div class="mb-4">
                                     <label for="exampleInputEmail1" class="form-label">Name:</label>
                                     <input type="name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Max Mustermann" autocomplete="on" required>
@@ -93,20 +92,16 @@
                                     <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on" required>
                                 </div>
 
-
                                 <div class="form-floating mb-4">
                                     <textarea style="height: 80px;" name="nachricht" class="form-control" placeholder="Leave a comment here" id="nachricht"></textarea>
                                     <label for="floatingTextarea">Nachricht</label>
                                 </div>
 
-
                                 <div class="d-grid gap-2">
-                                    <button type="submit" class="btn btn-primary btn-block">Anfrage unverbindlich absenden
+                                    <button type="submit" d-load-message="seding" class="btn btn-primary btn-block btn-load">Anfrage unverbindlich absenden
                                         <svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
                                     </button>
-
                                 </div>
-
                             </x-form>
                         @endif
                     </div>
@@ -147,35 +142,48 @@
 @section('scripts')
     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script>
-    const shareData = {
-        title: "{{ $content->title }}",
-        text: 'Text',
-        url: window.location.href,
-    }
-</script>
-    <script src="{{ asset('template/js/pages/news/methods.js') }}"></script>
+        const shareData = {
+            title: "{{ $content->title }}",
+            text: 'Text',
+            url: window.location.href,
+        }
+    </script>
+    <!-- <script src="{{ asset('template/js/pages/news/methods.js') }}"></script>
     <script src="{{ asset('template/js/pages/news/events.js') }}"></script>
     <script src="{{ asset('template/js/pages/news/script.js') }}"></script>
-    <script src="{{ asset('system/js/intlTelInput.min.js') }}"></script>
+    <script src="{{ asset('system/js/intlTelInput.min.js') }}"></script> -->
+    <!-- <script>
+        var input = document.querySelector(".phone");
+        var iti = window.intlTelInput(input, {
+            initialCountry: "de",
+            geoIpLookup: function(callback) {
+                $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
+                    var countryCode = (resp && resp.country) ? resp.country : "us";
+                    callback(countryCode);
+                });
+            },
+            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.11/js/utils.min.js",
+            // any initialisation options go here
+        });
+        $("#formPost").submit(function() {
+            if (iti.isValidNumber() == false) {
+                alert('Telefonnummer nicht gültig!');
+                return false;
+            }
+            return true;
+        });
+    </script> -->
     <script>
-    var input = document.querySelector(".phone");
-    var iti = window.intlTelInput(input, {
-        initialCountry: "de",
-        geoIpLookup: function(callback) {
-            $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
-                var countryCode = (resp && resp.country) ? resp.country : "us";
-                callback(countryCode);
-            });
-        },
-        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.11/js/utils.min.js",
-        // any initialisation options go here
-    });
-    $("#formPost").submit(function() {
-        if (iti.isValidNumber() == false) {
-            alert('Telefonnummer nicht gültig!');
-            return false;
-        }
-        return true;
-    });
-</script>
+        document.addEventListener("DOMContentLoaded", () => {
+            document.querySelectorAll(".form-load").forEach(formLoad => formLoad.addEventListener("submit", () => {
+                let btnLoad = formLoad.querySelector('.btn-load');
+                let message = btnLoad.getAttribute('d-load-message');
+                
+                btnLoad.innerHTML = `
+                    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+                    <span role="status">${message}...</span>
+                `;
+            }));
+        });
+    </script>
 @stop
diff --git a/content/includes/scripts.blade.php b/content/includes/scripts.blade.php
index 8aa59cf..3edf598 100644
--- a/content/includes/scripts.blade.php
+++ b/content/includes/scripts.blade.php
@@ -2,4 +2,4 @@
 <script src="{{storage('assets/libs/js-cookie-3.0.1.min.js')}}"></script>
 <script src="{{storage('assets/libs/lottie-player-0.4.0.js')}}"></script>
 <script src="{{storage('assets/js/components/cookies-consent.js')}}"></script>
-<script type="module" src="{{storage('assets/js/main.js')}}"></script>
\ No newline at end of file
+<!-- <script type="module" src="{{storage('assets/js/main.js')}}"></script> -->
\ No newline at end of file