1"use strict";(self.webpackChunkone_web=self.webpackChunkone_web||[]).push([[7614],{5233:(t,e,i)=>{var s=i(80027),r=i(71413),a=i(52706),l=i(5074),o=Object.defineProperty,n=Object.getOwnPropertyDescriptor,d=(t,e,i,s)=>{for(var r,a=s>1?void 0:s?n(e,i):e,l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s?r(e,i,a):r(a))||a);return s&&a&&o(e,i,a),a};let c=class extends r.WF{constructor(){super(...arguments),this.shortDate=!1}render(){if(this.timestamp&&this.timezone)return s.X0.dateFormat?(0,l.Yq)(this.timestamp,this.timezone,s.X0.dateFormat):this.shortDate?(0,l.sL)(this.timestamp,this.timezone):(0,l.$V)(this.timestamp,this.timezone)??void 0}createRenderRoot(){return this}};d([(0,a.MZ)({type:Number})],c.prototype,"timestamp",2),d([(0,a.MZ)({type:String})],c.prototype,"timezone",2),d([(0,a.MZ)({type:Boolean})],c.prototype,"shortDate",2),c=d([(0,a.EM)("absolute-time")],c)},97335:(t,e,i)=>{i.r(e),i.d(e,{default:()=>T});var s=i(92943),r=i(71413),a=i(52706),l=i(30555),o=i(80480),n=i(56599),d=i(35135),c=i(25461),h=i(5218),b=i(80027),p=i(52850),u=i(4983),v=i(73502),m=i(10514),g=i(30249),w=i(80662),$=i(32701),f=i(31376),y=i(24634),A=i(30842),L=i(69199),S=(i(15245),i(5233),i(4169),Object.defineProperty),_=Object.getOwnPropertyDescriptor,D=(t,e,i,s)=>{for(var r,a=s>1?void 0:s?_(e,i):e,l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s?r(e,i,a):r(a))||a);return s&&a&&S(e,i,a),a};let T=class extends((0,n.N)(m.A)(L.A)){constructor(){super(...arguments),this.listType=p.OXP.WEATHER_STATIONS,this.stationListBodyRowWeather=t=>Object.keys(b.Bw).map((e=>r.qy` 2 <div 3 role="cell" 4 class=${(0,l.H)({"list-table_cell":!0,"alert-state":this.getAlertState(e,t.weatherStationFields)})} 5 > 6 <span class="small-label"><strong>${v.d[e]} </strong></span 7 >${this.getWeatherDisplay(e,t.weatherStationFields)} 8 </div> 9 `)),this.stationListBodyRow=t=>r.qy` 10 <div 11 class="list-table-row" 12 role="row" 13 style=${(0,o.W)({"--row-color":t.color||"rgb(var(--concrete))"})} 14 > 15 <div role="cell" class="list-table_cell"> 16 <div class=" list-table-row_title-cell"> 17 <img 18 src=${(0,d.J)(t.icon??void 0)} 19 alt="Weather Station ${t.status===u.LV.Alert?"Alert":""}" 20 class="list-table_icon" 21 /> 22 ${t.title} 23 ${t.status===u.LV.Alert||t.status===u.LV.AlertFreezing?r.qy`<div class="alert-tag">Alert</div>`:r.qy``} 24 </div> 25 <view-on-map-link .href="#${g.UG.MAP}/${t.uri}"></view-on-map-link> 26 </div> 27 <div role="cell" class="list-table_cell "> 28 <span class="small-label"><strong>Roadway: </strong></span>${t.location?.routeDesignator||"-"} 29 </div> 30 <!-- here --> 31 ${this.stationListBodyRowWeather(t)} 32 <div role="cell" class="list-table_cell list-table-row_title"> 33 <span class="small-label"><strong>Last Updated: </strong></span> 34 <absolute-time 35 timestamp=${(0,d.J)(t.lastUpdated?.timestamp)} 36 timezone=${(0,d.J)(t.lastUpdated?.timezone)} 37 shortDate 38 ignore 39 ></absolute-time> 40 </div> 41 </div> 42 `,this.quantities=t=>{if(t)return r.qy`${t.label}: ${t.value}`}}static get styles(){const t=`0.5rem 2.3fr repeat(${Object.keys(v.d).length-4}, 1fr)`;return[$.A,f.A,y.A,A.A,r.AH` 43 /* for android upper and lower bars */ 44 :host { 45 display: block; 46 background-color: #fff; 47 box-shadow: var(--shadow-sm); 48 border-top: var(--border-width) solid rgb(var(--silver)); 49 border-bottom: var(--border-width) solid rgb(var(--silver)); 50 } 51 52 .alert-tag { 53 border: 1px solid rgb(var(--alert)); 54 color: rgba(var(--alert), 1); 55 background-color: rgba(var(--alert), 0.01); 56 font-size: var(--smallest); 57 padding: 1px 3px 1px 3px; 58 margin-left: calc(var(--gap) / 4); 59 } 60 61 .alert-state { 62 color: rgb(var(--alert)); 63 } 64 65 .list-table-row_title { 66 grid-column: 2 / 4; 67 } 68 69 @media (min-width: ${(0,r.iz)(p.EA.DESKTOP)}) { 70 .list-table-row { 71 grid-template-columns: ${(0,r.iz)(t)}; 72 } 73 74 .list-table-row_title { 75 grid-column: auto; 76 } 77 78 .alert-tag { 79 margin: calc(var(--gap) / 2) 0; 80 } 81 } 82 83 @media (min-width: ${(0,r.iz)(p.EA.DESKTOP_XL)}) { 84 .alert-tag { 85 margin-left: 5px; 86 } 87 } 88 `]}onTableHeaderClick(t){return()=>this.updateSortType(t)}render(){return r.qy` 89 <h1 class="list-page-header"> 90 ${s.zx.find((({slug:t})=>t===this.page))?.label} 91 </h1> 92 <div id="scroll-sentinel"></div> 93 <div class="controls">${this.renderControls()}</div> 94 <div class="list-table" role="table" data-test-table> 95 <div 96 role="rowgroup" 97 class=${(0,l.H)({"list-table-header":!0,"sticky-header":!0,"sticky-header--shadow":this.isHeaderStuck})} 98 > 99 ${this.stationListHeader()} 100 ${this.isOffline||this.error?.type!==p.i65.INTERNAL_SERVER_ERROR?void 0:r.qy` 101 <div role="row" data-test-table-error> 102 <div role="cell" aria-rowspan="6" class="notification notification--error"> 103 ${(0,h._)(b.s1.error.application)} 104 </div> 105 </div> 106 `} 107 ${this.isOffline?r.qy` 108 <div role="row" data-test-table-network> 109 <div role="cell" aria-rowspan="6" class="notification notification--warning"> 110 ${(0,h._)(b.s1.error.network)} 111 </div> 112 </div> 113 `:void 0} 114 </div> 115 <div role="rowgroup"> 116 ${this.error||this.weatherStationList&&0!==this.weatherStationList.length?void 0:r.qy` 117 <div role="row"> 118 <div role="cell" aria-rowspan="6" class="notification notification--warning"> 119 ${this.renderNoData()} 120 </div> 121 </div> 122 `} 123 ${this.weatherStationList?r.qy` ${this.weatherStationList.map(this.stationListBodyRow)} `:void 0} 124 </div> 125 </div>
126 <span class="visually-hidden" aria-live="polite"> 127 ${L.A.ariaLive(T.tableDescription,this.sortType,this.sortDirection)} 128 </span> 129 `}stationListWeatherHeaders(){return Object.keys(b.Bw).map((t=>{const e=t;return r.qy`<div 130 class="list-table_header list-table_header--sortable" 131 role="columnheader" 132 aria-sort=${this.ariaSortDirection(e)} 133 title=${v.d[e]} 134 > 135 <button class="btn list-table_hbtn" @click=${this.onTableHeaderClick(e)}> 136 <span class="list-table_htxt">${v.d[e]}</span> 137 ${r.qy`${this.renderSortArrow(t,this.sortType)}`} 138 </button> 139 </div>`}))}stationListHeader(){return r.qy` 140 <div role="row" class="list-table-row list-table-headers"> 141 <div 142 class="list-table_header list-table_header--sortable" 143 role="columnheader" 144 aria-sort=${this.ariaSortDirection("NAME")} 145 title=${v.d.NAME} 146 > 147 <button class="btn list-table_hbtn" @click=${this.onTableHeaderClick("NAME")}> 148 <span class="list-table_htxt">${v.d.NAME}</span> 149 ${r.qy`${this.renderSortArrow("NAME",this.sortType)}`} 150 </button> 151 </div> 152 <div 153 class="list-table_header list-table_header--sortable" 154 role="columnheader" 155 aria-sort=${this.ariaSortDirection("ROADWAY")} 156 title=${v.d.ROADWAY} 157 > 158 <button class="btn list-table_hbtn" @click=${this.onTableHeaderClick("ROADWAY")}> 159 <span class="list-table_htxt">${v.d.ROADWAY}</span> 160 ${r.qy`${this.renderSortArrow("ROADWAY",this.sortType)}`} 161 </button> 162 </div> 163 ${this.stationListWeatherHeaders()} 164 <div 165 class="list-table_header list-table_header--sortable" 166 role="columnheader" 167 aria-sort=${this.ariaSortDirection("LAST_UPDATED")} 168 title=${v.d.LAST_UPDATED} 169 > 170 <button class="btn list-table_hbtn" @click=${this.onTableHeaderClick("LAST_UPDATED")}> 171 <span class="list-table_htxt">${v.d.LAST_UPDATED}</span> 172 ${r.qy`${this.renderSortArrow("LAST_UPDATED",this.sortType)}`} 173 </button> 174 </div> 175 </div> 176 `}renderFilters(){return r.qy` 177 <ow-multi-select 178 name="roadway" 179 label="Roadway" 180 class="form-element filter-select" 181 .value=${(0,c.V)(this.routes)} 182 .categorizedChoices=${this.getMultiSelectRoadwayChoices()} 183 ?loading=${!this.allRoutes} 184 @change=${this.filterPredRoutes} 185 ></ow-multi-select> 186 <ow-multi-select 187 name="area" 188 label="Predefined area" 189 class="form-element filter-select" 190 .value=${(0,c.V)(this.areas)} 191 .categorizedChoices=${this.getAllPredefinedAreaChoices()} 192 ?loading=${!this.allPredefinedAreas} 193 @change=${this.filterArea} 194 ></ow-multi-select> 195 <ow-multi-select 196 name="status" 197 label="Status" 198 class="form-element filter-select" 199 .value=${(0,c.V)(this.classificationsOrSlugs)} 200 .categorizedChoices=${[{choices:[{id:p.f2p.RWIS_NORMAL,label:"Normal"},{id:p.f2p.RWIS_ALERT,label:"Severe Weather"}]}]} 201 @change=${this.filterType} 202 ></ow-multi-select> 203 `}getAlertState(t,e){let i=!1;return e&&e[t]&&e[t].inAlertState&&(i=!0),i}getWeatherDisplay(t,e){let i="N/A";if(e&&e[t]){const{displayValue:s}=e[t];s&&(i=s)}return i}stateChanged(t){this.allPredefinedAreas=t.filterList.allPredefinedAreas,this.allRoutes=t.filterList.allRoutes,this.sortDirection=t.filterList.sortDirection,this.sortType=t.filterList.sortType,this.freeSearchTerm=t.filterList.freeSearchTerm,this.routes=t.filterList.routes,this.areas=t.filterList.areas,this.classificationsOrSlugs=t.filterList.classificationsOrSlugs,this.page=t.routingList.page,this.pageRecordLimit=t.filterList.pageRecordLimit,this.currentPage=t.filterList.currentPage,this.totalRecords=t.filterList.totalRecords,this.isLoading=t.weatherStationList.isLoading,this.weatherStationList=(0,w.zE)(t),this.modalView=t.modalList.modalView,this.isOffline=t.layoutList.isOffline,this.error=t.weatherStationList.error}};T.tableDescription="Weather Stations",D([(0,a.MZ)({type:Array})],T.prototype,"weatherStationList",2),T=D([(0,a.EM)("list-weather-stations")],T)}}]);
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.