From 49bbacd4d124ddd9d9004d48241bf2bede93eab3 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <gustavoluigisouza@gmail.com>
Date: Mon, 29 Aug 2022 21:16:36 +0200
Subject: [PATCH 1/2] add loca storage scripts

---
 content/contents/produkt.blade.php | 23 ++++------
 content/master.blade.php           | 47 +++++++++++++++++++--
 content/pages/checkout.blade.php   | 68 ++++++++++++++++--------------
 3 files changed, 88 insertions(+), 50 deletions(-)

diff --git a/content/contents/produkt.blade.php b/content/contents/produkt.blade.php
index 804d0dc..8dbfb32 100644
--- a/content/contents/produkt.blade.php
+++ b/content/contents/produkt.blade.php
@@ -81,18 +81,13 @@
 @stop
 @section('scripts')
 <script>
-  /* let objProducts = [];
-  function updateProductsInLocalStorage(){
-    localStorage.setItem("products", JSON.stringify(objProducts));
-  }
-  $(window).load(function(){
-    let product = {};
-    product["id"] = database.attr("data-id");
-    product["name"] = database.attr("data-name");
-    objProducts.push(product);
-    objProducts.splice(index, 1);
-    updateProductsInLocalStorage();
-    if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
-  }); */
+  $(window).on('load', function(){
+    $('#btn-check-out').click(function(){
+      let product = {};
+      if(objProducts.indexOf($(this).attr("data-id")) == -1) objProducts.push($(this).attr("data-id"));
+      updateProductsInLocalStorage();
+      window.location.replace("{{url('/checkout')}}");
+    });
+  });
 </script>
-@stop
+@stop
\ No newline at end of file
diff --git a/content/master.blade.php b/content/master.blade.php
index 4c2baa8..35e5c6a 100644
--- a/content/master.blade.php
+++ b/content/master.blade.php
@@ -76,9 +76,9 @@
                                         <div class="col-12">
                                             <table class="table table-striped">
 
-                                                <tbody>
+                                                <tbody id="list-products-in-bag">
 
-                                                <tr>
+                                                <!-- <tr>
                                                     <td class="text-start">
                                                         <img class="rounded img-fluid" src="https://picsum.photos/100/100">
 
@@ -100,8 +100,7 @@
 
                                                     <td class="align-middle text-end">18,00€</td>
 
-                                                </tr>
-
+                                                </tr> -->
 
 
                                                 </tbody>
@@ -145,6 +144,46 @@
     @yield('content')
     @insert("content.includes.footer")
     @insert("content.includes.scripts")
+    <script>
+        let objProducts = [];
+        function updateProductsInLocalStorage(){ localStorage.setItem("products", JSON.stringify(objProducts)); }
+        $(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('admin/contents/all')}}/"+objProducts.join(","),
+                type: "get",
+                cache : false,
+                processData: false,
+                contentType: false,
+                success: function (response) {
+                    response.contents.forEach(function(item){
+                        $('#list-products-in-bag').append(`
+                        <tr>
+                            <td class="text-start">
+                                <img class="rounded img-fluid" src="https://picsum.photos/120/120">
+                            </td>
+                            <td class="text-start">
+                                <span class="fs-5">${item.title}</span>
+                                <br>
+                                <small class="text-success">sofort verfügbar</small>
+                                <br>
+                                <select class="form-select form-select-sm" aria-label="Default select example">
+                                    <option selected value="1">Anzahl: 1</option>
+                                    <option value="2">Anzahl: 2</option>
+                                    <option value="3">Anzahl: 3</option>
+                                </select>
+                            </td>
+                            <td class="align-middle text-end">18,00€</td>
+                        </tr>`);
+                    });
+                },
+                error: function(error) {
+                    console.log(error);
+                }
+            });
+        });
+    </script>
     @yield('scripts')
 </body>
 </html>
diff --git a/content/pages/checkout.blade.php b/content/pages/checkout.blade.php
index 8d2845e..b9ddcc8 100644
--- a/content/pages/checkout.blade.php
+++ b/content/pages/checkout.blade.php
@@ -77,44 +77,15 @@
                             <div class="card-body">
 
                                 <table class="table table-striped">
-
-                                    <tbody>
-                                    <tr>
+                                    <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>
-                                    <tr>
-
-                                        <td>
-                                            <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">Shelly
-
-                                        </td>
-                                        <td class="align-middle text-end">18,00 €</td>
-
-                                    </tr>
-                                    <tr>
-
-                                        <td>
-                                            <img class="rounded img-fluid me-2" src="https://picsum.photos/25/25">Longi 375 Modul
-
-                                        </td>
-                                        <td class="align-middle text-end">18,00 €</td>
-
-                                    </tr>
-
-                                    <tr>
-                                        <div class="input-group mb-3 input-group-sm">
-                                            <span class="input-group-text" id="basic-addon1"><svg style="width: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M544 224h32V112c0-26.51-21.49-48-48-48H48C21.49 64 0 85.49 0 112v112h32c17.673 0 32 14.327 32 32s-14.327 32-32 32H0v112c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V288h-32c-17.673 0-32-14.327-32-32s14.327-32 32-32zm0 96v80c0 8.823-7.177 16-16 16H48c-8.823 0-16-7.177-16-16v-80c35.29 0 64-28.71 64-64s-28.71-64-64-64v-80c0-8.823 7.177-16 16-16h480c8.823 0 16 7.177 16 16v80c-35.29 0-64 28.71-64 64s28.71 64 64 64z"/></svg></span>
-                                            <input type="text" class="form-control" placeholder="Gutscheincode" aria-label="Username" aria-describedby="basic-addon1">
-                                        </div>
-
-                                    </tr>
-
-
+                                    </tr> -->
                                     </tbody>
                                     <tfoot>
                                     <tr>
@@ -167,3 +138,36 @@
         </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('admin/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);
+        }
+    });
+
+    $('.btn-remove-product').click(function(){
+        // let index = objProducts.indexOf(value);
+        // if(index != -1) objProducts.splice(index, 1);
+    });
+  });
+</script>
+@stop
\ No newline at end of file

From 2ad56ec189271b3ab55b8078e6796897c75b19dd Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <gustavoluigisouza@gmail.com>
Date: Mon, 29 Aug 2022 21:24:04 +0200
Subject: [PATCH 2/2] .

---
 content/contents/produkt.blade.php | 13 ++++++++-----
 content/master.blade.php           |  4 ++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/content/contents/produkt.blade.php b/content/contents/produkt.blade.php
index 8dbfb32..cc870ab 100644
--- a/content/contents/produkt.blade.php
+++ b/content/contents/produkt.blade.php
@@ -54,14 +54,14 @@
       <div class="row mt-5">
 
           <div class="col-6">
-              <button data-bs-toggle="modal" data-bs-target="#ShoppingCart" class="btn btn-outline-success  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
+              <button data-bs-toggle="modal" id="btn-add-to-bag" data-id="{{$content->id}}" data-bs-target="#ShoppingCart" class="btn btn-outline-success  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
                   <svg style="fill: currentColor; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                   In den Einkaufswagen
               </button>
           </div>
 
           <div class="col-12 col-md-6">
-              <a href="{{url('/checkout')}}" class="btn btn-primary  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
+              <a href="{{url('/checkout')}}" id="btn-check-out" data-id="{{$content->id}}" class="btn btn-primary  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
                   <svg style="fill: white; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                   Unverbindlich anfragen
               </a>
@@ -83,11 +83,14 @@
 <script>
   $(window).on('load', function(){
     $('#btn-check-out').click(function(){
-      let product = {};
-      if(objProducts.indexOf($(this).attr("data-id")) == -1) objProducts.push($(this).attr("data-id"));
-      updateProductsInLocalStorage();
+      let productId = $(this).attr("data-id");
+      addToBag(productId);
       window.location.replace("{{url('/checkout')}}");
     });
+    $('#btn-add-to-bag').click(function(){
+      let productId = $(this).attr("data-id");
+      addToBag(productId);
+    });
   });
 </script>
 @stop
\ No newline at end of file
diff --git a/content/master.blade.php b/content/master.blade.php
index 35e5c6a..a5c25cd 100644
--- a/content/master.blade.php
+++ b/content/master.blade.php
@@ -147,6 +147,10 @@
     <script>
         let objProducts = [];
         function updateProductsInLocalStorage(){ localStorage.setItem("products", JSON.stringify(objProducts)); }
+        function addToBag(productId){
+            if(objProducts.indexOf(productId) == -1) objProducts.push(productId);
+            updateProductsInLocalStorage();
+        }
         $(window).on('load', function(){
             if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
             $.ajax({