134 lines
5.1 KiB
JavaScript
134 lines
5.1 KiB
JavaScript
const div_map = document.getElementById('map');
|
|
//const div_info = document.getElementById('club_map_data');
|
|
|
|
const api_url = "http://localhost:5173";
|
|
|
|
let map = L.map('map').setView([46.631196, 2.456000], 6);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
const getMeta = async (url) => {
|
|
const img = new Image();
|
|
img.src = url;
|
|
await img.decode();
|
|
return img
|
|
};
|
|
|
|
function timeNumberToSting(nbMin) {
|
|
return String(Math.floor(nbMin / 60)).padStart(2, '0') + ":" + String(nbMin % 60).padStart(2, '0')
|
|
}
|
|
|
|
const sortHoraire = (a, b) => {
|
|
if (a.day === b.day)
|
|
return a.time_start - b.time_start;
|
|
return a.day - b.day;
|
|
}
|
|
|
|
//let last_info_show = null;
|
|
|
|
async function getData() {
|
|
const response = await fetch(`${api_url}/api/club/get_map_data`);
|
|
if (!response.ok) {
|
|
throw new Error(`Response status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
for (const d of data) {
|
|
console.log(d);
|
|
|
|
if (d.training_location.length === 0)
|
|
continue;
|
|
|
|
let icon = null;
|
|
if (d.uuid !== null) {
|
|
console.log("logo");
|
|
|
|
const img = await getMeta(`http://localhost:5173/api/club/${d.uuid}/logo`);
|
|
let ratio = img.naturalHeight / img.naturalWidth;
|
|
|
|
icon = L.icon({
|
|
iconUrl: `http://localhost:5173/api/club/${d.uuid}/logo`,
|
|
|
|
iconSize: [50, 50 * ratio], // size of the icon
|
|
//shadowSize: [50, 64], // size of the shadow
|
|
iconAnchor: [25, 50 * ratio], // point of the icon which will correspond to marker's location
|
|
//shadowAnchor: [4, 62], // the same for the shadow
|
|
popupAnchor: [0, -50 * ratio] // point from which the popup should open relative to the iconAnchor
|
|
});
|
|
}
|
|
|
|
for (const m of d.training_location) {
|
|
console.log(m);
|
|
let marker;
|
|
if (icon === null)
|
|
marker = L.marker([m.lat, m.lng]);
|
|
else
|
|
marker = L.marker([m.lat, m.lng], {icon: icon});
|
|
marker.addTo(map);
|
|
|
|
const div_info = document.createElement("div");
|
|
let tmp = document.createElement("h3");
|
|
tmp.textContent = d.name;
|
|
div_info.appendChild(tmp);
|
|
|
|
div_info.appendChild(document.createTextNode(`Adresse: `));
|
|
div_info.appendChild(document.createElement("br"));
|
|
for (const m of d.training_location) {
|
|
div_info.appendChild(document.createTextNode(m.addr));
|
|
div_info.appendChild(document.createElement("br"));
|
|
}
|
|
div_info.appendChild(document.createElement("br"));
|
|
|
|
div_info.appendChild(document.createTextNode(`Horaire: `));
|
|
div_info.appendChild(document.createElement("br"));
|
|
if (!d.training_day_time || JSON.parse(d.training_day_time).length === 0) {
|
|
div_info.appendChild(document.createTextNode("Pas d'horaire disponible"));
|
|
div_info.appendChild(document.createElement("br"));
|
|
} else {
|
|
for (const m of JSON.parse(d.training_day_time).sort(sortHoraire)) {
|
|
console.log(m);
|
|
let days = ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"];
|
|
|
|
div_info.appendChild(document.createTextNode(`${days[m.day]}: ${timeNumberToSting(m.time_start)} - ${timeNumberToSting(m.time_end)}`));
|
|
div_info.appendChild(document.createElement("br"));
|
|
}
|
|
}
|
|
div_info.appendChild(document.createElement("br"));
|
|
|
|
div_info.appendChild(document.createTextNode(`Contact: `));
|
|
div_info.appendChild(document.createElement("br"));
|
|
if (d.contact === null || Object.keys(d.contact).length === 0) {
|
|
div_info.appendChild(document.createTextNode("Pas de contact disponible"));
|
|
div_info.appendChild(document.createElement("br"));
|
|
} else {
|
|
for (const [key, value] of Object.entries(d.contact)) {
|
|
div_info.appendChild(document.createTextNode(`${key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}: ${value}`));
|
|
div_info.appendChild(document.createElement("br"));
|
|
}
|
|
}
|
|
marker.bindPopup(div_info.innerHTML);
|
|
|
|
//marker.on('click', e => {
|
|
//console.log("click");
|
|
//if (div_map.style.height !== "95vh" && last_info_show === d.name) {
|
|
//div_map.style.height = "95vh";
|
|
//div_info.style.minHeight = "0";
|
|
//div_info.replaceChildren();
|
|
//} else {
|
|
//div_map.style.height = "80vh";
|
|
//div_info.style.minHeight = "15vh";
|
|
//div_info.replaceChildren();
|
|
|
|
//last_info_show = d.name;
|
|
//}
|
|
//})
|
|
}
|
|
}
|
|
}
|
|
|
|
getData().then(() => console.log("end loading"));
|
|
|
|
console.log("test"); |