document.addEventListener("DOMContentLoaded", monitoring__init);

function monitoring__init () {
    let langSwitch = document.querySelector('.lang__switch');
    const url = new URL(document.location);
    const langUrlParam = url.searchParams.get('lang');

    if (langSwitch && langSwitch.value === 'en' || langUrlParam === 'en') {
        localStorage.setItem('lang', 'en');
    } else {
        localStorage.setItem('lang', 'ru');
    }

    let lang = localStorage.getItem('lang') || 'ru';

    let dict = monitoring__getDict(lang);

    monitoring__html__mainStructure(dict);

    monitoring__sendQuery(dict);

    document.querySelectorAll('.lang__input').forEach((input) => {
        input.addEventListener('click', (event) => {
            let value = event.target.value;

            const url = new URL(document.location);
            const searchParams = url.searchParams;

            if(value === 'ru') {
                localStorage.setItem('lang', 'ru');
                searchParams.delete('lang');
            }
            else if(value === 'en') {
                localStorage.setItem('lang', 'en');
                searchParams.set('lang', 'en');
            }

            window.history.pushState({}, '', url.toString());

            let lang = localStorage.getItem('lang') || 'ru';
            monitoring__translatePage(monitoring__getDict(lang));
        });
    });

    document.querySelector('.js-instruction-button').addEventListener('click', monitoring__html__instruction);

    document.querySelector('.js-download-button').addEventListener('click', (event) => monitoring__downloadReport(monitoring__getDict(lang), event));

    document.querySelector('.js-query-button').addEventListener('click', () => monitoring__sendQuery(monitoring__getDict(lang)));

    document.querySelector('.js-error-button').addEventListener('click', () => monitoring__sendQuery(monitoring__getDict(lang)));

    document.querySelectorAll('.params__input_switch').forEach((item) => item.addEventListener('change', (event) => {
        let checkbox = event.target;
        let container = checkbox.dataset.container;
        let list = document.querySelectorAll('.' + container);
        list.forEach((div) => {
            if(checkbox.checked) {
                div.classList.add('table__time_visible');
            }
            else {
                div.classList.remove('table__time_visible');
            }
        });
    }));

    document.querySelector('.table').addEventListener('click', (event) => {
        let target = event.target.closest('.table__data');
        if(target) monitoring__html__details(monitoring__getDict(lang), target);
    });
}

function monitoring__html__mainStructure (dict) {
    let html =
        '<div class="wrapper">' +
            '<header id="js-header" class="header">' + monitoring__html__header(dict) + '</header>' +
            '<main id="js-main" class="main">' +
                '<div class="title">' +
                    monitoring__html__title(dict) +
                '</div>' +
                '<div id="js-params" class="params">' +
                    monitoring__html__params(dict) +
                '</div>' +
                '<div id="js-details" class="details"></div>' +
                '<div class="js-loader loader__container_hidden">' + monitoring__html__loader() + '</div>' +
                '<div id="js-table" class="table"></div>' +
                '<div class="js-error error__container error__container_hidden">' + monitoring__html__errorMessage(dict) + '</div>' +
            '</main>' +
        '</div>';

    document.getElementById('js-content').innerHTML = html;
}

function monitoring__html__header (dict) {
    let lang = localStorage.getItem('lang') || 'ru';

    let html =
        '<div class="header__logo">' +
            '<img class="header__logo__img" src="img/logo-hmc.png" alt="logo">' +
            '<div class="header__logo_text dict__logo">' + dict.logo + '</div>' +
        '</div>' +
        '<div class="header__nav">' +
            '<button class="nav__item nav__item_button js-instruction-button dict__information">' + dict.information + '</button>' +
            '<a href="https://docs.google.com/forms/d/e/1FAIpQLSf6DfYoNiEdB022UzWBNrNbaQ97IbzQaROFSCA7_ANJ3ThjVQ/viewform" class="nav__item nav__item_link dict__feedback">' + dict.feedback + '</a>' +
            '<button class="nav__item nav__item_button js-download-button dict__download" style="display: none;">' + dict.download + '</button>' +
            '<a href="php/download.php" target="_blank" id="downloadReport" hidden></a>' +
            '<div class="nav__item nav__item_lang">' +
                '<input type="radio" name="langSwitch" value="ru" id="lang__input_ru" class="lang__input"' +
                    (lang === 'ru' ? ' checked' : '') +
                '>' +
                '<label for="lang__input_ru" class="lang__label">RU</label>' +
                '<input type="radio" name="langSwitch" value="en" id="lang__input_en" class="lang__input"' +
                    (lang === 'en' ? ' checked' : '') +
                '>' +
                '<label for="lang__input_en" class="lang__label">EN</label>' +
            '</div>' +
        '</div>';

    return html;
}

function monitoring__html__title (dict) {
    let html =
        '<h1 class="title__header dict__title">' + dict.title + '</h1>' +
        '<p class="title__subtitle dict__subtitle">' + dict.subtitle + '</p>';

    return html;
}

function monitoring__html__params (dict) {
    let date = monitoring__getDateRange();
    let domains = monitoring__getOptions('domainsParams');

    let html =
        '<div class="params__wrapper">' +
            '<div class="params__item__wrapper">' +
                '<div class="params__item__title dict__params_date_title">' + dict.params_date_title + ':</div>' +
                '<div class="params__item params__item_date">' +
                    '<input class="date date_t1" type="text" name="t1" value="' + date.t1 + '" placeholder="' + dict.dateTemplate + '">' +
                    '<span> &ndash; </span>' +
                    '<input class="date date_t2" type="text" name="t2" value="' + date.t2 + '" placeholder="' + dict.dateTemplate + '">' +
                '</div>' +
                '<div class="params__item__hint dict__params_dateTemplate">' + dict.dateTemplate + '</div>' +
            '</div>' +
            '<div class="params__item__wrapper">' +
                '<div class="params__item__title dict__params_domains_title">' + dict.params_domains_title + ':</div>' +
                '<div class="params__item params__item_domains">';

                    domains.forEach((item) => {
                        html +=
                            '<input type="checkbox" name="domain" id="domain__' + item.id + '" value="' + item.id + '" class="params__input"' + (item.id !== '2cfo' ? ' checked' : '') + '>' +
                            '<label for="domain__' + item.id + '" class="params__label domains__label">' + item.title + '</label>';
                    });

            html +=
                '</div>' +
            '</div>' +
            '<div class="params__button-wrapper">' +
                '<button class="button js-query-button dict__params_select">' + dict.params_select + '</button>' +
            '</div>' +
        '</div>';

    html +=
        '<div class="switch__wrapper">' +
            '<div class="params__item__title dict__params_show_title">' + dict.params_show_title + ':</div>' +
            '<div class="params__item params__item_switch">' +
                '<input type="checkbox" name="date-switch" id="js-start-modeling-switch" value="start-modeling" class="params__input params__input_switch" data-container="modeling_start_time" checked>' +
                '<label for="js-start-modeling-switch" class="params__label dict__params_show_modelingStart">' + '(1)  ' + dict.params_show_modelingStart + '</label>' +
                '<input type="checkbox" name="date-switch" id="js-end-modeling-switch" value="end-modeling" class="params__input params__input_switch" data-container="modeling_end_time" checked>' +
                '<label for="js-end-modeling-switch" class="params__label dict__params_show_modelingEnd">' + '(2)  ' + dict.params_show_modelingEnd + '</label>' +
                '<input type="checkbox" name="date-switch" id="js-start-visualization-switch" value="start-visualization" class="params__input params__input_switch" data-container="visualization_start_time" checked>' +
                '<label for="js-start-visualization-switch" class="params__label dict__params_show_visualizationStart">' + '(3)  ' + dict.params_show_visualizationStart + '</label>' +
                '<input type="checkbox" name="date-switch" id="js-end-visualization-switch" value="end-visualization" class="params__input params__input_switch" data-container="visualization_end_time" checked>' +
                '<label for="js-end-visualization-switch" class="params__label dict__params_show_visualizationEnd">' + '(4)  ' + dict.params_show_visualizationEnd + '</label>' +
                '<input type="checkbox" name="date-switch" id="js-start-loading-switch" value="start-loading" class="params__input params__input_switch" data-container="loading_start_time" checked>' +
                '<label for="js-start-loading-switch" class="params__label dict__params_show_loadingStart">' + '(5)  ' + dict.params_show_loadingStart + '</label>' +
                '<input type="checkbox" name="date-switch" id="js-end-loading-switch" value="end-loading" class="params__input params__input_switch" data-container="loading_end_time" checked>' +
                '<label for="js-end-loading-switch" class="params__label dict__params_show_loadingEnd">' + '(6)  ' + dict.params_show_loadingEnd + '</label>' +
            '</div>' +
        '</div>';

    return html;
}

function monitoring__html__table(dict, result) {
    let domainsData = monitoring__getOptions('domains');
    let classList = monitoring__getOptions('classList');

    let domainsValue = Array.from(document.querySelectorAll('.params__item_domains .params__input:checked')).map((input) => input.value);

    let regexp = /\d{2}:\d{2}/;

    let html =
        '<table class="flexible-table">' +
            '<thead>' +
                '<tr>' +
                    '<th class="dict__table_terms" rowspan="2">' + dict.table_terms + '</th>' +
                    '<th class="dict__table_domains" colspan="6">' + dict.table_domains + '</th>' +
                '</tr>' +
                '<tr>';

                for(let domainIndex in domainsValue) {
                    let domain = domainsValue[domainIndex];
                    html += '<th class="dict__table_domains">' + domainsData[domain] + '</th>';
                }

        html += 
                '</tr>' + 
            '</thead>' +
            '<tbody>';

        for(let term in result) {
            html +=
                '<tr>' +
                    '<td class="table__data_date">' + monitoring__getDateFromTimestamp(new Date(parseInt(term, 10) * 1000)) + '</td>';

                    for(let domainIndex in domainsValue) {
                        let domain = domainsValue[domainIndex];
                        let data = result[term][domain];

                        if (!data) break;

                        html +=
                        '<td class="table__data table__data_' + classList[data.result] + '" ' +
                            'data-term="' + term + '" ' +
                            'data-domain="' + domain + '" ' +
                            (data.modeling_start ? 'data-modeling_start="' + data.modeling_start + '" ' : '') +
                            (data.modeling_end ? 'data-modeling_end="' + data.modeling_end + '" ' : '') +
                            (data.visualization_start ? 'data-visualization_start="' + data.visualization_start + '" ' : '') +
                            (data.visualization_end ? 'data-visualization_end="' + data.visualization_end + '" ' : '') +
                            (data.loading_start ? 'data-loading_start="' + data.loading_start + '" ' : '') +
                            (data.loading_end ? 'data-loading_end="' + data.loading_end + '" ' : '') +
                            'data-result="' + data.result + '"' +
                            (data.not_exist_term ? 'data-not_exist_term="' + Object.values(data.not_exist_term).toString().replaceAll(',', ', ') + '" ' : '') +
                        '>' +
                            '<div class="table__data__domain">' + domain + '</div>' +
                            (data.modeling_start ? `<div class="modeling_start_time${document.querySelector('#js-start-modeling-switch').checked ? ' table__time_visible' : ''}">${data.modeling_start.match(regexp)} <sup>(1)</sup> </div>` : '') +
                            (data.modeling_end ? `<div class="modeling_end_time${document.querySelector('#js-end-modeling-switch').checked ? ' table__time_visible' : ''}">${data.modeling_end.match(regexp)} <sup>(2)</sup> </div>` : '') +
                            (data.visualization_start ? `<div class="visualization_start_time${document.querySelector('#js-start-visualization-switch').checked ? ' table__time_visible' : ''}">${data.visualization_start.match(regexp)} <sup>(3)</sup> </div>` : '') +
                            (data.visualization_end ? `<div class="visualization_end_time${document.querySelector('#js-end-visualization-switch').checked ? ' table__time_visible' : ''}">${data.visualization_end.match(regexp)} <sup>(4)</sup> </div>` : '') +
                            (data.loading_start ? `<div class="loading_start_time${document.querySelector('#js-start-loading-switch').checked ? ' table__time_visible' : ''}">${data.loading_start.match(regexp)} <sup>(5)</sup> </div>` : '') +
                            (data.loading_end ? `<div class="loading_end_time${document.querySelector('#js-end-loading-switch').checked ? ' table__time_visible' : ''}">${data.loading_end.match(regexp)} <sup>(6)</sup> </div>` : '') +
                        '</td>';
                       
                    }
            html += '</tr>';
        }

        html +=
            '</tbody>' +
        '</table>';

        html += '<div class="notion">* ' + dict.notion_under_table + '</div>';

    document.querySelector('#js-table').innerHTML = html;

    let lang = localStorage.getItem('lang') || 'ru';
    document.querySelector('.js-error-button').addEventListener('click', () => monitoring__sendQuery(monitoring__getDict(lang)));
}

function monitoring__html__details(dict, target) {
    let domains = monitoring__getOptions('domains');
    let domain = domains[target.dataset.domain];
    let date = monitoring__getDateFromTimestamp(new Date(parseInt(target.dataset.term, 10) * 1000));
    let modeling_start = target.dataset.modeling_start ? target.dataset.modeling_start : dict.details_noDataAvailable;
    let modeling_end = target.dataset.modeling_end ? target.dataset.modeling_end : dict.details_noDataAvailable;
    let visualization_start = target.dataset.visualization_start ? target.dataset.visualization_start : dict.details_noDataAvailable;
    let visualization_end = target.dataset.visualization_end ? target.dataset.visualization_end : dict.details_noDataAvailable;
    let loading_start = target.dataset.loading_start ? target.dataset.loading_start : dict.details_noDataAvailable;
    let loading_end = target.dataset.loading_end ? target.dataset.loading_end : dict.details_noDataAvailable;
    let not_exist_term = target.dataset.not_exist_term ? target.dataset.not_exist_term : dict.details_noDataAvailable;

    let result = '';

    if(target.dataset.result === 'full') result = dict.details_allTimeTermExist;
    else if(target.dataset.result === 'partially') result = dict.details_someTimeTermAreMissing;
    else if(target.dataset.result === 'none') result = dict.details_allTimeTermAreMissing;
    else if(target.dataset.result === 'size') result = dict.details_someFilesAreSmallInSize;

    let className = monitoring__getOptions('classList')[target.dataset.result];

    let html =
        '<div class="popup__container">' +
            '<div class="popup__bg"></div>' +
            '<div class="details__wrapper">' +
                '<div class="popup__close-wrapper">' +
                    '<div class="popup__close"></div>' +
                '</div>' +
                '<table>' +
                    '<tr>' +
                        '<td>' + dict.details_date + '</td>' +
                        '<td>' + date + '</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>' + dict.details_domian + '</td>' +
                        '<td>' + domain + '</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>' + dict.details_modelingStart + '</td>' +
                        '<td>' + modeling_start + '</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>' + dict.details_modelingEnd + '</td>' +
                        '<td>' + modeling_end + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>' + dict.details_visualizationStart + '</td>' +
                    '<td>' + visualization_start + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>' + dict.details_visualizationEnd + '</td>' +
                    '<td>' + visualization_end + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>' + dict.details_loadingStart + '</td>' +
                    '<td>' + loading_start + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>' + dict.details_loadingEnd + '</td>' +
                    '<td>' + loading_end + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>' + dict.details_result + '</td>' +
                    '<td class="table__data_' + className + '">' + result + '</td>' +
                '</tr>';

                if (target.dataset.result === 'partially') {
                    html +=
                        '<tr>' +
                            '<td>' + dict.details_notExistTerm + '</td>' +
                            '<td>' + not_exist_term + '</td>' +
                        '</tr>';
                }
                
                html +=
                '</table>' +
            '</div>' +
        '</div>';


    let elem = document.createElement('div');
    elem.classList.add('js-details');
    document.querySelector('#js-content').append(elem);

    let detailsWrapper = document.querySelector('.js-details');
    detailsWrapper.innerHTML = html;

    document.querySelector('.popup__bg').addEventListener('click', () => {
        detailsWrapper.innerHTML = '';
    });

    document.querySelector('.popup__close').addEventListener('click', () => {
        detailsWrapper.innerHTML = '';
    });
}

function monitoring__html__instruction() {
    let html =
        '<div class="popup__container">' +
            '<div class="popup__bg"></div>' +
            '<div class="instruction__wrapper">' +
                '<div class="popup__close-wrapper">' +
                    '<div class="popup__close"></div>' +
                '</div>' +
                '<h2>Информация о работе интерфейса</h2>' +
                '<p class="instruction__paragraph">Данный интерфейс разработан для проверки наличия визуализированный прогнозов погоды на ftp-сервере 10.1.112.224. Во время работы интерфейс проверяет наличие файлов по определенным конфигурациям модели COSMO-Ru за определенный промежуток времени. Для сокращения времени работы интерфейса проверка ведется не по всем доменам, а по одному, который включает в себя большую часть рассчитанной информации (самые большие домены для данной конфигурации). В таблице ниже представлены эти домены.</p>' +
                '<table class="instruction__table instruction__table_center">' +
                    '<tr>' +
                        '<th>Конфигурация</th>' +
                        '<th>Домен</th>' +
                    '</tr>' +
                    // '<tr>' +
                    //     '<td>2CFO</td>' +
                    //     '<td>FM-CFO</td>' +
                    // '</tr>' +
                    '<tr>' +
                        '<td>2SFO</td>' +
                        '<td>FM-BSC</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>1Sochi</td>' +
                        '<td>FM-SochiTu</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>6ena</td>' +
                        '<td>fm_Russia</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>2etr</td>' +
                        '<td>fm_Belarus</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>1msk</td>' +
                        '<td>fm_MosReg</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td>icon13ru</td>' +
                        '<td>fm_SNG</td>' +
                    '</tr>' +
                '</table>' +
                '<p class="instruction__paragraph">Данные о наличии прогнозов сводятся в таблицу, где по горизонтали располагаются конфигурации модели, а по вертикали время прогноза. Цвет ячейки определяет полноту наличия прогнозов (обозначения цветов представлены в таблице ниже).</p>' +
                '<table class="instruction__table instruction__table_center">' +
                    '<tr>' +
                        '<th>Ячейка</th>' +
                        '<th>Примечание</th>' +
                    '</tr>' +
                    '<tr>' +
                        '<td class="table__data_success">Данные получены в полном объёме</td>' +
                        '<td>Файлы по всем заблаговременностям для одного выбранного домена расположены на сервере.</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td class="table__data_warning">Данные получены не полностью</td>' +
                        '<td>' +
                            'Найдены не все заблаговременности для одного выбранного домена. Это может обозначать, что:' +
                            '<ol>' +
                                '<li>Для данного домена посчитаны не все заблаговременности (информацию об этом можно увидеть при нажатии на соответсвующую ячейку таблицы).</li>' +
                                '<li>Не найдено ни одной заблаговременности для домена, но папка, в которой должны хранится все прогнозы за выбранный срок, существует на сервере, она может быть пустой или в ней могут находится какие-то файлы (например, метеограммы).</li>' +
                            '</ol>' +
                        '</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td class="table__data_fail">Данные отсутствуют</td>' +
                        '<td>Отсутсвует папка, в которой должны хранится искомые прогнозы.</td>' +
                    '</tr>' +
                    '<tr>' +
                        '<td class="table__data_size">Размер файла меньше 30К</td>' +
                        '<td>Все файлы найдены, но среди них есть файлы с маленьким объемом. Это может обозначать, что внутри файлов хранится только шаблон домена без прогнозов.</td>' +
                    '</tr>' +
                '</table>' +
            '</div>' +
        '</div>';

    let elem = document.createElement('div');
    elem.classList.add('js-instruction');
    document.querySelector('#js-content').append(elem);

    let instructionWrapper = document.querySelector('.js-instruction');
    instructionWrapper.innerHTML = html;

    document.querySelector('.popup__bg').addEventListener('click', () => {
        instructionWrapper.innerHTML = '';
    });

    document.querySelector('.instruction__wrapper .popup__close-wrapper').addEventListener('click', () => {
        instructionWrapper.innerHTML = '';
    });
}

function monitoring__html__loader() {
    let html =
        '<div class="loader__container">' +
            '<div class="loader__box">' +
                '<span class="loader__circle"></span>' +
                '<span class="loader__circle"></span>' +
                '<span class="loader__circle"></span>' +
                '<span class="loader__circle"></span>' +
            '</div>' +
        '</div>';

        return html;
}

function monitoring__html__errorMessage(dict) {
    let html =
        '<div class="error__wrapper">' +
            '<div class="error__text dict__error_text">' + dict.error_text + '</div>' +
            '<button class="js-error-button button dict__error_button">' + dict.error__buttonText + '</div>' +
        '</div>';

    return html;
}

function monitoring__sendQuery(dict) {
    var downloadButton = document.querySelector('.js-download-button');

    let queryBody = monitoring__getQueryBody();
    if (!queryBody) {
        let errorBlock = document.createElement('div');
        errorBlock.classList.add('params__error-block');
        errorBlock.innerHTML = dict.params_errorText;
        document.querySelector('.params__button-wrapper').appendChild(errorBlock);

        return;
    } else {
        let errorBlock = document.querySelector('.params__error-block');
        if (errorBlock) errorBlock.remove
    }

    $.ajax({
        type: 'POST',
        url: 'https://u2019.meteoinfo.ru/services/monitoring/php/main.php',
        data: queryBody,
        timeout: 60 * 1000,
        beforeSend: function() {
            downloadButton.setAttribute('disabled', 'disabled');
            $('#js-table').empty();
            $('.js-loader').show();
            $('.js-error').hide();
        }
    }).done(function(result) {
        try {
            downloadButton.removeAttribute('disabled');
            result = JSON.parse(result);
            window.result = result;
            monitoring__html__table(dict, result);
            $('.js-loader').hide();
        } catch (err) {
            $('.js-loader').hide();
            $('.js-error').css('display', 'flex');
            console.log(err);
        }
    });
}

function monitoring__downloadReport(dict, event) {
    event.preventDefault();

    var downloadButton = document.querySelector('.js-download-button');
    var lang = localStorage.getItem('lang') || 'ru';

    $.ajax({
        type: 'POST',
        url: "https://u2019.meteoinfo.ru/services/monitoring_test/php/download.php",
        data: {
            reportData: JSON.stringify(window.result),
            domains: JSON.stringify(Array.from(document.querySelectorAll('.params__item_domains .params__input:checked')).map((input) => input.value))
        },
        timeout: 60 * 1000,
        beforeSend: function() {
            downloadButton.innerHTML = dict.loading;
        }
    }).done(function(result) {
        // if (result == 'ok') {
            document.getElementById('downloadReport').click();
        // }
    }).fail(function(error) {
        alert('Error');
    }).always(function() {
        downloadButton.innerHTML = dict.download;
    });
}

function monitoring__getQueryBody() {
    let dates = [
        monitoring__getTimestampFromDate(document.querySelector('.date_t1').value),
        monitoring__getTimestampFromDate(document.querySelector('.date_t2').value)
    ];

    let domains = Array.from(document.querySelectorAll('.params__item_domains .params__input:checked')).map((input) => input.value);

    
    if (dates[0] && dates[1] && domains.length > 0) {
        return {
            dates: JSON.stringify(dates),
            domains: JSON.stringify(domains)
        };
    } else {
        return '';
    }
}

function monitoring__getDateRange() {
    let t1 = new Date();
    let t2 = new Date();
    let t2__hour = t1.getUTCHours();

    if (t2__hour > 2) {
        if (t2__hour >= 20) {
            t2.setUTCHours(18, 0, 0);
            t1.setUTCHours(0, 0, 0);
        }
        else if (t2__hour >= 14 && t2__hour < 20) {
            t2.setUTCHours(12, 0, 0);
            t1.setUTCHours(18, 0, 0);
        }
        else if (t2__hour >= 8 && t2__hour < 14) {
            t2.setUTCHours(6, 0, 0);
            t1.setUTCHours(12, 0, 0);
        }
        else if (t2__hour >= 2 && t2__hour < 8) {
            t2.setUTCHours(0, 0, 0);
            t1.setUTCHours(6, 0, 0);
        }
        t1.setUTCDate(t1.getUTCDate() - 2);
    }
    else {
        t2.setUTCHours(18, 0, 0);
        t1.setUTCHours(0, 0, 0);
        t2.setUTCDate(date.getUTCDate() - 1);
        t1.setUTCDate(date.getUTCDate() - 2);
    }

    return {
        t1: `${t1.getUTCFullYear()}-${('0' + (t1.getUTCMonth() + 1)).slice(-2)}-${('0' + t1.getUTCDate()).slice(-2)}-${('0' + t1.getUTCHours()).slice(-2)}`,
        t2: `${t2.getUTCFullYear()}-${('0' + (t2.getUTCMonth() + 1)).slice(-2)}-${('0' + t2.getUTCDate()).slice(-2)}-${('0' + t2.getUTCHours()).slice(-2)}`,
    };
}

function monitoring__getDateFromTimestamp(timestamp) {
    return `${timestamp.getUTCFullYear()}-${('0' + (timestamp.getUTCMonth() + 1)).slice(-2)}-${('0' + timestamp.getUTCDate()).slice(-2)}-${('0' + timestamp.getUTCHours()).slice(-2)}`;
}

function monitoring__getTimestampFromDate(dateStr) {
    let date = new Date(Date.UTC(
        parseInt(dateStr.slice(0, 4), 10),
        parseInt(dateStr.slice(5, 7), 10) - 1,
        parseInt(dateStr.slice(8, 10), 10),
        parseInt(dateStr.slice(11, 13), 10)
    ));

    return (date.getTime()) / 1000;
}

function monitoring__getDict (lang) {
    let dictionary = {
        'ru': {
            logo: 'Гидрометцентр России',
            information:'Информация',
            feedback: 'Оставить отзыв',
            download: 'Скачать отчет',
            title:'Мониторинг наличия прогнозов системы COSMO-Ru',
            subtitle: 'на ftp-сервере 10.1.112.224',
            params_title: 'Параметры',
            params_date_title: 'Выбор диапазона дат',
            params_domains_title:'Расчётные области',
            params_show_title: 'Показать время',
            params_show_modelingStart: 'начала прогноза',
            params_show_modelingEnd: 'окончания прогноза',
            params_show_visualizationStart: 'начала визуализации',
            params_show_visualizationEnd: 'окончания визуализации',
            params_show_loadingStart: 'начала заливки',
            params_show_loadingEnd: 'окончания заливки',
            params_select: 'Установить',
            params_errorText: 'Задайте все параметры',
            table_terms: 'Прогноз от срока',
            table_domains: 'Расчётная область',
            notion_under_table: 'Условные обозначения по цветовой заливке показаны в разделе «Информация»',
            details_date: 'Дата',
            details_domian: 'Расчётная область',
            details_modelingStart: 'Время начала прогноза',
            details_modelingEnd: 'Время окончания прогноза',
            details_visualizationStart: 'Время начала визуализации',
            details_visualizationEnd: 'Время окончания визуализации',
            details_loadingStart: 'Время начала заливки',
            details_loadingEnd: 'Время окончания заливки',
            details_result: 'Результат',
            details_notExistTerm: 'Отсутствующие заблаговременности',
            details_noDataAvailable: 'Нет данных',
            details_allTimeTermExist: 'Все заблаговременности существуют',
            details_someTimeTermAreMissing: 'Некоторые заблаговременности отсутствуют',
            details_allTimeTermAreMissing: 'Заблаговременности отсутствуют',
            details_someFilesAreSmallInSize: 'Некоторые файлы имеют маленький объём',
            error_text: 'Произошла ошибка. Попробуйте повторить позднее',
            error_message: 'Ошибка получения данных',
            error__buttonText: 'Повторить',
            dateTemplate: 'yyyy-mm-dd-hh (UTC)',
            loading: 'Загрузка...',
        },
        'en': {
            logo: 'Hydrometcenter of Russia',
            information:'Information',
            feedback: 'Feedback',
            download: 'Download report',
            title:'Monitoring the availability of COSMO-Ru forecasts',
            subtitle: 'on ftp-server 10.1.112.224',
            params_title: 'Parameters',
            params_date_title: "Choose date range",
            params_domains_title:'Domains',
            params_show_title: 'Show the time of',
            params_show_modelingStart: 'start of modiling',
            params_show_modelingEnd: 'end of modiling',
            params_show_visualizationStart: 'start of visualization',
            params_show_visualizationEnd: 'end of visualization',
            params_show_loadingStart: 'start of loading',
            params_show_loadingEnd: 'end of loading',
            params_select: 'Select',
            params_errorText: 'Set all parameters',
            table_terms: 'Forecast initial time',
            table_domains: 'Domains',
            notion_under_table: 'The color fill symbols are shown in the "Information" section',
            details_date: 'Date',
            details_domian: 'Domain',
            details_modelingStart: 'Modeling start time',
            details_modelingEnd: 'Modeling end time',
            details_visualizationStart: 'Visualization start time',
            details_visualizationEnd: 'Visualization end time',
            details_loadingStart: 'Loading start time',
            details_loadingEnd: 'Loading end time',
            details_result: 'Result',
            details_notExistTerm: 'Missing time term',
            details_noDataAvailable: 'No data available',
            details_allTimeTermExist: 'All time term exist',
            details_someTimeTermAreMissing: 'Some time term are missing',
            details_allTimeTermAreMissing: 'All time term are missing',
            details_someFilesAreSmallInSize: 'Some files are small in size',
            error_text: 'An error has occurred. Try again later',
            error_message: 'Data receiving error',
            error__buttonText: 'Try again',
            dateTemplate: 'yyyy-mm-dd-hh (UTC)',
            loading: 'Loading...',
        }
    };

    return dictionary[lang];
}

function monitoring__translatePage(dict) {
    document.querySelector('.dict__logo').innerHTML = dict.logo;
    document.querySelector('.dict__information').innerHTML = dict.information;
    document.querySelector('.dict__feedback').innerHTML = dict.feedback;
    document.querySelector('.dict__download').innerHTML = dict.download;
    document.querySelector('.dict__title').innerHTML = dict.title;
    document.querySelector('.dict__subtitle').innerHTML = dict.subtitle;
    document.querySelector('.dict__params_date_title').innerHTML = dict.params_date_title;
    document.querySelector('.dict__params_dateTemplate').innerHTML = dict.dateTemplate;
    document.querySelector('.dict__params_domains_title').innerHTML = dict.params_domains_title;
    document.querySelector('.dict__params_show_title').innerHTML = dict.params_show_title;
    document.querySelector('.dict__params_show_modelingStart').innerHTML = '(1) ' + dict.params_show_modelingStart;
    document.querySelector('.dict__params_show_modelingEnd').innerHTML = '(2) ' + dict.params_show_modelingEnd;
    document.querySelector('.dict__params_show_visualizationStart').innerHTML = '(3) ' + dict.params_show_visualizationStart;
    document.querySelector('.dict__params_show_visualizationEnd').innerHTML = '(4) ' + dict.params_show_visualizationEnd;
    document.querySelector('.dict__params_show_loadingStart').innerHTML = '(5) ' + dict.params_show_loadingStart;
    document.querySelector('.dict__params_show_loadingEnd').innerHTML = '(6) ' + dict.params_show_loadingEnd;
    document.querySelector('.dict__params_select').innerHTML = dict.params_select;
    document.querySelector('.dict__error_text').innerHTML = dict.error_text;
    document.querySelector('.dict__error_button').innerHTML = dict.error__buttonText;

    let tableTermsWrapper = document.querySelector('.dict__table_terms'); 
    if (tableTermsWrapper) tableTermsWrapper.innerHTML = dict.table_terms;

    let tableDomainsWrapper = document.querySelector('.dict__table_domains');
    if (tableDomainsWrapper) tableDomainsWrapper.innerHTML = dict.table_domains;
}

function monitoring__getOptions(option) {
    if(option === 'domainsParams') {
        return [
            // {id: '2cfo',   title: '2CFO'},
            {id: '2sfo',   title: '2SFO'},
            {id: '1sochi', title: '1SOCHI'},
            {id: '6ena',   title: '6ENA'},
            {id: '2etr',   title: '2ETR'},
            {id: '1msk',   title: '1MSK'},
            {id: 'icon13ru',   title: 'ICON13Ru'},
        ];
    }

    if(option === 'domains') {
        return {
            // '2cfo': '2CFO',
            '2sfo': '2SFO', '1sochi': '1SOCHI', '6ena': '6ENA', '2etr': '2ETR', '1msk': '1MSK', 'icon13ru': 'ICON13Ru'
        };
    }

    if(option === 'classList') {
        return {'full': 'success', 'partially': 'warning', 'none': 'fail', 'size': 'size'};
    }
}