https://nlincsair.info/Scripts/stationInfoPopup/stationInfoPopup.js?v=3.229.10.17%20(77.107)

1
2/*****************/
3/***** TYPES *****/
4/*****************/
5
6/**
7* @typedef {Object} InformationPageData
8* @property {boolean} visible - Indicates whether the page is visible.
9* @property {"text"|"icon"} buttonType - The type of the button, which can be either "text" or "icon".
10* @property {string} buttonText - The text displayed on the button.
11* @property {string} pageBody - The encoded HTML page body content.
12*/
13
14
15var eSTATION_INFO_POPUP_TYPE = {
16    "DASHBOARD": 0,
17    "OLD": 1, //last stationinfo windows (yaki made)
18}
19
20function createReportIcon(windowId, stationId, popupParams) {
21    let icon = $("<img>")
22    icon.attr("src", baseUrl + "Content/icons/Report.png")
23    icon.attr("title", SiteUtils.translate("Open Station Report"));
24    icon.attr("id", "dashboardReportIcon")
25
26    icon.click(function (e) {
27        PopupManager.openStationReport(stationId, popupParams)
28    });
29
30    return icon;
31}
32
33/**
34 * Creates and configures a Kendo button with an icon or image, tooltip for station info popups.
35 * The 3 types require different fields:
36 * - "svg" requires a valid Kendo icon class in the "icon" field.
37 * - "img" requires a valid image path in the "imageUrl" field.
38 * - "font" requires valid font icon classes in the "fontClass" field.
39 *
40 * @param {Object} options - The options for the button configuration.
41 * @param {string} options.buttonId - The ID of the button element. *
42 * @param {string} options.configurationOption - The configuration type key, corresponding to an option in ButtonUtils.ICON_BUTTON_CONFIGURATION_OPTIONS
43
44 */
45function createStationInfoTextIconButton({ buttonId, configurationOption, onClick, buttonSize = "medium" }) {
46    const BUTTON_COLOR = "var(--kendo-color-primary)";
47    const ADJUSTED_TEXT_COLOR = textColor(BUTTON_COLOR);
48    const BUTTON_SIZES = {
49        img: { small: "24px", medium: "28px", large: "28px" },
50        svg: { small: "24px", medium: "32px", large: "32px" },
51        font: {} // Font icons can have flexible sizes; set it via font classes if needed.
52    };
53
54    const {
55        type,
56        buttonElementTitle,
57        icon,
58        iconClass,
59        imageUrl,
60        styleSelector
61    } = ButtonUtils.getIconConfigurationByConfigurationOption(configurationOption);
62
63    $(`#${buttonId}`)
64        .removeClass("hidden")
65        .kendoButton({
66            click: onClick,
67            icon: icon,
68            imageUrl: imageUrl,
69            iconClass: iconClass,
70            rounded: "medium",
71            size: buttonSize
72        })
73        .kendoTooltip({
74            content: SiteUtils.translate(buttonElementTitle),
75            position: "bottom",
76        });
77
78    // Add custom styles after initialization
79    $(`#${buttonId}`).css({
80        background: BUTTON_COLOR,
81        color: ADJUSTED_TEXT_COLOR,
82        ...(buttonSize === "small" && type !== ButtonUtils.BUTTON_TYPES.FONT ? { height: "fit-content" } : {}),
83    });
84
85    $(`#${buttonId} ${styleSelector}`).css({
86        width: BUTTON_SIZES[type][buttonSize],
87        height: BUTTON_SIZES[type][buttonSize],
88    });
89
90    $(`#${buttonId}`).hover(
91        // Mouse enter
92        function () {
93            $(this).css({
94                cursor: "pointer",
95                opacity: 0.8
96            });
97        },
98        // Mouse leave
99        function () {
100            $(this).css({
101                opacity: 1
102            });
103        }
104    );
105}
106
107
108/**
109 * Creates and configures a Kendo button for changing the chart scale with an image and tooltip.
110 *
111 * @param {string} buttonId - The ID of the button element.
112 * @param {Function} onClick - The function to execute when the button is clicked.
113 * @param {string} imageUrl - The URL of the button image.
114 *
115 * @returns {void}
116 */
117function createStationInfoChangeScaleButton(buttonId, onClick, imageUrl) {
118    const BUTTON_COLOR = "#003F80";//todo: switch to a color configuration in admin
119    $(`#${buttonId}`)
120        .kendoButton({
121            click: onClick,
122            imageUrl: imageUrl,
123            rounded: "medium"
124        })
125        .kendoTooltip({
126            content: SiteUtils.translate("change scale"),
127            position: "bottom",
128        });
129
130    // Add custom styles after initialization
131    $(`#${buttonId}`).css({
132        borderColor: BUTTON_COLOR,
133        backgroundColor: "transparent",
134    });

135
136
137    $(`#${buttonId} img`).css({
138        width: '38px',
139        height: '38px',
140    });
141
142    $(`#${buttonId}`).hover(
143        // Mouse enter
144        function () {
145            $(this).css({
146                cursor: "pointer",
147                opacity: 0.8
148            });
149        },
150        // Mouse leave
151        function () {
152            $(this).css({
153                opacity: 1
154            });
155        }
156    );
157}
158
159/**
160 * create dashboard information page button.
161 * this button can be either icon or html button, depending on the InformationPageData data.
162 * onclick, open the pageBody in a popup.
163 * @param {InformationPageData} pageInformationData
164 * @returns {JQuery<HTMLElement> | JQuery<HTMLButtonElement>}
165 */
166function createDashboardInformationPageIcon(pageInformationData) {
167    let button;
168    const isIconButton = pageInformationData.buttonType === "icon";
169    if (isIconButton) {
170        button = $('<i class="fa fa-info-circle">');
171        button.attr("id", "dashboardInformationPageIcon");
172    } else {
173        button = $(`<button ">${SiteUtils.translate(JsUtils.isNotEmpty(pageInformationData.buttonText) ? pageInformationData.buttonText :"Information")}</button>`);
174        button.attr("id", "dashboardInformationPageButton");
175    }
176    button.attr("title", SiteUtils.translate("Open Information Page"));
177
178    button.click(function (e) {
179        let windowConfig = {
180            title: SiteUtils.translate(!isIconButton && JsUtils.isNotEmpty(pageInformationData.buttonText) ? pageInformationData.buttonText : "Information"),
181            resizable: true,
182            draggable: true,
183            width: 'fit-content',
184            height: 'fit-content',
185        }
186        var params = {};
187
188        PopupManager.open("dashboard-information-page", pageInformationData.pageBody, windowConfig, params);
189    });
190
191    return button;
192}
193
194function StationInfoPopup(ajaxData, stationInfoPopupConfigKey, popupType, station, doesUsePlaster, additionalParams, fromMap = false) {
195    additionalParams = additionalParams == null ? {} : additionalParams
196    let popupParams = {
197        parentWindowId: additionalParams.parentWindowId
198    }
199    if (fromMap || PopupManager.pageNameToWindowId(SYSTEM_PAGES.DYNAMIC_TABULARS) == popupParams.parentWindowId) {
200        PDM.setFromGoToStationInfoBtn();
201        PDM.initPageDashboardsHis();
202    }
203    const OLD_POPUPS_MIN_WIDTH = {
204        "getOnlyMonitorGraphForMapNew": "768px"
205    }
206
207    const TABLE_MIN_WIDTH = "547px";
208
209    var k_PopupId = "kendoWindow";
210    var k_PopupType = popupType == "dashboard" ? eSTATION_INFO_POPUP_TYPE.DASHBOARD : eSTATION_INFO_POPUP_TYPE.OLD
211
212    var stationInfoPopupConfig;
213    const DEVICE_TYPE = DeviceUtils.getDeviceType();
214
215    let isRegularity = ajaxData.Irregularity == true
216
217    if (isRegularity) {
218        PopupManager.openIrregularityPopup(ajaxData.id, popupParams)
219    }
220    else {
221        let url = baseUrl + (k_PopupType == eSTATION_INFO_POPUP_TYPE.DASHBOARD ? "Dashboard/GetDashboardOfStation" : "ajax/" + "GetDefaultStationInfoPopupConfig");
222
223        $.ajax({

224            type: "POST",
225            cache: false,
226            url: url,
227            data: { i_StationInfoPopupConfigKey: stationInfoPopupConfigKey, i_DeviceType: DEVICE_TYPE, i_StationId: station.serialCode, SelectedType: ajaxData.SelectedType },
228            success: function (res) {
229
230                if (popupType == "dashboard") {
231                    PDM.pageDashboardsHis.push(res.Name);
232                }
233
234                stationInfoPopupConfig = res;
235                if (doesUsePlaster == true && $("#buttons select").val() == "Stations" && k_PopupType == eSTATION_INFO_POPUP_TYPE.OLD && stationInfoPopupConfig.Name == "getOnlyMonitorGraphForMapNew") {
236                    stationInfoPopupConfig.Name = "getMonitorInfoForMapNew"
237                }
238                openPopup();
239            }
240        });
241    }
242
243
244    function openPopup() {
245        ajaxData.DeviceType = DEVICE_TYPE;
246        ajaxData.stationInfoConfigKey = stationInfoPopupConfigKey;
247        //collecting information about the timebase
248        var urlForAjax = getAjaxUrl(stationInfoPopupConfig.Name);
249        var timebase = station.timebase;
250        var arrayTimebases = dataManager.getStationById(station.serialCode).timeBases;
251        var tb = stationUtils.getTimebaseByConfig(arrayTimebases, timebase);
252        //if the timebase that comes from the getTimebaseByConfig() is null - Error popup, else - keep going to the ajaxcall
253        if (urlForAjax.includes("/Dashboard/Index_/?dashboardName=") && tb == null) {
254            var message = SiteUtils.translate("The data can't be displayed, the system's minimum timebase configured is higher then this station's time base");
255            var title = SiteUtils.translate("Error");
256            return PopupManager.Alert(message, title);
257        } else {
258            $.ajax({

259                type: "POST",
260                cache: false,
261                url: urlForAjax,
262                data: ajaxData,
263                beforeSend: AjaxLoader.show,
264                success: function (html) {
265                    if (additionalParams != null && additionalParams.isPopup == false) {
266                        $(additionalParams.hostElement).empty().append(html)
267                        makeGraphsResponsive() //dirty but temporary
268                    }
269                    else {
270
271                        let windowConfig = {
272                            width: stationInfoPopupConfig.Width,
273                            height: stationInfoPopupConfig.Height,
274                            minWidth: stationInfoPopupConfig.MinWidth,
275                            title: getFixedTitle(station),
276                            scrollable: true
277
278                        }
279
280
281                        popupParams.windowContentId = k_PopupId
282                        let windowId = PopupManager.openStationInfoPopup(html, windowConfig, popupParams)
283                        let permissionFatherPage = JsUtils.isNotEmpty(dataManager.getPageByName('Reports'));
284                        let permissionChildPage = JsUtils.isNotEmpty(dataManager.getPageByName('StationReport'));
285                        if (k_PopupType == eSTATION_INFO_POPUP_TYPE.DASHBOARD && permissionFatherPage && permissionChildPage) {
286                            let reportIcon = createReportIcon(windowId, station.serialCode, popupParams);
287                            PopupManager.addActionIconByWindowId(windowId, reportIcon);
288
289                            let pageInformationData = DashboardManager.getDashboardInformationPageData();
290                            if (pageInformationData?.visible) {
291                                let informationPageIcon = createDashboardInformationPageIcon(pageInformationData);
292                                PopupManager.addActionIconByWindowId(windowId, informationPageIcon);
293                            }
294
295                            if (!fromMap && !(PopupManager.pageNameToWindowId(SYSTEM_PAGES.DYNAMIC_TABULARS) == popupParams.parentWindowId) ) {
296                                PopupManager.addBackwardIconForPopup(`#${WindowNames.STATION_INFO}`, windowConfig.title, WindowNames.STATION_INFO);
297                            }
298                        }
299                    }
300
301                    function makeGraphsResponsive() {
302
303                        $(window).resize(function () {
304
305                            if ($("#chart").data("kendoChart") != null) {
306                                $("#chart").data("kendoChart").setOptions({
307                                    chartArea: {
308                                        width: $("#InfoCover").width()
309                                    }
310                                });
311                            }
312                        })
313                    }
314                },
315                complete: AjaxLoader.hide
316            })
317        }
318    }
319
320    function getAjaxUrl(stationInfoName) {
321        var url = k_PopupType == eSTATION_INFO_POPUP_TYPE.DASHBOARD ? "Dashboard/Index_/?dashboardName=" : "home/";
322        return baseUrl + url + stationInfoName;
323    }
324
325    function getFixedTitle(station) {
326        return getDesktopOrTabletFixedTitle(station, null, k_PopupType);
327    }
328}
329
330function getDesktopOrTabletFixedTitle(station, isNotIndex, popupType, monitorName = null) {
331    //isNotIndex : this value get true if the user open click on station info button inside last popup (getOnlyMonitorGraphForMapNew.cshtml)
332    let isIndexType = false;
333
334    try {
335        isIndexType = PDM.getCurrentStationFilterType().filterType == eSTATIONS_FILTER_TYPE.INDEX
336    }
337    catch (e) {
338
339    }
340
341    let configedTitle = configManager.getTitleByTargetId(station.TargetId);
342    let title = SiteUtils.translate(configedTitle) + ' - ';
343
344    if (NEW_STATIONS) {
345
346        let station_ = dataManager.getStationById(station.serialCode)
347        title += (station_ != null ? station_.DisplayName : station.name); //("irregularity")
348    }
349    else {
350        title += dbStationUtils.getFixedStationName(station.seri

350alCode);
351    }
352
353    if (monitorName != null) {
354        title += ", " + monitorName;
355    }
356
357    let dateVal = getLastDate();
358
359    if (dateVal != null) {
360        if (monitorName == null) {
361            title += ", ";
362        }
363
364        if (SiteUtils.isTimeDisplayHidden()) {
365            dateVal = dateVal.split(" ")[0];
366        }
367
368        title += SiteUtils.translate("lastupdate") + " - " + dateVal;
369    }
370
371
372    if (!SiteUtils.isTimeDisplayHidden()) {
373        let timeBaseText = getTimeBaseText();
374        title += ",  " + timeBaseText + " - " + SiteUtils.translate('average');
375    }
376
377    return title;
378
379    function getLastDate() {
380        let dateVal = !configManager.isWebsiteBasedOnDashboard()
381       ? station.DateVal
382       : station.IndexValueDateTime
383
384        if (popupType == eSTATION_INFO_POPUP_TYPE.DASHBOARD && typeof (DashboardData) != 'undefined') {
385            dateVal = DashboardData.getLastDateInCurData();
386        }
387        else if (isNotIndex || popupType == eSTATION_INFO_POPUP_TYPE.DASHBOARD || !isIndexType) {
388            dateVal = station.monitorsDataDateTime == null ? station.DateVal : station.monitorsDataDateTime
389        }
390
391        if (dateVal != null) {
392            dateVal = new DateTime(dateVal)
393
394            if (!configManager.read(webConfigs.TimeEnding)) {
395
396                dateVal = dateVal.subtractHour()
397            }
398
399            dateVal = dateVal.dtformat();
400        }
401        else {
402            dateVal = new DateTime().dtformat();
403            //console.log("date of station data is null")
404        }
405
406        return dateVal;
407    }
408
409    function getTimeBaseText() {
410
411        let timeBaseText;
412        let timebase = getFixedTimeBase();
413
414        if (timebase != null) {
415            if (timebase < 60) {
416                timeBaseText = timebase + " " + getTranslateName("Minutes", g_LangName)
417            }
418            else if (timebase == 60) {
419                timeBaseText = getTranslateName('Hourly', g_LangName)
420            }
421            else if (timebase > 60 && timebase <= 1440) {
422                timeBaseText = timebase / 60 + " " + getTranslateName('Hours', g_LangName)
423            }
424            else if (timebase > 1440) {
425                timeBaseText = timebase / 1440 + " " + getTranslateName('Days', g_LangName)
426            }
427        }
428
429        return timeBaseText == null ? "" : timeBaseText;
430
431        /**
432         * @returns the correct Timebase
433         * At first it is divided into 2 parts: when we open an index view ("getOnlyMonitorGraphForMapNew"), and when we open a dashboard view ("station info" + "dashboard")
434         * "getOnlyMonitorGraphForMapNew": goes to the first condition - takes the "minimumTimeBaseForIndex" that the Admin config, if there isn't - take the value from the "index/configuration" API Request.
435         * "station info" + "dashboard": goes to the second  condition - if the Admin config in the Layer some timebase, it will show this timebase. if there isn't - it will take the minTimebase by config (or if the station isnt has that timebase - it will take the next in the station timebases array)
436         * At the end - we check if the final timebase is not empty, if its empty take the timebase of the station, if its not empty take the final timebase.
437         */
438        function getFixedTimeBase() {
439            let timebase;
440
441            if (popupType != eSTATION_INFO_POPUP_TYPE.DASHBOARD && isIndexType && !isNotIndex) {
442                timebase = parseInt(configManager.read(webConfigs.minimumTimeBaseForIndex));
443                if (JsUtils.isEmpty(timebase)) {
444                    API.createRequest(`index/configuration?Type=1`, TYPE.GET, onSuccess, false, null, (err) => console.error(err));
445                    function onSuccess(data) {
446                        timebase = data[0].Interval;
447                    }
448                }
449            }
450            else {
451                if (typeof PDM !== 'undefined' && JsUtils.isNotEmpty(PDM.state.timebase)) {
452                    timebase = PDM.state.timebase;
453                } else {
454                    timebase = stationUtils.getTimebaseByConfig(dataManager.getStationById(station.seri

454alCode).timeBases, station.timebase);
455                }
456
457            }
458            //if the Admin config minTimebase that is bigger than the max timebase of the station timebases array - we will return the timebase of the station.
459            //for example: minTimebase=15, station timebases array=[5], the timebase from the getTimebaseByConfig() function will return null, and we will return the timebase of the station.
460            timebase = JsUtils.isNotEmpty(timebase) && parseInt(timebase) != 0 ?
461                parseInt(timebase) :
462                station.timebase;
463
464            return timebase
465        }
466    }
467}