345 lines
16 KiB
PHP
345 lines
16 KiB
PHP
@extends('template.'.config('settings.template').'.content.master')
|
|
@section('head')
|
|
<title>Home | {{config('settings.name')}}</title>
|
|
<style>
|
|
#map {
|
|
height: 80vh;
|
|
width: 100%;
|
|
}
|
|
.address + .address{
|
|
margin-top: .5rem;
|
|
}
|
|
#marker-window{
|
|
min-width: 100px;
|
|
}
|
|
#contents {
|
|
scrollbar-color: #aaa #f5f5f5;
|
|
}
|
|
|
|
#contents::-webkit-scrollbar {
|
|
width: 8px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
#contents::-webkit-scrollbar-thumb {
|
|
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;
|
|
}
|
|
</style>
|
|
@stop
|
|
@section('content')
|
|
<div class="container py-5">
|
|
<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-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> results</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-4 overflow-auto" style="height: 80vh;" id="contents">
|
|
<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-12">
|
|
<h3 class="fs-6 m-0">$title</h3>
|
|
<!-- <a data-href="$path">Ansehen</a> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-8 g-0">
|
|
<div id="map"></div>
|
|
<div id="marker-window" class="d-none">
|
|
<h6 id="firstHeading" class="firstHeading">$title</h6>
|
|
<div id="bodyContent">
|
|
<p>$description</p>
|
|
<a data-href="$path" style="outline: none;">Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&callback=initMap&v=weekly" defer></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>
|
|
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 |