From b556449580d8c88e1413361fc2d98e149c9e01e5 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <=>
Date: Tue, 30 May 2023 12:25:00 -0300
Subject: [PATCH] .

---
 content/index.blade.php | 420 +++++++++++++++++-----------------------
 1 file changed, 183 insertions(+), 237 deletions(-)

diff --git a/content/index.blade.php b/content/index.blade.php
index 2e3aaff..4615f80 100644
--- a/content/index.blade.php
+++ b/content/index.blade.php
@@ -30,6 +30,14 @@
         #contents::-webkit-scrollbar-thumb:hover {
             background-color: #888;
         }
+
+        .address{
+            cursor: pointer;
+            transition: all .2s;
+        }
+        .address:hover{
+            background: #eee;
+        }
     </style>
 @stop
 @section('content')
@@ -37,23 +45,20 @@
         <div class="row mb-3">
             <div id="filters" class="col-12 col-md rounded-end">
                 <div class="d-flex">
-                    <!-- <div class="dropdown me-2">
-                        <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">    
-                            <li>
-                                <label>
-                                    <input class="check-filter" type="checkbox" value="1"> Option 1
-                                </label>
-                            </li>
-                            <li>
-                                <label>
-                                    <input class="check-filter" type="checkbox" value="2"> Option 2
-                                </label>
-                            </li>
-                        </ul>
-                    </div> -->
+                    <div id="filters">
+                        <div class="dropdown me-2 d-none">
+                            <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 p-2" id="options">    
+                                <li>
+                                    <label>
+                                        <input class="check-filter" type="checkbox" value="1"> $option
+                                    </label>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                     <div style="width: 350px;">
                         <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/>
                     </div>
@@ -106,233 +111,174 @@
         //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() {
+            function createInfowindowElement(item){
+                let infowindowElement = $("#marker-window").clone();
+                infowindowElement.html(infowindowElement.html().replace('$title', item.title));
+                infowindowElement.html(infowindowElement.html().replace('$description', item.description ?? ''));
+                infowindowElement.html(infowindowElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+                infowindowElement.removeClass('d-none');
+                return infowindowElement[0].outerHTML;
+            }
+            
+            let map = new google.maps.Map(document.getElementById("map"), {
+                streetViewControl: false,
+                mapTypeControl: false,
+                fullscreenControl: false,
+            });
+
+            let currentItems = [];
+
             $.get(contentUrl).done(function (contents) {
-
                 let items = contents["contents"];
-
                 if (items != undefined) {
-
                     locationItems = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
-
-                    let currentItems = locationItems;
-
-                    $("#search-button").on("click", function () {
-                        $("#contents").html("");
-                        let value = $("#search-input").val();
-                        currentItems = locationItems.filter(function (item) {
-                            return item.title.toLowerCase().includes(value.toLowerCase());
-                        });
-                        loadItems();
-                    });
-
-                    loadItems();
-
-                    function loadItems() {
-                        $("#count-items-displayed").text(currentItems.length);
-
-                        if (currentItems.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;
-
-                            currentItems = currentItems.map(function (item) {
-
-                                let lat = parseFloat(item[locationField].lat);
-                                let lng = parseFloat(item[locationField].lng);
-
-                                let marker = new google.maps.Marker({
-                                    position: { lat: lat, lng: lng },
-                                    map: map,
-                                    title: item.title,
-                                    optimized: false,
-                                });
-
-                                let infowindowElement = createInfowindowElement(item);
-
-                                let infowindow = new google.maps.InfoWindow({ content: infowindowElement });
-
-                                marker.addListener('click', function () {
-
-                                    if (currentInfoWindow) currentInfoWindow.close();
-
-                                    infowindow.open({ anchor: marker, map });
-
-                                    currentInfoWindow = infowindow;
-                                });
-
-                                let newElement = addLocationElement(item);
-
-                                newElement.on('click', function () {
-                                    
-                                    var bounds = new google.maps.LatLngBounds();
-                                    bounds.extend(marker.getPosition());
-                                    map.fitBounds(bounds);
-                                    setTimeout(function () {
-                                        var zoomLevel = map.getZoom();
-                                        if (zoomLevel > 12) map.setZoom(12);
-                                    }, 500);
-
-                                    map.setCenter({ lat: lat, lng: lng });
-
-                                    google.maps.event.trigger(marker, 'click');
-                                    getVisibleMarkers();
-                                });
-
-                                $("#contents").append(newElement);
-
-                                item.marker = marker;
-
-                                return item;
-                            });
-
-                            let markers = currentItems.map(function (item) {
-                                return item.marker;
-                            });
-
-                            let bounds = new google.maps.LatLngBounds();
-                            for (let i = 0; i < markers.length; i++) {
-                                bounds.extend(markers[i].getPosition());
-                            }
-                            map.fitBounds(bounds);
-
-                            setTimeout(function () {
-                                let zoomLevel = map.getZoom();
-                                if (zoomLevel > 12) map.setZoom(12);
-                            }, 500);
-
-                            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() {
-                                let zoomLevel = map.getZoom();
-                                let bounds = map.getBounds();
-
-                                let visibleMarkers = [];
-
-                                for (let i = 0; i < markers.length; i++) {
-                                    if (bounds.contains(markers[i].getPosition())) visibleMarkers.push(markers[i]);
-                                }
-
-                                let visibleMarkersPosition = visibleMarkers.map(function (visibleMarker) {
-                                    let position = visibleMarker.getPosition();
-                                    let latitude = position.lat();
-                                    let longitude = position.lng();
-                                    return [latitude, longitude];
-                                });
-
-                                let showedItems = currentItems;
-
-                                showedItems = showedItems.filter(function (item) {
-
-                                    let position = [parseFloat(item[locationField].lat), parseFloat(item[locationField].lng)];
-
-                                    return visibleMarkersPosition.some(function (item) {
-                                        return item[0] === position[0] && item[1] === position[1];
-                                    });
-
-                                });
-
-                                $("#contents").html("");
-
-                                $("#count-items-displayed").text(showedItems.length);
-                                $("#count-items").text(currentItems.length);
-
-                                showedItems.forEach(function (item) {
-
-                                    let lat = parseFloat(item[locationField].lat);
-                                    let lng = parseFloat(item[locationField].lng);
-
-                                    let newElement = addLocationElement(item);
-
-                                    newElement.on('click', function () {
-
-                                        let bounds = new google.maps.LatLngBounds();
-                                        bounds.extend(item.marker.getPosition());
-                                        map.fitBounds(bounds);
-                                        setTimeout(function () {
-                                            let zoomLevel = map.getZoom();
-                                            if (zoomLevel > 12) map.setZoom(12);
-                                        }, 500);
-
-                                        map.setCenter({ lat: lat, lng: lng });
-
-                                        google.maps.event.trigger(item.marker, 'click');
-                                        getVisibleMarkers();
-                                    });
-
-                                    $("#contents").append(newElement);
-                                });
-
-                                showedItems = currentItems;
-                            }
-
-                            google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
-
-                            google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
-
-                            let locationInput = $('#ort')[0];
-                            let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl"]}});
-                            autocomplete.addListener("place_changed", function () {
-
-                                let place = autocomplete.getPlace();
-                                let address = place.formatted_address;
-                                let geocoder = new google.maps.Geocoder();
-
-                                geocoder.geocode({ 'address': address }, function(results, status) {
-                                    if (status === google.maps.GeocoderStatus.OK) {
-                                        let location = results[0].geometry.location;
-
-                                        map.setCenter(location);
-                                        map.fitBounds(results[0].geometry.viewport);
-
-                                    } else {
-                                        console.warn('Geocode não obteve sucesso devido a: ' + status);
-                                    }
-                                });
-
-                            });
-                        }
-                    }
+                    currentItems = locationItems;
+                    loadCurrentItems();
                 }
             });
+
+            let markerCluster;
+
+            function loadCurrentItems() {
+                $("#count-items-displayed").text(currentItems.length);
+                if(markerCluster != undefined) markerCluster.clearMarkers();
+                if (currentItems.length > 0) {
+                    let openInfoWindow = null;
+
+                    currentItems = currentItems.map(function (item) {
+                        item.location.lat = parseFloat(item[locationField].lat);
+                        item.location.lng = parseFloat(item[locationField].lng);
+                        let marker = new google.maps.Marker({
+                            position: { lat: item.location.lat, lng: item.location.lng },
+                            map: map,
+                            title: item.title,
+                            optimized: false,
+                        });
+                        let infowindowElement = createInfowindowElement(item);
+                        let infowindow = new google.maps.InfoWindow({ content: infowindowElement });
+                        marker.addListener('click', function () {
+                            if (openInfoWindow) openInfoWindow.close();
+                            infowindow.open({ anchor: marker, map });
+                            openInfoWindow = infowindow;
+                        });
+                        item.marker = marker;
+                        return item;
+                    });
+                    
+                    let markers = currentItems.map(item => item.marker);
+                    
+                    markerCluster = new MarkerClusterer(map, markers);
+                    markerCluster.setStyles([{
+                        url: 'http://localhost/maps-theme/public/template/cluster.png',
+                        height: 40,
+                        width: 40,
+                        textSize: 14,
+                        backgroundPosition: '0 0',
+                        iconAnchor: [26, 53],
+                        textColor: '#ffffff'
+                    }]);
+
+                    setTimeout(() => {
+                        clearFocus();
+                        showVisibleMarkers();    
+                    }, 100);
+                }
+            }
+
+            const locationElementTemplate = $("#contents").children().first();
+            locationElementTemplate.remove();
+            
+            function showVisibleMarkers() {
+                
+                let showedItems = currentItems.filter(function (item) {
+                    return map.getBounds().contains(item.marker.getPosition());
+                });
+
+                $("#count-items-displayed").text(showedItems.length);
+
+                $("#contents").empty();
+                showedItems.forEach(function (item) {
+                    let locationElement = locationElementTemplate.clone();
+                    locationElement.html(locationElement.html().replace('$title', item.title));    
+                    locationElement.html(locationElement.html().replace('data-src="$image"', 'src="' + item.image + '"'));
+                    locationElement.html(locationElement.html().replace('data-href="$path"', 'href="' + item.path + '"'));
+                    locationElement.removeClass('d-none');
+                    locationElement.on('click', function () {
+                        map.setZoom(12);
+                        map.setCenter(item.marker.getPosition());                        
+                        showVisibleMarkers();
+                        google.maps.event.trigger(item.marker, 'click');
+                    });
+                    $("#contents").append(locationElement);
+                });
+
+                showedItems = currentItems;
+            }
+
+            google.maps.event.addListener(map, 'dragend', showVisibleMarkers);
+            google.maps.event.addListener(map, 'zoom_changed', showVisibleMarkers);
+
+            $("#search-input").on("keyup", function(event) {
+                if (event.key === "Enter") $("#search-button").click();
+            });
+            $("#search-button").on("click", function () {
+                $("#contents").html("");
+                let value = $("#search-input").val();
+                currentItems = locationItems.filter(function (item) {
+                    return item.title.toLowerCase().includes(value.toLowerCase());
+                });
+                loadCurrentItems();
+            });
+
+            function setLocationFocus(address){
+                new google.maps.Geocoder().geocode({ 'address': address }, function(results, status) {
+                    if (status === google.maps.GeocoderStatus.OK) {
+                        map.setCenter(results[0].geometry.location);
+                        map.fitBounds(results[0].geometry.viewport);
+                    } else {
+                        console.warn('Geocode não obteve sucesso devido a: ' + status);
+                    }
+                });
+            }
+
+            function clearFocus(){
+                let markers = currentItems.map(item => item.marker);
+                if(currentItems.length == 1) {
+                    map.setZoom(12);
+                    map.setCenter(markers[0].getPosition());
+                }else{
+                    let bounds = new google.maps.LatLngBounds();
+                    markers.forEach(function(marker){
+                        bounds.extend(marker.getPosition());
+                    });
+                    map.fitBounds(bounds);
+                }
+            }
+
+            $('#ort').on("change", function(){
+                if($(this).val() === "") clearFocus();
+            });
+
+            let locationInput = $('#ort')[0];
+            let autocomplete = new google.maps.places.Autocomplete(locationInput, {"types": ["country", "route", "street_address", "locality"], "componentRestrictions": {"country": ["de","se","at","nl","br"]}});
+            autocomplete.addListener("place_changed", function () {
+                let place = autocomplete.getPlace();
+                let address = place.formatted_address;
+                if (!place.geometry) {
+                    let inputText = locationInput.value;
+                    let autocompleteService = new google.maps.places.AutocompleteService();
+                    autocompleteService.getPlacePredictions({ input: inputText, componentRestrictions: { country: ["de", "se", "at", "nl", "br"] } }, function (predictions, status) {
+                        if (status === google.maps.places.PlacesServiceStatus.OK && predictions && predictions.length > 0) {
+                            let firstPrediction = predictions[0];
+                            address = firstPrediction.description;
+                            locationInput.value = address;
+                            setLocationFocus(address);
+                        }
+                    });
+                } else setLocationFocus(address);
+            });
+
         }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script>