BeWoPlaner/BeWoPlanerMobil/Views/DevExpressScheduler/DevExpressScheduler.cshtml

@model BeWoPlanerMobil.Models.DevExpressSchedulerModel

@{
    ViewBag.Title = "DevExpressScheduler";
}

<script type="text/javascript">
	function UpdateSchedulerHeight() {
		scheduler.SetHeight(1);

		var containerHeight = ASPxClientUtils.GetDocumentClientHeight();

		if(document.body.scrollHeight > containerHeight) {
			containerHeight = document.body.scrollHeight;
		}

		scheduler.SetHeight(containerHeight);
	}

	function resizeSchedulerEditForm() {
		const editFormPopup = $("#abc-table").parent().parent().parent();

		const vw = $(window).width();

		if(editFormPopup.outerWidth() !== undefined && vw < 678) {
			const newWidth = vw * .95;

			const allChildren = editFormPopup.parent().find("*");

			allChildren.each((index, element) => {
				const item = $(element);

				if(item[0].tagName === "SCRIPT") {
					return;
				}

				if(item.width() > newWidth) {
					item.outerWidth(newWidth);
					item.css("max-width", newWidth);
				}
			});

			$("#abc-table").siblings().css("max-width", newWidth);

			editFormPopup.outerWidth(newWidth);
			editFormPopup.css("max-width", newWidth);
			editFormPopup.css("left", "0");
			editFormPopup.css("top", "0");
			editFormPopup.css("position", "relative");
			editFormPopup.css("margin", "0 auto");
		}
	}

	function OnAppointmentFormSave(s, e) {
		if(IsValidAppointment()) {
			scheduler.AppointmentFormSave();
		}
	}

	function IsValidAppointment() {
		$.validator.unobtrusive.parse("form");

		return $("form").valid();
	}

	function CloseCustomerGridLookup() {
		CustomerGridLookup.ConfirmCurrentSelection();
		CustomerGridLookup.HideDropDown();
	}

	function CloseEmployeeGridLookup() {
		EmployeeGridLookup.ConfirmCurrentSelection();
		EmployeeGridLookup.HideDropDown();
	}

	function CloseResourceGridLookup() {
		ResourceGridLookup.ConfirmCurrentSelection();
		ResourceGridLookup.HideDropDown();
	}

	ASPxClientControl.GetControlCollection().ControlsInitialized.AddHandler(function(s, e) {
		UpdateSchedulerHeight();
	});

	ASPxClientControl.GetControlCollection().BrowserWindowResized.AddHandler(function(s, e) {
		UpdateSchedulerHeight();
	});

	function onActiveViewChanged(s, e) {
		$.get("@Url.Action("SelectActiveViewType")", { viewTypeName: e.newView });
	}

	function onMenuItemClicked(s, e) {
		try {
			if(e.itemName === "ToServiceRecord") {
				e.handled = true;
				scheduler.PerformCallback({ apptID: scheduler.GetSelectedAppointmentIds()[0], actionId: e.itemName });
			}

			if(e.itemName === "ShowAvailableEmployees") {
				const start = scheduler.selection.interval.start;
				const duration = scheduler.selection.interval.duration;
				const tmpDate = new Date();

				const end = new Date(tmpDate.setTime(start.getTime() + duration));

				e.handled = true;

				const startStr = getTimeStamp(start, false, false);
				const endStr = getTimeStamp(end, false, false);

				$("#scheduler-container").load("@Url.Action("CheckEmployeeAvailability")", {startString: startStr, endString: endStr});
			}
		} catch(error) {
			console.error(error);
		}
	}

	function OnAppointmentMenuPopup(s, e) {
        const id = scheduler.GetSelectedAppointmentIds()[0];
		const selectedAppointment = scheduler.GetAppointmentById(id);

		for(let i = 0; i < e.item.items.length; i++) {
			const currentItem = e.item.items[i];

			switch(currentItem.name) {
				case "ToServiceRecord":
                    if(id === undefined || selectedAppointment.IsAbsenceTime || selectedAppointment.IsTask) {
                        currentItem.SetVisible(false);
					}

					break;
				case "ConfirmApt":
					if(id === undefined || selectedAppointment.CanConfirm === false) {
                        currentItem.SetVisible(false);
					}
					break;
				case "MaybeApt":
					if(id === undefined || selectedAppointment.CanConfirm === false) {
						currentItem.SetVisible(false);
					}
					break;
				case "CancelApt":
					if(id === undefined || selectedAppointment.CanConfirm === false) {
						currentItem.SetVisible(false);
					}
					break;
			}
		}
	}

	function rightClickConfirm(answer, id) {
		showSpinner();

		$("#scheduler-notification-container").load("@Url.Action("RightClickConfirm")", { answer: answer, id: id }, () => { reloadScheduler(); });
	}

	function filterAppointments() {
		const checkedBoxes = $("#filter-menu input[type='checkbox']");

		var selectedBoxes = "";

		for(let i = 0; i < checkedBoxes.length; i++) {
			const box = $(checkedBoxes[i]);
			const boxId = box.prop("id");
			const boxValue = box.prop("checked") ? "on" : "off";

			selectedBoxes += `${boxId}_${boxValue}`;

			if(i !== checkedBoxes.length - 1) {
				selectedBoxes += ";";
			}
		}

		scheduler.PerformCallback({
			apptID: "",
            actionId: "FilterAppointments",
            args: [selectedBoxes]
		});
	}

	function updateNotificationInfo() {
		$("#scheduler-notification-container").load("@Url.Action("GetNotifications")");
	}

	function resetFilterSelection(filterType) {
		var url = "";
		var getSelectedCountUrl = "";

		switch(filterType) {
			case "employee":
				url = "@Url.Action("UpdateEmployeeSelection")";
				getSelectedCountUrl = "@Url.Action("GetSelectedEmployeesForAptFlt")";
				break;
			case "customer":
				url = "@Url.Action("UpdateCustomerSelection")";
				getSelectedCountUrl = "@Url.Action("GetSelectedCustomersForAptFlt")";
				break;
			case "resource":
				url = "@Url.Action("UpdateResourceSelection")";
				getSelectedCountUrl = "@Url.Action("GetSelectedResourcesForAptFlt")";
				break;
		}

		$(`#${filterType}-input-container`).load(url, {selectedOids: new Array()}, () => {
			$.get(getSelectedCountUrl, function(numberOfSelectedObjects) {
				$(`#sel-${filterType.substring(0, 3)}-bdg`).text(numberOfSelectedObjects);

				scheduler.PerformCallback({
					apptID: "",
					actionId: "FilterAppointments",
					args: new Array()
				});
			});
		});
	}

	function performReload() {
        $("#scheduler-notification-container").load("@Url.Action("GetNotifications")");
	}

	function reloadScheduler() {
		scheduler.PerformCallback({ apptID: "", actionId: "Reload", args: null }, () => { performReload(); hideSpinner(); });
	}
</script>

<div class="dropdown">
    @{
        var isOnlyOwnAptsChecked = Model.ShowOnlyMyOwnAppointments ? "checked" : string.Empty;
        var isOnlyPrivateAptsChecked = Model.ShowOnlyPrivateAppointments ? "checked" : string.Empty;
        var isEmployeeColorsChecked = Model.ShowEmployeeColors ? "checked" : string.Empty;
        var isAbsenceTimesChecked = Model.ShowAbsenceTimes ? "checked" : string.Empty;
        var isTasksChecked = Model.ShowTasks ? "checked" : string.Empty;
        var isOnlyEmployeesChecked = Model.ShowOnlyEmployees ? "checked" : string.Empty;
        var isOnlyCustomersChecked = Model.ShowOnlyCustomers ? "checked" : string.Empty;
        var isOnlyResourcesChecked = Model.ShowOnlyResources ? "checked" : string.Empty;
    }
    
    <div class="d-flex justify-content-center align-items-center">
	    <button class="btn btn-primary dropdown-toggle m-1" type="button" data-toggle="dropdown">
		    Filtern
	    </button>
        <div class="dropdown-menu" id="filter-menu">
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="only-my-own-appointments-cb2" @isOnlyOwnAptsChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="only-my-own-appointments-cb2">Nur meine Termine</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="only-private-appointments-cb2" @isOnlyPrivateAptsChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="only-private-appointments-cb2">Nur private Termine</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="employee-colors-cb2" @isEmployeeColorsChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="employee-colors-cb2">Mitarbeiterfarben</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="absence-times-cb2" @isAbsenceTimesChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="absence-times-cb2">Abwesenheiten</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="tasks-cb2" @isTasksChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="tasks-cb2">Aufgaben</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="only-employees-cb2" @isOnlyEmployeesChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="only-employees-cb2">Nur Mitarbeiter</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="only-customers-cb2" @isOnlyCustomersChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="only-customers-cb2">Nur Klienten</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-item">
                <form class="form-inline">
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="only-resources-cb2" @isOnlyResourcesChecked onclick="filterAppointments()">
                        <label class="form-check-label" for="only-resources-cb2">Nur Ressourcen</label>
                    </div>
                </form>
            </div>
            <div class="dropdown-divider"></div>
            <div class="btn-toolbar dropdown-item justify-content-between" role="toolbar">
	            <a href="#" class="text-dark" onclick="$('#employees-popup-apt-flt').modal('show')">
		            <i class="fas fa-user text-bewo-employee"></i>
		            Mitarbeiter
		            <span class="badge badge-bewo-employee" id="sel-emp-bdg">@Model.SelectedEmployeeOidsForFiltering.Count</span>
	            </a>
	            <button type="button" class="btn btn-sm btn-outline-danger" onclick="resetFilterSelection('employee')">
					<i class="fas fa-times-circle"></i>
	            </button>
            </div>
            
            <div class="btn-toolbar dropdown-item justify-content-between" role="toolbar">
	            <a href="#" class="text-dark" onclick="$('#customers-popup-apt-flt').modal('show')">
		            <i class="fas fa-user text-bewo-customers"></i>
		            Klienten
		            <span class="badge badge-bewo-customers" id="sel-cus-bdg">@Model.SelectedCustomerOidsForFiltering.Count</span>
	            </a>
	            <button type="button" class="btn btn-sm btn-outline-danger" onclick="resetFilterSelection('customer')">
		            <i class="fas fa-times-circle"></i>
	            </button>
            </div>
            
            <div class="btn-toolbar dropdown-item justify-content-between" role="toolbar">
	            <a href="#" class="text-dark" onclick="$('#resources-popup-apt-flt').modal('show')">
		            <i class="fas fa-cubes text-bewo-resource"></i>
		            Ressourcen
		            <span class="badge badge-bewo-resource" id="sel-res-bdg">@Model.SelectedResourceOidsForFiltering.Count</span>
	            </a>
	            <button type="button" class="btn btn-sm btn-outline-danger" onclick="resetFilterSelection('resource')">
		            <i class="fas fa-times-circle"></i>
	            </button>
            </div>
        </div>


	    <button class="btn btn-success m-1 ml-0" type="button" onclick="scheduler.PerformCallback({apptID: '', actionId: 'Reload'}); performReload();">
		    <i class="fas fa-sync-alt"></i>
	    </button>

	    <div id="scheduler-notification-container" class="align-middle">
		    @Html.Partial("SchedulerNotificationPartial", Model)
	    </div>
    </div>
</div>

@using(Html.BeginForm())
{
    <div id="scheduler-container">
        @Html.Partial("SchedulerPagePartial", Model)
    </div>
}

@Html.Partial("AptFltEmployeesPartial", Model)

@Html.Partial("AptFltCustomersPartial", Model)

@Html.Partial("AptFltResourcesPartial", Model)