{% extends "index.html.twig" %}

{% block searchBtn %}{% endblock %}

{% block breadcrumb %}
    Importiere Daten aus Datenbank
{% endblock %}

{% block sessiontimeout %}{% endblock %}

{% block body %}
    {% if envMode.isDev() == true %}
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-triangle"></i>
            Die Umgebung befindet sich derzeit im Development Zustand. Der Import wird bei längerer Laufzeit in einen
            Memory Overflow laufen. Stellen Sie die Umgebung auf Produktiv um damit der Import reibungslos funktioniert.
        </div>
    {% endif %}
    <div id="app" class="import">
        <div v-if="!showProgress">
            <form action="{{ path("import_db") }}" method="POST" data-submit="startImport">
                <div>
                    <label class="m-0 pt-2">Host</label>
                    <input class="form-control item-required" name="hostname" v-model="hostname" @input="checkDatabase()">
                </div>
                <div>
                    <label class="m-0 pt-2">Benutzername</label>
                    <input class="form-control item-required" name="username" v-model="username" @input="checkDatabase()">
                </div>
                <div>
                    <label class="m-0 pt-2">Passwort</label>
                    <input class="form-control item-required" name="password" v-model="password" @input="checkDatabase()">
                </div>
                <div>
                    <label class="m-0 pt-2">
                        Datenbank
                        <div class="loading-wheel" v-if="loading"></div>
                    </label>
                    <select class="form-control dbname" name="dbname" v-model="selected">
                        <option v-if="databases.length == 0">Keine Datenbanken gefunden</option>
                        <option v-else v-for="(db, index) in databases" :key="index" :value="db">
                            {$db}
                        </option>
                    </select>
                </div>
                <div class="alert alert-info mt-2" v-if="message != ''">
                    {$message}
                </div>
                <div class="alert alert-danger mt-2" v-if="error != ''">
                    {$error}
                </div>
                <div class="m-0 pt-2">
                    <a href="{{ path('index') }}" class="btn btn-secondary">Abbrechen</a>
                    <button type="button" class="btn btn-success requestModal noload" :disabled="!canImport"
                            data-title="Import starten"
                            data-message="Wollen Sie den Import starten?<div class='alert alert-danger mt-3'><i class='fas fa-exclamation-triangle'></i> Die Datenbank wird hierbei zurückgesetzt</div>"
                            data-successbtn="Import starten"
                            data-form="true">
                        <i class="fas fa-download"></i> Import starten
                    </button>
                </div>
            </form>
        </div>
        <div v-if="showProgress">
            <div class="progress-group mt-4" v-for="(name,key,index) of progressData">
                <div class="progress-group-header">
                    <div>{$ name }</div>
                    <template v-if="pollData[key]">
                        <div class="ml-auto font-weight-bold">
                            {$ pollData[key].count } / {$ pollData[key].max}
                        </div>
                        <div class="ml-auto font-weight-bold">
                            {$ (100 / pollData[key].max * pollData[key].count).toFixed() }%
                        </div>
                    </template>
                </div>
                <div class="progress-group-bars">
                    <div class="progress progress-sm">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
                             :style="{width: pollData[key] ? (100 / pollData[key].max * pollData[key].count).toFixed() + '%' : '0%' }">
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center">
                <i class="fas fa-thermometer-empty fa-fw fa-2x text-success" v-if="memoryUsagePercent <= 20"></i>
                <i class="fas fa-thermometer-quarter fa-fw fa-2x text-warning" v-if="memoryUsagePercent > 20 && memoryUsagePercent <= 40"></i>
                <i class="fas fa-thermometer-half fa-fw fa-2x text-warning faa-flash animated" v-if="memoryUsagePercent > 40 && memoryUsagePercent <= 60"></i>
                <i class="fas fa-thermometer-three-quarters fa-fw fa-2x text-danger faa-flash animated" v-if="memoryUsagePercent > 60 && memoryUsagePercent <= 80"></i>
                <i class="fas fa-thermometer-full fa-fw fa-2x text-danger faa-ring animated" v-if="memoryUsagePercent > 80"></i>
                <span class="ml-3">
                Speicherverbrauch:
                <template v-if="pollData">
                    <template v-if="pollData.memory">
                        {$ pollData.memory} / {$pollData.memorylimit} -
                        <b>{$ memoryUsagePercent }%</b>
                    </template>
                </template>
                </span>
            </div>
            <div class="d-flex align-items-center mt-2">
                <i class="far fa-clock fa-fw fa-2x"></i>
                <span class="ml-3">
                Zeit: {$ elapsedTime }
                </span>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('_resources/js/vue.min.js') }}"></script>
    <script>
        let request;
        let app = new Vue({
            el        : '#app',
            delimiters: ['{$', '}'],
            data      : {
                hostname: '',
                username: '',
                password: '',

                databases: [],
                selected : '',

                pollData    : [],
                progressData: {
                    'company'     : 'Firmen',
                    'group'       : 'Benutzergruppen',
                    'user'        : 'Benutzer',
                    'tanktype'    : 'Tank-Typen',
                    'gastype'     : 'Gasarten',
                    'tank'        : 'Tanks',
                    'measurement' : 'Maßeinheiten',
                    'device'      : 'Topas Geräte',
                },

                error  : '',
                message: '',
                loading: false,

                showProgress: false
            },
            computed  : {
                canImport: function () {
                    return this.hostname.trim() != '' && this.username != '' && this.password.trim() != '' && this.selected != '';
                },
                memoryUsagePercent() {
                    if (this.pollData.memory) {
                        return (100 / this.pollData.memorylimitnumber * this.pollData.memorynumber).toFixed(1)
                    }
                    return 0;
                },
                elapsedTime() {
                    if (this.pollData.time) {
                        let seconds = this.pollData.time % 60;
                        let minutes = ((this.pollData.time / 60) % 60).toFixed();
                        let hours = (this.pollData.time / 3600).toFixed();

                        return (hours < 10 ? '0' : '') + hours + ":" + (minutes < 10 ? '0' : '') + minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
                    }
                }
            },
            methods   : {
                startImport() {
                    let self = this;
                    this.showProgress = true;
                    hideLoading();
                    $.ajax({
                        url   : '{{ path("import_db") }}',
                        method: "POST",
                        data  : {
                            hostname: this.hostname,
                            username: this.username,
                            password: this.password,
                            dbname  : this.selected
                        }
                    }).always(function (data) {
                        location.reload();
                    });
                    self.poll();
                },
                checkDatabase() {
                    if (this.hostname.trim() != '' && this.username != '' && this.password.trim() != '') {
                        clearTimeout(request);
                        this.loading = true;
                        let self = this;
                        request = setTimeout(function () {
                            $.ajax({
                                url : "{{ path('import_checkdatabase') }}",
                                data: {
                                    hostname: self.hostname,
                                    username: self.username,
                                    password: self.password
                                }
                            }).done(function (data) {
                                self.loading = false;
                                self.databases = typeof data.databases !== 'undefined' ? data.databases : [];
                                self.selected = self.databases.length > 0 ? self.databases[0] : '';
                                self.message = typeof data.message !== 'undefined' ? data.message : '';
                                self.error = typeof data.error !== 'undefined' ? data.error : '';
                            });
                        }, 500);
                    }
                },
                poll() {
                    let self = this;
                    if (this.showProgress)
                        setTimeout(function () {
                            $.ajax({
                                url       : "{{ asset('/log/import.log') }}", cache: false,
                                method    : "GET",
                                dataType  : "json",
                                timeout   : 1000,
                                beforeSend: function (xhr) {
                                    if (xhr.overrideMimeType) {
                                        xhr.overrideMimeType("application/json");
                                    }
                                },
                            }).done(function (data) {
                                self.pollData = data;
                                self.poll();
                            }).fail(function (xhr, status, error) {
                                self.poll();
                            });
                        }, 1000);
                }
            }
        });
    </script>
{% endblock %}