1 2 3/** 4* PspsPopup Web Component 5* Renders a styled popup 6*/ 7/** Infosys changes starts-------------------------------------------------*/ 8 9import { appConfig } from '../../config/appConfig.js'; 10import * as mainComponent from '../../main.js'; 11import { _getStepColors, _formatStepStatus } from '../../common/common.js'; 12 13export class PspsPopup extends HTMLElement { 14 constructor() { 15 super(); 16 this.attachShadow({ mode: 'open' }); 17 this._feature = null; 18 } 19 connectedCallback() { 20 // Only render if we have a feature, otherwise wait for setFeature to be called 21 if (this._feature) { 22 this.PSPSPopUpTitle(); 23 } 24 } 25 /** 26 * Set the feature data and re-render 27 * @param {Object} feature - Feature with attributes 28 */ 29 setFeature(feature) { 30 this._feature = feature; 31 this.PSPSPopUpTitle(); 32 } 33 34 /** 35 * 36 * @param {*} crewStatusCd 37 * @returns 38 */ 39 pspsShuttoffStepStatus(crewStatusCd) { 40 try { 41 let inProgressIndexVal = 0; 42 let status_array = []; 43 let array_length = 3; 44 status_array.length = array_length; 45 status_array[status_array.length] = { 46 inprog_label: "" 47 }; 48 let step_status = { 49 status: "not-started", 50 title: mainComponent.translate_json['not_started_text'], 51 description: "" 52 }; 53 status_array.fill(step_status, 0, status_array.length - 1); 54 let step_labels_array = [mainComponent.translate_json['psps_step1_labels_text'], mainComponent.translate_json['psps_step2_labels_text'], mainComponent.translate_json['power_restored_text']]; 55 56 let steps_desc_array = ['', mainComponent.translate_json['psps_steps3_desc_text'], ''] 57 58 59 if (crewStatusCd === 1) 60 inProgressIndexVal = 0; 61 else if (crewStatusCd === 2) 62 inProgressIndexVal = 1; 63 else { 64 if (crewStatusCd === 3) 65 inProgressIndexVal = 2; 66 } 67 for (var i = 0; i < array_length; i++) { 68 let step_status = { 69 status: "", 70 title: "", 71 description: "" 72 }; 73 if (i < inProgressIndexVal) { 74 step_status.status = 'completed'; 75 step_status.title = step_labels_array[i]; 76 step_status.description = steps_desc_array[i]; 77 } else if (i > inProgressIndexVal) { 78 step_status.status = 'not-started'; 79 step_status.title = step_labels_array[i]; 80 step_status.description = ""; 81 } else if (i == 2 && inProgressIndexVal == 2) { 82 step_status.status = 'completed'; 83 step_status.title = step_labels_array[i]; 84 step_status.description = steps_desc_array[i]; 85 } else if (i == 0 && inProgressIndexVal == 0) { 86 step_status.status = 'completed'; 87 step_status.title = step_labels_array[i]; 88 step_status.description = steps_desc_array[i]; 89 } else { 90 step_status.status = 'in-progress'; 91 step_status.title = step_labels_array[i]; 92 step_status.description = steps_desc_array[i]; 93 status_array[array_length] = { 94 inprog_label: step_labels_array[i] 95 }; 96 } 97 status_array[i] = step_status; 98 } 99 return status_array; 100 101 } catch (e) { 102 console.error("error in pspsShuttoffStepStatus function", e); 103 } 104 105 } 106 107 PSPSPopUpTitle() { 108 try { 109 if (!this._feature) { 110 console.warn('PspsPopup: No feature data to render'); 111 this.shadowRoot.innerHTML = 112 `<div style="padding: 20px;">${mainComponent.translate_json['feature_na_text']}</div>`; 113 114 return; 115 } 116 const attrs = this._feature.attributes || {}; 117 118 var PSPSStartDate = appConfig.NotAvailable; 119 var pspsStartTime = ""; 120 var statusActiveDt = (attrs.StatusActiveDt ? attrs.StatusActiveDt : appConfig.NotAvailable); 121 var statusPrevDt = (attrs.StatusPrevDt ? attrs.StatusPrevDt : appConfig.NotAvailable); 122 var statusArchDt = (attrs.StatusArchDt ? attrs.StatusArchDt : appConfig.NotAvailable); 123 124 var PSPSStatusArchDt = appConfig.NotAvailable; 125 var PSPSStatusActiveDt = ""; 126 var PSPSStatusPrevDt = ""; 127 128 if (attrs.StatusArchDt) 129 PSPSStatusArchDt = new Date(statusArchDt).toLocaleDateString('en-US', { 130 timeZone: 'US/Pacific' 131 }) + ' - ' + new Date(statusArchDt).toLocaleTimeString('en-US', { 132 timeZone: 'US/Pacific', 133 timeStyle: 'short' 134 }) + ' PST'; 135 if (statusActiveDt) 136 PSPSStatusActiveDt = new Date(statusActiveDt).toLocaleDateString('en-US', { 137 timeZone: 'US/Pacific' 138 }) + ' - ' + new Date(statusActiveDt).toLocaleTimeString('en-US', { 139 timeZone: 'US/Pacific', 140 timeStyle: 'short' 141 }) + ' PST'; 142 if (statusPrevDt) 143 PSPSStatusPrevDt = new Date(statusPrevDt).toLocaleDateString('en-US', { 144 timeZone: 'US/Pacific' 145 }) + ' - ' + new Date(statusPrevDt).toLocaleTimeString('en-US', { 146 timeZone: 'US/Pacific', 147 timeStyle: 'short' 148 }) + ' PST'; 149 if (attrs.StartDate) 150 PSPSStartDate = new Date(attrs.StartDate).toLocaleDateString('en-US', { 151 timeZone: 'US/Pacific' 152 }) + ' - ' + new Date(attrs.StartDate).toLocaleTimeString('en-US', { 153 timeZone: 'US/Pacific', 154 timeStyle: 'short' 155 }) + ' PST'; 156 if (attrs.EditDate) 157 pspsStartTime = new Date(attrs.EditDate).toLocaleDateString('en-US', { 158 timeZone: 'US/Pacific' 159 }) + ' ' + new Date(attrs.EditDate).toLocaleTimeString('en-US', { 160 timeZone: 'US/Pacific', 161 timeStyle: 'short' 162 }); 163 var PSPSEndDate = appConfig.NotAvailable; 164 if (attrs.EndDate) 165 PSPSEndDate = new Date(attrs.EndDate).toLocaleDateString('en-US', { 166 timeZone: 'US/Pacific' 167 }) + ' - ' + new Date(attrs.EndDate).toLocaleTimeString('en-US', { 168 timeZone: 'US/Pacific', 169 timeStyle: 'short' 170 }) + ' PST'; 171 var PSPSEditDate = appConfig.NotAvailable; 172 if (attrs.EditDate) 173 PSPSEditDate = new Date(attrs.EditDate).toLocaleDateString('en-US', { 174 timeZone: 'US/Pacific' 175 }) + ' - ' + new Date(attrs.EditDate).toLocaleTimeString('en-US', { 176 timeZone: 'US/Pacific', 177 timeStyle: 'short' 178 }) + ' PST'; 179 var PSPSErtDate = mainComponent.translate_json['no_estimate_available']; 180 if (attrs.ERT) 181 PSPSErtDate = new Date(attrs.ERT).toLocaleDateString('en-US', { 182 timeZone: 'US/Pacific' 183 }) + ' - ' + new Date(attrs.ERT).toLocaleTimeString('en-US', { 184 timeZone: 'US/Pacific', 185 timeStyle: 'short' 186 }) + ' PST'; 187 188
189 var pspsDetails = ((attrs.PSPS_Details) ? attrs.PSPS_Details : ""); 190 var CircuitNamepsps = (attrs.CIRCUIT_NAME ? attrs.CIRCUIT_NAME : appConfig.NotAvailable); 191 var pspsStatus = ""; 192 var psps_pop_up_status_array = []; 193 var pspsTitle = ''; 194 var warning_time = 1; 195 var inprog_label = ""; 196 var WeatherAndFireURL = appConfig.WeatherAndFireURL; 197 var PspsDecisionMakingURL = appConfig.PspsDecisionMakingURL; 198 199 200 if (attrs.PSPS == 'De-Energized' || attrs.PSPS == 'Re-Energized') { 201 pspsTitle = mainComponent.translate_json['psps_power_shut_off_title']; 202 pspsStatus = mainComponent.translate_json['psps_step1_labels_text']; 203 var crewStatusCd = 1; 204 if (pspsDetails == null || pspsDetails == "") 205 crewStatusCd = 1; 206 else if (pspsDetails == "De-Energized") 207 crewStatusCd = 1; 208 else if (pspsDetails == "Re-Energization Expected") { 209 pspsStatus = mainComponent.translate_json['psps_step2_labels_text']; 210 crewStatusCd = 2; 211 } else { 212 if (pspsDetails == "Re-Energized") { 213 pspsStatus = mainComponent.translate_json['power_restored_text']; 214 crewStatusCd = 3; 215 } 216 } 217 psps_pop_up_status_array = this.pspsShuttoffStepStatus(crewStatusCd); 218 inprog_label = (psps_pop_up_status_array[psps_pop_up_status_array.length - 1].inprog_label); 219 } 220 else { 221 if (attrs.PSPS == 'Monitored' || attrs.PSPS == 'Downstream') { 222 pspsTitle = mainComponent.translate_json['psps_power_shut_off_alert_title']; 223 if (pspsDetails == "De-Energization Expected") { 224 warning_time = 2; 225 pspsTitle = mainComponent.translate_json['psps_power_shut_off_warning_title']; 226 } 227 else { 228 warning_time = 1; 229 pspsTitle = mainComponent.translate_json['psps_power_shut_off_alert_title']; 230 } 231 } 232 } 233 234 var popupPspsTitleDiv = `<button class="close-button" aria-label="Close"> 235 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"> 236 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2" stroke-linecap="round"/> 237 </svg></button> 238 <div class="title-row"> 239 <div class="popupicon-container"> 240 <img src="${themePathUrl}/images/arcgis/psps.svg"> 241 </div> 242 <h1 class="title"> 243 ${pspsTitle}<br/> 244 </h1> 245 </div>`; 246 var monitoredDownstreamDiv = ""; 247 if (warning_time == 2) { 248 monitoredDownstreamDiv = `<div class="detail-item psps-detail-items"> 249 <span>${mainComponent.translate_json['psps_warning2_sec1_text']}<span class="detail-value"> ${PSPSEditDate}.</span> ${mainComponent.translate_json['psps_click_view_text']} <a target="_blank" href=${WeatherAndFireURL}>${mainComponent.translate_json['psps_weather_text']}.</a></span> 250 </div> 251 <div class="detail-item psps-detail-items"> 252 <span>${mainComponent.translate_json['psps_warning2_sec2_text']}<a href=${PspsDecisionMakingURL} target="_blank">${mainComponent.translate_json['psps_decision_making_text']}</a></span> 253 </div>` 254 } else { 255 monitoredDownstreamDiv = `<div class="detail-item"> 256 <span>${mainComponent.translate_json['psps_warning_sec1_text']}<span class="detail-value">${PSPSStartDate}</span> ${mainComponent.translate_json['psps_to_text']} <span class="detail-value">${PSPSEndDate}.</span> ${mainComponent.translate_json['psps_click_view_text']}<a href=${WeatherAndFireURL} target="_blank">${mainComponent.translate_json['psps_weather_text']}</a></span> 257 </div> 258 <div class="detail-item">
259 <span><br>${mainComponent.translate_json['psps_warning_sec2_text']} <a href=${PspsDecisionMakingURL} target="_blank">${mainComponent.translate_json['psps_decision_making_text']}</a></span> 260 </div>`; 261 } 262 if (attrs.PSPS == 'Monitored' || attrs.PSPS == 'Downstream') { 263 this.shadowRoot.innerHTML = 264 `${appConfig.popupStyle} 265 <div class="popup-container"> 266 ${popupPspsTitleDiv} 267 <div class="details-grid"> 268 ${monitoredDownstreamDiv} 269 <div class="detail-item psps-detail-items"> 270 <span>${mainComponent.translate_json['psps_circuit_text']}: </span> 271 <span id="psps-circuitname">${CircuitNamepsps}</span> 272 </div> 273 <div class="detail-item grid-last-child"> 274 <span>${mainComponent.translate_json['update_text']}: </span> 275 <span class="detail-value grid-last-child-s-last-child">${PSPSEditDate}</span> 276 </div> 277 </div> 278 </div>`; 279 280 } 281 else if (attrs.PSPS == 'De-Energized' || attrs.PSPS == 'Re-Energized') { 282 psps_pop_up_status_array.pop(); ////remove the last item //inprogresslabel 283 this.shadowRoot.innerHTML = 284 `${appConfig.popupStyle} 285 <div class="popup-container"> 286 ${popupPspsTitleDiv} 287 <div class="details-grid1"> 288 <div class="detail-item"> 289 <div class="item"> 290 <span>${mainComponent.translate_json['psps_fire_sec1_text']}</span> 291 <span class="detail-value">${PSPSEndDate}.</span> 292 <span>${mainComponent.translate_json['psps_click_view_text']} <a target="_blank" href=${WeatherAndFireURL}>${mainComponent.translate_json['psps_weather_text']}</a></span> 293 </div> 294 </div> 295 <div class="detail-item"> 296 <span>${mainComponent.translate_json['start_time_text']}: </span> 297 <span class="detail-value">${PSPSStatusArchDt}</span> 298 </div> 299 <div class="detail-item"> 300 <span>${mainComponent.translate_json['psps_restoration_text']}: </span> 301 <span class="detail-value">${PSPSErtDate}</span> 302 </div> 303 <div class="detail-item"> 304 <span>${mainComponent.translate_json['psps_status_text']}: </span> 305 <span class="detail-value">${pspsStatus}</span> 306 </div> 307 <div class="detail-item"> 308 <span>${mainComponent.translate_json['psps_circuit_text']}: </span> 309 <span id="psps-circuitname">${CircuitNamepsps}</span> 310 </div> 311 <div class="detail-item" id="psps-restoration-info"> 312 <span>${mainComponent.translate_json['psps_restoration_info']}</span> 313 </div> 314 315 <div class="divider_psps"></div> 316 317 <div class="timeline"> 318 <div class="timeline-rail"></div> 319 <div class="timeline-content"> 320 ${psps_pop_up_status_array 321 .map((step, index) => { 322 const colors = _getStepColors(step.status); 323 const isLast = index === psps_pop_up_status_array.length - 1; 324 var stepTitleDateStatusHtml = `<div class="psps-step-title-date"> 325 <span class="${step.title === pspsStatus ?'psps-step-title-bold':'psps-step-title'}">${step.title}</span> 326 </div><div class="${step.title === pspsStatus ?'psps-step-status-bold':'psps-step-status'}">${_formatStepStatus( 327 step.status 328 )}</div>`; 329 330 if(step.title == mainComponent.translate_json['psps_step1_labels_text']) 331 stepTitleDateStatusHtml = `<div class="psps-step-title-date">
332 <span class="${step.title === pspsStatus ?'psps-step-title-bold':'psps-step-title'}">${step.title}</span> 333 <span class="psps-step-date">${PSPSStatusArchDt}</span> 334 </div><div class="${step.title === pspsStatus ?'psps-step-status-bold':'psps-step-status'}">${_formatStepStatus( 335 step.status 336 )}</div>`; 337 else if (step.title == mainComponent.translate_json['psps_step2_labels_text'] && step.status == "in-progress") 338 stepTitleDateStatusHtml = `<div class="psps-step-title-date"> 339 <span class="${step.title === pspsStatus ?'psps-step-title-bold':'psps-step-title'}">${step.title}</span> 340 <span class="psps-step-date">${PSPSStatusPrevDt}</span> 341 </div><div class="${step.title === pspsStatus ?'psps-step-status-bold':'psps-step-status'}">${_formatStepStatus( 342 step.status 343 )}</div>`; 344 else if (step.title ==mainComponent.translate_json['power_restored_text'] && step.status == "completed") 345 stepTitleDateStatusHtml = `<div class="psps-step-title-date"> 346 <span class="${step.title === pspsStatus ?'psps-step-title-bold':'psps-step-title'}">${step.title}</span> 347 <span class="psps-step-date">${PSPSStatusActiveDt}</span> 348 </div><div class="${step.title === pspsStatus ?'psps-step-status-bold':'psps-step-status'}">${_formatStepStatus( 349 step.status 350 )}</div>`; 351 return ` 352 <div class="timeline-step"> 353 <div class="step-indicator"> 354 <div 355 class="step-dot" 356 title="${step.status}" 357 style="background: ${colors.bg}; border-color: ${colors.border 358 };" 359 ></div> 360 ${!isLast ? '<div class="step-line"></div>' : ''} 361 </div> 362 <div class="step-content"> 363 ${stepTitleDateStatusHtml} 364 ${step.description 365 ? `<div class="step-description_psps">${step.description}</div>` 366 : '' 367 } 368 </div> 369 </div> 370 `; 371 }) 372 .join('')} 373 </div> 374 </div> 375 376 <div class="detail-item"> 377 <span><a href=${PspsDecisionMakingURL} target="_blank">${mainComponent.translate_json['psps_decision_making_text']}</a></span> 378 </div> 379 <div class="detail-item grid-last-child"> 380 <span>${mainComponent.translate_json['update_text']}: </span> 381 <span class="detail-value grid-last-child-s-last-child">${PSPSEditDate}</span> 382 </div> 383 </div> 384 </div>` 385 386 } 387 388 389 // Add close button event listener 390 const closeBtn = this.shadowRoot.querySelector('.close-button'); 391 if (closeBtn) { 392 closeBtn.addEventListener('click', () => { 393 this.dispatchEvent( 394 new CustomEvent('close', { bubbles: true, composed: true }) 395 ); 396 }); 397 } 398 } 399 catch (exception) { 400 console.log("Error in PspsPopup", exception.message) 401 } 402 } 403} 404// Define the custom element 405customElements.define('psps-popup', PspsPopup); 406/** Infosys changes ends-------------------------------------------------*/
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.