"use strict";document.addEventListener("alpine:init",(()=>{let map01,fg_ivri,fg_vri;Alpine.data("projectData",(()=>({app_client:"pnh",month_selected:{data:dayjs(),text:dayjs().locale("nl").format("MMMM YYYY")},chart_labels_x:Array.from({length:6},((_,x)=>dayjs().subtract(x,"months").locale("nl").format("MMM"))).reverse(),chart_label_x:"maand",chart_data:{ivri:null,vri:null},count:{ivri:null,vri:null},init(){this.initMap(),this.renderChart(),this.getChartData(),this.getLocations("ivri"),this.getLocations("vri")},initMap(){map01=new L.map("map01"),fg_ivri=new L.FeatureGroup,fg_vri=new L.FeatureGroup;const mapbox_token="pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",mbAttr="© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",mapbox_gray=L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token="+mapbox_token,{attribution:mbAttr,tileSize:512,zoomOffset:-1}),base_layers={"<span style=''>Kleur</span>":L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token="+mapbox_token,{attribution:mbAttr,tileSize:512,zoomOffset:-1}),"<span style=''>Grijs</span>":mapbox_gray},lcontrol=new L.control.layers(base_layers,!0,{collapsed:!0,sortLayers:!0,hideSingleBase:!0});map01.setView([52.3730009,4.946753]),map01.setZoom(14),map01.addLayer(mapbox_gray),map01.addControl(lcontrol),lcontrol.addOverlay(fg_ivri,"iVRI"),map01.addLayer(fg_ivri),lcontrol.addOverlay(fg_vri,"VRI"),map01.addLayer(fg_vri)},getLocations(type){const url_conf=app_config[this.app_client].url[app_config[this.app_client].env],url_base=url_conf[0],url_full=new URL(`${url_conf[1]}locations/${type}/${this.app_client}`,url_base);fetch(url_full).then((response=>{if(200===response.status)return response.json()})).then((json_data=>{json_data&&("ivri"===type?(localStorage.setItem("rit.ivri.geo",JSON.stringify(json_data)),this.count.ivri=json_data.features.length):(localStorage.setItem("rit.vri.geo",JSON.stringify(json_data)),this.count.vri=json_data.features.length),this.createFeatureGroupTLC(type))})).catch((error=>{console.error("Error:",error)}))},createFeatureGroupTLC(type){let geo=null;if("ivri"===type){if(map01.hasLayer(fg_ivri)&&fg_ivri.clearLayers(),geo=localStorage.getItem("rit.ivri.geo"),!geo)return void this.getLocations("ivri")}else if(map01.hasLayer(fg_vri)&&fg_vri.clearLayers(),geo=localStorage.getItem("rit.vri.geo"),!geo)return void this.getLocations("vri");geo=JSON.parse(geo);const leaflet_geojson=L.geoJSON(geo,{pointToLayer:(feature,latlng)=>{const tlc_id=feature.properties.tlc_id,region_id=feature.properties.region_id,descriptive_name=feature.properties.descriptive_name,region=feature.properties.region,location=feature.properties.location,tlc=feature.properties.tlc,ris=feature.properties.ris,its=feature.properties.its,type=feature.properties.type,tooltip_content=this.createTooltipContent(tlc_id,descriptive_name),popup_content=this.createPopupContent(tlc_id,region_id,descriptive_name,region,location,tlc,ris,its,type),color="TCPStreaming"===type?"rgba(147, 197, 253, 1)":"rgba(252, 165, 165, 1)";return L.circle(latlng,{radius:25,color:color}).bindPopup(popup_content,{offset:[0,-15]}).bindTooltip(tooltip_content,{direction:"left",permanent:!1,sticky:!1,offset:[-15,0]})}});"ivri"===type?(leaflet_geojson.addTo(fg_ivri),map01.fitBounds(fg_ivri.getBounds())):(leaflet_geojson.addTo(fg_vri),map01.fitBounds(fg_vri.getBounds()))},createTooltipContent:(tlc_id,descriptive_name)=>`<div class"lowercase">${tlc_id}</div><div class="mt-1">naam: ${descriptive_name}`,createPopupContent:(tlc_id,region_id,descriptive_name,region,location,tlc,ris,its,type)=>`\n      <div class="">\n        <h1 class="lowercase text-center font-bold text-lg">\n          ${tlc_id}\n        </h1>\n        <h2 class="uppercase text-center">\n          ${descriptive_name}\n        </h2>\n      </div>\n      <div class="mt-2">\n        <table class="table-auto">\n          <tbody>\n            <tr>\n              <td class="px-2 py-1">\n              Region ID\n              </td>\n              <td class="px-2 py-1">\n              ${region_id.toLowerCase()}\n              </td>\n            </tr>\n            <tr>\n              <td class="px-2 py-1">\n              Regio\n              </td>\n              <td class="px-2 py-1">\n              ${region.toLowerCase()}\n              </td>\n            </tr>\n            <tr>\n              <td class="px-2 py-1">\n              Locatie\n              </td>\n              <td class="px-2 py-1">\n              ${location}\n              </td>\n            </tr>\n            <tr>\n              <td class="px-2 py-1">\n              TLC\n              </td>\n              <td class="px-2 py-1">\n              ${tlc||"-"}\n              </td>\n            </tr>\n            <tr>\n              <td class="px-2 py-1">\n              RIS\n              </td>\n              <td class="px-2 py-1">\n              ${ris||"-"}\n              </td>\n            </tr>\n            <tr>\n              <td class="px-2 py-1">\n              ITS\n              </td>\n              <td class="px-2 py-1">\n              ${its||"-"}\n              </td>\n            </tr>\n            <tr>\n              <td class="px-2 py-1">\n              Type\n              </td>\n              <td class="px-2 py-1">\n              ${type}\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>`,renderChart(){let c=!1;Chart.helpers.each(Chart.instances,(instance=>{"chart1"==instance.canvas.id&&(c=instance)})),c&&c.destroy();const ctx=document.getElementById("chart1").getContext("2d");new Chart(ctx,{type:"bar",data:{labels:this.chart_labels_x,datasets:[{label:"iVRI",fill:!1,backgroundColor:"rgba(147, 197, 253, 1)",borderColor:"rgba(59, 130, 246",borderWidth:1,data:this.chart_data.ivri},{label:"VRI",fill:!1,backgroundColor:"rgba(252, 165, 165, 1)",borderColor:"rgba(239, 68, 68, 1)",borderWidth:1,data:this.chart_data.vri}]},options:{layout:{padding:{right:10}},animation:!1,responsive:!0,maintainAspectRatio:!0,scales:{x:{title:{display:!0,text:"Maand"}},y:{title:{display:!0,text:"Aantal"}}}}})},getChartData(){const url_conf=app_config[this.app_client].url[app_config[this.app_client].env],url_base=url_conf[0],url_full=new URL(`${url_conf[1]}months/${this.app_client}`,url_base);fetch(url_full).then((response=>{if(200===response.status)return response.json()})).then((json_data=>{json_data&&(this.chart_data.ivri=json_data.ivri,this.chart_data.vri=json_data.vri,this.renderChart())})).catch((error=>{console.error("Error:",error)}))},changeMonthSelected(action){const dt=this.month_selected.data;"previous"===action?(this.month_selected.data=dt.subtract(1,"months"),this.month_selected.text=dt.subtract(1,"months").locale("nl").format("MMMM YYYY")):(this.month_selected.data=dt.add(1,"months"),this.month_selected.text=dt.add(1,"months").locale("nl").format("MMMM YYYY"))}})))}));