BeWoPlaner/BeWoPlanerMobil/Views/Scheduler/Scheduler.cshtml

@using BeWoPlanerMobil.Models
@using BeWoPlanerMobil.Util
@using BS.Shared.Extensions

@model SchedulerModel
@{
    ViewBag.Title = "BeWoPlaner Mobil";

    if(TempData[TempDataConstants.DoLogoutKey] is bool doLogout && doLogout)
    {
        <text>
            <script type="text/javascript">
                $("#second-logout-form").submit();
            </script>
        </text>
    }
}

<script type="text/javascript">
    $(function() {
        $("#scheduler-date-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#scheduler-date-picker").on("change.datetimepicker", () => {
            submitSchedulerDateForm();
        });
    });

    $(document).ready(function() {
        @if(Model != null)
        {
            if (Model.SelectedAppointment != null && !Model.IsInIntervalFinderMode)
            {
                <text>
                    showAppointmentForm();
                </text>
            }
        }
    });

    function selectAllCheckboxOnChange(checkboxId, url, popupId, listId, itemIdPrefix, isCustomer, checkBoxIdSuffix, filterAppointmentsUrl, allItemsCheckBoxSuffix) {
        try {
            if(checkboxId === null || checkboxId === undefined || checkboxId.length === 0 || checkboxId.split("-").length < 3) {
                return;
            }

            var value = $(`#${checkboxId}`).prop("checked");
            const selectionPrefix = checkboxId.split("-")[1];

            $(`#${popupId} input[type=checkbox]`).each(function () {
                const id = $(this).attr("id").split("-")[1];

                if($.isNumeric(id) === false) {
                    return;
                }

                $(this).prop("checked", value);
            });

            if(selectionPrefix === "employees" || selectionPrefix === "customers") {
                changeItemListSelection(url, popupId, listId, itemIdPrefix, isCustomer, checkBoxIdSuffix, filterAppointmentsUrl, allItemsCheckBoxSuffix, getTeamMemberOids(), checkboxId);
            } else {
                changeResourceSelection(popupId, url, listId, itemIdPrefix, checkBoxIdSuffix, filterAppointmentsUrl, checkboxId);
            }
        } catch(error) {
            window.showErrorPopup(error);
        }
    }

    function selectAllResourcesForFilteringOnChange() {
        try {
            var isChecked = $("#all-resources-checkbox2").prop("checked");

            $("#resources-popup2 input[type=checkbox]").each(function () {
                var id = $(this).attr("id").split("-")[1];

                if ($.isNumeric(id) === false) {
                    return;
                }

                $(this).prop("checked", isChecked);
            });

            changeResourceSelection('resources-popup2', '@Url.Action("SelectResourcesForAppointmentFiltering")', null, null, '-checkbox2', '@Url.Action("FetchAppointments")', 'all-resources-checkbox2', 'all-resources-checkbox2');
        } catch (error) {
            showErrorPopup(error);
        }
    }

    function getTeamMemberOids() {
        var teamMemberOids = [];

        @foreach(var teamMember in Model.MyTeamEmployees)
        {
            @:teamMemberOids.push(@teamMember.EmployeeOid);
        }

        return teamMemberOids;
    }

    function openEmployeeForFilteringPopup() {
        try {
            $("#employees-popup2").modal("show");
            $("#collapsable-teams-selection2").attr("class", "collapse");
        } catch (error) {
            showErrorPopup(error);
        }
    }

    function closeEmployeeForFilteringPopup() {
        try {
            $("#employees-popup2").modal("hide");
            $("#collapsable-teams-selection2").attr("class", "collapse");
        } catch (error) {
            showErrorPopup(error);
        }
    }

    function toggleTeamList() {
        try {
            var classes = $("#collapsable-teams-selection2").attr("class");

            if(classes.includes("show")) {
                $("#collapsable-teams-selection2").attr("class", "collapse");
            } else {
                $("#collapsable-teams-selection2").attr("class", "collapse,show");
            }
        } catch (error) {
            showErrorPopup(error);
        }
    }

    function toggleBetweenTasksAndAppointments() {
        try {
            const isChecked = $("#tasks-checkbox").is(":checked");
            $.get("@Url.Action("SetShouldLoadTasks")", {isChecked: isChecked}).done(function() {
                $("#appointment-list-container").load("@Url.Action("FetchAppointments")");
            });

        } catch(error) {
            window.showErrorPopup(error);
        }
    }
</script>

<div class="container mt-3">
    <div class="row d-flex justify-content-center">
        <div class="col-auto justify-content-center mx-1 px-0 ml-3">
            @using(Html.BeginForm("NavigateToPreviousDate", "Scheduler", FormMethod.Post))
            {
                <button type="submit" class="btn btn-primary" onclick="showSpinner()">
                    <i class="fas fa-angle-left"></i>
                </button>
            }
        </div>
        <div class="col col-md-auto justify-content-center mx-1 px-0">
            @using(Html.BeginForm("SelectSchedulerDate", "Scheduler", FormMethod.Post, new { id = "scheduler-date-form" }))
            {
                <div class="input-group date" id="scheduler-date-picker" data-target-input="nearest">
                    <input type="text" id="start-date" name="SchedulerDate" class="form-control datetimepicker-input" data-target="#start-date-picker" data-toggle="datetimepicker" value="@Model.SelectedDate.ToShortDateString()" />
                    <div class="input-group-append" data-target="#scheduler-date-picker" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
                    </div>
                </div>
            }
        </div>
        <div class="col-auto justify-content-center mx-1 px-0">
            @using(Html.BeginForm("NavigateToNextDate", "Scheduler", FormMethod.Post))
            {
                <button type="submit" class="btn btn-primary" onclick="showSpinner()">
                    <i class="fas fa-angle-right"></i>
                </button>
            }
        </div>
        <div class="col-auto justify-content-center mx-1 px-0">
            @using(Html.BeginForm("SetIsInIntervalFinderMode", "Scheduler", FormMethod.Post))
            {
                <button type="submit" id="interval-finder-btn" class="btn btn-primary" onclick="showSpinner()">&nbsp;</button>
            }
        </div>
        <div class="col-auto d-sm-flex d-md-none justify-content-center mx-1 px-0">
            <button type="button" class="btn btn-primary" onclick="showAppointmentForm()">
                <i class="fas fa-plus"></i>
            </button>
        </div>
    </div>

    @if(!Model.IsInIntervalFinderMode)
    {
        var showTasksChecked = Model.ShouldLoadTasks ? "checked" : string.Empty;

        <div class="row d-flex justify-content-center">
            <div class="col-auto justify-content-center mx-1 px-0">
                <div class="custom-control custom-switch d-inline mx-auto">
                    <input type="checkbox" @showTasksChecked class="custom-control-input" id="tasks-checkbox" onchange="toggleBetweenTasksAndAppointments()" />
                    <label for="tasks-checkbox" class="custom-control-label">Aufgaben anzeigen</label>
                </div>
            </div>
        </div>

        if(Model.HasResourcesEmployeesOrCustomers)
        {
            <div class="row justify-content-center m-0 p-0 mt-1">
                @if(AbstractModel.HasRightToViewEmployeeAppointments)
                {
                    <div class="col-auto d-flex justify-content-center mx-1 px-0">
                        <button type="button" class="btn btn-sm btn-bewo-employee" onclick="openEmployeeForFilteringPopup()">
                            Mitarbeiter <span class="badge badge-light" id="employe-count2">@Model.SelectedEmployeesForFiltering.Count</span>
                        </button>
                    </div>
                }
                @if(AbstractModel.HasRightToViewCustomerSelectionInScheduler)
                {
                    <div class="col-auto d-flex justify-content-center mx-1 px-0">
                        <button type="button" class="btn btn-sm btn-bewo-customers" data-toggle="modal" data-target="#customers-popup2">
                            Klienten <span class="badge badge-light" id="customer-count2">@Model.SelectedCustomersForFiltering.Count</span>
                        </button>
                    </div>
                }
                @if(AbstractModel.HasRightToViewAllResourceAppointments)
                {
                    <div class="col-auto d-flex justify-content-center mx-1 px-0">
                        <button type="button" class="btn btn-sm btn-bewo-resource" data-toggle="modal" data-target="#resources-popup2">
                            Ressourcen <span class="badge badge-light" id="resource-count2">@Model.SelectedResourcesForFiltering.Count</span>
                        </button>
                    </div>
                }
            </div>
        }
    }
</div>

<div class="container-fluid lg-max-width">
    <hr />
    <div class="row">
        @{
            var editorCol = "col-md-4";
            var listCol = "col-md-8";

            if(Model?.SelectedSchedulerView == "5" || Model?.SelectedSchedulerView == "7")
            {
                editorCol = "col-md-12";
                listCol = "col-md-12";
            }
        }
        <div class="col col-12 @editorCol mb-3" id="test-container">
            @if(Model != null && Model.IsInIntervalFinderMode)
            {
                <!-- Intervallfinder -->
                <div id="interval-finder-container">
                    @Html.Partial("AppointmentIntervalFinderPartial", Model)
                </div>
                <!-- /Intervallfinder -->
            }
            else
            {
                <!-- Formular -->
                <div id="form-container" class="d-none d-sm-none d-md-block">
                    @Html.Partial("AppointmentFormPartial", Model)
                </div>
                <!-- /Formular -->
            }
        </div>

        <!-- Terminliste -->
        <div class="col col-12 @listCol">
            @* TODO: VORERST NICHT LÖSCHEN! *@
            @if(Model?.IsInIntervalFinderMode ?? false)
            {
                @Html.Partial("AppointmentIntervalFinderResultPartial", Model)
            }
            else
            {
                <div id="appointment-list-container">
                    @{
                        Html.RenderAction("FetchAppointments", Model);
                    }
                </div>
            }
        </div>
        <!-- /Terminliste -->
    </div>
</div>


<!-- Filterauswahl: -->
@if(AbstractModel.HasRightToViewAllResourceAppointments)
{
    <div class="modal" tabindex="-1" role="dialog" id="resources-popup2">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title text-center w-100 font-weight-bold">Ressourcen</h6>
                    <button type="button" class="close" data-dismiss="modal" onclick="resetTreeSearch('resource-search-input2', 'resource-text2', 'category-card')">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <div class="custom-control custom-checkbox custom-control-inline mx-auto">
                                        @{
                                            var allResourcesCheckedVal = Model.AllResources.AreListEqual(Model.SelectedResourcesForFiltering) ? "checked" : string.Empty;
                                        }

                                        <input type="checkbox" class="custom-control-input" id="all-resources-checkbox2" @allResourcesCheckedVal onchange="selectAllResourcesForFilteringOnChange()" />
                                        <label class="custom-control-label" for="all-resources-checkbox2">Alle</label>
                                    </div>
                                </div>
                            </div>
                            <input class="form-control w-100" type="text" placeholder="Suchen..." oninput="treeSearchOnChange('resource-search-input2', 'resource-text2', 'category-card', 'resource-name-label2', 'resource-list2')" id="resource-search-input2" />
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" onclick="resetTreeSearch('resource-search-input2', 'resource-text2', 'category-card')">
                                    <span class="fas fa-times-circle"></span>
                                </button>
                            </div>
                        </div>

                        @foreach(var category2Resources in Model.ResourceCategories2Resources)
                        {
                            <div class="card w-100 mb-3 category-card" id="resource-category2-@category2Resources.Key.ValueListEntryOid">
                                <div class="card-header tree-card-header" data-toggle="collapse" data-target="#collapsable-resource-category2-@category2Resources.Key.ValueListEntryOid">
                                    <div class="d-flex align-items-center">
                                        <h5 class="mr-auto">@category2Resources.Key.DisplayName</h5>
                                        <div class="btn-group" role="group">
                                            <span class="fas fa-chevron-down text-primary"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="collapse" id="collapsable-resource-category2-@category2Resources.Key.ValueListEntryOid">
                                    <div class="card-body resource-list2">
                                        @foreach(var resource in category2Resources.Value)
                                        {
                                            var checkedValue = Model.SelectedResourcesForFiltering.Contains(resource) ? "checked" : string.Empty;

                                            <div class="custom-control custom-checkbox resource-text2">
                                                <input type="checkbox" class="custom-control-input" id="resource-@resource.ResourceOid-checkbox2" @checkedValue onchange="changeResourceSelection('resources-popup2', '@Url.Action("SelectResourcesForAppointmentFiltering", "Scheduler")', 'selected-resources-list2', 'relation-item2-', '-checkbox2', '@Url.Action("FetchAppointments", "Scheduler")', 'all-resources-checkbox2')" />
                                                <label class="custom-control-label resource-name-label2" for="resource-@resource.ResourceOid-checkbox2">@resource.Name</label>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
                </div>
            </div>
        </div>
    </div>
}

@if(AbstractModel.HasRightToViewEmployeeAppointments)
{
    Html.RenderAction("FetchSelectedEmployeesForPopup", Model);
}

@if(AbstractModel.HasRightToViewCustomerSelectionInScheduler)
{
    Html.RenderAction("FetchCustomersForFiltering", Model);
}
<!-- /Filterauswahl -->

@if(AbstractModel.HasRightToViewEmployeeAppointments)
{
    Html.RenderPartial("EmployeeSelectionPopupPartial", Model);
}
 
@if(AbstractModel.HasRightToViewCustomerSelectionInScheduler && AbstractModel.HasRightToInsertCustomerAppointments)
{
    Html.RenderPartial("CustomerSelectionPopupPartial", Model);
}
 
@if(AbstractModel.HasRightToViewAllResourceAppointments && AbstractModel.HasRightToInsertRessourceAppointments)
{
    Html.RenderPartial("ResourceSelectionPopupPartial", Model);
}