Files
BeWoPlaner/BeWoPlanerMobil/Views/DevExpressScheduler/DevExpressScheduler.cshtml

314 lines
11 KiB
Plaintext

@using BeWoPlanerMobil.Util
@model BeWoPlanerMobil.Models.DevExpressSchedulerModel
@{
ViewBag.Title = "DevExpressScheduler";
}
<script type="text/javascript">
$(window).on("load", () => {
$("#employees-popup-apt-flt").on("hide.bs.modal", function(e) {
$.get("@Url.Action("GetSelectedEmployeesForAptFlt")", function(numberOfSelectedEmployees) {
$("#sel-emp-bdg").text(numberOfSelectedEmployees);
});
});
$("#customers-popup-apt-flt").on("hide.bs.modal", function(e) {
$.get("@Url.Action("GetSelectedCustomersForAptFlt")", function(numberOfSelectedCustomers) {
$("#sel-cus-bdg").text(numberOfSelectedCustomers);
});
});
$("#resources-popup-apt-flt").on("hide.bs.modal", function(e) {
$.get("@Url.Action("GetSelectedResourcesForAptFlt")", function(numberOfSelectedResources) {
$("#sel-res-bdg").text(numberOfSelectedResources);
});
});
});
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);
const isAbsenceTime = selectedAppointment.IsAbsenceTime;
const isTask = selectedAppointment.IsTask;
for(let i = 0; i < e.item.items.length; i++) {
const currentItem = e.item.items[i];
switch(currentItem.name) {
case "ToServiceRecord":
if(isAbsenceTime || isTask) {
currentItem.SetVisible(false);
}
break;
}
}
}
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")");
}
</script>
<div class="dropdown show">
@{
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;
}
<button class="btn btn-primary dropdown-toggle m-1" type="button" data-toggle="dropdown">
Filtern
</button>
<button class="btn btn-success m-1 ml-0" type="button" onclick="scheduler.PerformCallback({ apptID: '', actionId: 'Reload' })">
<i class="fas fa-sync-alt"></i>
</button>
@if(Model.NotificationCount == 0)
{
<a href="#" class="disabled" style="text-decoration: underline;">keine Benachrichtigungen</a>
}
<div id="scheduler-notification-container" class="m-1" style="margin: 0 auto;">
@Html.Partial("SchedulerNotificationPartial", Model);
</div>
<div class="dropdown-menu show" 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>
<a href="#" class="dropdown-item" 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">0</span>
</a>
<a href="#" class="dropdown-item" 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">0</span>
</a>
<a href="#" class="dropdown-item">
<i class="fas fa-cubes text-bewo-resource" onclick="$('#resources-popup-apt-flt').modal('show')"></i>
Ressourcen
<span class="badge badge-bewo-resource" id="sel-res-bdg">0</span>
</a>
</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)