cronus-theme 2.0.95 → 2.0.96

package/default/login/dist/snippets/js/main.html

@@ -1 +1 @@
-<script src="/layout/frontend/default/login/dist/js/main1743429300.js"></script>
+<script src="/layout/frontend/default/login/dist/js/main1744018696.js"></script>

package/default/login/src/scss/base/_icons.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "icons";
   font-display: swap;
-  src: url('../fonts/icons1743429300.woff2') format('woff2'),
-  url('../fonts/icons1743429300.woff') format('woff');
+  src: url('../fonts/icons1744018696.woff2') format('woff2'),
+  url('../fonts/icons1744018696.woff') format('woff');
 }
 
 .icon {

package/default/templates/shop/customerMap.mustache

@@ -1,36 +1,48 @@
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
-<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
-
-<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.1/dist/MarkerCluster.css" />
-<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.1/dist/MarkerCluster.Default.css" />
-<script src="https://unpkg.com/leaflet.markercluster@1.5.1/dist/leaflet.markercluster.js"></script>
-
-<link rel="stylesheet" href="https://unpkg.com/leaflet.awesome-markers@2.0.5/dist/leaflet.awesome-markers.css" />
-<script src="https://unpkg.com/leaflet.awesome-markers@2.0.5/dist/leaflet.awesome-markers.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" />
-
-
-
-<label class="specialcheckbox" for="toggleShipping">
-    <input type="checkbox" name="toggleShipping" id="toggleShipping" class="" aria-label="{{tc.show_shipping_addresses}}">
-    <i></i>
-    <span aria-hidden="true">{{tc.show_shipping_addresses}}</span>
-</label>
-<div class="row gridGap--small align-items-end">
-    <div class="col-12 col-sm-6 col-md-4 col-lg-3 marginBottom">
-        <label for="zipSearch">{{tc.area_code}}</label>
-        <input type="text" name="zipSearch" id="zipSearch" placeholder="{{tc.area_code}}">
-    </div>
-    <div class="col-12 col-sm-6 col-md-4 col-lg-3 marginBottom">
-        <label for="radius">{{tc.radius}}</label>
-        <input type="number" name="radius" id="radius" value="50">
+<link rel="stylesheet" href="/plugins/openstreetmap/css/leaflet.css"/>
+<link rel="stylesheet" href="/plugins/openstreetmap/css/MarkerCluster.css" />
+<link rel="stylesheet" href="/plugins/openstreetmap/css/MarkerCluster.Default.css" />
+<link rel="stylesheet" href="/plugins/openstreetmap/css/leaflet.awesome-markers.css" />
+<link rel="stylesheet" href="/plugins/openstreetmap/css/font-awesome.min.css" />
+
+<div class="customerMap">
+    <div class="customerMap__filter marginBottom">
+        <div class="row gridGap--small align-items-end">
+            <div class="col-12 col-sm-8 col-md-6 col-lg-4 marginBottom">
+                <div class="customerMapSearch">
+                    <label for="zipSearch">{{tc.address}}</label>
+                    <div class="inputGroup customerMapSearch__bar">
+                        <input type="text" name="zipSearch" id="zipSearch" autocomplete="off" placeholder="{{tc.address}}">
+                    </div>
+                    <div id="zipSuggestions" class="customerMapSearch__suggestions"></div>
+                </div>
+            </div>
+            <div class="col-4 col-sm-4 col-md-3 col-lg-2 marginBottom">
+                <label for="radius">{{tc.radius}}</label>
+                <div class="inputGroup">
+                    <input type="number" name="radius" id="radius" value="50">
+                </div>
+            </div>
+            <div class="col-8 col-sm marginBottom">
+                <button id="searchBtn" type="submit" class="button button--primary">{{tc.filter}}</button>
+                <button id="resetBtn" type="reset" class="button">{{tc.reset}}</button>
+            </div>
+        </div>
+        <label class="specialcheckbox" for="toggleShipping">
+            <input type="checkbox" name="toggleShipping" id="toggleShipping" aria-label="{{tc.show_shipping_addresses}}">
+            <i></i>
+            <span aria-hidden="true">{{tc.show_shipping_addresses}}</span>
+        </label>
     </div>
-    <div class="col marginBottom">
-        <button id="searchBtn" type="submit" class="button button--primary">{{tc.filter}}</button>
-        <button id="resetBtn" type="reset" class="button">{{tc.reset}}</button>
+    <div class="openStreetMap">
+        <div id="map" class="openStreetMap__target">
+
+        </div>
     </div>
 </div>
-<div id="map" style="width: 100%; height: 500px;"></div>
+
+<script src="/plugins/openstreetmap/js/leaflet.js"></script>
+<script src="/plugins/openstreetmap/js/leaflet.markercluster.js"></script>
+<script src="/plugins/openstreetmap/js/leaflet.awesome-markers.js"></script>
 
 <script>
     const customStorageKey = '{{userid}}';
@@ -48,20 +60,133 @@
         return R * c;
     }
 
-    const nominatimURL = "https://nominatim.openstreetmap.org/search?format=json&countrycodes=DE&addressdetails=1&q=";
+    const nominatimURL = "https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&q=";
     const plzCache = JSON.parse(localStorage.getItem("plzCache_" + customStorageKey)) || {};
 
     let filterActive = false;
     let currentCenter = null;
     let currentRadius = 10;
     let zipMarker = null;
+    let currentRequestController = null;
+
+    async function fetchZipSuggestions(query) {
+        if (currentRequestController) {
+            currentRequestController.abort();
+        }
+
+        currentRequestController = new AbortController();
+        const { signal } = currentRequestController;
+        const zipSuggestions = document.getElementById("zipSuggestions");
+        const customerMapSearch = zipSuggestions.closest(".customerMapSearch");
+        customerMapSearch.classList.add("is-loading");
+        try {
+            let response = await fetch(nominatimURL + query, { signal });
+            if (!response.ok) throw new Error("Request failed");
+            return await response.json();
+        } catch (error) {
+            if (error.name !== "AbortError") {
+                console.error("Fehler beim Abrufen der PLZ-Daten", error);
+            }
+            return [];
+        } finally {
+            customerMapSearch.classList.remove("is-loading");
+        }
+    }
 
     document.addEventListener("DOMContentLoaded", function () {
+
         const zipInput = document.getElementById("zipSearch");
+        const zipSuggestions = document.getElementById("zipSuggestions");
+        const zipCache = new Map();
+        let lastSelectedCoords = null;
         const radiusInput = document.getElementById("radius");
         const searchBtn = document.getElementById("searchBtn");
         const resetBtn = document.getElementById("resetBtn");
         const toggleShipping = document.getElementById("toggleShipping");
+        let debounceTimeout = null;
+
+        zipInput.addEventListener("input", function() {
+            let query = zipInput.value.trim();
+            if (query.length < 3) {
+                zipSuggestions.style.display = "none";
+                return;
+            }
+
+            lastSelectedCoords = null;
+
+            if (zipCache.has(query)) {
+                showSuggestions(zipCache.get(query));
+                return;
+            }
+
+            clearTimeout(debounceTimeout);
+            debounceTimeout = setTimeout(async () => {
+                let data = await fetchZipSuggestions(query);
+                zipCache.set(query, data);
+                showSuggestions(data);
+            }, 300);
+        });
+
+        function showSuggestions(data) {
+            zipSuggestions.innerHTML = "";
+            if (data.length === 0) {
+                zipSuggestions.style.display = "none";
+                return;
+            }
+            const zipSuggestionMarkup = `<div class="customerMapSearch__suggestion">%address%, %postcode% %city% %country%</div>`;
+            let count = 0;
+            for (let i = 0; i < data.length; i++) {
+                const entry = data[i];
+                const {
+                    road = "",
+                    house_number = "",
+                    postcode = "",
+                    town = "",
+                    country_code = ""
+                } = entry.address;
+
+                const fullAddress = `${road}${house_number ? " " + house_number : ""}`;
+
+                const zipSuggestionMarkupReplace = zipSuggestionMarkup
+                        .replace("%address%", fullAddress)
+                        .replace("%postcode%", postcode)
+                        .replace("%city%", town)
+                        .replace("%country%", country_code.toUpperCase());
+
+                if(fullAddress === ""){
+                    break;
+                }
+
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(zipSuggestionMarkupReplace, 'text/html');
+                const item = doc.body.firstElementChild;
+
+                item.classList.add("customerMapSearch__suggestion");
+                item.dataset.lat = entry.lat;
+                item.dataset.lon = entry.lon;
+                item.addEventListener("click", function() {
+                    zipInput.value = item.innerText;
+                    let center = { lat: entry.lat, lon: entry.lon };
+                    applyFilter(center);
+                    lastSelectedCoords = { lat: entry.lat, lon: entry.lon };
+                    let storageZip = JSON.stringify({ postcode, lat: entry.lat, lon: entry.lon });
+                    localStorage.setItem("zip_" + customStorageKey, storageZip);
+                    zipSuggestions.style.display = "none";
+                });
+                zipSuggestions.appendChild(item);
+                count++;
+            }
+
+            if(count > 0){
+                zipSuggestions.style.display = "block";
+            }
+        }
+
+        document.addEventListener("click", function(event) {
+            if (!zipInput.contains(event.target) && !zipSuggestions.contains(event.target)) {
+                zipSuggestions.style.display = "none";
+            }
+        });
 
         zipInput.addEventListener("keypress", function(event) {
             if (event.key === "Enter") {
@@ -85,23 +210,29 @@
         });
 
         const map = L.map('map');
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; OpenStreetMap contributors'
+
+        map.zoomControl.remove();
+        L.control.zoom({
+            position: 'topleft'
         }).addTo(map);
 
-        const shippingIcon = L.AwesomeMarkers.icon({ icon: 'info-circle', markerColor: 'red', prefix: 'fa' });
-        const invoiceIcon = L.AwesomeMarkers.icon({ icon: 'info-circle', markerColor: 'blue', prefix: 'fa' });
-        const centerIcon = L.AwesomeMarkers.icon({ icon: 'map-marker', markerColor: 'green', prefix: 'fa' });
-        //Beispiel für custom Marker
-        /*
-        let customMarker = L.divIcon({
-            className: 'custom-marker',
-            html: '<div class="marker-circle">1</div>',
-            iconSize: [30, 30],
-            iconAnchor: [15, 15]
+        document.querySelectorAll(".leaflet-control-zoom a").forEach(button => {
+            button.removeAttribute("href");
         });
-        marker = L.marker([pin.latitude, pin.longitude], { icon: customMarker });
-         */
+
+        //light styling
+        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        //base styling
+        /*L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);*/
+
+        const shippingIcon = L.AwesomeMarkers.icon({ icon: 'truck', markerColor: 'gray', prefix: 'fa' });
+        const invoiceIcon = L.AwesomeMarkers.icon({ icon: 'user', markerColor: 'black', prefix: 'fa' });
+        const centerIcon = L.AwesomeMarkers.icon({ icon: 'map-marker', markerColor: 'lightgray', prefix: 'fa' });
 
         let markersClusterInvoice = L.markerClusterGroup();
         let markersClusterShipping = L.markerClusterGroup();
@@ -116,27 +247,24 @@
             }
 
             pins.forEach(pin => {
-                if (!pin.show) {
-                    return;
-                }
-                if (!toggleShipping.checked && pin.isShippingAddress === 1) return;
+                if (!pin.show || (!toggleShipping.checked && pin.isShippingAddress === 1)) return;
 
                 let distanceText = '';
                 if (filterActive) {
                     const distance = getDistance(currentCenter.lat, currentCenter.lon, pin.latitude, pin.longitude);
                     if (distance > currentRadius) return;
-                    distanceText = ` (${distance.toFixed(1)} km)`;
+                    distanceText = '' //` (${distance.toFixed(1)} km)`;
                 }
 
                 let marker = L.marker([pin.latitude, pin.longitude], { icon: pin.isShippingAddress ? shippingIcon : invoiceIcon });
-                let address = pin.address + ', ' + pin.post_code + ' ' + pin.city + ', ' + pin.country;
-                let formStart = '<form id="customer_select" name="customer_select" method="post" action=""><input type="hidden" name="select_customer" value="select_customer"><input type="hidden" name="customer_select" value="' + pin.customer_no + '">';
+                let address = `${pin.address}, ${pin.post_code} ${pin.city}, ${pin.country}`;
+                let formStart = `<form id="customer_select" name="customer_select" method="post" action=""><input type="hidden" name="select_customer" value="select_customer"><input type="hidden" name="customer_select" value="${pin.customer_no}">`;
                 let formEnd = '</form>';
-                let balance = '{{tc.current_balance}}: ' + pin.balance;
-                let balanceDue = '{{tc.current_balance_due}}: ' + pin.balance_due;
-                let creditLimit = '{{tc.current_credit_limit}}: ' + pin.credit_limit;
+                let balance = '' //`{{tc.current_balance}}: ${pin.balance}`;
+                let balanceDue = '' //`{{tc.current_balance_due}}: ${pin.balance_due}`;
+                let creditLimit = '' //`{{tc.current_credit_limit}}: ${pin.credit_limit}`;
 
-                marker.bindPopup('<div style="font-size: 11px; line-height: 0;">' + formStart + '<p onclick="this.closest(\'form\').submit();" style="text-decoration: underline; cursor: pointer;">' + pin.customer_no + '</p>' + formEnd + '<p>' + pin.name + '</p><p>' + address + '</p><p>' + balance + '</p><p>' + balanceDue + '</p><p>' + creditLimit + '</p><p>' + distanceText + '</p></div>');
+                marker.bindPopup(`<div style="font-size: 11px; line-height: 0;">${formStart}<p onclick="this.closest('form').submit();" style="text-decoration: underline; cursor: pointer;">${pin.customer_no}</p>${formEnd}<p>${pin.name}</p><p>${address}</p><p>${balance}</p><p>${balanceDue}</p><p>${creditLimit}</p><p>${distanceText}</p></div>`);
                 pin.isShippingAddress ? markersClusterShipping.addLayer(marker) : markersClusterInvoice.addLayer(marker);
             });
 
@@ -150,7 +278,7 @@
             }
 
             if (bounds.isValid()) {
-                map.fitBounds(bounds, { padding: [20, 20] });
+                map.fitBounds(bounds, { padding: [30, 30] });
             } else {
                 map.setView([51.1657, 10.4515], 6);
             }
@@ -163,33 +291,41 @@
             const zip = zipInput.value.trim();
             currentRadius = parseFloat(radiusInput.value);
 
-            localStorage.setItem("zip_" + customStorageKey, zip);
             localStorage.setItem("radius_" + customStorageKey, currentRadius);
 
-            if (!zip) {
-                resetFilter();
-                return;
-            }
-
-            if (plzCache[zip]) {
-                applyFilter(plzCache[zip]);
+            if (lastSelectedCoords && lastSelectedCoords.lat && lastSelectedCoords.lon) {
+                if (!zip) {
+                    resetFilter();
+                    return;
+                }
+                applyFilter(lastSelectedCoords);
             } else {
-                fetch(nominatimURL + zip)
-                        .then(response => response.json())
-                        .then(data => {
-                            if (data.length === 0) {
-                                return;
-                            }
-
-                            const center = { lat: parseFloat(data[0].lat), lon: parseFloat(data[0].lon) };
-                            plzCache[zip] = center;
-                            localStorage.setItem("plzCache_" + customStorageKey, JSON.stringify(plzCache));
-
-                            applyFilter(center);
-                        })
-                        .catch(error => {
-                            console.error("Fehler beim Abrufen der Koordinaten:", error);
-                        });
+                let storageZip = JSON.stringify({ zip });
+                localStorage.setItem("zip_" + customStorageKey, storageZip);
+
+                if (!zip) {
+                    resetFilter();
+                    return;
+                }
+
+                if (plzCache[zip]) {
+                    applyFilter(plzCache[zip]);
+                } else {
+                    fetch(nominatimURL + zip)
+                            .then(response => response.json())
+                            .then(data => {
+                                if (data.length === 0) return;
+
+                                const center = { lat: parseFloat(data[0].lat), lon: parseFloat(data[0].lon) };
+                                plzCache[zip] = center;
+                                localStorage.setItem("plzCache_" + customStorageKey, JSON.stringify(plzCache));
+
+                                applyFilter(center);
+                            })
+                            .catch(error => {
+                                console.error("Fehler beim Abrufen der Koordinaten:", error);
+                            });
+                }
             }
         }
 
@@ -205,13 +341,21 @@
             radiusInput.value = 50;
             localStorage.removeItem("zip_" + customStorageKey);
             localStorage.removeItem("radius_" + customStorageKey);
+            lastSelectedCoords = null;
             updateMap();
         }
 
         searchBtn.addEventListener("click", filterByRadius);
         resetBtn.addEventListener("click", resetFilter);
 
-        zipInput.value = localStorage.getItem("zip_" + customStorageKey) ?? "";
+        let storageZip = localStorage.getItem("zip_" + customStorageKey);
+        if (storageZip) {
+            storageZip = JSON.parse(storageZip);
+            zipInput.value = storageZip.zip;
+            lastSelectedCoords = { lat: storageZip.lat, lon: storageZip.lon };
+        } else {
+            zipInput.value = "";
+        }
         radiusInput.value = localStorage.getItem("radius_" + customStorageKey) ?? 50;
 
         filterByRadius();

package/default/website/build/doc/doc.css

@@ -364,7 +364,7 @@ table {
 @font-face {
   font-family: "icons";
   font-display: swap;
-  src: url("../fonts/icons1743429306.woff2") format("woff2"), url("../fonts/icons1743429306.woff") format("woff");
+  src: url("../fonts/icons1744018702.woff2") format("woff2"), url("../fonts/icons1744018702.woff") format("woff");
 }
 .icon {
   font-family: "icons";