Untitled
unknown
plain_text
2 years ago
27 kB
7
Indexable
if (id_project !=undefined && id_project !=0) {
const url = '/var/alomrane/storage/images/media/projets2/';
var currentLanguage = document.documentElement.lang;
var imm_selected_layer = undefined;
var current_imm_layer = [];
var translations = {
fr_FR: {
Type: "Type",
'Lot N°': "Lot N°",
'Libre': "A vendre",
Titre_foncier: "Titre foncier",
Prix_unitaire: "Prix unitaire",
Disponible: "Disponible",
Non_disponible: "Non disponible",
'Détail' : "Détail",
'Surface': "Surface",
'Affecté': "Affecté",
'Prix_total': "Prix total",
'Non commercialisé': "Non encore commercialisé",
'Espace vert/Foret': "Espace vert/Foret",
'Parking /Parc aménagé': "Parking /Parc aménagé",
'Place publique': "Place publique",
'MAD': "MAD",
'm²': "m²",
Produit: "Produit N°",
Vendu : "Affecté",
"Avendre" : "A vendre",
floor : "Etage"
},
ar_SA: {
Type: "نوع",
'Lot N°': "رقم القطعة الرضية",
'Libre': "متوفر",
Titre_foncier: "سند ملكية الأرض",
Prix_unitaire: "سعر الوحدة",
Disponible: "متوفر",
Non_disponible: "غير متوفر",
'Détail' : "التفاصيل",
'Surface': "مساحة",
'Affecté': "مخصص",
'Prix_total': "الثمن الجملي",
'Non commercialisé': "غير مسوق",
'Espace vert/Foret': "مساحة خضراء / غابة",
'Parking /Parc aménagé': "موقف سيارات / حديقة ذات مناظر طبيعية",
'Place publique': "مكان عمومي",
'MAD': "درهم",
'm²': "متر مربع",
Produit: "رقم المنتج°",
},
en_US: {
Type: "Type",
'Lot N°': "Lot N°",
'Libre': "A vendre",
Titre_foncier: "Titre foncier",
Prix_unitaire: "Prix unitaire",
Disponible: "Disponible",
Non_disponible: "Non disponible",
'Détail' : "Détail",
'Surface': "Surface",
'Affecté': "Affecté",
'Prix_total': "Prix total",
'Non commercialisé': "Non encore commercialisé",
'Espace vert/Foret': "Espace vert/Foret",
'Parking /Parc aménagé': "Parking /Parc aménagé",
'Place publique': "Place publique",
'MAD': "MAD",
'm²': "m²",
Produit: "Produit N°",
},
am_ma: {
Type: "Type",
'Lot N°': "Lot N°",
'Libre': "A vendre",
Titre_foncier: "Titre foncier",
Prix_unitaire: "Prix unitaire",
Disponible: "Disponible",
Non_disponible: "Non disponible",
'Détail' : "Détail",
'Surface': "Surface",
'Affecté': "Affecté",
'Prix_total': "Prix total",
'Non commercialisé': "Non encore commercialisé",
'Espace vert/Foret': "Espace vert/Foret",
'Parking /Parc aménagé': "Parking /Parc aménagé",
'Place publique': "Place publique",
'MAD': "MAD",
'm²': "m²",
Produit: "Produit N°",
}
};
const projet2 = {
"id_projet": id_project,
"id_filiale": 7,
"id_ville": 45,
"nom": "LOTISSEMENT AL HADIKA 2",
"info": "Le projet Al Hadika vous offre des appartements de haut standing titrés et livrables, dans un cadre exceptionnel.\\n\\nLe projet est situé dans un complexe résidentiel sécurisé, au boulevard Mohamed VI au cSur de la ville de Marrakech.",
"lat": 34.23290968,
"lng": -6.632807242,
"nom_ville": "Kenitra",
"nom_filaile": "Rabat - Sal\u00e9 - K\u00e9nitra",
"big_images": [
"projets/2/images/big/1.jpg",
"projets/2/images/big/2.jpg",
"projets/2/images/big/3.jpg"
],
"small_images": [
"projets/2/images/small/1.jpg",
"projets/2/images/small/2.jpg",
"projets/2/images/small/3.jpg"
]
};
const legendes = [
{
text: translations[currentLanguage]["Libre"],
fillColor: lots_libre_style.fillColor
},
{
text: translations[currentLanguage]["Affecté"],
fillColor: lots_vendu_style.fillColor
},
{
text: translations[currentLanguage]["Non commercialisé"],
fillColor: lots_other_project.fillColor
}
];
const legendBody = document.querySelector(".legend-body");
legendes.forEach(({ text, fillColor }, index) => {
const legendItem = document.createElement("div");
const legendBall = document.createElement("div");
const legendText = document.createElement("p");
legendItem.classList.add("legend-item")
legendBall.classList.add("legend-ball")
legendText.classList.add("legend-text")
legendItem.append(legendBall);
legendItem.append(legendText);
legendText.textContent = text;
legendBall.style.backgroundColor = fillColor;
legendBody.append(legendItem);
})
function loadProject(projet, lot = undefined, imm = undefined) {
let lotFound = false;
current_projet = projet;
current_lots_layer = [];
current_voirie_layer = [];
current_places_layer = [];
current_imm_layer = [];
current_lots_layer.forEach(layer => {
layer.remove();
});
current_voirie_layer.forEach(layer => {
layer.remove();
});
current_places_layer.forEach(layer => {
layer.remove();
});
current_imm_layer.forEach(layer => {
layer.remove();
});
var geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/lots.geojson`, {
onEachFeature: function (feature, layer) {
var c_lot_data = undefined;
layer.setStyle(lots_other_project);
var popup_html = `<div class="tooltip-base" >
<b ><i class="fa-solid fa-layer-group"></i>${translations[currentLanguage]["Non commercialisé"]}</b>
</div>`;
lots_data.forEach(lot_data => {
if (lot_data.code_produit_sap == feature.properties.code_produit_sap) {
c_lot_data = lot_data;
if (lot_data.etat_stock == "Libre") {
layer.setStyle(lots_libre_style);
}
if (lot_data.etat_stock != "Libre") {
layer.setStyle(lots_vendu_style);
}
}
});
if (c_lot_data) {
var url_lot = '';
url_lot = `<a class="leaflet-btn btn-green" href="/project/consistency/goods/${c_lot_data.id_url_lot}">${translations[currentLanguage]["Détail"]}</a>`;
var total_price = `<b ><span class="icon icon-right-chevron"></span> ${translations[currentLanguage]['Prix_total']} : ${c_lot_data.prix_total} ${translations[currentLanguage]["MAD"]}</b>`;
layer.text = c_lot_data.num_lot;
if (c_lot_data.etat_stock == 'Libre') {
var popup_html = `<div class="tooltip-lot-card">
<div class="tooltip-lot-header">
<b>${translations[currentLanguage]['Lot N°']} : ${c_lot_data.num_lot}</b>
<b class="status-lot" style="background-color :${layer.options.fillColor}"><b >${translations[currentLanguage][c_lot_data.etat_stock]}</b></b>
</div>
<b ><span class="icon icon-right-chevron"></span> ${translations[currentLanguage]['Type']} : ${c_lot_data.type}</b>
<b ><span class="icon icon-right-chevron"></span> ${translations[currentLanguage]['Surface']} : ${c_lot_data.surface} m²</b>
<b ><span class="icon icon-right-chevron"></span> ${translations[currentLanguage]['Titre_foncier']} : ${c_lot_data.tf ? translations[currentLanguage]['Disponible'] : translations[currentLanguage]["Non_disponible"]}</b>
${total_price}
${url_lot} </div>`;
}
if (c_lot_data.etat_stock != 'Libre') {
var popup_html = `<div class="tooltip-lot-card">
<div class="tooltip-lot-header">
<b>${translations[currentLanguage]['Lot N°']} : ${c_lot_data.num_lot}</b>
<b class="status-lot" style="background-color :${layer.options.fillColor}"><b >${translations[currentLanguage]['Affecté']}</b></b>
</div></div>`
}
// if (c_lot_data.type != "Lots RDC habitation" || c_lot_data.etat_stock != "Libre" )
}
layer.bindPopup(popup_html, {
minWidth: 200
});
layer.addTo(map);
layer.on('click', function () {
select_lot(layer);
});
/*if (lot != undefined) {
if (lot == c_lot_data.num_lot) {
if (c_lot_data.type == "Lots RDC habitation") window.location.href = "https://bendata.ma/omrane/index.php";
layer.openPopup();
}
}*/
current_lots_layer.push(layer);
},
})
var imm_geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/imm.geojson`, {
onEachFeature: function (feature, layer) {
layer.setStyle(imm_style);
var all_app = 0;
var imm_libre = 0;
lots_data.forEach(lot_data=> {
if (lot_data.id_imm === feature.properties.id_imm) {
all_app++;
if(( lot_data.etat_stock == "Libre" || lot_data.etat_stock == "LIBRE")){
imm_libre++;
}
}
});
var getDomainName = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
if(all_app != 0 && imm_libre != 0 ){
var icon = L.icon({
iconUrl: getDomainName+"/immeubles/marker/"+feature.properties.id_imm+"/"+all_app,
iconSize: [74, 140],
iconAnchor: [37, 140],
popupAnchor: [15, -34],
});
L.marker(layer.getBounds().getCenter(), {
icon: icon,
interactive: false,
}).addTo(map);
current_imm_layer.push(layer);
if (imm != undefined) {
imm_selected_layer = layer;
if (imm == feature.properties.id_imm) {
layer.setStyle(imm_selected_style);
}
}
layer.addTo(map);
layer.on("click", () => {
//get name immeuble
var id_immeuble = feature.properties.id_imm;
var nom_imm = " ";
if (id_immeuble.toString().indexOf("100") == 0) {
nom_imm = "Immeuble A"
}
if (id_immeuble.toString().indexOf("200") == 0) {
nom_imm = "Immeuble B"
}
if (id_immeuble.toString().indexOf("300") == 0) {
nom_imm = "Immeuble C"
}
if (id_immeuble.toString().indexOf("400") == 0) {
nom_imm = "Immeuble D"
}
if (id_immeuble.toString().indexOf("500") == 0) {
nom_imm = "Immeuble E"
}
if (id_immeuble.toString().indexOf("600") == 0) {
nom_imm = "Immeuble F"
}
if (id_immeuble.toString().indexOf("700") == 0) {
nom_imm = "Immeuble G"
}
if (id_immeuble.toString().indexOf("800") == 0) {
nom_imm = "Immeuble H"
}
if (id_immeuble.toString().indexOf("900") == 0) {
nom_imm = "Immeuble I"
}
if (id_immeuble.toString().indexOf("1000") == 0) {
nom_imm = "Immeuble J"
}
if (id_immeuble.toString().indexOf("1100") == 0) {
nom_imm = "Immeuble K"
}
if (id_immeuble.toString().indexOf("1200") == 0) {
nom_imm = "Immeuble L"
}
if (id_immeuble.toString().indexOf("1300") == 0) {
nom_imm = "Immeuble M"
}
if (id_immeuble.toString().indexOf("1400") == 0) {
nom_imm = "Immeuble N"
}
//get number bien vendu
var num_vendu = 0;
var num_libre = 0;
lots_data.forEach(lot_data=> {
if(lot_data.id_imm === id_immeuble){
if (
lot_data.etat_stock == "Vendu" ||
lot_data.etat_stock == "VENDU"
) {
num_vendu++;
}
if (
lot_data.etat_stock == "Libre" ||
lot_data.etat_stock == "LIBRE"
) {
num_libre++;
}
}
}
);
if (nom_imm.length != 0) {
$name_imm = '<label style="font-size: 14px; font-weight: 700; text-align: left; padding-left:4px" class="col-6 col-form-label">Immeuble : ${nom_imm}</label>';
} else {
$name_imm = '<label style="font-size: 14px; font-weight: 700; text-align: center; padding-left:4px" class="col-6 col-form-label">${projet.nom}</label>';
}
lots_list_html = `
<div class="form-group row" style="margin: unset">
${name_imm}
</div>
<div class="form-group row" style="margin: unset">
<label style="padding-left:4px ; font-size: 14px; font-weight: 700; " class="col-2 col-form-label">${translations[currentLanguage]['Vendu']} :</label>
<label style="padding-left: 4px; font-size: 14px;font-weight: 700;" class="col-2 col-form-label">${num_vendu}</label>
<label style="padding-left:4px; font-size: 14px; font-weight: 700;" class="col-2 col-form-label">${translations[currentLanguage]['Avendre']} :</label>
<label style="padding-left: 4px; font-size: 14px; font-weight: 700;" class="col-2 col-form-label">${num_libre}</label>
</div>
<hr>
<ul style="height:400px;overflow-y: auto;overflow-x: hidden; padding : 0px 27px">`;
lots_data.forEach(lot_data => {
var floor_imm = " ";
if (lot_data.floor.length != 0) {
floor_imm =` ${translations[currentLanguage]['floor']} : ${lot_data.floor} `;
}
if(lot_data.id_imm === id_immeuble){
var row = `<a class="item" href="/project/consistency/goods/${lot_data.id_url_lot}"><div class="row lot_row libre" id_projet="${lot_data.id_projet}" id_lot="${lot_data.id_lot}" >
<div class="left-side">
<span style="font-weight: 700;">${translations[currentLanguage]['Produit']} : ${lot_data.num_lot}</span>
<span>${translations[currentLanguage]['Type']} : ${lot_data.type}</span>
<span>${translations[currentLanguage]['Prix_total']} : ${lot_data.prix_total} ${translations[currentLanguage]["MAD"]}</span>
</div>
<div class="right-side">
<span>${translations[currentLanguage]['Surface']} : ${lot_data.surface} m²</span>
<span> ${floor_imm}</span>
</div>
</div></a>`;
var rowMbile = ` <a class="item" href="/project/consistency/goods/${lot_data.id_url_lot}"><div style=" " class="row lot_row libre" id_projet="${lot_data.id_projet}" id_lot="${lot_data.id_lot}" >
<table style="width: 100%;border: none;">
<tbody>
<tr>
<td style="font-weight: 700;width: 402px;font-size: 14px;"><b>${translations[currentLanguage]['Produit']} : ${lot_data.num_lot}</b></td>
</tr>
<tr>
<td style="width: 402px;font-size: 14px;">${translations[currentLanguage]['Type']} : ${lot_data.type}</td>
</tr>
<tr>
<td style="width: 402px;font-size: 14px;">${translations[currentLanguage]['Prix_total']} : ${lot_data.prix_total} ${translations[currentLanguage]["MAD"]}</td>
</tr>
<tr>
<td style="width: 402px;font-size: 14px;">${translations[currentLanguage]['Surface']} : ${lot_data.surface} m²</td>
</tr>
<tr>
<td style="width: 402px;font-size: 14px;">${floor_imm}</td>
</tr>
</tbody>
</table>
</div></a>`;
if(( lot_data.etat_stock == "Libre" || lot_data.etat_stock == "LIBRE")) {
if (window.innerWidth < 767) {
lots_list_html += `<li>${rowMbile}</li>`;
} else {
lots_list_html += `<li>${row}</li>`;
}
}
}
});
lots_list_html += "</ul>";
Swal.fire({
title: "",
html: lots_list_html,
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
focusConfirm: false,
});
});
}
},
}
);
var voirie_geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/voirie.geojson`, {
onEachFeature: function (feature, layer) {
layer.setStyle(voirie_style);
var popup_html = `<div class="tooltip-base" >
<b ><i class="fa-solid fa-layer-group"></i> ${feature.properties.description}</b>
</div>`;
layer.bindPopup(popup_html, {
minWidth: 200
});
layer.addTo(map);
},
})
var places_geojson = new L.GeoJSON.AJAX(`${url}${projet.id_projet}/geojson/places.geojson`, {
onEachFeature: function (feature, layer) {
if (feature.properties.description == "Espace vert") {
layer.setStyle(espace_vert_style);
}
if (feature.properties.description == "Parking /Parc aménagé") {
layer.setStyle(parking_style);
}
if (feature.properties.description == "Place publique") {
layer.setStyle(place_public_style);
}
if (feature.properties.description == "Zone non aedificandi") {
layer.setStyle(zone_non_aedificandi_style);
}
if (feature.properties.description == "Enclave") {
layer.setStyle(Enclave_style);
}
if (feature.properties.description == "Forêt") {
layer.setStyle(Foret_style);
}
var popup_html = `<div class="tooltip-base" >
<b ><i class="fa-solid fa-layer-group"></i> ${feature.properties.description}</b>
</div>`;
layer.bindPopup(popup_html, {
minWidth: 200
});
layer.addTo(map);
},
})
geojson.on('data:loaded', function () {
if(!lot)
{ map.fitBounds(geojson.getBounds(), {
maxZoom: 14,
});}
map.flyToBounds(geojson.getBounds());
});
imm_geojson.on("data:loaded", function () {
{ map.fitBounds(imm_geojson.getBounds(), {
maxZoom: 14,
});}
map.flyToBounds(imm_geojson.getBounds())
});
}
var last_selection_layer = undefined;
function select_lot(layer) {
if (last_selection_layer != null) {
last_selection_layer.remove();
}
last_selection_layer = L.geoJSON(layer.toGeoJSON());
last_selection_layer.setStyle(selection_style);
last_selection_layer.addTo(map);
}
const inputSearch = document.getElementById("input-map-search");
const autoCompleteContainer = document.getElementById("autocomplete-container")
const autoCompleteSearch = (lotNumber) => {
autoCompleteContainer.style.display = "none";
autoCompleteContainer.innerHTML = "";
const splittedLotNumber = lotNumber.split("");
$.ajax({
url: `${url}${projet.id_projet}/geojson/lots.geojson`,
type: 'get',
dataType: 'json',
success: function ({features}) {
const lotIds = features.map(({ properties: { code_produit_sap } }) => code_produit_sap)
const searchedLot = lots_data.filter(({ code_produit_sap }) => lotIds.includes(code_produit_sap));
const filteredLotData = searchedLot.filter(({ num_lot }) => {
const splittedNumLot = num_lot.split("");
return splittedNumLot.every((lotNumber) => splittedLotNumber.includes(lotNumber))
})
let isLotFound = false;
filteredLotData.map(({num_lot}) => {
const filteredBtn = document.createElement("button");
filteredBtn.classList.add("filtred-btn");
autoCompleteContainer.style.display = "flex";
filteredBtn.textContent = `Lot N° : ${num_lot}`;
if (num_lot == lotNumber) {
isLotFound = true;
filteredBtn.setAttribute("id", "selected-filtred-btn");
}
autoCompleteContainer.append(filteredBtn);
filteredBtn.addEventListener("click", (e) => {
const oldSelectedFilter = document.getElementById("selected-filtred-btn");
oldSelectedFilter?.removeAttribute("id");
e.target.setAttribute("id", "selected-filtred-btn");
inputSearch.value = num_lot;
})
})
const errorMessage = document.getElementById("error-search");
if (!isLotFound && inputSearch.value.length!==0 ) {
errorMessage.textContent = "This Lot is not found";
} else {
errorMessage.textContent = "";
}
}
});
}
loadProject(projet2);
}Editor is loading...