BeWoPlaner/BeWoPlanerMobil/Views/Customer/CustomerAbsenceTimeFormPartial.cshtml

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

@model CustomerModel
    
@*
  ToDos: 
    1. Formularvalidierung mittels Klassen und Bootstrap
    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 submitCustomerAbsenceTimesForm() {
        try {

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

    function clearCustomerAbsenceTimesForm() {
        try {

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

<div class="form-row">
    <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="Datum" class="form-control datetimepicker-input" data-target="#customer-absence-time-start-date-picker" data-toggle="datetimepicker" />
                <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="Enddatum" class="form-control datetimepicker-input" data-target="#customer-absence-time-end-date-picker" data-toggle="datetimepicker" />
                <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" id="customer-absence-time-start-time" name="Start" class="form-control datetimepicker-input" data-target="#customer-absence-time-start-time-picker" />
                <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" id="customer-absence-time-end-time" name="Ende" class="form-control datetimepicker-input" data-target="#customer-absence-time-end-time-picker" />
                <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="allday-cb" id="customer-absence-time-allday-cb" />
            <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" })
            </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="notice" name="Notice" maxlength="1024" ></textarea>
            </div>
        </div>
    </div>
</div>