BeWoPlaner/BeWoPlanerMobil/Views/Customer/CustomerAbsenceTimeFormPartial.cshtml

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

@model CustomerModel

@*
    ToDos:
      1. Formularvalidierung
      2. Ganztagsfunktionalität einbauen
      3. Controller-Funktionen implementieren:
          1. Bearbeiten einer existierenden Abwesenheit
          2. Anlegen einer neuen Abwesenheit
*@

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

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

    var initialDatePrependWidth = 0;
    function calcAbsenceTimePrependWidth() {
        try {
            setTimeout(function () {
                if(initialDatePrependWidth <= 0 && $.isNumeric(getMaxWidth("customer-absence-time-prepend"))) {
                    initialDatePrependWidth = getMaxWidth("customer-absence-time-prepend");
                }

                if(initialDatePrependWidth <= 0) {
                    return;
                }

                logInfo2(`max width: ${getMaxWidth("customer-absence-time-prepend")}`);

                $(".customer-absence-time-prepend").width(getMaxWidth("customer-absence-time-prepend"));
            });
        } catch(error) {
            showErrorPopup(error);
        }
    }

    function validateAbsenceTimeForm() {
        try {
            $("#form-validation-result-column").addClass("d-none");
            $("#form-validation-result-container").html("");

            var validationMessage = "";

            var allDay = $("#customer-absence-time-allday-cb").is(":checked");

            var startDateString = $("#customer-absence-time-start-date").val();
            var endDateString = $("#customer-absence-time-end-date").val();
            var startTimeString = $("#customer-absence-time-start-time").val();
            var endTimeString = $("#customer-absence-time-end-time").val();

            var isInfinite = endDateString.length === 0 && endTimeString.length === 0;

            var start = allDay ? moment(startDateString, "DD.MM.YYYY") : moment(startDateString + " " + startTimeString, "DD.MM.YYYY hh:mm");
            var end = allDay ? moment(endDateString, "DD.MM.YYYY") : moment(endDateString + " " + endTimeString, "DD.MM.YYYY hh:mm");


            var isStartValid = start.isValid();
            var isEndValid = end.isValid() || isInfinite;

            if(!isStartValid || !isEndValid) {
                return "Die Datumsangaben sind ungültig!";
            }

            var selectedOption = $("#absence-reason-select option:selected");

            if(!isInfinite && isStartValid === true && end.isBefore(start)) {
                validationMessage = "Das Enddatum muss vor dem Startdatum liegen.";
            }

            if(selectedOption.val() === "-1") {
                if(validationMessage.length === 0) {
                    validationMessage = "Die Kategorie darf nicht leer sein.";
                } else {
                    validationMessage += "<br />Die Kategorie darf nicht leer sein.";
                }
            }

            return validationMessage;
        } catch(error) {
            showErrorPopup(error);
        }
    }

    function toggleAllDay() {
        try {
            $("#customer-absence-time-start-time, #customer-absence-time-end-time").prop("disabled", $("#customer-absence-time-allday-cb").is(":checked"));
        } catch(error) {
            showErrorPopup(error);
        }
    }

    function submitCustomerAbsenceTimesForm() {
        try {
            var validationMessage = validateAbsenceTimeForm();

            if(validationMessage !== undefined && validationMessage !== null && validationMessage.length > 0) {
                $("#form-validation-result-column").removeClass("d-none");
                $("#form-validation-result-container").html(validationMessage);

                return;
            }

            showSpinner();
            $("#create-absence-time-form").submit();
        } catch(error) {
            showErrorPopup(error);
        }
    }

    function clearCustomerAbsenceTimesForm() {
        try {
            $("#customer-absence-time-notice, #customer-absence-time-start-date, #customer-absence-time-end-date, #customer-absence-time-start-time, #customer-absence-time-end-time").val("");
            $.get("@Url.Action("DeselectAbsenceTime")").success(function() {
                $("#customer-absence-time-modal-body").load('@Url.Action("LoadAbsenceTimeToForm", "Customer")').load();
            });
        } catch(error) {
            showErrorPopup(error);
        }
    }
</script>

@using(Html.BeginForm("CreateOrUpdateAbsenceTime", "Customer", FormMethod.Post, new { id = "create-absence-time-form" }))
{
    var isAllDay = Model.SelectedAbsenceTime?.Start?.IsTimeZero() ?? false;
    var allDay = isAllDay ? "checked" : "";
    var isDisabled = isAllDay ? "disabled" : "";
    var startDate = Model.SelectedAbsenceTime?.Start?.ToString("dd.MM.yyyy");
    var endDate = Model.SelectedAbsenceTime?.End?.ToString("dd.MM.yyyy");
    var startTime = Model.SelectedAbsenceTime?.Start?.ToString("HH:mm");
    var endTime = Model.SelectedAbsenceTime?.End?.ToString("HH:mm");

    <input type="hidden" name="customer-absence-time-oid" value="@Model.SelectedAbsenceTime?.AbsenceTimeOid" />
    <div class="form-row">
        <div class="col-lg d-none" id="form-validation-result-column">
            <div class="alert alert-danger" role="alert" id="form-validation-result-container"></div>
        </div>

        <div class="col-lg">
            <div class="form-group my-2">
                <div class="input-group date" id="customer-absence-time-start-date-picker" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <div class="input-group-text customer-absence-time-prepend">
                            Startdatum
                        </div>
                    </div>
                    <input type="text" id="customer-absence-time-start-date" name="customer-absence-time-start-date" class="form-control datetimepicker-input" data-target="#customer-absence-time-start-date-picker" data-toggle="datetimepicker" value="@startDate" />
                    <div class="input-group-append" data-target="#customer-absence-time-start-date-picker" data-toggle="datetimepicker">
                        <div class="input-group-text px-2">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="form-group my-2">
                <div class="input-group date" id="customer-absence-time-end-date-picker" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <div class="input-group-text customer-absence-time-prepend">
                            Enddatum
                        </div>
                    </div>
                    <input type="text" id="customer-absence-time-end-date" name="customer-absence-time-end-date" class="form-control datetimepicker-input" data-target="#customer-absence-time-end-date-picker" data-toggle="datetimepicker" value="@endDate" />
                    <div class="input-group-append" data-target="#customer-absence-time-end-date-picker" data-toggle="datetimepicker">
                        <div class="input-group-text px-2">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="form-row">
        <div class="col-lg">
            <div class="form-group my-2">
                <div class="input-group date" id="customer-absence-time-start-time-picker" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <div class="input-group-text customer-absence-time-prepend">
                            Von
                        </div>
                    </div>
                    <input type="text" @isDisabled id="customer-absence-time-start-time" name="customer-absence-time-start-time" class="form-control datetimepicker-input" data-target="#customer-absence-time-start-time-picker" value="@startTime" />
                    <div class="input-group-append" data-target="#customer-absence-time-start-time-picker" data-toggle="datetimepicker">
                        <div class="input-group-text px-2">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg">
            <div class="form-group my-2">
                <div class="input-group date" id="customer-absence-time-end-time-picker" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <div class="input-group-text customer-absence-time-prepend">
                            Bis
                        </div>
                    </div>
                    <input type="text" @isDisabled id="customer-absence-time-end-time" name="customer-absence-time-end-time" class="form-control datetimepicker-input" data-target="#customer-absence-time-end-time-picker" value="@endTime" />
                    <div class="input-group-append" data-target="#customer-absence-time-end-time-picker" data-toggle="datetimepicker">
                        <div class="input-group-text px-2">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md">
            <div class="custom-control custom-checkbox custom-control-inline">
                <input type="checkbox" class="custom-control-input" name="customer-absence-time-allday-cb" id="customer-absence-time-allday-cb" onclick="toggleAllDay()" @allDay />
                <label class="custom-control-label" for="customer-absence-time-allday-cb">Ganztäglich</label>
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md">
            <div class="form-group my-2">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text customer-absence-time-prepend">
                            Kategorie
                        </div>
                    </div>
                    @Html.DropDownListFor(m => m.SelectedAbsenceReason, Model.AbsenceReasonItems, new { @class = "custom-select", Id = "absence-reason-select", Name = "customer-absence-time-category" })
                </div>
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md">
            <div class="form-group mb-1">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text customer-absence-time-prepend">
                            Erläuterung
                        </div>
                    </div>
                    <textarea class="form-control" id="customer-absence-time-notice" name="customer-absence-time-notice" maxlength="1024">@(Model.SelectedAbsenceTime?.Notice ?? string.Empty)</textarea>
                </div>
            </div>
        </div>
    </div>
}