`;\n\n title = `${station.station_name} (Grundwasserstand)`;\n }\n\n return html`${title}
\n
\n \n
\n
${this.i18n.t(parameter)}
\n
\n ${station.ts_value != null\n ? `${this.valFormatter(station.ts_value)} ${\n station.ts_unitsymbol\n }`\n : '-'}\n
\n
\n
\n
${this.i18n.t('last_measure')}
\n
\n ${(station.timestamp && dayjs(station.timestamp).format('L LT')) ||\n '-'}\n
\n
\n
${graphComp}
\n
`;\n }\n\n render() {\n return this.stations\n ? html`${this._stationTmpl(this.stations[0])}`\n : html``;\n }\n}\n\ncustomElements.define('ki-station-info-hdoe', KiStationInfoHdoe);\n","import { css, html, LitElement } from 'lit';\n\nimport { customElement } from 'lit/decorators.js';\nimport dayjs from '@kisters/wcp-base/common/dayjsext';\nimport { getCurrentApi } from '@kisters/wiski-web/api';\nimport { getRouteOptionsAndParams } from '@kisters/wcp-base/components';\nimport { lastIndexOf } from 'lodash-es';\n\n@customElement('wwp-station-download-hdoe')\nexport default class WwpStationDownloadHdoe extends LitElement {\n static styles = css`\n .content {\n margin-top: 30px;\n }\n .row {\n display: table-row;\n line-height: 2em;\n }\n .cell {\n display: table-cell;\n padding: 0 20px;\n }\n .label,\n ki-icon {\n color: gray;\n padding-left: 30px;\n }\n .descr {\n padding: 30px;\n }\n `;\n\n constructor() {\n super();\n this.api = getCurrentApi();\n }\n\n static get properties() {\n return {};\n }\n\n get groups() {\n return this.station.downloads;\n }\n\n async onAfterEnter(location) {\n const params = getRouteOptionsAndParams(location, ['stationId']);\n this.station = await this.api.getStation(params.stationId);\n Object.assign(this, params.options);\n this.requestUpdate();\n }\n\n getParameter(param) {\n return this.parameterMapping[param] || param;\n }\n\n // eslint-disable-next-line class-methods-use-this\n getPeriod(period) {\n switch (period) {\n case '7D':\n return 'Woche';\n case '1M':\n return 'Monat';\n case '1Y':\n return 'Jahr';\n default:\n return dayjs.duration(`P${period}`).humanize();\n }\n }\n\n render() {\n return this.station\n ? html` \n ${this.groups.map(\n field => html` \n
\n ${this.getParameter(field.station_parameter)}\n
\n
\n ${this.getPeriod(field.period_alias)}\n
\n
\n
\n ${this.moreDownloadsText}\n
hier\n
lade...
`;\n }\n}\n","import { css, html, LitElement } from 'lit';\nimport { responsiveMixin } from '@kisters/wcp-base/decorators';\nimport { last, orderBy } from 'lodash-es';\nimport dayjs from '@kisters/wcp-base/common/dayjsext';\nimport { getCurrentApi } from '@kisters/wiski-web/api';\nimport { getRouteOptionsAndParams } from '@kisters/wcp-base/components';\nimport { Mix } from '@kisters/wcp-base/common';\n\nexport default class wwpHdoeKennzahlen extends Mix(\n LitElement,\n responsiveMixin,\n) {\n // language=CSS\n static styles = css`\n :host {\n display: block;\n }\n\n #box {\n margin: 20px;\n }\n\n h2 {\n color: black;\n }\n\n :host(.sm-screen) h2 {\n margin-left: 50px;\n margin-top: 15px;\n }\n\n .kennzahlen-table {\n margin: 10px 0;\n width: 300px;\n }\n\n .hidden {\n display: none;\n }\n\n table,\n th,\n td {\n border: 2px solid #e8e8ea;\n border-collapse: collapse;\n }\n\n th {\n text-align: center;\n }\n\n td {\n width: 50%;\n padding: 5px;\n }\n\n .rawdata {\n font-family: monospace;\n }\n `;\n\n constructor() {\n super();\n this.content = 'Kennzahlen';\n this.alarmstufen = [];\n this.ereignisse = [];\n this.kennzahlen = [];\n this.alarmstufen_data = [];\n this.ereignisse_data = [];\n this.kennzahlen_data = [];\n this.api = getCurrentApi();\n }\n\n static get properties() {\n return {\n content: { type: String },\n };\n }\n\n async onAfterEnter(location) {\n const params = getRouteOptionsAndParams(location, ['stationId']);\n this.station = await this.api.getStation(params.stationId);\n Object.assign(this, params.options);\n this.fetchData();\n }\n\n render() {\n // Create data views\n this.alarmstufen_data &&\n orderBy(this.alarmstufen_data, 'ts_name').forEach(i => {\n this.alarmstufen.push(html`|
`);\n this.alarmstufen.push(html`${i.ts_name.split('-')[1]} | `);\n if (i.rows > 0) {\n this.alarmstufen.push(\n html`\n ${`${i.data[0][1].toString()} ${\n i.web_unit_gws || i.ts_unitsymbol\n }`}\n | `,\n );\n } else {\n this.alarmstufen.push(html` | `);\n }\n this.alarmstufen.push(html``);\n });\n\n this.ereignisse_data &&\n this.ereignisse_data[0]?.data.forEach(i => {\n this.ereignisse.push(html`|
`);\n this.ereignisse.push(html`${dayjs(i[0]).format('L')} | `);\n this.ereignisse.push(\n html`\n ${`${i[1].toString()} ${\n this.ereignisse_data[0].web_unit_gws ||\n this.ereignisse_data[0].ts_unitsymbol\n }`}\n | `,\n );\n this.ereignisse.push(html``);\n });\n\n this.kennzahlen_data &&\n orderBy(this.kennzahlen_data, 'ts_name').forEach(i => {\n this.kennzahlen.push(html`|
`);\n this.kennzahlen.push(html`${i.ts_name.split('-')[1]} | `);\n if (i.rows > 0) {\n this.kennzahlen.push(\n html`\n ${`${i.data[0][1].toString()} ${\n i.web_unit_gws || i.ts_unitsymbol\n }`}\n | `,\n );\n } else {\n this.kennzahlen.push(html` | `);\n }\n this.kennzahlen.push(html``);\n });\n\n return html`\n
${this.content}
\n
${this?.station?.web_kennzahlen_anmerkung}
\n
\n
\n \n \n | Alarmstufen | \n
\n ${this.alarmstufen}\n
\n \n
\n \n \n | Ereignisse | \n
\n ${this.ereignisse}\n
\n \n \n | Kennzahlen | \n
\n ${this.kennzahlen}\n
\n \n \n \n
\n Weitere Informationen zu den Kennzahlen finden Sie in den zugehörigen\n Erklärungen.\n
\n
',\n valueDecimals: 1,\n },\n yAxis: {\n title: {\n text: 'Höhe in m',\n },\n },\n legend: {\n title: {\n text: 'Legende zum EIN/AUSKLICKEN',\n },\n },\n xAxis: {\n title: {\n text: 'Abstand in m',\n },\n labels: {\n formatter() {\n return `${self._formatNumber(this.value)}`;\n },\n },\n },\n };\n }\n\n addNewLineToChart(name, data, color, z, show) {\n const new_series = {};\n new_series.type = 'line';\n new_series.id = name;\n new_series.name = name;\n\n new_series.color = color;\n new_series.showInLegend = show;\n new_series.visible =\n name === ' HW30' || name === ' HW1' || name === 'aktueller Wasserstand';\n\n new_series.data = data;\n new_series.zIndex = z + 50;\n\n // Do not show data points\n new_series.marker = {\n enabled: false,\n states: { hover: { enabled: false }, inactive: { opacity: 1 } },\n };\n // new_series.states = {\"hover\": {\"enabled\": false, \"opacity\": 1}};\n\n this.chart.addSeries(new_series);\n }\n\n addNewAreaToChart(name, data, color, z) {\n const new_series = {};\n new_series.type = 'area';\n new_series.id = name;\n new_series.name = name;\n new_series.label = {\n enabled: false,\n };\n\n if (Array.isArray(data)) new_series.data = data;\n else {\n // Span line over whole chart\n const x_max = last(this.chart.series[0].data).x;\n\n const level_data = [];\n level_data.push({ x: 0, y: data });\n level_data.push({ x: x_max, y: data });\n new_series.data = level_data;\n }\n new_series.color = color;\n new_series.fillColor = color;\n new_series.zIndex = z;\n new_series.threshold = null;\n\n // Do not show data points\n new_series.marker = {\n enabled: false,\n states: { hover: { enabled: false }, inactive: { opacity: 1 } },\n };\n // new_series.states = {\"hover\": {\"enabled\": false, \"opacity\": 1}};\n\n this.chart.addSeries(new_series);\n }\n\n chartCreated(chart) {\n const e = new CustomEvent('load', {\n detail: chart,\n });\n this.dispatchEvent(e);\n }\n\n updated() {\n if (this.chart) {\n this.chart.reflow();\n }\n }\n\n _fillLineData(level) {\n const crossSectionData = this.querprofil_data[0].polygon.point;\n return crossSectionData.map(dp => ({ x: dp.x, y: level }));\n }\n\n render() {\n return html``;\n }\n\n async fetchData() {\n const _files = {};\n\n // TODO: Fix API call\n const files = await this.api.getTsData(\n `internet/stations/${this.station.site_no}/${this.station.station_no}/cross_section/cross_section.json`,\n );\n\n await Promise.all(\n this.station.timeseries\n .filter(ts => ts.station_parameter === this.station_parameter)\n .map(async ts => {\n _files[last(ts.href.split('/'))] = await this.api.getTsData(ts.href);\n }),\n );\n\n this.alarmstufen_data = _files['alm.json'];\n this.ereignisse_data = _files['events.json'];\n this.kennzahlen_data = _files['ltv.json'];\n this.week_data = _files['week.json'];\n\n this.querprofil_data = files;\n\n this.createChart();\n const crossSectionData = this.querprofil_data[0].polygon.point;\n // Plot profile\n this.addNewAreaToChart(\n 'Gelände',\n crossSectionData,\n 'rgba(164, 100, 30, 1)',\n 15,\n );\n\n // Parse Waterlevel\n const lastlevel = last(this.week_data[0].data)[1]; // Access latest data point\n\n this.addNewAreaToChart(\n 'aktueller Wasserstand',\n this._fillLineData(lastlevel / 100),\n 'rgba(10, 67, 119, 0.5)',\n 3,\n ); // cm -> m\n // this.addNewLineToChart(\"aktueller Wasserstand\", this._fillLineData(lastlevel/100), \"rgb(10, 67, 119)\", 4, true )\n\n // Parse Alarm\n this.alarmstufen_data.forEach(i => {\n if (i.rows > 0) {\n this.addNewLineToChart(\n i.ts_name.split('-')[1],\n this._fillLineData(i.data[0][1] / 100),\n undefined,\n 5,\n true,\n ); // cm -> m\n }\n });\n\n // Parse Kennzahlen\n sortBy(this.kennzahlen_data, 'ts_name').forEach(i => {\n if (i.rows > 0)\n this.addNewLineToChart(\n i.ts_name.split('-')[1],\n this._fillLineData(i.data[0][1] / 100),\n undefined,\n 11,\n true,\n ); // cm -> m\n });\n\n // Brückenunterkante\n if (this.station.web_querprofil_buk) {\n this.addNewLineToChart(\n 'Brückenunterkante',\n this._fillLineData(this.station.web_querprofil_buk / 100),\n '#222222',\n 12,\n ); // cm -> m\n }\n\n if (this.station.web_querprofil_bok) {\n this.addNewLineToChart(\n 'Brückenoberkante',\n this._fillLineData(this.station.web_querprofil_bok / 100),\n '#222222',\n 12,\n ); // cm -> m\n }\n\n this.requestUpdate();\n }\n}\n\ncustomElements.define('wwp-hdoe-querprofil', wwpHdoeQuerprofil);\n","import { getCurrentApi } from '@kisters/wiski-web/api';\nimport { css, html, LitElement } from 'lit';\nimport { getRouteOptionsAndParams } from '@kisters/wcp-base/components';\nimport { orderBy } from 'lodash-es';\n\nexport default class WwpHdoeHochwasserbericht extends LitElement {\n static styles = css`\n :host {\n display: block;\n height: 100%;\n }\n iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n `;\n\n api = getCurrentApi();\n\n content = '';\n\n renderPDF() {\n const url = new URL(\n `${this.api.dataPath}/${this.content}`,\n window.location.origin,\n ).href;\n const fullurl = `./pdfjs/web/viewer.html?file=${url}`;\n return this.content\n ? html``\n : html``;\n }\n\n async onAfterEnter() {\n this.fetchData();\n }\n\n render() {\n // language=html\n return this.renderPDF();\n }\n\n async fetchData() {\n this.api.getReportInfo().then(d => {\n const defaultBericht = d.all_listing.filter(\n item =>\n item.mimeType === 'application/pdf' &&\n item.name.includes(\n 'documents/hochwasserbericht/default_Hochwasserbericht.pdf',\n ),\n );\n const hochwasserberichte = orderBy(\n d.all_listing.filter(\n item =>\n item.mimeType === 'application/pdf' &&\n item.name.includes('documents/hochwasserbericht/') &&\n !item.name.includes(\n 'documents/hochwasserbericht/default_Hochwasserbericht',\n ),\n ),\n 'lastModified',\n 'desc',\n );\n if (hochwasserberichte.length) {\n this.content = hochwasserberichte[0].name;\n } else if (defaultBericht[0]) {\n this.content = defaultBericht[0].name;\n }\n this.requestUpdate();\n });\n }\n}\n\ncustomElements.define('wwp-hdoe-hochwasserbericht', WwpHdoeHochwasserbericht);\n","import { html, css, LitElement } from 'lit';\n// eslint-disable-next-line import/no-extraneous-dependencies\nimport { Mix } from '@kisters/wcp-base/common';\nimport { queryParamMixin } from '@kisters/wcp-base/decorators';\nimport { getRouteOptionsAndParams } from '@kisters/wcp-base/components';\nimport { getCurrentApi } from '@kisters/wiski-web/api';\n\nimport '@ui5/webcomponents/dist/DatePicker';\nimport { customElement, query } from 'lit/decorators.js';\nimport { filter, last } from 'lodash-es';\nimport dayjs from '@kisters/wcp-base/common/dayjsext';\n\n@customElement('wwp-hdoe-bericht-wasserstand')\nexport default class WwReport extends Mix(LitElement, [\n queryParamMixin,\n { targetProperty: 'selected', selector: 'selected', defaultValue: '' },\n]) {\n @query('#datepicker')\n datepicker;\n\n // language=css\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n height: calc(100% - 30px);\n }\n iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n .left-panel {\n text-align: center;\n flex: 0;\n }\n .right-panel {\n flex: 1;\n }\n\n ui5-select {\n width: 350px;\n }\n\n a {\n font-size: 2em;\n text-align: center;\n display: block;\n margin-top: 20%;\n }\n `;\n\n constructor() {\n super();\n this.api = getCurrentApi();\n this.data = [];\n }\n\n static get properties() {\n return {\n data: { type: Array },\n };\n }\n\n _selected = '';\n\n get selected() {\n return this._selected;\n }\n\n set selected(value) {\n this._selected = value;\n this.requestUpdate();\n }\n\n // Vaadin Router Method that gets called after this component is called\n // eslint-disable-next-line no-unused-vars\n async onAfterEnter(location) {\n const params = getRouteOptionsAndParams(location, ['content']);\n this.content = params.content;\n // Usually \"documents\" or \"reports\"\n this.directory = params.options?.directory || 'documents';\n\n this.fetchData();\n }\n\n // Fetch report\n async fetchData() {\n const res = await this.api._requestJson(`/${this.directory}/index.json`);\n this.data = res.all_listing;\n\n // Filter reports; only allow visible PDF\n this.data = filter(this.data, d => {\n if (d.mimeType === 'application/pdf' && d.name.includes(this.content)) {\n const pathArray = d.name.split('/');\n const date = dayjs(\n pathArray[pathArray.length - 1]\n .replace('Wasserstandsbericht-', '')\n .replace('.pdf', ''),\n 'YYYY-MM-DD_hh-mm',\n );\n if (date.toString() === 'Invalid Date') {\n return false;\n }\n d.filename = last(pathArray);\n d.value = date.valueOf();\n d.label = date.format('DD.MM.YYYY');\n return true;\n }\n return false;\n }).reverse(); // Newest file on first position\n this.requestUpdate();\n }\n\n updated() {\n this.data[0] &&\n this._handleChanged({\n target: {\n selectedOption: { value: this.data[0].date },\n },\n });\n }\n\n getUrl(file) {\n return `${this.api.dataPath}/${this.directory}/${this.content}/${file}`;\n }\n\n _handleChanged(e) {\n const value = e?.detail?.value ? e?.detail?.value : this.data[0].label;\n const doc = this.data.find(item => item.label === value);\n if (doc) {\n const pdfurl = `${this.api.dataPath}/${doc.name}`;\n this.renderRoot.querySelector(\n '#contentframe',\n ).src = `./pdfjs/web/viewer.html?file=${\n new URL(pdfurl, window.location.origin).href\n }`;\n } else {\n this.renderRoot.querySelector('#contentframe').src = `./html/leer.html`;\n }\n }\n\n render() {\n // language=html\n return this.data.length\n ? html`\n \n \n \n
\n \n \n
\n `\n : html`Lade...
`;\n }\n}\n","/* eslint-disable max-classes-per-file */\nimport {\n Mix,\n LoaderMixin,\n PropertyDefaultValue,\n} from '@kisters/wcp-base/common';\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { i18nMixin } from '@kisters/wcp-base/decorators';\nimport { getRouteOptionsAndParams } from '@kisters/wcp-base/components';\nimport { getCurrentApi } from '../../api/API';\nimport nls from '../../locales/index';\n\n@customElement('wwp-html')\nexport default class WwpHtml extends Mix(\n LitElement,\n LoaderMixin,\n PropertyDefaultValue,\n [i18nMixin, { nls }],\n) {\n api = getCurrentApi();\n\n static styles = css`\n :host {\n display: flex;\n width: 100%;\n height: 100%;\n }\n iframe {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n }\n a {\n font-size: 2em;\n text-align: center;\n display: block;\n margin-top: 20%;\n }\n `;\n\n @property({ type: String })\n content;\n\n @property({ type: String })\n type;\n\n // Vaadin Router Method that gets called after this component is called\n // eslint-disable-next-line no-unused-vars\n onAfterEnter(location) {\n const params = getRouteOptionsAndParams(location, ['content']);\n\n this.content = params.content ?? params.options?.content;\n const { contentFolder } = params.options;\n this.contentFolder =\n contentFolder === undefined ? 'html' : params.options.contentFolder;\n this.type = params.options.type || 'html';\n this.basePath = params.options.basePath || './';\n }\n\n renderHTML() {\n return html``;\n }\n\n /* eslint-disable lit/no-invalid-html */\n renderPDF() {\n this.basePath = this.basePath || '';\n this.contentFolder = this.contentFolder || '';\n\n const fullurl = new URL(\n `${this.basePath}${this.contentFolder}/${this.content}.${this.type}`,\n window.location.origin,\n ).href;\n return html``;\n }\n /* eslint-enable lit/no-invalid-html */\n\n render() {\n // language=html\n return this.type === 'pdf' ? this.renderPDF() : this.renderHTML();\n }\n}\n","import FontSymbol from 'ol-ext/style/FontSymbol';\nimport Fill from 'ol/style/Fill';\nimport Stroke from 'ol/style/Stroke';\nimport olStyleImage from 'ol/style/Image';\n\n/*\n * must ensure font css loaded before use it.\n * */\n\nconst tmpCanvas = document.createElement('CANVAS');\nconst tmpCanvasCtx = tmpCanvas.getContext('2d');\n\nolStyleImage.prototype.getImagePNGLegend = function () {\n const canvas = this.getImage(1);\n if (canvas) {\n try {\n tmpCanvasCtx.restore();\n tmpCanvas.width = canvas.width;\n tmpCanvas.height = canvas.height;\n if (this.getRotation()) {\n const half = canvas.width / 2;\n tmpCanvasCtx.translate(half, half);\n tmpCanvasCtx.rotate(this.getRotation());\n tmpCanvasCtx.drawImage(canvas, half * -1, half * -1);\n return tmpCanvas.toDataURL('image/png');\n }\n\n tmpCanvasCtx.drawImage(canvas, 0, 0);\n return tmpCanvas.toDataURL('image/png');\n } catch (e) {\n return false;\n }\n } else {\n return false;\n }\n};\nexport class FontIcon extends FontSymbol {\n constructor({\n iconTemplate = '',\n iconTemplateDecimals = 0,\n icon = 'ki ki-info-circle',\n color = 'darkblue',\n shape = 'circle',\n radius = 10,\n rotation = 0,\n rotateWithView = false,\n backgroundColor,\n border /* color,width */,\n fontSize = 1,\n } = {}) {\n let glyph;\n let iconStyle;\n if (icon.length > 3) {\n const el = document.createElement('i');\n el.className = icon;\n el.setAttribute('style', 'display:none');\n document.body.append(el);\n const cs = window.getComputedStyle(el, ':before');\n iconStyle = {\n content: cs.getPropertyValue('content'),\n fontFamily: cs.getPropertyValue('font-family'),\n fontWeight: cs.getPropertyValue('font-weight'),\n fontSize: cs.getPropertyValue('font-size'),\n backgroundColor: 'rgb(0,255,0)',\n };\n if (iconStyle.content.length === 3) {\n iconStyle.content = iconStyle.content.charAt(1);\n } else if (iconStyle.content.length === 1) {\n // safari browser\n iconStyle.content = iconStyle.content.charAt(0);\n }\n document.body.removeChild(el);\n glyph = {\n char: iconStyle.content,\n font: iconStyle.fontFamily,\n theme: 'none',\n name: 'none',\n search: '',\n };\n } else {\n glyph = {\n char: icon,\n font: 'Arial',\n theme: 'none',\n name: 'none',\n search: '',\n iconTemplate,\n iconTemplateDecimals,\n };\n }\n super({\n form: shape,\n gradient: false,\n glyph,\n fontSize, // related to radius\n fontStyle: iconStyle ? iconStyle.fontWeight : 900, // need for font awesome\n radius,\n rotation,\n rotateWithView,\n offsetY: 0,\n color,\n fill: backgroundColor && new Fill({ color: backgroundColor }),\n stroke: border && new Stroke(border),\n });\n }\n\n getGlyph(name) {\n if (typeof name === 'object') {\n return name;\n }\n return super.getGlyph(name);\n }\n\n getImagePNGLegend = olStyleImage.prototype.getImagePNGLegend;\n}\n","import Style from 'ol/style/Style';\nimport Icon from 'ol/style/Icon';\nimport Fill from 'ol/style/Fill';\nimport Stroke from 'ol/style/Stroke';\nimport { FontIcon } from './FontIcon';\n\nfunction descar(arys, fn) {\n let result = [null];\n\n arys.forEach(ary => {\n const newResult = [];\n [...ary, null].forEach(item => {\n result.forEach(reItem => {\n if (reItem && item) {\n newResult.push(fn(reItem, item));\n } else {\n newResult.push(reItem || item);\n }\n });\n });\n result = result.concat(newResult);\n });\n\n return result.filter(r => !!r);\n}\n\nexport default class LegendFactory {\n constructor(classification = {}) {\n // TODO use image instead fontIcon, to reuse it and good for performance?\n\n this.label = classification.label;\n\n this.description = classification.description;\n this.hideEmptyClasses = classification.hideEmptyClasses;\n this.notInteractive = classification.notInteractive;\n this.tagProperty = classification.tagProperty || '__tag';\n\n this.selectedMarkers = {}; // TODO move style settings to station,\n this.pngs = {};\n this.labels = {};\n this.tagCount = {};\n this.defaultMarker = this._createIconStyle(classification.default?.marker);\n this.defaultMarkerStyle = classification.default?.marker;\n\n this.markers = { _default: this.defaultMarker };\n this.polygons = {\n _default: this._createPolygonStyle(classification.default?.marker),\n };\n this.markers_ = { _default: classification.default?.marker };\n\n this.pngs._default = this.defaultMarker.icon\n ? this.defaultMarker.icon.image_.getImagePNGLegend()\n : this.defaultMarker.image_.getImagePNGLegend();\n this.tagGroups = classification.tags || [];\n if (!Array.isArray(this.tagGroups[0])) {\n this.tagGroups = [this.tagGroups];\n }\n this.tagGroups.forEach((tg, j) => {\n tg.forEach((tag, i) => {\n tag.zIndex = tag.zIndex || i + j;\n });\n });\n\n const allTags = descar(this.tagGroups, (tag1, tag2) => ({\n name: `${tag1.name}|${tag2.name}`,\n hideInLegend: tag1.hideInLegend || tag2.hideInLegend,\n deactivate: tag1.deactivate || tag2.deactivate,\n label: `${tag1.label},${tag2.label}`,\n zIndex: tag1.zIndex + tag2.zIndex,\n marker: {\n ...tag1.marker,\n ...tag2.marker,\n },\n }));\n\n allTags.forEach(item => {\n const marker = this._createIconStyle(item.marker, item.zIndex);\n this.markers[item.name] = marker;\n this.polygons[item.name] = this._createPolygonStyle(\n item.marker,\n item.zIndex,\n );\n this.markers_[item.name] = item.marker;\n this.selectedMarkers[item.name] = this._selectedStyle(item.marker); // TODO svg ?\n this.pngs[item.name] =\n item.marker.icon?.svg || marker.image_.getImagePNGLegend();\n this.labels[item.name] = item.label;\n return {\n ...item,\n marker,\n };\n });\n\n this.legendOptions = {\n description: this.description,\n label: this.label,\n notInteractive: this.notInteractive,\n hideEmptyClasses: this.hideEmptyClasses,\n items: this.tagGroups.map(tgs =>\n tgs.map(item => ({\n icon: this.pngs[item.name],\n label: item.label,\n name: item.name,\n hidden: item.hideInLegend,\n deactivate: item.deactivate,\n })),\n ),\n };\n }\n\n getMarker(item) {\n return this.markers[item[this.tagProperty]] || this.defaultMarker;\n }\n\n // eslint-disable-next-line class-methods-use-this\n _createPolygonStyle(marker = {}, zIndex = 0) {\n return new Style({\n fill: new Fill({\n color: marker.backgroundColor,\n }),\n stroke: new Stroke(marker.border),\n zIndex,\n });\n }\n\n // can be override\n // eslint-disable-next-line class-methods-use-this\n _createIconStyle(marker = {}, zIndex = 0) {\n if (marker.icon?.svg) {\n return new Style({\n image: new Icon({\n src: marker.icon.svg,\n }),\n });\n }\n return new Style({\n image: new FontIcon({\n border: { color: 'white', width: 1 },\n ...this.defaultMarkerStyle,\n ...marker,\n }), // all style will mix on default\n zIndex,\n });\n }\n\n // eslint-disable-next-line class-methods-use-this\n _selectedStyle(marker) {\n marker = {\n ...this.defaultMarkerStyle,\n ...marker,\n };\n return [\n new Style({\n image: new FontIcon({\n border: { color: '#3399FF', width: 1 },\n ...marker,\n icon: 'ki ki-arrow-alt-to-bottom',\n backgroundColor: '#3399FF',\n }),\n }),\n ];\n }\n\n getLegendOptions() {\n return this.legendOptions;\n }\n}\n","import dayjs from '@kisters/wcp-base/common/dayjsext';\nimport { orderBy, get } from 'lodash-es';\nimport { template } from '@kisters/wcp-base/common';\n\nfunction creatRule(key, rule) {\n if (rule && typeof rule === 'object') {\n const _getValue = item => get(item, key);\n let getValue = item => _getValue(item);\n if (rule.last) {\n getValue = item =>\n (_getValue(item)?.length ?? 0) > 0\n ? _getValue(item)[_getValue(item).length - 1]\n : undefined;\n } else if (rule.first) {\n getValue = item =>\n (_getValue(item)?.length ?? 0) > 0 ? _getValue(item)[0] : undefined;\n }\n if (rule.resultIndex) {\n const oldGetValue = getValue;\n getValue = item =>\n (oldGetValue(item)?.length ?? 0) >= rule.resultIndex\n ? oldGetValue(item)[rule.resultIndex]\n : undefined;\n }\n if (rule.in) {\n return item => rule.in.indexOf(item[key]) >= 0;\n }\n if (Object.prototype.hasOwnProperty.call(rule, 'includes')) {\n return item => item[key].includes(rule.includes);\n }\n if (Object.prototype.hasOwnProperty.call(rule, 'exact')) {\n return item =>\n item[key].every(r => rule.exact.includes(r)) &&\n rule.exact.every(r => item[key].includes(r));\n }\n if (\n Object.prototype.hasOwnProperty.call(rule, 'max') &&\n Object.prototype.hasOwnProperty.call(rule, 'min')\n ) {\n return item => {\n const multiplier = rule.multiplier || 1;\n const max =\n typeof rule.max === 'string'\n ? template(rule.max, item)\n ?.replace(',', '.')\n .replace(/[^\\d.-]/g, '')\n : rule.max;\n const min =\n typeof rule.min === 'string'\n ? template(rule.min, item)\n ?.replace(',', '.')\n .replace(/[^\\d.-]/g, '')\n : rule.min;\n\n if (max === '' || min === '') {\n return false;\n }\n const _val = getValue(item);\n const value = rule.absolute ? Math.abs(_val) : _val;\n return (\n _val !== undefined &&\n value <= max * multiplier &&\n value >= min * multiplier\n );\n };\n }\n if (Object.prototype.hasOwnProperty.call(rule, 'max')) {\n return item => {\n const multiplier = rule.multiplier || 1;\n const max =\n typeof rule.max === 'string'\n ? template(rule.max, item)\n ?.replace(',', '.')\n .replace(/[^\\d.-]/g, '')\n : rule.max;\n\n const _val = getValue(item);\n const value = rule.absolute ? Math.abs(_val) : _val;\n return max !== '' && _val !== undefined && value <= max * multiplier;\n };\n }\n if (Object.prototype.hasOwnProperty.call(rule, 'min')) {\n return item => {\n const multiplier = rule.multiplier || 1;\n\n const min =\n typeof rule.min === 'string'\n ? template(rule.min, item)\n ?.replace(',', '.')\n .replace(/[^\\d.-]/g, '')\n : rule.min;\n\n const _val = getValue(item);\n const value = rule.absolute ? Math.abs(_val) : _val;\n return min !== '' && _val !== undefined && value >= min * multiplier;\n };\n }\n if (Object.prototype.hasOwnProperty.call(rule, 'not')) {\n const opsRule = creatRule(key, rule.not);\n return item => !opsRule(item);\n }\n if (Object.prototype.hasOwnProperty.call(rule, 'duration')) {\n const last = dayjs().tz().subtract(dayjs.duration(rule.duration));\n return item => dayjs(getValue(item)).tz() >= last;\n }\n // TODO no rule\n return () => true;\n }\n if (key === 'exists') {\n return item => item[rule] !== undefined && item[rule] !== null;\n }\n return item => get(item, key) === rule;\n}\n\n// TODO move out.\n// TODO use symbol for _default\nexport default class Classifier {\n constructor({ label, tags = [], tagProperty = '__tag' } = {}) {\n this.label = label;\n this.valueProperty = 'ts_value';\n this.tagProperty = tagProperty;\n\n if (!Array.isArray(tags[0])) {\n tags = [tags];\n }\n\n this.tagGroups = tags.map(tgs =>\n orderBy(tgs, 'priority').map(tag => ({\n ...tag,\n filter: this._createFilterFn(tag.filter),\n })),\n );\n }\n\n _classify(dataItem) {\n dataItem = { ...dataItem, [this.tagProperty]: '_default' };\n this.tagGroups.forEach(tgs => {\n tgs.some((item, i) => {\n if (item.filter(dataItem)) {\n if (\n !dataItem[this.tagProperty] ||\n dataItem[this.tagProperty] === '_default'\n ) {\n dataItem[this.tagProperty] = item.name;\n if (item.invalidateValue) {\n dataItem.invalidatedValue = dataItem[this.valueProperty];\n dataItem[this.valueProperty] = null;\n }\n } else {\n dataItem[this.tagProperty] += `|${item.name}`;\n }\n dataItem.__tagpriority = item.sortPriority || i;\n dataItem.__tag_label = item.label || '';\n return true;\n }\n return false;\n });\n });\n\n return dataItem;\n }\n\n classify(data) {\n return data.map(item => this._classify(item));\n }\n\n // able to override\n // eslint-disable-next-line class-methods-use-this\n _createFilterFn(filter) {\n if (typeof filter === 'function') {\n return filter;\n }\n\n // TODO use 3rd party standard filter syntax\n const rules = Object.keys(filter).map(key => creatRule(key, filter[key]));\n return function filterFn(item) {\n return rules.reduce((prev, rule) => prev && rule(item), true);\n };\n }\n\n getTag(station) {\n return station[this.tagProperty];\n }\n}\n","import { html } from 'lit';\n\nexport function StatusIcon(image, label = '', col) {\n return html` \n ![\"${label}\"](\"${image}\" "\\"${label}\\"")
\n `;\n}\n","export const getTrendArrow = (dir, rotation) => {\n let deg;\n if (dir > 15) {\n deg = rotation ? 4.71238898038469 : '-90';\n } else if (dir > 5) {\n deg = rotation ? 5.497787143782138 : '-45';\n } else if (dir > -5) {\n deg = rotation ? 0 : '0';\n } else if (dir > -15) {\n deg = rotation ? 0.7853981633974483 : '45';\n } else if (dir > -Infinity) {\n deg = rotation ? 1.5707963267948966 : '90';\n }\n return deg;\n};\n","import { css } from 'lit';\n// language=CSS\nexport default css`\n :host {\n display: block;\n position: relative;\n height: 100%;\n }\n\n :host ki-searchbox {\n border-radius: 0;\n transition: none;\n width: 250px;\n flex: 0;\n position: absolute;\n max-width: 35%;\n right: 20px;\n top: 10px;\n z-index: 2;\n height: 40px;\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n box-shadow: none;\n align-items: center;\n z-index:3;\n }\n :host ki-searchbox:hover,\n :host ki-switcher:hover {\n border-bottom: 1px solid rgba(0, 0, 0, 0.87);\n }\n\n :host #copyToClipboardButton {\n position: absolute;\n top: 10px;\n right: 300px;\n z-index: 2;\n }\n\n :host(.sm-screen) .downloadButton {\n display: none;\n }\n\n .downloadButton {\n position: absolute;\n z-index: 2;\n right: 300px;\n top: 10px;\n }\n\n ki-wcp-wwp-filter {\n width: 33vw;\n position: absolute;\n left: 20px;\n top: 10px;\n z-index: 4;\n }\n\n :host ki-switcher {\n /*border: 1px solid var(--theme-color);*/\n border-bottom: 1px solid rgba(0, 0, 0, 0.42);\n box-shadow: none;\n border-radius: 0;\n position: absolute;\n top: 10px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n }\n\n ki-stack {\n height: 100%;\n }\n\n ki-station-map {\n height: 100%;\n width: 100%;\n display: block;\n }\n\n ki-stack > .map-container {\n display: block;\n }\n\n ki-stack > .overview-container {\n padding-top: 60px;\n box-sizing: border-box;\n }\n\n ki-stack > .station-list {\n padding-top: 60px;\n box-sizing: border-box;\n background: white;\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),\n 0 3px 1px -2px rgba(0, 0, 0, 0.2);\n overflow: hidden;\n z-index: 1;\n top: 0;\n left: auto;\n right: -100%;\n display: block;\n transition: right 0.6s ease-in-out;\n }\n\n ki-stack > .station-list.selected {\n right: 0;\n }\n\n #selectedStations{\n position: absolute;\n bottom:20px;\n transform: translateX(-50%);\n width: auto;\n left: 50%;\n }\n\n ki-responsive-table {\n width: 100%;\n min-height: 50px;\n flex: 1;\n }\n\n :host(.table) ki-searchbox,\n :host(.table) ki-switcher {\n box-shadow: none;\n border: 1px solid lightgray;\n transition: all 0.3s ease-in-out 0.6s;\n }\n\n :host(.sm-screen) ki-searchbox {\n width: 100%;\n top: 10px;\n min-width: 33%;\n max-width: 33%;\n right: 5px;\n }\n\n :host(.sm-screen) #copyToClipboardButton {\n top: 12px;\n left: 120px;\n }\n\n :host(.sm-screen) ki-wcp-wwp-filter {\n top: 10px;\n left: 5px;\n padding: 2px;\n display: flex;\n align-items: center;\n }\n\n :host(.sm-screen) ki-switcher {\n top: 10px;\n }\n\n :host(.sm-screen) ki-stack > .station-list {\n padding-top: 50px;\n }\n\n ki-legend {\n bottom: 40px;\n left: 20px;\n max-width: 400px;\n transition: 0.6s all;\n z-index: 1;\n }\n\n\n ts-graph-viewer{\n background:white;\n width: 100%;\n position: absolute;\n z-index: 2;\n top: 20px;\n bottom: 0;\n }\n\n ts-graph-viewer::part(search){\n display: none;\n }\n\n ts-graph-viewer::part(actions){\n margin-right: 300px;\n margin-top: -20px;\n }\n\n .lastUpdate {\n position: absolute;\n bottom: 10px;\n color: rgb(74, 74, 73);\n left: 23px;\n font-size: 0.8em;\n background: var(\n --ki-overview-lastUpdate-background,\n rgba(255, 255, 255, 0)\n );\n padding: 2px;\n }\n\n :host(.sm-screen) .lastUpdate, :host(.overview) .lastUpdate {\n display: none;\n }\n\n :host(.sm-screen) ki-legend {\n display: block;\n top: unset;\n bottom: 85px;\n right: unset;\n left: 5px;\n z-index: unset;\n }\n\n \n\n :host(.table) ki-legend {\n left: unset;\n right: 20px;\n }\n\n :host(.sm-screen.table) ki-legend, :host(.overview) ki-legend{\n display: none;\n }\n\n :host(.md-screen) ki-station-map::part(overview-map) {\n background-color: rgba(255, 255, 255, 0.5);\n }\n\n :host(.sm-screen) ki-wcp-wwp-filter {\n left: 5px;\n top: 10px;\n display: inline-flex;\n padding: 0px;\n }\n\n :host(.md-screen) ki-wcp-wwp-filter {\n left: 5px;\n top: 10px;\n display: flex;\n padding: 0px;\n }\n\n :host(.md-screen) ki-legend {\n left: 5px;\n }\n\n :host(.sm-screen) ki-switcher {\n left: 50%;\n }\n`;\n","import proj4 from 'proj4';\nimport { register } from 'ol/proj/proj4';\nimport { containsCoordinate } from 'ol/extent';\nimport { get as getProjection } from 'ol/proj';\n\nlet registeredProjections = false;\n\nexport function registerProjections(mapCfg) {\n if (mapCfg.projections && !registeredProjections) {\n mapCfg.projections.forEach(proj => {\n const extent = proj.length === 3 ? proj.pop() : null;\n proj4.defs(proj[0], proj[1]);\n const olProj = getProjection(proj[0]);\n if (olProj && extent) {\n olProj.setExtent(extent);\n }\n });\n registeredProjections = true;\n register(proj4);\n }\n}\n\nexport function reproject(data, mapCfg) {\n try {\n registerProjections(mapCfg);\n } catch (e) {\n console.error('error registering projections', mapCfg);\n }\n\n const viewProjection = mapCfg?.view?.projection || 'EPSG:3857';\n const dataProjection = mapCfg?.dataProjection || 'EPSG:4326';\n let x = 'station_longitude';\n let y = 'station_latitude';\n if (mapCfg.crs === 'regional') {\n x = 'station_carteasting';\n y = 'station_cartnorthing';\n } else if (mapCfg.crs === 'local') {\n x = 'station_local_x';\n y = 'station_local_y';\n }\n\n const stations = [];\n\n data.forEach(station => {\n if (station[x] && station[y]) {\n const point =\n dataProjection !== viewProjection\n ? proj4(dataProjection, viewProjection, [\n parseFloat(station[x]),\n parseFloat(station[y]),\n ])\n : [parseFloat(station[x]), parseFloat(station[y])];\n if (station.Web_Offset) {\n try {\n const offset = JSON.parse(station.Web_Offset);\n point[0] += offset[0];\n point[1] += offset[1];\n } catch (e) {\n console.error('Could no parse station offset');\n }\n }\n if (mapCfg.view.extent) {\n if (containsCoordinate(mapCfg.view.extent, point)) {\n station.point = point;\n stations.push(station);\n } else {\n console.warn('station outside exten', station);\n }\n } else {\n station.point = point;\n stations.push(station);\n }\n }\n });\n // console.log(\"reproject: \", new Date().getTime()-start)\n return stations;\n}\n","import { css, html } from 'lit';\nimport '@ui5/webcomponents/dist/Select';\nimport '@ui5/webcomponents/dist/Option';\n\nexport default function ListMode(clz) {\n return class extends clz {\n // language=CSS\n static styles = css`\n :host(.sm-screen) .row {\n display: table;\n width: 100%;\n padding: 10px;\n }\n\n :host(.sm-screen) .inner-row {\n display: table-row;\n font-size: 14px;\n width: 100%;\n }\n\n :host(.sm-screen) .label.cell {\n width: 45%;\n font-weight: 600;\n }\n\n :host(.sm-screen) .cell {\n text-align: left !important;\n white-space: normal !important;\n }\n\n :host {\n height: 100%;\n }\n\n :host(.sm-screen) .header .row {\n display: flex;\n box-sizing: border-box;\n padding: 0;\n }\n\n :host(.sm-screen) .header .row .cell {\n flex: 1;\n }\n\n ui5-select {\n overflow: hidden;\n width: 100%;\n margin: 0;\n border: none;\n height: 35px !important;\n background: white;\n }\n\n .col-selector {\n padding: 0;\n }\n `;\n\n static get properties() {\n return {\n renderListItem: {\n type: Function,\n },\n };\n }\n\n _renderHeader() {\n if (this.classList.contains('sm-screen')) {\n const sorted = this.sort[0] || {};\n const cols = this.renderingColumns.filter(c => c.sortable);\n const sortedCol = cols.find(col => col.field === sorted.field) || {\n field: this.renderingColumns[0].field,\n };\n const changeColumn = e => {\n const col = cols.find(c => c.field === e.target.selectedOption.value);\n this.sort = [{ ...sorted, field: col.field, sortBy: col.sortBy }];\n };\n const changeOrder = e => {\n this.sort = [\n {\n ...sorted,\n ascending: e.target.selectedOption.value === 'Asc',\n },\n ];\n };\n\n const getOptions = item =>\n item.field === sortedCol.field\n ? html`${item.label}`\n : html`${item.label}`;\n\n // language=html\n return html`\n \n `;\n }\n return super._renderHeader();\n }\n\n renderRow(item) {\n if (this.classList.contains('sm-screen')) {\n return html`\n {\n this._onRowClick(item);\n }}\"\n >\n ${this.renderListItem(item)}\n \n `;\n }\n return super.renderRow(item);\n }\n\n renderListItem(item) {\n return html`\n ${this.renderingColumns.map(\n col => html`\n \n
${col.label}
\n ${this._renderCell(col, item)}\n
\n ${this.filterOptions(filt).map(\n option =>\n html`
{\n const filterValue = {};\n filterValue[filt.field] = option.value;\n this.renderRoot\n .querySelector(`#${filt.field.replaceAll('.', '\\\\.')}`)\n .close();\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: { value: filterValue },\n }),\n );\n }}\"\n >\n ${option.displayValue}\n \n {\n console.log(e);\n const combobox = getQueryObject(\n this,\n `#${filt.field.replaceAll('.', '\\\\.')}`,\n );\n if (filt.linkedTo) {\n filt.linkedTo.forEach(item => {\n const node = this.renderRoot.querySelector(`#${item}`);\n if (node.value) {\n node.value = '';\n }\n });\n }\n\n combobox.value = '';\n this._handleChanged();\n }}\"\n >\n
\n `;\n }\n }\n\n filterOptions({\n field,\n type,\n sort,\n displayTemplate,\n additionalText,\n sortBy,\n sortDir,\n }) {\n let _stations = uniqBy(\n type === 'multiselect' ? this.allStations : this.stations,\n field,\n );\n\n if (sortBy) {\n _stations = orderBy(_stations, sortBy, sortDir);\n }\n const data =\n _stations\n .map(item => ({\n value: item[field],\n additionalText: item[additionalText] ?? '',\n displayValue: displayTemplate\n ? getDisplayValue(item, displayTemplate)\n : item[field],\n }))\n .filter(t => !!t.value) || [];\n\n if (sort === 'numeric' && !sortBy) {\n data.sort((a, b) => {\n const numberVala = parseFloat(a.value);\n const numberValb = parseFloat(b.value);\n // eslint-disable-next-line no-restricted-globals\n if (!isNaN(numberVala) && !isNaN(numberValb)) {\n if (numberVala > numberValb) return 1;\n if (numberVala < numberValb) return -1;\n return 0;\n }\n\n if (a.value > b.value) return 1;\n if (a.value < b.value) return -1;\n return 0;\n });\n } else if (!sortBy) {\n data.sort(\n (a, b) => a.value.localeCompare && a.value.localeCompare(b.value),\n );\n }\n return data;\n }\n\n _resetValue() {\n this.value = '';\n this.renderRoot.querySelector('#input').value = '';\n this._handleChanged();\n }\n\n _handleChangedMulti() {\n const activeFilter = {\n fav: this.favsactive,\n };\n this.renderRoot.querySelectorAll('ui5-multi-combobox').forEach(node => {\n if (node.selectedValues.length) {\n activeFilter[node.id] = node.selectedValues.map(item => item.text);\n }\n });\n this.dispatchEvent(\n new CustomEvent('change', { detail: { value: activeFilter } }),\n );\n }\n\n _handleChanged() {\n const activeFilter = {\n fav: this.favsactive,\n };\n this.renderRoot.querySelectorAll('ui5-combobox').forEach(node => {\n if (node.value) activeFilter[node.id] = node.value;\n });\n this.dispatchEvent(\n new CustomEvent('change', { detail: { value: activeFilter } }),\n );\n }\n}\n","import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Mix } from '@kisters/wcp-base/common';\nimport { i18nMixin } from '@kisters/wcp-base/decorators';\nimport dayjs from '@kisters/wcp-base/common/dayjsext';\nimport Highcharts from 'highcharts/highstock';\nimport { groupBy, find } from 'lodash-es';\nimport { ExternalStation } from '@kisters/wcp-water/common';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport hclocales from '@kisters/wcp-water/common/highcharts-locales.js';\nimport nls from '../../locales/index';\nimport { getCurrentApi } from '../../api/API';\n\n// eslint-disable-next-line import/extensions\n\n@customElement('ww-map-popup')\nexport default class WwMapPopup extends Mix(LitElement, [i18nMixin, { nls }]) {\n static styles = css`\n :host {\n display: block;\n }\n .station-name {\n padding-right: 5px;\n padding-left: 10px;\n padding-top: 10px;\n font-size: 1.2em;\n }\n\n hr {\n margin: 5px 0;\n }\n .table {\n display: table;\n line-height: 1.5em;\n }\n .row {\n display: table-row;\n }\n\n .hidden {\n display: none !important;\n }\n\n .highlight {\n font-weight: bold;\n }\n\n .cell {\n display: table-cell;\n padding: 0 10px;\n min-width: 50px;\n color: gray;\n }\n\n .label {\n color: #4a4a49;\n }\n\n .highcharts-label {\n display: none;\n }\n\n #chartcontainer {\n border-top: 1px dotted lightgray;\n height: 200px;\n min-width: 360px;\n width: 100%;\n }\n\n .remark {\n padding-left: 10px;\n color: red;\n max-width: 100%;\n }\n `;\n\n @property({ type: Array })\n stations: Array