From a3d1f45e5f83485f53c80d50bf37d65cbbf5262c Mon Sep 17 00:00:00 2001 From: Gustavo Luigi <=> Date: Tue, 20 Jun 2023 15:34:36 -0300 Subject: [PATCH] added dynamic filters --- assets/content/script.js | 18 ++ assets/home/script.js | 306 +++++++++++++++++++++++ cluster.png => assets/images/cluster.png | Bin content/contents/default.blade.php | 25 +- content/index.blade.php | 240 ++++-------------- variables.json | 5 + 6 files changed, 377 insertions(+), 217 deletions(-) create mode 100644 assets/content/script.js create mode 100644 assets/home/script.js rename cluster.png => assets/images/cluster.png (100%) diff --git a/assets/content/script.js b/assets/content/script.js new file mode 100644 index 0000000..bc50038 --- /dev/null +++ b/assets/content/script.js @@ -0,0 +1,18 @@ +function initMap() { + + 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, + }); + + 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; \ No newline at end of file diff --git a/assets/home/script.js b/assets/home/script.js new file mode 100644 index 0000000..709d52e --- /dev/null +++ b/assets/home/script.js @@ -0,0 +1,306 @@ +function textToSlug(text) { + return text.toString().toLowerCase() + .normalize('NFD').replace(/[\u0300-\u036f]/g, '') + .replace(/\s+/g, '-') + .replace(/[^\w\-]+/g, '') + .replace(/\-\-+/g, '-') + .replace(/^-+/, '') + .replace(/-+$/, ''); +} + +let selectFields = {}; + +$(function () { + $.get(urlBase + "/types/" + textToSlug(type) + "/fields").done(function (response) { + + let allField = response["fields"]; + + allField.forEach(function (field) { + if (field.type == "select") selectFields[field.name] = field.attr.tags; + }); + + filterFields.forEach(function (item) { + + let filterTemplate = $('#filter'); + let filterElement = $(filterTemplate.clone().html()); + filterElement.find('.filter-name').text(item); + + let options = selectFields[item]; + + options.forEach(function (option) { + let filterOption = ` +
  • + +
    • `; + filterElement.find('.filter-options').append(filterOption); + }); + + $('#filters').append(filterElement); + + let appliedFilterTemplate = $('#applied-filter'); + let appliedFilterElement = $(appliedFilterTemplate.clone().html()); + appliedFilterElement.find('.filter-name').text(item); + appliedFilterElement.attr('data-field', item); + $('#applied-filters').append(appliedFilterElement); + + }); + }); +}); + +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(urlBase + "/types/" + textToSlug(type) + "/contents").done(function (contents) { + let items = contents["contents"]; + if (items != undefined) { + locationItems = items.filter(function (item) { return item[textToSlug(locationField)].lat !== '' && item[textToSlug(locationField)].lng !== '' }); + currentItems = locationItems; + loadCurrentItems(); + } + }); + + let markerCluster; + + function loadCurrentItems() { + applyFilters(); + + $("#count-items-displayed").text(currentItems.length); + if (markerCluster != undefined) markerCluster.clearMarkers(); + if (currentItems.length > 0) { + let openInfoWindow = null; + + currentItems = currentItems.map(function (item) { + if (item.location == undefined) item.location = {}; + item.location.lat = parseFloat(item[textToSlug(locationField)].lat); + item.location.lng = parseFloat(item[textToSlug(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: urlBase + '/template/assets/images/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 () { + + if ($("#search-input").val() === "") { + $(".applied-filter[data-field='search']").addClass("d-none").removeClass("d-inline-block"); + $(".applied-filter[data-field='search']").find(".filter-name").text(""); + } + else { + $(".applied-filter[data-field='search']").removeClass("d-none").addClass("d-inline-block"); + $(".applied-filter[data-field='search']").find(".filter-name").text("Freitext: " + $("#search-input").val()); + } + + let selectedFilterOptions = $(".check-filter[name='filter-options']:checked").length; + if (selectedFilterOptions > 0 || $("#ort").val() != "" || $("#search-input").val() != "") $("#reset-filters-button").show(); + else $("#reset-filters-button").hide(); + + loadCurrentItems(); + }); + + $(document).on("click", ".applied-filter", function () { + let field = $(this).attr("data-field"); + if (field == "ort") $("#ort").val(""); + else if (field == "search") $("#search-input").val(""); + else { + $(".check-filter[data-field='" + field + "'][name='filter-options']:checked").prop("checked", false); + $(".check-filter[data-field='" + field + "'][name='filter-options']").trigger("change"); + } + }); + + $(document).on("change", ".check-filter", function () { + loadCurrentItems(); + }); + + function applyFilters() { + let searchedValue = $("#search-input").val(); + currentItems = locationItems.filter(function (item) { + return item.title.toLowerCase().includes(searchedValue.toLowerCase()); + }); + + Object.keys(selectFields).forEach(function (name) { + let key = textToSlug(name); + + let locationWithSelectField = currentItems.filter(function (item) { + return item[key] != undefined; + }); + + let selectedOptions = $(".check-filter[data-field='" + name + "'][name='filter-options']:checked").map(function () { + return $(this).val(); + }).get(); + + if (selectedOptions.length > 0) { + if (selectedOptions.length > 0) { + $(".applied-filter[data-field='" + name + "']").removeClass("d-none").addClass("d-inline-block"); + $(".applied-filter[data-field='" + name + "']").find(".filter-name").text(name + ": " + selectedOptions.join(", ")); + } + + currentItems = locationWithSelectField.filter(function (item) { + return selectedOptions.some(function (selectedOption) { + return item[key].includes(selectedOption); + }); + }); + } else { + $(".applied-filter[data-field='" + name + "']").removeClass("d-inline-block").addClass("d-none"); + $(".applied-filter[data-field='" + name + "']").find(".filter-name").text(name); + } + }); + + let selectedFilterOptions = $(".check-filter[name='filter-options']:checked").length; + if (selectedFilterOptions > 0 || $("#ort").val() != "" || $("#search-input").val() != "") $("#reset-filters-button").show(); + else $("#reset-filters-button").hide(); + } + + $("#reset-filters-button").click(function () { + $("#search-input").val(""); + $("#search-button").trigger("click"); + $("#ort").val(""); + $("#ort").trigger("change"); + $(".check-filter").prop("checked", false); + $(".check-filter").trigger('change'); + loadCurrentItems(); + }); + + function setLocationFocus(address) { + + $(".applied-filter[data-field='ort']").show(); + $(".applied-filter[data-field='ort']").find(".filter-name").text("Ort: " + 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(); + $(".applied-filter[data-field='ort']").hide(); + $(".applied-filter[data-field='ort']").find(".filter-name").text(""); + } + let selectedFilterOptions = $(".check-filter[name='filter-options']:checked").length; + if (selectedFilterOptions > 0 || $("#ort").val() != "" || $("#search-input").val() != "") $("#reset-filters-button").show(); + else $("#reset-filters-button").hide(); + }); + + 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); + }); + +} \ No newline at end of file diff --git a/cluster.png b/assets/images/cluster.png similarity index 100% rename from cluster.png rename to assets/images/cluster.png diff --git a/content/contents/default.blade.php b/content/contents/default.blade.php index 247f1e6..45884e9 100644 --- a/content/contents/default.blade.php +++ b/content/contents/default.blade.php @@ -34,27 +34,8 @@ - + @stop \ No newline at end of file diff --git a/content/index.blade.php b/content/index.blade.php index 0b82234..182a675 100644 --- a/content/index.blade.php +++ b/content/index.blade.php @@ -49,48 +49,69 @@
    -
    +
    -
    -
    - - -
    +
    +
    -
    +
    -
    +
    - +
    +
    +
    +
    + +
    + + +
    + +

    0 results

    -
    $title
    -

    $description

    Details
    @@ -111,186 +132,15 @@
    -
    - + @stop \ No newline at end of file diff --git a/variables.json b/variables.json index 34f48cf..3dbf379 100644 --- a/variables.json +++ b/variables.json @@ -10,5 +10,10 @@ "value": "Address", "type": "string", "required": true + }, + { + "name": "Filter Fields", + "type": "array", + "required": true } ] \ No newline at end of file