added search bar

content/contents/default.blade.php

@@ -37,5 +37,25 @@
         const contentUrl = "{{url('/api/contents/'.$content->id)}}";
         const locationField = "location";
     </script>
-    <script src="{{asset('template/js/maps.js')}}"></script>
+    <script>
+        function initMap() {
+            let item = {!! json_encode($content) !!};
+            
+            const map = new google.maps.Map(document.getElementById("map"), {
+                zoom: 8,
+                center: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng)  },
+                streetViewControl: false,
+                mapTypeControl: false,
+                fullscreenControl: false,
+            });
+
+            let marker = new google.maps.Marker({
+                position: { lat: parseFloat(item.location.lat), lng: parseFloat(item.location.lng) },
+                map: map,
+                title: item.title,
+                optimized: false,
+            });
+        }
+        window.initMap = initMap;
+    </script>
 @stop

content/index.blade.php

@@ -5,28 +5,66 @@
         #map {
             height: 80vh;
             width: 100%;
+            border-radius: 0.375rem;
+        }
+        .address + .address{
+            margin-top: .5rem;
+        }
+        #marker-window{
+            min-width: 100px;
         }
     </style>
 @stop
 @section('content')
-    <div class="container">
+    <div class="container py-5">
-        <div class="row">
+        <div class="row mb-3">
-            <div class="col">
+            <div id="filters" class="col-12 col-md rounded-end">
-                <h1>{{config('settings.name')}}</h1>
+                <div class="d-flex">
-                <p>{{config('settings.description')}}</p>
+                    <!-- <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">
+                            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 style="width: 200px;">
+                        <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort" disabled>
+                    </div>
+                    <div class="input-group ms-2" style="width: 200px;">
+                        <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche">
+                        <span class="input-group-text" id="search-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                            </svg>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-auto pe-0 d-flex align-items-end">
+                <p class="text-end text-muted small m-0 p-0"><span id="count-items-displayed">0</span>/<span id="count-items">0</span></p>
             </div>
         </div>
         <div class="row">
             <div class="col-4" id="contents">
-                <div class="card d-none">
+                <div class="card d-none address">
                     <div class="card-body">
                         <div class="row">
-                            <div class="col-5">
+                            <!-- <div class="col-5">
                                 <img data-src="$image" alt="">
-                            </div>
+                            </div> -->
-                            <div class="col-7">
+                            <div class="col-12">
-                                <h3 class="h5">$title</h3>
+                                <h3 class="fs-6 m-0">$title</h3>
-                                <a data-href="$path">Ansehen</a>
+                                <!-- <a data-href="$path">Ansehen</a> -->
                             </div>
                         </div>
                     </div>
@@ -35,7 +73,7 @@
             <div class="col-8 g-0">
                 <div id="map"></div>
                 <div id="marker-window" class="d-none">
-                    <h5 id="firstHeading" class="firstHeading">$title</h5>
+                    <h6 id="firstHeading" class="firstHeading">$title</h6>
                     <div id="bodyContent">
                         <p>$description</p>
                         <a data-href="$path">Details</a>
@@ -45,10 +83,236 @@
         </div>
     </div>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></script>
-    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
+    <!-- <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script> -->
+    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
     <script>
         const contentUrl = "{{url('/api/types/locations/contents')}}";
         const locationField = "location";
     </script>
-    <script src="{{asset('template/js/maps.js')}}"></script>
+    <script>
+        function initMap() {
+            $.ajax({
+                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
+                url: contentUrl,
+                type: 'GET',
+                data: {},
+                success: function (contents) {
+
+                    let receivedItems = contents["contents"];
+
+                    if (receivedItems != undefined) {
+
+                        receivedItems = receivedItems.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
+
+                        const templateInfowindow = $("#marker-window");
+
+                        let templateElement = $("#contents").children().first();
+                        templateContent = templateElement;
+                        templateElement.remove();
+
+                        $("#search-button").on("click", function () {
+                            $("#contents").html("");
+                            let value = $("#search-input").val();
+                            items = receivedItems.filter(function (item) {
+                                return item.title.toLowerCase().includes(value.toLowerCase());
+                            });
+                            loadItems();
+                        });
+
+                        items = receivedItems;
+
+                        loadItems();
+
+                        function loadItems() {
+                            console.log(items.length);
+                            $("#count-items-displayed").text(items.length);
+                            $("#count-items").text(items.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 (items.length > 0) {
+
+
+                                let currentInfoWindow = null;
+
+                                items = items.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 contentString = templateInfowindow.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');
+
+                                    let infowindow = new google.maps.InfoWindow({
+                                        content: contentString[0].outerHTML
+                                    });
+
+                                    marker.addListener('click', function () {
+
+                                        if (currentInfoWindow) currentInfoWindow.close();
+
+                                        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');
+
+                                    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 = items.map(function (item) {
+                                    return item.marker;
+                                });
+
+                                var bounds = new google.maps.LatLngBounds();
+                                for (var i = 0; i < markers.length; i++) {
+                                    bounds.extend(markers[i].getPosition());
+                                }
+                                map.fitBounds(bounds);
+
+
+                                setTimeout(function () {
+                                    var 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);
+                                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 = items;
+
+                                    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(items.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');
+
+                                        newElement.on('click', function () {
+
+                                            var bounds = new google.maps.LatLngBounds();
+                                            bounds.extend(item.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(item.marker, 'click');
+                                            getVisibleMarkers();
+                                        });
+
+                                        $("#contents").append(newElement);
+                                    });
+
+                                    showedItems = items;
+                                }
+
+                                google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
+
+                                google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
+                            }
+                        }
+                    }
+                },
+                error: function (error) {
+                    console.log(error);
+                }
+            });
+        }
+        window.initMap = initMap;
+    </script>
 @stop

content/master.blade.php

@@ -6,8 +6,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
         <meta name="description" content="{{config('settings.description')}}" />
         <meta name="author" content=""/>
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+        <link href="{{asset('template/libs/bootstrap-5.2.0/bootstrap.min.css')}}" rel="stylesheet"/>
-        <script src="{{storage('libs/jquery-3.6.0.min.js')}}"></script>
+        <script src="{{asset('template/libs/jquery-3.6.0.min.js')}}"></script>
+        <script src="{{asset('template/libs/bootstrap-5.2.0/bootstrap.bundle.min.js')}}"></script>
         @yield('head')
     </head>
     <body>

js/maps.js

@@ -1,140 +0,0 @@
-function initMap() {
-    $.ajax({
-        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
-        url: contentUrl,
-        type: 'GET',
-        data: {},
-        success: function (contents) {
-
-            let items = contents["contents"];
-
-            if (items != undefined) {
-
-                let map = undefined;
-
-                if (items.length > 1) {
-                    map = new google.maps.Map(document.getElementById("map"), {
-                        zoom: 6,
-                        center: { lat: 50.9807, lng: 10.31522 }
-                    });
-                } else {
-                    map = new google.maps.Map(document.getElementById("map"), {
-                        zoom: 7,
-                        center: { lat: items[0][locationField].lat, lng: items[0][locationField].lng }
-                    });
-                }
-
-                let templateElement = $("#contents").children().first();
-                templateContent = templateElement;
-                templateElement.remove();
-
-                if ($("#contents").length > 0) {
-                    items.forEach(function (item) {
-                        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');
-                        $("#contents").append(newElement);
-                    });
-                }
-
-                items = items.filter(function (item) { return item[locationField].lat !== '' && item[locationField].lng !== '' });
-
-                let currentInfoWindow = null;
-
-                const templateInfowindow = $("#marker-window");
-
-                const markers = items.map(function (item) {
-                    let marker = new google.maps.Marker({
-                        position: { lat: parseFloat(item[locationField].lat), lng: parseFloat(item[locationField].lng) },
-                        map: map,
-                        title: item.title,
-                        optimized: false,
-                    });
-
-                    let contentString = templateInfowindow.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');
-
-                    marker.addListener('click', function () {
-                        if (currentInfoWindow) currentInfoWindow.close();
-
-                        let infowindow = new google.maps.InfoWindow({
-                            content: contentString[0].outerHTML,
-                            ariaLabel: "",
-                        });
-
-                        infowindow.open({
-                            anchor: marker,
-                            map,
-                        });
-
-                        currentInfoWindow = infowindow;
-                    });
-
-                    return marker;
-                });
-
-                new markerClusterer.MarkerClusterer({ map, markers });
-
-                if ($("#contents").length > 0) {
-                    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 = items;
-
-                        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("");
-
-                        showedItems.forEach(function (item) {
-                            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');
-                            $("#contents").append(newElement);
-                        });
-
-                        showedItems = items;
-                    }
-
-                    google.maps.event.addListener(map, 'dragend', getVisibleMarkers);
-
-                    google.maps.event.addListener(map, 'zoom_changed', getVisibleMarkers);
-                }
-            }
-        },
-        error: function (error) {
-            console.log(error);
-        }
-    });
-}
-window.initMap = initMap;