BeWoPlaner/BeWoPlanerMobil/Views/Main/Main.cshtml

@using BeWoPlanerMobil.Models;
@using BeWoPlanerMobil.Util;

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

    if(TempData[MobileUtils.TempDataLoginStateKey] is BeWoLoginState loginState && loginState.Message != null)
    {
        var loginStateMessage = new HtmlString(loginState.Message.Replace("\n", "<br/>").Replace("\"", "\\"));

        <script>
            showMessagePopupWithHtml("Warnung", "@loginStateMessage");
        </script>
    }
}

<script>
    $(function() {
        $("#start-date-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#end-date-picker").datetimepicker({
            locale: "de",
            format: "L"
        });

        $("#start-time-picker").datetimepicker({
            locale: "de",
            format: "LT"
        });

        if ($("#end-time-picker").length !== 0) {
            $("#end-time-picker").datetimepicker({
                locale: "de",
                format: "LT"
            });
        }
    });

    $(document).ready(function () {
        var supportConceptOid = parseInt($("#CostBearer2SupportConceptOid").val());

        var isSupportConceptSelected = supportConceptOid !== -1;

        $("#employeesDropDown, #category-select, #leistung-select, #start-date, #end-date, #start-time, #end-time, #duration, #distance, #textbausteine-button, #goals-button, textarea, #reset-button, #create-button, #statistics-button, #timeFrameSelect, #hours-minutes-dropdown-btn").prop("disabled", (isSupportConceptSelected ? false : true));

        if(getIsInGroupBookingMode()) {
            var hasSelectedSupportConcepts = "@Model.SelectedConceptCostBearerRelations.Any()".toLowerCase() === "true";

            $("#employees-button, #category-select, #leistung-select, #start-date, #end-date, #start-time, #end-time, #duration, #distance, textarea, #reset-button, #create-button, #textbausteine-button, #hours-minutes-dropdown-btn").prop("disabled", (hasSelectedSupportConcepts ? false : true));
        }

        loadServiceDescriptions();
        var previousStartTime = "";
        $("#start-time-picker").on("change.datetimepicker",
            ({ date, oldDate }) =>
            {
                // Von
                var startTimeValue = $("#start-time").val();

                if(previousStartTime.length === 5 && startTimeValue.length === 0) {
                    $("#duration").val("");
                    return;
                }

                if (startTimeValue.length === 5 || startTimeValue.length === 0) {
                    previousStartTime = startTimeValue;
                }

                calculateDuration(false);
            }
        );
        var previousEndTime = "";
        $("#end-time-picker").on("change.datetimepicker",
            ({ date, oldDate }) =>
            {
                // Bis
                var endTimeValue = $("#end-time").val();

                if(previousEndTime.length === 5 && endTimeValue.length === 0) {
                    $("#duration").val("");
                    return;
                }

                if (endTimeValue.length === 5 || endTimeValue.length === 0) {
                    previousEndTime = endTimeValue;
                }

                calculateDuration(false);
            }
        );

        $("#start-date-picker").on("change.datetimepicker", ({ date, oldDate }) => {
            calculateDuration(false);
        });

        if ($("#end-time-picker").length !== 0) {
            $("#end-date-picker").on("change.datetimepicker",
                ({ date, oldDate }) => {
                    calculateDuration(false);
                });
        }

        $("#signature-img-popup").on("hidden.bs.modal",
            function() {
                $("#signature-img").attr("src", null);
                $("#signature-text").html("");
            });

        @if (Model != null && Model.IsInEditingMode)
        {
            <text>
                $("#start-time-picker").trigger("change");
            </text>
        }

        @if(Model?.SelectedSupportConcept != null && Model.SelectedSupportConcept.Goals.Any())
        {
            <text>
                initializeGoalsTreeView();
            </text>
        }

        setInputFilter();

        @if(Model.IsInGroupBookingMode)
        {
            <text>
                $("#create-button").prop("disabled", @Model.SelectedEmployees.Count === 0 ? true : false);
            </text>
        }

        @{
            var shouldShowSignaturePopup = TempData[FormCollectionConstants.ShowSignatureSuggestionPopup]?.GetType() == typeof(bool) && (bool) TempData[FormCollectionConstants.ShowSignatureSuggestionPopup];

            if(Model.ServiceRecordOid > 0)
            {
                if(shouldShowSignaturePopup && Model.ShowSignature)
                {
                    <text>
                        showMessagePopupWithCallback("Erfolgreich gespeichert", "Möchten Sie den Eintrag unterschreiben lassen?", function() {
                            initializeSignature(@Model.ServiceRecordOid);
                        }, false);
                    </text>
                }
            }
        }
    });

    function setInputFilter() {
        $("#duration, #distance").inputFilter(function(value) {
            var result = /^\d*$/;
            var dropdownButton = $("#hours-minutes-dropdown-btn");

            if (dropdownButton.length && dropdownButton.text() === "Stunden") {
                result = /^-?\d*[.,]?\d*$/;
            }

            return result.test(value);
        });
    }

    (function($) {
        $.fn.inputFilter = function(inputFilter) {
            return this.on("input keydown keyup mouseup select mousedown contextmenu drop", function() {
                if(inputFilter(this.value)) {
                    this.oldValue = this.value;
                    this.oldSelectionStart = this.selectionStart;
                    this.oldSelectionEnd = this.selectionEnd;
                } else if (this.hasOwnProperty("oldValue")) {
                    this.value = this.oldValue;
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                } else {
                    this.value = "";
                }
            });
        }
    }(jQuery));

    $(window).resize(function() {
        resizeCanvas("#sketch-pad", "#canvas-row");
    });

    function getSetServiceRecordEmployeeUrl() {
        return "@Url.Action("SetServiceRecordEmployee")";
    }

    function getLoadServiceCategoriesUrl() {
        return "@Url.Action("LoadServiceCategories")";
    }

    function getSetServiceDescriptionUrl() {
        return "@Url.Action("SetServiceDescription")";
    }

    function getLoadTextbausteineForServiceCategoryUrl() {
        return "@Url.Action("LoadTextbausteineForServiceCategory")";
    }

    function getLoadCompleteTextbausteinByOidUrl() {
        return "@Url.Action("LoadCompleteTextbausteinByOid")";
    }

    function getAddSupportConceptsLink() {
        return "@Url.Action("AddSupportConceptCostBearerRelationsToGroupBooking")";
    }

    function getNumberOfDokutypes() {
        return @Model.NumberOfDokuTypes;
    }

    function getRedirectLink() {
        return '@Url.Action("Index", "Login")';
    }

    function getRemoveCb2ScRelFromGroupBookingUrl() {
        return '@Url.Action("RemoveSupportConceptCostBearerRelationFromGroupBooking")';
    }

    function getLoadStatisticsUrl() {
        return '@Url.Action("LoadStatistics")';
    }

    function getAddEmployeesToGroupBookingUrl() {
        return '@Url.Action("AddEmployeesToGroupBooking")';
    }

    function getSelectedRecordInformationUrlWithOid() {
        return '@Url.Action("GetSelectedRecordInformationWithOid")';
    }

    function getSetSelectedSignatureUrl() {
        return '@Url.Action("SaveUnterschrift")';
    }

    function getDeleteServiceRecordUrl() {
        return '@Url.Action("DeleteServiceRecord")';
    }

    function getLoadStatisticsUrl() {
        return '@Url.Action("LoadStatistics")';
    }

    function getIsDocumentationMandatory() {
        return @(Model != null && Model.IsServiceRecordNoticeMandatory ? "true" : "false");
    }

    function initializeGoalsTreeView() {
        $.get("@Url.Action("LoadGoals")").done(function(jsonGoals) {
            buildGoalsTree($.parseJSON(jsonGoals));
        });
    }

    function getSelectedGoalOids() {
        return @Html.Raw(Json.Encode(Model.SelectedGoals.Select(s => s.ValueListEntryOid.Value).ToArray()));
    }

    function getUpdateGoalsUrl() {
        return "@Url.Action("UpdateGoals")";
    }

    function getCheckRightsUrl() {
        return "@Url.Action("CheckRights")";
    }

    function getIsInEditingMode() {
        var boolString = "@Model.IsInEditingMode";

        return boolString.toLowerCase() === "true";
    }

    function getIsInGroupBookingMode() {
        var boolString = "@Model.IsInGroupBookingMode";

        return boolString.toLowerCase() === "true";
    }

    function getServiceDescriptionToEdit() {
        if (getIsInEditingMode()) {
            var floatString = "@Model.SelectedServiceRecordsServiceDescriptionOid";

            return parseFloat(floatString);
        } else {
            return 0;
        }
    }

    function getValidateServiceRecordDeletionUrl() {
        return "@Url.Action("ValidateServiceRecordDeletion")";
    }

    function getGetSignatureImageUrl() {
        return "@Url.Action("GetSignatureImage")";
    }

    function getRateSelectedGoalUrl() {
        return "@Url.Action("RateSelectedGoal")";
    }
</script>

<div class="container mt-3" id="checkbox-container">
    <div class="row">
        @if(AbstractModel.IsAllowedToSeeSupportConceptFilter)
        {
            <div class="col-md">
                @using(Html.BeginForm("SetSupportConceptFilter", "Main", FormMethod.Post))
                {
                    @Html.DropDownListFor(m => m.SelectedSupportConceptFilter, Model.SupportConceptFilter, new { onchange = "submitForm(this)", @class = "custom-select" })
                }
            </div>
        }

        <div class="col-md pt-1">
            @using(Html.BeginForm("SetShowExpiredSupportConcepts", "Main", FormMethod.Post))
            {
                <div class="custom-control custom-checkbox custom-control-inline">
                    @Html.CheckBoxFor(m => m.ShowExpiredSupportConcepts, new { onchange = "submitForm(this)", @class = "custom-control-input" })
                    @Html.LabelFor(m => m.ShowExpiredSupportConcepts, new { @class = "custom-control-label" })
                </div>
            }
        </div>

        @if(AbstractModel.HasRightForGroupBookings)
        {
            <div class="col-md pt-1">
                @using(Html.BeginForm("SetGroupBookingMode", "Main", FormMethod.Post))
                {
                    <div class="custom-control custom-checkbox custom-control-inline">
                        @Html.CheckBoxFor(m => m.IsInGroupBookingMode, new { onchange = "submitForm(this)", @class = "custom-control-input" })
                        @Html.LabelFor(m => m.IsInGroupBookingMode, new { @class = "custom-control-label" })
                    </div>
                }
            </div>
        }
    </div>
</div>

<div class="container-fluid mb-3" id="main-container">
    @if(!Model.IsInGroupBookingMode)
    {
        @Html.Partial("SingleBookingPartial", Model)
    }
</div>

<div class="container mb-3">
    @if(Model.IsInGroupBookingMode)
    {
        @Html.Partial("GroupBookingPartial", Model)
    }
</div>

<!-- Textbausteine-Popup-->
<div class="modal" tabindex="-1" role="dialog" id="textbausteine-popup">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Textbausteine</h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="tree"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Ziele und Maßnahmen Popup -->
<div class="modal" tabindex="-1" role="dialog" id="goal-popup">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Ziele und Maßnahmen</h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="goals-tree"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>



<!-- Unterschriften-Layover -->
<div class="container-fluid d-none mb-3" id="signature-container">
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <h4 class="d-inline">Unterschrift</h4>
                <button type="button" class="btn btn-primary float-right" id="cancel-signature-btn">
                    <span class="fas fa-times-circle"></span>
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Hilfeplan:
            </div>
            <div class="col" id="signature-support-concept">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Kategorie:
            </div>
            <div class="col" id="signature-service-description">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Leistung:
            </div>
            <div class="col" id="signature-service-category">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary">
                Mitarbeiter:
            </div>
            <div class="col" id="signature-employee">

            </div>
        </div>
        <div class="row">
            <div class="col text-secondary" id="signature-date-time-left">
                Datum / Uhrzeit:
            </div>
            <div class="col" id="signature-date-time">

            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <button type="button" class="btn btn-primary float-right" id="save-signature-btn">Speichern</button>
                <button type="button" class="btn btn-secondary float-right mr-3" id="clear-canvas-btn">Neu</button>
            </div>
        </div>
        <div class="row mt-3" id="canvas-row">
            <div class="canvas-container" id="canvas-container">
                <canvas id="sketch-pad" width="500" height="200" class="bg-white" style="border: 1px solid #343A40;"></canvas>
            </div>
        </div>

        <input type="hidden" id="service-record-oid-holder" />
    </div>
</div>

@if(AbstractModel.IsDeleteBtnVisible)
{
    using(Html.BeginForm("DeleteServiceRecord", "Main", FormMethod.Post, new { id = "deletion-form" }))
    {
        <input type="hidden" name="serviceRecordOidHolder" id="oidHolder" />
    }
}

<!-- Statistik-Popup -->
<div id="statistics-popup" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="statistics-header"></h6>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div id="period-statistics-container">

                    </div>
                    <canvas class="mt-3" id="statistic-canvas" scaleheight="65%" scalewidth="65%"></canvas>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Zurück</button>
            </div>
        </div>
    </div>
</div>

<!-- Unterschriftenanzeige-Popup -->
<div id="signature-img-popup" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="signature-text"></h5>
                <button type="button" class="close" data-dismiss="modal" onclick="hideSignature()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img id="signature-img" alt="Unterschrift" class="img-fluid mx-auto d-block" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="hideSignature()">Zurück</button>
            </div>
        </div>
    </div>
</div>

<!-- Bewertungspopup für Ziele -->
<div id="goal-rating-popup" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bewertungsskala</h5>
                <button class="close" type="button" data-dismiss="modal" onclick="hideGoalRatingPopup()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                    @foreach(var ratingType in Model.GoalRatingTypes)
                    {
                        <li class="list-group-item" id="grt-@ratingType.RatingTypeOid" onclick="rateGoal(@ratingType.RatingTypeOid)">@ratingType.DisplayName</li>
                    }
                </ul>
                <input type="hidden" id="goal-to-rate-oid" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="hideGoalRatingPopup()">Zurück</button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="has-any-rating-types" value="@Model?.HasAnyRatingTypes ?? False" />