From 3c059e045c4ec8102cb0364958b012e306cfaa34 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <gustavoluigisouza@gmail.com>
Date: Tue, 30 Aug 2022 17:07:41 +0200
Subject: [PATCH] count all products

---
 content/master.blade.php         |  41 +++--
 content/pages/checkout.blade.php | 268 +++++++++++++------------------
 2 files changed, 141 insertions(+), 168 deletions(-)

diff --git a/content/master.blade.php b/content/master.blade.php
index 3eb8f3a..3093645 100644
--- a/content/master.blade.php
+++ b/content/master.blade.php
@@ -67,7 +67,8 @@
                                                 <tfoot>
                                                     <tr>
                                                         <th class="text-start" scope="col">Gesammt:</th>
-                                                        <th colspan="3" class="text-end">2838,00 €
+                                                        <th colspan="3" class="text-end">
+                                                            <span id="total-price">0 €</span>
                                                             <br>
                                                             <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
                                                         </th>
@@ -102,17 +103,22 @@
     @insert("content.includes.scripts")
     <script>
         let objProducts = [];
+        let formatter = new Intl.NumberFormat('de', {style: 'currency', currency: 'EUR'});
+        let totalPrice = 0;
         function updateProductsInLocalStorage(){
             localStorage.setItem("products", JSON.stringify(objProducts));
-            $('#count-products-in-bag').text(objProducts.length);
+            let quantitys = objProducts.map(obj => obj.quantity);
+            let quantityOfProducts = 0;
+            for(let i = 0; i < quantitys.length; i++) { quantityOfProducts += Number(quantitys[i]); }
+            $('#count-products-in-bag').text(quantityOfProducts);
             $('#list-products-in-bag').html('');
+            totalPrice = 0;
             if(objProducts.length > 0) {
                 $('#count-products-in-bag').show();
                 let ids = objProducts.map(obj => obj.id);
                 $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
                     response.contents.forEach(function(item){
                         let objProductInfo = objProducts.find(obj => obj.id == item.id);
-
                         let elementProduct = `
                         <tr>
                             <td class="text-start">
@@ -123,39 +129,54 @@
                                 <br>
                                 <small class="text-success">sofort verfügbar</small>
                                 <br>
-                                <select class="form-select form-select-sm select-quantity" style="width:125px;" aria-label="Default select example">`;
+                                <select class="form-select form-select-sm select-quantity" data-id="${item.id}" style="width:125px;" aria-label="Default select example">`;
                                 for(let i = 1; i <= 5; i++){
                                     if(objProductInfo.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`;
                                     else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`;
                                 }
+                                totalPrice += item.data_fields.preis*objProductInfo.quantity;
                                 elementProduct += `
                                     </select>
                                <button data-id="${item.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button>
                             </td>
-                            <td class="align-middle text-end">18,00€</td>
+                            <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
                         </tr>`;
-
                         $('#list-products-in-bag').append(elementProduct);
                     });
+                    $('#total-price').text(formatter.format(totalPrice));
                 });
-            }else $('#count-products-in-bag').hide();
+            }else {
+                $('#list-products-in-bag').html(`
+                <tr>
+                    <td class="text-start" colspan="3"><p>keine Produkte hinzugefügt.</p></td>
+                </tr>`);
+                $('#count-products-in-bag').hide();
+            }
+            $('#total-price').text(formatter.format(totalPrice));
         }
         function addToBag(productId){
-            if(objProducts.indexOf(productId) == -1) objProducts.push({id: productId, quantity: 1});
+            let objProductInfo = objProducts.find(obj => obj.id == productId);
+            let index = objProducts.indexOf(objProductInfo);
+            if(index == -1) objProducts.push({id: productId, quantity: 1});
             updateProductsInLocalStorage();
         }
         $(window).on('load', function(){
             if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
             updateProductsInLocalStorage();
             $(document).on('click', '.btn-remove-product', function(){
-                let objProductInfo = objProducts.find(obj => obj.id == $(this).attr('data-id'));
                 let productId = $(this).attr('data-id');
+                let objProductInfo = objProducts.find(obj => obj.id == productId);
                 let index = objProducts.indexOf(objProductInfo);
                 if(index != -1) objProducts.splice(index, 1);
                 updateProductsInLocalStorage();
             });
             $(document).on('change', '.select-quantity', function(){
-                
+                let quantity = $(this).val();
+                let productId = $(this).attr('data-id');
+                let objProductInfo = objProducts.find(obj => obj.id == productId);
+                let index = objProducts.indexOf(objProductInfo);
+                objProducts[index].quantity = quantity;
+                updateProductsInLocalStorage();
             });
         });
     </script>
diff --git a/content/pages/checkout.blade.php b/content/pages/checkout.blade.php
index 29bf207..5cc6e33 100644
--- a/content/pages/checkout.blade.php
+++ b/content/pages/checkout.blade.php
@@ -1,175 +1,127 @@
 @layout('content.master')
 @section('content')
-    <div class="container">
-        <section>
-
-                <div class="row">
-                    <div class="col-12">
-                        <h1 class="mb-5">Angebot anfragen</h1>
-
-                        <p class="fs-5">
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam asperiores
-                            consectetur dicta eaque et eveniet ex illo ipsa iste maiores maxime, modi optio perferendis,
-                            quaerat quisquam, sapiente vitae voluptas!
-                        </p>
-                        <br>
-                        <br>
+<div class="container">
+    <section>
+        <div class="row">
+            <div class="col-12">
+                <h1 class="mb-5">Angebot anfragen</h1>
+                <p class="fs-5">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam asperiores
+                    consectetur dicta eaque et eveniet ex illo ipsa iste maiores maxime, modi optio perferendis,
+                    quaerat quisquam, sapiente vitae voluptas!
+                </p>
+                <br>
+                <br>
+            </div>
+            <div class="col-12 col-md-8">
+                <div class="card mt-1 mb-5" style="background-color: #f7fcf7;">
+                    <div class="card-header">
+                        <h5>
+                            <svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+                                <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/>
+                            </svg>
+                            Persönliche Daten
+                        </h5>
                     </div>
-                    <div class="col-12 col-md-8">
-
-
-                        <div class="card mt-1 mb-5" style="background-color: #f7fcf7;">
-                            <div class="card-header">
-                                <h5> <svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/></svg>
-                                    Persönliche Daten</h5>
+                    <div class="card-body">
+                        <x-form id-name="anfrage" channels="bestaetigung,airtable">
+                            <div class="mb-3">
+                                <label for="" class="form-label">Anrede</label>
+                                <select class="form-select" name="anrede" aria-label="Default select example">
+                                    <option selected>Herr</option>
+                                    <option>Frau</option>
+                                    <option>Firma</option>
+                                </select>
                             </div>
-                            <div class="card-body">
-
-
-                                <x-form id-name="anfrage" channels="bestaetigung,airtable">
-                                    <div class="mb-3">
-                                        <label for="" class="form-label">Anrede</label>
-                                        <select class="form-select" name="anrede" aria-label="Default select example">
-                                            <option selected>Herr</option>
-                                            <option>Frau</option>
-                                            <option>Firma</option>
-                                        </select>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="" class="form-label">Vorname</label>
-                                        <input type="text" class="form-control" name="vorname" aria-describedby="" placeholder="Maximilian">
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="" class="form-label">Nachname</label>
-                                        <input type="text" class="form-control" name="nachname" aria-describedby="" placeholder="Meyer">
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="exampleInputEmail1" class="form-label">E-Mail</label>
-                                        <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="max.mustermann@areya.de">
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="exampleInputEmail1" class="form-label">Telefon</label>
-                                        <input type="text" class="form-control" name="telefon" aria-describedby="emailHelp" placeholder="0941467233">
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="exampleInputPassword1" class="form-label">Adresse</label>
-                                        <input type="text" class="form-control" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1">
-                                    </div>
-                                    <div class="mb-3 form-check mb-4">
-                                        <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
-                                        <label class="form-check-label" for="exampleCheck1">Ich habe die Datenschutzbestimmungen gelesen und akzeptiert.</label>
-                                    </div>
-                                    <div class="d-block">
-                                        <button type="submit" class="btn btn-success d-block mx-auto">
-                                            Angebot anfragen
-                                        </button>
-
-                                    </div>
-                                </x-form>
-
-
+                            <div class="mb-3">
+                                <label for="" class="form-label">Vorname</label>
+                                <input type="text" class="form-control" name="vorname" aria-describedby="" placeholder="Maximilian">
+                            </div>
+                            <div class="mb-3">
+                                <label for="" class="form-label">Nachname</label>
+                                <input type="text" class="form-control" name="nachname" aria-describedby="" placeholder="Meyer">
+                            </div>
+                            <div class="mb-3">
+                                <label for="exampleInputEmail1" class="form-label">E-Mail</label>
+                                <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="max.mustermann@areya.de">
+                            </div>
+                            <div class="mb-3">
+                                <label for="exampleInputEmail1" class="form-label">Telefon</label>
+                                <input type="text" class="form-control" name="telefon" aria-describedby="emailHelp" placeholder="0941467233">
+                            </div>
+                            <div class="mb-3">
+                                <label for="exampleInputPassword1" class="form-label">Adresse</label>
+                                <input type="text" class="form-control" name="adresse" placeholder="Neuenhammerstr. 44, 92714 Pleystein" id="exampleInputPassword1">
+                            </div>
+                            <div class="mb-3 form-check mb-4">
+                                <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
+                                <label class="form-check-label" for="exampleCheck1">Ich habe die Datenschutzbestimmungen gelesen und akzeptiert.</label>
+                            </div>
+                            <div class="d-block">
+                                <button type="submit" class="btn btn-success d-block mx-auto">
+                                    Angebot anfragen
+                                </button>
 
                             </div>
-                        </div>
-
-
-
-
-
-                    </div>
-                    <div class="col-12 col-md-4">
-                        <div class="card" style="background-color: #f7fcf7;">
-                            <div class="card-header">
-                                <h5><svg style="width: 25px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564 192h-76.875L347.893 37.297c-5.91-6.568-16.027-7.101-22.596-1.189s-7.101 16.028-1.189 22.596L444.075 192h-312.15L251.893 58.703c5.912-6.567 5.379-16.685-1.189-22.596-6.569-5.912-16.686-5.38-22.596 1.189L88.875 192H12c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h16.444L58.25 438.603C61.546 462.334 81.836 480 105.794 480h364.412c23.958 0 44.248-17.666 47.544-41.397L547.556 224H564c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12zm-77.946 242.201c-1.093 7.867-7.906 13.799-15.848 13.799H105.794c-7.942 0-14.755-5.932-15.848-13.799L60.752 224h454.497l-29.195 210.201zM304 280v112c0 8.837-7.163 16-16 16-8.836 0-16-7.163-16-16V280c0-8.837 7.164-16 16-16 8.837 0 16 7.163 16 16zm112 0v112c0 8.837-7.163 16-16 16s-16-7.163-16-16V280c0-8.837 7.163-16 16-16s16 7.163 16 16zm-224 0v112c0 8.837-7.164 16-16 16s-16-7.163-16-16V280c0-8.837 7.164-16 16-16s16 7.163 16 16z"/></svg> Warenkorb</h5>
-                            </div>
-                            <div class="card-body">
-
-                                <table class="table table-striped">
-                                    <tbody id="list-products">
-                                    <!-- <tr>
-
-                                        <td>
-                                            <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">Balkonkraftwerk 600
-
-                                        </td>
-                                        <td class="align-middle text-end">18,00 €</td>
-                                    </tr> -->
-                                    </tbody>
-                                    <tfoot>
-                                    <tr>
-                                        <th scope="col">Gesammt:</th>
-                                        <th colspan="2" class="text-end">2838,00 €
-                                            <br>
-                                            <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
-                                        </th>
-
-                                    </tr>
-                                    </tfoot>
-
-                                </table>
-
-                                <a href="" class="text-muted text-decoration-none">Weitere Produkte hinzufügen</a>
-
-                            </div>
-                        </div>
-
-                        <div class="card mt-4" style="background-color: #f7fcf7;">
-                            <div class="card-header">
-                                <h5><svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"/></svg>
-                                    Wie geht es weiter?</h5>
-                            </div>
-                            <div class="card-body">
-
-                                <ol>
-                                    <li class="mb-3">Beratungsgespräch</li>
-                                    <li class="mb-3">Persönliches Angebot</li>
-                                    <li class="mb-3">Packen & Abholtermin</li>
-                                    <li class="mb-3">Rechnung / Barzahlung</li>
-                                    <li class="mb-3">Abholung in 92648 Vohenstrauß</li>
-
-                                </ol>
-
-                            </div>
-                        </div>
+                        </x-form>
                     </div>
                 </div>
-
             </div>
-    </div>
-    </div>
-
-
-
-
-
-
-        </section>
-    </div>
+            <div class="col-12 col-md-4">
+                <div class="card" style="background-color: #f7fcf7;">
+                    <div class="card-header">
+                        <h5><svg style="width: 25px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M564 192h-76.875L347.893 37.297c-5.91-6.568-16.027-7.101-22.596-1.189s-7.101 16.028-1.189 22.596L444.075 192h-312.15L251.893 58.703c5.912-6.567 5.379-16.685-1.189-22.596-6.569-5.912-16.686-5.38-22.596 1.189L88.875 192H12c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h16.444L58.25 438.603C61.546 462.334 81.836 480 105.794 480h364.412c23.958 0 44.248-17.666 47.544-41.397L547.556 224H564c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12zm-77.946 242.201c-1.093 7.867-7.906 13.799-15.848 13.799H105.794c-7.942 0-14.755-5.932-15.848-13.799L60.752 224h454.497l-29.195 210.201zM304 280v112c0 8.837-7.163 16-16 16-8.836 0-16-7.163-16-16V280c0-8.837 7.164-16 16-16 8.837 0 16 7.163 16 16zm112 0v112c0 8.837-7.163 16-16 16s-16-7.163-16-16V280c0-8.837 7.163-16 16-16s16 7.163 16 16zm-224 0v112c0 8.837-7.164 16-16 16s-16-7.163-16-16V280c0-8.837 7.164-16 16-16s16 7.163 16 16z"/></svg> Warenkorb</h5>
+                    </div>
+                    <div class="card-body">
+                        <table class="table table-striped">
+                            <tbody id="list-products"></tbody>
+                            <tfoot>
+                                <tr>
+                                    <th scope="col">Gesammt:</th>
+                                    <th colspan="2" class="text-end">2838,00 €
+                                        <br>
+                                        <small class="text-end fw-light">Preise inkl. 19% Umsatzsteuer</small>
+                                    </th>
+                                </tr>
+                            </tfoot>
+                        </table>
+                        <a href="" class="text-muted text-decoration-none">Weitere Produkte hinzufügen</a>
+                    </div>
+                </div>
+                <div class="card mt-4" style="background-color: #f7fcf7;">
+                    <div class="card-header">
+                        <h5><svg style="width: 22px; margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"/></svg>
+                            Wie geht es weiter?</h5>
+                    </div>
+                    <div class="card-body">
+                        <ol>
+                            <li class="mb-3">Beratungsgespräch</li>
+                            <li class="mb-3">Persönliches Angebot</li>
+                            <li class="mb-3">Packen & Abholtermin</li>
+                            <li class="mb-3">Rechnung / Barzahlung</li>
+                            <li class="mb-3">Abholung in 92648 Vohenstrauß</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
 @stop
 @section('scripts')
 <script>
   $(window).on('load', function(){
     if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
-    $.ajax({
-        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
-        url: "{{url('/contents/all')}}/"+objProducts.join(","),
-        type: "get",
-        cache : false,
-        processData: false,
-        contentType: false,
-        success: function (response) {
-            response.contents.forEach(function(item){
-                $('#list-products').append(`<tr>
-                    <td>
-                        <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">${item.title}
-                    </td>
-                    <td class="align-middle text-end">18,00 €</td>
-                </tr>`);
-            });
-        },
-        error: function(error) {
-            console.log(error);
-        }
+    let ids = objProducts.map(obj => obj.id);
+    $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
+        response.contents.forEach(function(item){
+            $('#list-products').append(`<tr>
+                <td>
+                    <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">${item.title}
+                </td>
+                <td class="align-middle text-end">${formatter.format(item.data_fields.preis)}</td>
+            </tr>`);
+        });
     });
 
     $('.btn-remove-product').click(function(){