<!DOCTYPE html>
<html lang="de">
    <head>
        <%- include('partials/head') -%>
        <title>FWmonitor - APP</title>

        <style>
            .userelement {
                scroll-margin-top: 20vh;
            }
        </style>
    </head>

    <body>
        <%- include('partials/header') -%>

        <div class="navbar">
            <button class="material-icons" onclick="goBack();">chevron_left</button>

            <h1>Benutzer</h1>
        </div>

        <div class="content">
            <div class="flex_column" style="background-color: var(--bg_veryLight)">
                <div class="padding_top_1 padding_left_1 padding_right_1">
                    <select
                        id="benutzer_filter"
                        style="width: 100%"
                        onChange="filter_users(this.options[this.selectedIndex].value)"
                    ></select>
                </div>

                <div class="user_list padding_1">
                    <template id="template-userelement">
                        <div class="userelement margin_none padding_none deleteme">
                            <div class="list listDark border_left border_right mark_green">
                                <div class="item smallitem">
                                    <span class="text var_name">Max Mustermann</span>
                                    <span class="text right var_st">AGT MA ZUGF GF</span>
                                </div>

                                <div class="item subitem flex_wrap var_group">
                                    <span class="badge green">Gruppe ####</span>
                                </div>
                                <div class="item subitem flex_wrap var_permissions">
                                    <span class="badge"></span>
                                </div>
                                <div class="item subitem flex_wrap var_telegramerror red">
                                    <span class="badge"
                                        >Telegram Fehler -> Benutzer muss /start an den Bot
                                        senden</span
                                    >
                                </div>
                            </div>
                        </div>
                    </template>

                    <template id="template-userelement-nf">
                        <div class="userelement margin_none padding_none deleteme">
                            <div class="list border_left border_right mark_green">
                                <div class="item smallitem blue">
                                    <span class="text var_name">Max Mustermann</span>
                                    <span class="text right var_st">NICHT Freigegeben</span>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <%- include('partials/foot') -%>

        <script>
            const target = document.querySelector('.user_list');

            // Laden
            async function load_users_all() {
                try {
                    const users = await fetch_get(url_user_all, true);
                    console.log('users', users);

                    const calendarGroups = await fetch_get(url_calendar_groups, true);
                    console.log('calendarGroups', calendarGroups);

                    const alarmGroups = await fetch_get(url_group_all, true);
                    console.log('alarmGroups', alarmGroups);

                    // Vorhandene Elemente löschen
                    const elements = target.getElementsByClassName('deleteme');
                    while (elements.length > 0) {
                        elements[0].parentNode.removeChild(elements[0]);
                    }

                    // Filter befüllen
                    let tempStr =
                        '<option value="">Filter: Alle</option>' +
                        '<option value="Admin">Admin</option>' +
                        '<option value="Drucker">Drucker Papierinfo</option>' +
                        '<option value="Software-Info">Softwareinfo</option>' +
                        '<option value="Autostatus">Autostatus</option>' +
                        '<option value="Telefonbuch">Telefonbuch</option>' +
                        '<option value="Kalender">Kalender</option>' +
                        '<option value="AGT">Ausbildung: Atemschutz</option>' +
                        '<option value="MA">Ausbildung: Maschinist</option>' +
                        '<option value="GRF">Ausbildung: Gruppenführer</option>' +
                        '<option value="ZUGF">Ausbildung: Zugführer</option>';
                    for (let i = 0; i < alarmGroups.length; i++) {
                        tempStr +=
                            '<option value="' +
                            alarmGroups[i].name +
                            '">Alarmgruppe: ' +
                            alarmGroups[i].name +
                            '</option>';
                    }
                    for (let i = 1; i < calendarGroups.length; i++) {
                        tempStr +=
                            '<option value="' +
                            calendarGroups[i].name +
                            '">Kalendergruppe: ' +
                            calendarGroups[i].name +
                            '</option>';
                    }
                    document.getElementById('benutzer_filter').innerHTML = tempStr;

                    // Benutzerliste erstellen
                    for (let i = 0; i < users.blocked.length; i++) {
                        const user = users.blocked[i];

                        const template = document.querySelector('#template-userelement-nf');
                        const var_name = template.content.querySelector('.var_name');

                        var_name.innerHTML = user.name + ' ' + user.vorname;

                        const clone = document.importNode(template.content.firstElementChild, true);
                        clone.id = 'scroll_' + user.id;
                        target.append(clone);

                        clone.addEventListener('click', () => {
                            loaderIn('user_edit?id=' + user.id);
                            localStorage.setItem('user_list-scrollid', user.id);
                        });
                    }

                    // Benutzerliste
                    for (let i = 0; i < users.approved.length; i++) {
                        const element = users.approved[i];
                        const calendarGroups_arr =
                            element.kalenderGroups == '' ? [] : element.kalenderGroups.split('|');

                        const template = document.querySelector('#template-userelement');
                        const var_name = template.content.querySelector('.var_name');
                        const var_st = template.content.querySelector('.var_st');
                        const var_group = template.content.querySelector('.var_group');
                        const var_permissions = template.content.querySelector('.var_permissions');
                        const var_telegramerror =
                            template.content.querySelector('.var_telegramerror');

                        var_name.innerHTML = element.name + ' ' + element.vorname;
                        var_st.innerHTML = `${element.stAGT == 1 ? 'AGT' : ''}${
                            element.stMA == 1 ? ' MA' : ''
                        }${element.stGRF == 1 ? ' GRF' : ''}${element.stZUGF == 1 ? ' ZUGF' : ''}`;

                        // Groups
                        let badge_group = '';
                        badge_group += `<span class="badge blue">${
                            alarmGroups.find((x) => x.id == element.group).name
                        }</span>`;
                        for (let j = 0; j < calendarGroups_arr.length; j++) {
                            const calgr = calendarGroups.find((x) => x.id == calendarGroups_arr[j]);
                            if (!calgr) {
                                console.log(
                                    'calendar group ' + calendarGroups_arr[j] + ' is undefined'
                                );
                                continue;
                            }
                            badge_group += `<span class="badge green">${calgr.name}</span>`;
                        }
                        var_group.innerHTML = badge_group;

                        // Permissions
                        let badge_permission = '';
                        if (element.admin == 1)
                            badge_permission += `<span class="badge green">Admin</span>`;
                        if (element.drucker == 1)
                            badge_permission += `<span class="badge green">Drucker</span>`;
                        if (element.softwareInfo == 1)
                            badge_permission += `<span class="badge green">Software-Info</span>`;
                        if (element.kalender == 1)
                            badge_permission += `<span class="badge green">Kalender</span>`;
                        if (element.kalender == 2)
                            badge_permission += `<span class="badge green">Kalender</span>`;
                        if (element.telefonliste == 1)
                            badge_permission += `<span class="badge green">Telefonbuch</span>`;
                        if (element.car_list == 1)
                            badge_permission += `<span class="badge green">Autostatus</span>`;
                        var_permissions.innerHTML = badge_permission;
                        if (badge_permission != '') {
                            var_permissions.classList.remove('hidden');
                        } else {
                            var_permissions.classList.add('hidden');
                        }

                        // Telegram Error
                        if (element.status != 1 && element.status != 2) {
                            var_telegramerror.classList.remove('hidden');
                        } else {
                            var_telegramerror.classList.add('hidden');
                        }

                        const clone = document.importNode(template.content.firstElementChild, true);
                        clone.id = 'scroll_' + element.id;
                        target.append(clone);

                        clone.addEventListener('click', () => {
                            loaderIn('user_edit?id=' + element.id);
                            localStorage.setItem('user_list-scrollid', element.id);
                        });
                    }

                    const scrolltarget = document.querySelector(
                        '#scroll_' + localStorage.getItem('user_list-scrollid')
                    );
                    if (scrolltarget)
                        scrolltarget.scrollIntoView({
                            behavior: 'smooth',
                            block: 'nearest',
                            inline: 'start'
                        });

                    if (localStorage.getItem('user_list-filter')) {
                        ui_setSelectedIndex(
                            document.getElementById('benutzer_filter'),
                            localStorage.getItem('user_list-filter')
                        );
                        filter_users(localStorage.getItem('user_list-filter'));
                    }
                } catch (error) {
                    console.error('load_users_all', error);
                    if (error.show) alert('Daten konnten nicht geladen werden.');
                }
            }

            // Hilfsfunktionen
            function filter_users(filter) {
                localStorage.setItem('user_list-filter', filter);

                ul = target;
                li = ul.getElementsByClassName('userelement');

                // Loop through all list items, and hide those who don't match the search query
                for (i = 0; i < li.length; i++) {
                    a = li[i].innerHTML.replace(/\s/g, '&nbsp;');

                    if (a.indexOf(filter.replace(/\s/g, '&nbsp;')) > -1) {
                        li[i].style.display = '';
                    } else {
                        li[i].style.display = 'none';
                    }
                }
            }

            // Funktionsaufrufe
            loaderFunction = () => {
                load_users_all();
            };
            updateFunction = () => {
                load_users_all();
            };
        </script>
    </body>
</html>
