From 5879ab38dc2a5ad0cb9416758aa0b17d81bd4466 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Fri, 26 May 2023 01:39:15 -0300
Subject: [PATCH] show image

---
 content/index.blade.php | 154 ++++++++++++++++++----------------------
 1 file changed, 69 insertions(+), 85 deletions(-)

diff --git a/content/index.blade.php b/content/index.blade.php
index 6a472b7..2e3aaff 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -18,27 +18,17 @@
 
         #contents::-webkit-scrollbar {
             width: 8px;
+            border-radius: 10px;
             background-color: #f5f5f5;
         }
 
         #contents::-webkit-scrollbar-thumb {
+            border-radius: 10px;
             background-color: #aaa;
         }
 
         #contents::-webkit-scrollbar-thumb:hover {
-            background-color: #666;
-        }
-
-        #contents::-moz-scrollbar {
-            background-color: #f5f5f5;
-        }
-
-        #contents::-moz-scrollbar-thumb {
-            background-color: #aaa;
-        }
-
-        #contents::-moz-scrollbar-thumb:hover {
-            background-color: #666;
+            background-color: #888;
         }
     </style>
 @stop
@@ -48,7 +38,7 @@
             <div id="filters" class="col-12 col-md rounded-end">
                 <div class="d-flex">
                     <!-- <div class="dropdown me-2">
-                        <button class="btn btn-secondary dropdown-toggle btn-sm" style="background: #f49c35; border:none;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                        <button class="btn btn-primary dropdown-toggle btn-sm" style="color: #212529; background: #e9ecef; border: 1px solid #ced4da;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                             Filter <span class="caret"></span>
                         </button>
                         <ul class="dropdown-menu checkbox-menu allow-focus">    
@@ -86,9 +76,9 @@
                 <div class="card d-none address">
                     <div class="card-body">
                         <div class="row">
-                            <!-- <div class="col-5">
-                                <img data-src="$image" alt="">
-                            </div> -->
+                            <div class="col-5">
+                                <img style="width: 150px" data-src="$image" alt="">
+                            </div>
                             <div class="col-12">
                                 <h3 class="fs-6 m-0">$title</h3>
                                 <!-- <a data-href="$path">Ansehen</a> -->
@@ -97,7 +87,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-8 g-0">
+            <div class="col-8 g-0 ps-3">
                 <div id="map"></div>
                 <div id="marker-window" class="d-none">
                     <h6 id="firstHeading" class="firstHeading">$title</h6>
@@ -113,52 +103,68 @@
     <script>
         const contentUrl = "{{url('/types/locations/contents')}}";
         const locationField = "location";
+        //const filterFields = ['categoria'];
     </script>
     <script>
+
+        const locationElementTemplate = $("#contents").children().first();
+
+        function addLocationElement(item){
+            let newElement = locationElementTemplate.clone();
+            newElement.html(newElement.html().replace('$title', item.title));    
+            newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
+            newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+            newElement.removeClass('d-none');
+            return newElement;
+        }
+
+        function createInfowindowElement(item){
+            let contentString = $("#marker-window").clone();
+            contentString.html(contentString.html().replace('$title', item.title));
+            contentString.html(contentString.html().replace('$description', item.description ?? ''));
+            contentString.html(contentString.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+            contentString.removeClass('d-none');
+            return contentString[0].outerHTML;
+        }
+
         function initMap() {
             $.get(contentUrl).done(function (contents) {
-                let receivedItems = contents["contents"];
 
-                if (receivedItems != undefined) {
+                let items = contents["contents"];
 
-                    receivedItems = receivedItems.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
+                if (items != undefined) {
 
-                    const templateInfowindow = $("#marker-window");
+                    locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
 
-                    let templateElement = $("#contents").children().first();
-                    templateContent = templateElement;
-                    templateElement.remove();
+                    let currentItems = locationItems;
 
                     $("#search-button").on("click", function () {
                         $("#contents").html("");
                         let value = $("#search-input").val();
-                        items = receivedItems.filter(function (item) {
+                        currentItems = locationItems.filter(function (item) {
                             return item.title.toLowerCase().includes(value.toLowerCase());
                         });
                         loadItems();
                     });
 
-                    items = receivedItems;
-
                     loadItems();
 
                     function loadItems() {
-                        $("#count-items-displayed").text(items.length);
-                        $("#count-items").text(items.length);
+                        $("#count-items-displayed").text(currentItems.length);
 
-                        let map = new google.maps.Map(document.getElementById("map"), {
-                            zoom: 6,
-                            center: { lat: 50.9807, lng: 10.31522 },
-                            streetViewControl: false,
-                            mapTypeControl: false,
-                            fullscreenControl: false,
-                        });
+                        if (currentItems.length > 0) {
 
-                        if (items.length > 0) {
+                            let map = new google.maps.Map(document.getElementById("map"), {
+                                zoom: 6,
+                                center: { lat: 50.9807, lng: 10.31522 },
+                                streetViewControl: false,
+                                mapTypeControl: false,
+                                fullscreenControl: false,
+                            });
 
                             let currentInfoWindow = null;
 
-                            items = items.map(function (item) {
+                            currentItems = currentItems.map(function (item) {
 
                                 let lat = parseFloat(item[locationField].lat);
                                 let lng = parseFloat(item[locationField].lng);
@@ -170,35 +176,20 @@
                                     optimized: false,
                                 });
 
-                                let contentString = templateInfowindow.clone();
+                                let infowindowElement = createInfowindowElement(item);
 
-                                contentString.html(contentString.html().replace('$title', item.title));
-                                contentString.html(contentString.html().replace('$description', item.description ?? ''));
-                                contentString.html(contentString.html().replace('data-href="$path"', 'href="' + item.path + '"'));
-                                contentString.removeClass('d-none');
-
-                                let infowindow = new google.maps.InfoWindow({
-                                    content: contentString[0].outerHTML
-                                });
+                                let infowindow = new google.maps.InfoWindow({ content: infowindowElement });
 
                                 marker.addListener('click', function () {
 
                                     if (currentInfoWindow) currentInfoWindow.close();
 
-                                    infowindow.open({
-                                        anchor: marker,
-                                        map
-                                    });
+                                    infowindow.open({ anchor: marker, map });
 
                                     currentInfoWindow = infowindow;
                                 });
 
-                                let newElement = templateContent.clone();
-                                newElement.html(newElement.html().replace('$title', item.title));
-                                newElement.html(newElement.html().replace('$image', item.image));
-                                newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
-                                newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
-                                newElement.removeClass('d-none');
+                                let newElement = addLocationElement(item);
 
                                 newElement.on('click', function () {
                                     
@@ -223,34 +214,31 @@
                                 return item;
                             });
 
-                            let markers = items.map(function (item) {
+                            let markers = currentItems.map(function (item) {
                                 return item.marker;
                             });
 
-                            var bounds = new google.maps.LatLngBounds();
-                            for (var i = 0; i < markers.length; i++) {
+                            let bounds = new google.maps.LatLngBounds();
+                            for (let i = 0; i < markers.length; i++) {
                                 bounds.extend(markers[i].getPosition());
                             }
                             map.fitBounds(bounds);
 
-
                             setTimeout(function () {
-                                var zoomLevel = map.getZoom();
+                                let zoomLevel = map.getZoom();
                                 if (zoomLevel > 12) map.setZoom(12);
                             }, 500);
 
-                            var clusterStyles = [
-                                {
-                                    url: 'http://localhost/maps-theme/public/template/cluster.png',
-                                    height: 40,
-                                    width: 40,
-                                    textSize: 14,
-                                    backgroundPosition: '0 0',
-                                    iconAnchor: [26, 53],
-                                    textColor: '#ffffff'
-                                }
-                            ];
-                            var markerCluster = new MarkerClusterer(map, markers);
+                            let clusterStyles = [{
+                                url: 'http://localhost/maps-theme/public/template/cluster.png',
+                                height: 40,
+                                width: 40,
+                                textSize: 14,
+                                backgroundPosition: '0 0',
+                                iconAnchor: [26, 53],
+                                textColor: '#ffffff'
+                            }];
+                            let markerCluster = new MarkerClusterer(map, markers);
                             markerCluster.setStyles(clusterStyles);
 
                             function getVisibleMarkers() {
@@ -270,7 +258,7 @@
                                     return [latitude, longitude];
                                 });
 
-                                let showedItems = items;
+                                let showedItems = currentItems;
 
                                 showedItems = showedItems.filter(function (item) {
 
@@ -285,26 +273,22 @@
                                 $("#contents").html("");
 
                                 $("#count-items-displayed").text(showedItems.length);
-                                $("#count-items").text(items.length);
+                                $("#count-items").text(currentItems.length);
 
                                 showedItems.forEach(function (item) {
 
                                     let lat = parseFloat(item[locationField].lat);
                                     let lng = parseFloat(item[locationField].lng);
 
-                                    let newElement = templateContent.clone();
-                                    newElement.html(newElement.html().replace('$title', item.title));
-                                    newElement.html(newElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
-                                    newElement.html(newElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
-                                    newElement.removeClass('d-none');
+                                    let newElement = addLocationElement(item);
 
                                     newElement.on('click', function () {
 
-                                        var bounds = new google.maps.LatLngBounds();
+                                        let bounds = new google.maps.LatLngBounds();
                                         bounds.extend(item.marker.getPosition());
                                         map.fitBounds(bounds);
                                         setTimeout(function () {
-                                            var zoomLevel = map.getZoom();
+                                            let zoomLevel = map.getZoom();
                                             if (zoomLevel > 12) map.setZoom(12);
                                         }, 500);
 
@@ -317,7 +301,7 @@
                                     $("#contents").append(newElement);
                                 });
 
-                                showedItems = items;
+                                showedItems = currentItems;
                             }
 
                             google.maps.event.addListener(map, 'dragend', getVisibleMarkers);