gehgassi_backend/gehGassi.Web/TS/Views/Statistic/WalksPerTimeRange.ts

import { Global } from "../../Core/Globals"
import { EventManager } from "../../Core/Events"
import { Ui } from "../../Core/Ui"
import * as Events from "../../Core/EventDefinitions"
import { LocalizationManager } from "../../Core/Localization"
import * as Models from "../../Common/Models";
import * as Utility from "../../Core/Utility";
import { DatePicker, ChangedEventArgs } from "@syncfusion/ej2-calendars";

class StatiticWalksPerTimeRangeModule {
    private _moduleName = "StatiticWalksPerTimeRangeModule";
    private _component = "#statisticWalksPerTimeRangeContainer";
    private _global: Global;
    private _eventManager: EventManager;
    private _uiManager: Ui;
    private _localizationMananger: LocalizationManager;
    private _data: any;

    private _startDatePicker: DatePicker;
    private _endDatePicker: DatePicker;

    constructor() {
        this._global = Global.getInstance();
        this._eventManager = EventManager.getInstance();
        this._uiManager = Ui.getInstance();
        this._localizationMananger = LocalizationManager.getInstance();
    }

    /**
     * Stellt einen Prefix vor einen Selektor
     * @param selector
     */
    private prefix(selector: string): string {
        const self = this;
        if ($(`${self._component} ${selector}`).length > 0)
            return `${self._component} ${selector}`;
        return `html ${selector}`;
    }

    /**
     * Laden der Daten nach Auswahl
     */
    private load(): void {
        var self = this;

        var startDate = self._startDatePicker.value;
        var endDate = self._endDatePicker.value;

        var model = { start: startDate, end: endDate, countryIso: "" };

        self._uiManager.blockMainUi();
        $.ajax({
            url: <string>$(self.prefix("#jsGetUrl")).val(),
            data: JSON.stringify(model),
            dataType: "json",
            contentType: "application/json; charset=utf8",
            type: "POST",
            success(data) {
                $(self.prefix("#total")).text(data.total);

                var toPayPercent = 0;
                var runningPercent = 0;
                var completedPercent = 0;
                var notCompletedPercent = 0;
                var confirmedPercent = 0;
                var complainedPercent = 0;
                var complainResolvedPercent = 0;

                if (data.total > 0) {
                    toPayPercent = (data.toPay / data.total) * 100;
                    runningPercent = (data.running / data.total) * 100;
                    completedPercent = (data.completed / data.total) * 100;
                    notCompletedPercent = (data.notCompleted / data.total) * 100;
                    confirmedPercent = (data.confirmed / data.total) * 100;
                    complainedPercent = (data.complained / data.total) * 100;
                    complainResolvedPercent = (data.complainResolved / data.total) * 100;
                }

                $(self.prefix("#toPay")).text(data.toPay);
                $(self.prefix("#toPayPercent")).text(`${toPayPercent.toFixed(2)}%`);

                $(self.prefix("#running")).text(data.running);
                $(self.prefix("#runningPercent")).text(`${runningPercent.toFixed(2)}%`);

                $(self.prefix("#completed")).text(data.completed);
                $(self.prefix("#completedPercent")).text(`${completedPercent.toFixed(2)}%`);

                $(self.prefix("#notCompleted")).text(data.notCompleted);
                $(self.prefix("#notCompletedPercent")).text(`${notCompletedPercent.toFixed(2)}%`);

                $(self.prefix("#confirmed")).text(data.confirmed);
                $(self.prefix("#confirmedPercent")).text(`${confirmedPercent.toFixed(2)}%`);

                $(self.prefix("#complained")).text(data.complained);
                $(self.prefix("#complainedPercent")).text(`${complainedPercent.toFixed(2)}%`);

                $(self.prefix("#complainResolved")).text(data.complainResolved);
                $(self.prefix("#complainResolvedPercent")).text(`${complainResolvedPercent.toFixed(2)}%`);

            },
            error() {

            },
            complete() {
                self._uiManager.unblockMainUi();
            }
        });
    }

    /**
    * Bindungen erstellen
    */
    private setupBindings(): void {
        var self = this;

        self._startDatePicker = new DatePicker({
            value: new Date(Date.parse(<string>$(self.prefix("#Start")).val())),
            change(args: ChangedEventArgs) {
                let selectedDate = args.value;
                let minDate = new Date(args.value);
                minDate.setDate(selectedDate.getDate() + 1);
                self._endDatePicker.min = minDate;
                if (self._endDatePicker.value < minDate)
                    self._endDatePicker.value = minDate;
                self.load();
            }
        });
        self._startDatePicker.appendTo(self.prefix("#Start"));

        self._endDatePicker = new DatePicker({
            value: new Date(Date.parse(<string>$(self.prefix("#End")).val())),
            change(args: ChangedEventArgs) {
                self.load();
            }
        });
        self._endDatePicker.appendTo(self.prefix("#End"));
    }

    /**
    * Aktivieren des Moduls
    */
    public activate(): void {

        var self = this;
        $.setupValidator();
        $.reinitializeValidator();

        this.setupBindings();

        self.load();
        $.randomAutocompleteValue();
    }

    /**
    * Initialisieren des Moduls
    */
    public init(): void {
        if (this._global.appInitialized) {
            statisticWalksPerTimeRangeModule.activate();
        } else {
            setTimeout(() => { this.init(); }, 10);
        }
    }
}

let statisticWalksPerTimeRangeModule = new StatiticWalksPerTimeRangeModule();
statisticWalksPerTimeRangeModule.init();