Files
BeWoPlaner/BeWoPlanerMobil/Views/Scheduler/AppointmentIntervalFinderPartial.cshtml

625 lines
36 KiB
Plaintext

@using BeWoPlanerMobil.Models
@using BS.Shared.Extensions
@model BeWoPlanerMobil.Models.SchedulerModel
<script type="text/javascript">
$(function () {
$("#scheduler-interval-start-picker").datetimepicker({
locale: "de",
format: "L"
});
$("#scheduler-interval-end-picker").datetimepicker({
locale: "de",
format: "L"
});
$("#scheduler-interval-start-time-picker").datetimepicker({
locale: "de",
format: "LT"
});
$("#scheduler-interval-end-time-picker").datetimepicker({
locale: "de",
format: "LT"
});
});
function resetIntervalFinderForm() {
$("#scheduler-interval-start-time, #scheduler-interval-end-time, #duration").val("");
$("#scheduler-interval-start, #scheduler-interval-end").val(moment().format("DD.MM.YYYY"));
$("#resources-interval-finder-popup input:checked, #customers-interval-finder-popup input:checked, #employees-interval-finder-popup input:checked").each(function() {
$(this).prop("checked", false);
});
$("#selected-resources-interval-finder-list, #selected-employees-interval-finder-list, #selected-customers-interval-finder-list").empty();
$.get('@Url.Action("ResetIntervalFinder", "Scheduler")');
}
function submitIntervalFinderForm() {
try {
showSpinner();
$("#interval-finder-validation-alert").html("");
$("#interval-finder-validation-alert").collapse("hide");
var isValid = validateIntervalFinderForm();
if(isValid === false) {
hideSpinner();
} else {
$("#hidden-submit-btn").click();
}
} catch(error) {
showErrorPopup(error);
}
}
function validateIntervalFinderForm() {
var isValid = false;
try {
var validationAlert = $("#interval-finder-validation-alert");
validationAlert.html("");
var duration = parseInt($("#interval-duration").val());
var start = getDateTimeFromPicker("scheduler-interval-start", "scheduler-interval-start-time");
var end = getDateTimeFromPicker("scheduler-interval-end", "scheduler-interval-end-time");
var isStartValid = start !== null && isValidDate(new Date(start));
var isEndValid = end !== null && isValidDate(new Date(end));
isValid = isStartValid && isEndValid && duration > 0 && (start !== null && start !== undefined && start.isBefore(end));
if(isValid === false) {
var validationMessage = "";
if(isStartValid === false && isEndValid === false) {
validationMessage = "Das Start- und Endwerte sind ungültig!";
} else if(isStartValid === true && isEndValid === false) {
validationMessage = "Das Enddatum ist ungültig!";
} else if(isStartValid === false && isEndValid === true) {
validationMessage = "Das Startdatum ist ungültig!";
}
if(start !== null && start !== undefined && start.isBefore(end) === false) {
if(validationMessage.length === 0) {
validationMessage += "Das Enddatum darf nicht vor dem Startdatum liegen!";
} else {
validationMessage += "<br/>Das Enddatum darf nicht vor dem Startdatum liegen!";
}
}
if($.isNumeric(duration) === false || duration <= 0) {
if(validationMessage.length === 0) {
validationMessage += "Die Dauer ist ungültig!";
} else {
validationMessage += "<br/>Die Dauer ist ungültig!";
}
}
validationAlert.html(validationMessage);
validationAlert.collapse("show");
}
} catch(error) {
showErrorPopup(error);
} finally {
return isValid;
}
}
function getDateTimeFromPicker(datePickerId, timePickerId) {
try {
var dateVal = $("#" + datePickerId).datetimepicker("viewDate");
var timeVal = $("#" + timePickerId).val();
var timeRegEx = new RegExp('^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$');
if(isValidDate(new Date(dateVal)) && timeRegEx.test(timeVal)) {
var hm = timeVal.split(":");
if(hm.length === 2 && $.isNumeric(hm[0]) && $.isNumeric(hm[1])) {
dateVal.hours(parseInt(hm[0]));
dateVal.minutes(parseInt(hm[1]));
return dateVal;
}
}
return null;
} catch (error) {
showErrorPopup(error);
}
}
$("#interval-form-container").ready(function() {
var width = getMaxWidth("prepend-text");
$(".prepend-text").width(width);
});
function selectTeamForIntervalFinder(teamOid) {
try {
$.get('@Url.Action("SelectTeamForIntervalFinder")', { teamOidString: teamOid }).done(
function(jsonResult) {
var employeeOids = parseJason(jsonResult);
$("#employees-interval-finder-popup .popup-list-item-container input[type=checkbox]").map(function() {
var employeeOid = $(this).attr("id").split("-")[1];
if($.isNumeric(employeeOid) === false) {
return;
}
var numericEmployeeOid = parseInt(employeeOid);
if(employeeOids.includes(numericEmployeeOid)) {
$(this).prop("checked", true);
}
});
changeItemListSelection('@Url.Action("SelectEmployeesForIntervalFinder", "Scheduler")', 'employees-interval-finder-popup', 'selected-employees-interval-finder-list', 'related-employee-interval-finder-', false, '-interval-finder-checkbox', '@Url.Action("FetchAppointments", "Scheduler")');
});
} catch(error) {
showErrorPopup(error);
}
}
</script>
<div id="interval-form-container">
<div class="alert alert-danger collapse" role="alert" id="interval-finder-validation-alert"></div>
@using(Html.BeginForm("FindFreeIntervals", "Scheduler", FormMethod.Post, new { id = "find-appointment-intervals-form", @class = "needs-validation", novalidate = true }))
{
<div class="mt-3">
<div class="form-row">
<div class="col-7 mx-0 pr-1">
<div class="form-group mb-1 mr-0 pr-0">
<div class="input-group date" id="scheduler-interval-start-picker" data-target-input="nearest">
<div class="input-group-prepend">
<span class="input-group-text prepend-text px-2">
Von
</span>
</div>
<input value="@Model.IntervalStartDateStr" type="text" id="scheduler-interval-start" name="IntervalStart" class="form-control datetimepicker-input" data-target="#scheduler-interval-start-picker" data-toggle="datetimepicker"/>
<div class="input-group-append" data-target="#scheduler-interval-start-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-5 mx-0 pl-0">
<div class="form-group mb-1 ml-0 pl-0">
<div class="input-group date" id="scheduler-interval-start-time-picker" data-target-input="nearest">
<input value="@Model.IntervalStartTimeStr" type="text" id="scheduler-interval-start-time" name="IntervalStartTime" class="form-control datetimepicker-input" data-target="#scheduler-interval-start-time-picker"/>
<div class="input-group-append" data-target="#scheduler-interval-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>
<div class="form-row">
<div class="col-7 mx-0 pr-1">
<div class="form-group mb-1 ml-0 pl-0">
<div class="input-group date" id="scheduler-interval-end-picker" data-target-input="nearest">
<div class="input-group-prepend">
<div class="input-group-text prepend-text px-2">
Bis
</div>
</div>
<input value="@Model.IntervalEndDateStr" type="text" id="scheduler-interval-end" name="IntervalEnd" class="form-control datetimepicker-input" data-target="#scheduler-interval-end-picker" data-toggle="datetimepicker"/>
<div class="input-group-append" data-target="#scheduler-interval-end-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-5 mx-0 pl-0">
<div class="form-group mb-1 ml-0 pl-0">
<div class="input-group date" id="scheduler-interval-end-time-picker" data-target-input="nearest">
<input value="@Model.IntervalEndTimeStr" type="text" id="scheduler-interval-end-time" name="IntervalEndTime" class="form-control datetimepicker-input" data-target="#scheduler-interval-end-time-picker"/>
<div class="input-group-append" data-target="#scheduler-interval-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="form-group mb-1">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text prepend-text px-2">
Dauer
</div>
</div>
<input value="@Model.IntervalDurationStr" type="number" min="10" id="interval-duration" name="Duration" class="form-control"/>
</div>
</div>
</div>
</div>
@if(Model.HasResourcesEmployeesOrCustomers)
{
<!-- Hinzufügen-Buttons -->
<div class="form-row">
@if(AbstractModel.HasRightToViewEmployeeAppointments)
{
<div class="col-md">
<div class="form-group my-1">
<button type="button" class="btn btn-bewo-employee w-100" data-toggle="modal" data-target="#employees-interval-finder-popup">Mitarbeiter</button>
</div>
</div>
}
@if(AbstractModel.HasRightToViewCustomerAppointments)
{
<div class="col-md">
<div class="form-group my-1">
<button type="button" class="btn btn-bewo-customers w-100" data-toggle="modal" data-target="#customers-interval-finder-popup">Klienten</button>
</div>
</div>
}
@if(AbstractModel.HasRightToViewAllResourceAppointments && Model.ResourceCategories2Resources.Any())
{
<div class="col-md">
<div class="form-group my-1">
<button type="button" class="btn btn-bewo-resource w-100" data-toggle="modal" data-target="#resources-interval-finder-popup">Ressourcen</button>
</div>
</div>
}
</div>
<div class="form-row">
@if(AbstractModel.HasRightToViewEmployeeAppointments)
{
<div class="col-12">
<div class="form-group my-1">
<div class="list-group" id="selected-employees-interval-finder-list">
@foreach(var selectedEmployee in Model.SelectedEmployeesForIntervalFinder)
{
<div class="list-group-item my-auto" id="related-employee-interval-finder-@selectedEmployee.EmployeeOid">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<i class="fas fa-user text-bewo-employee h-100"></i>
</div>
<p class="form-control border-0 bg-transparent text-truncate">
@selectedEmployee.DetailDescription
</p>
<div class="input-group-append">
@{
var url = Url.Action("SelectEmployeesForIntervalFinder", "Scheduler");
var oid = selectedEmployee.EmployeeOid;
var filterAppointmentsUrl = Url.Action("FetchAppointments", "Scheduler");
var onClickParams = $"{oid}, '-interval-finder-checkbox', false, '{url}', 'employees-interval-finder-popup', 'employees-interval-finder-popup', 'related-employee-interval-finder-', '{filterAppointmentsUrl}'";
}
<button type="button" class="btn btn-primary" onclick="removeSelectedItem(@onClickParams)">
<span class="fas fa-times-circle"></span>
</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
@if(AbstractModel.HasRightToViewCustomerAppointments)
{
<div class="col-12">
<div class="form-group my-1">
<div class="list-group" id="selected-customers-interval-finder-list">
@foreach(var selectedCustomer in Model.SelectedCustomersForIntervalFinder)
{
<div class="list-group-item my-auto" id="related-customer-interval-finder-@selectedCustomer.CustomerOid">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<i class="fas fa-user text-bewo-customers h-100"></i>
</div>
<p class="form-control border-0 bg-transparent text-truncate">
@selectedCustomer.DetailDescription
</p>
<div class="input-group-append">
@{
var url = Url.Action("SelectCustomersForIntervalFinder", "Scheduler");
var oid = selectedCustomer.CustomerOid;
var filterAppointmentsUrl = Url.Action("FetchAppointments", "Scheduler");
var onClickParams = $"{oid}, '-interval-finder-checkbox', false, '{url}', 'customers-interval-finder-popup', 'customers-interval-finder-popup', 'related-customer-interval-finder-', '{filterAppointmentsUrl}'";
}
<button type="button" class="btn btn-primary" onclick="removeSelectedItem(@onClickParams)">
<span class="fas fa-times-circle"></span>
</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
@if(AbstractModel.HasRightToViewAllResourceAppointments && Model.ResourceCategories2Resources.Any())
{
<div class="col-12">
<div class="form-group my-1">
<div class="list-group" id="selected-resources-interval-finder-list">
@foreach(var selectedResource in Model.SelectedResourcesForIntervalFinder)
{
<div class="list-group-item my-auto" id="related-resource-interval-finder-item-@selectedResource.ResourceOid">
<div class="row">
<div class="input-group">
<div class="input-group-prepend">
<i class="fas fa-cubes text-bewo-resource h-100"></i>
</div>
<p class="form-control border-0 bg-transparent text-truncate">
@selectedResource.Name
</p>
<div class="input-group-append">
<button type="button" class="btn btn-primary" onclick="removeSelectedResource('related-resource-interval-finder-item-@selectedResource.ResourceOid', 'resource-@selectedResource.ResourceOid-interval-finder-checkbox', 'resources-interval-finder-popup', '@Url.Action("SelectResourcesForIntervalFinder", "Scheduler")', 'selected-resources-interval-finder-list', '@Url.Action("FetchAppointments", "Scheduler")', 'related-resource-interval-finder-item-', '-interval-finder-checkbox', 'all-resources-for-interval-finder-checkbox')"><span class="fas fa-times-circle"></span>
</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
}
</div>
}
</div>
<button type="submit" class="d-none" id="hidden-submit-btn"></button>
}
<div class="d-flex bd-highlight mt-3">
<div class="mr-auto bd-highlight">
@using(Html.BeginForm("SetIsInIntervalFinderMode", "Scheduler", FormMethod.Post))
{
<button type="submit" onclick="showSpinner()" class="btn btn-primary">Zurück</button>
}
</div>
<div class="ml-3 bd-highlight">
<button type="button" class="btn btn-primary" id="reset-interval-finder-button" onclick="resetIntervalFinderForm()">Abbrechen</button>
</div>
<div class="ml-3 bd-highlight">
<button type="button" class="btn btn-primary" id="find-interval-finder-button" onclick="submitIntervalFinderForm()">Intervalle Prüfen</button>
</div>
</div>
</div>
@if(AbstractModel.HasRightToViewAllResourceAppointments && Model.ResourceCategories2Resources.Any())
{
<div class="modal" tabindex="-1" role="dialog" id="resources-interval-finder-popup">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title text-center w-100">Ressourcen</h6>
<button type="button" class="close" data-dismiss="modal" onclick="resetTreeSearch('interval-finder-resource-search-input', 'resource-text', 'category-card')">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-checkbox custom-control-inline mx-auto">
@{
var allResourcesCheckedVal = Model.AllResources.AreListEqual(Model.SelectedResourcesForIntervalFinder) ? "checked" : string.Empty;
}
<input type="checkbox" class="custom-control-input" id="all-resources-for-interval-finder-checkbox" @allResourcesCheckedVal onchange="selectAllCheckboxOnChange('all-resources-for-interval-finder-checkbox', '@Url.Action("SelectResourcesForIntervalFinder")', 'resources-interval-finder-popup', 'selected-resources-interval-finder-list', 'related-resource-interval-finder-item-', false, '-interval-finder-checkbox', null, 'all-resources-for-interval-finder-checkbox')" />
<label class="custom-control-label" for="all-resources-for-interval-finder-checkbox">Alle</label>
</div>
</div>
</div>
<input class="form-control w-100" type="text" placeholder="Suchen..." oninput="treeSearchOnChange('interval-finder-resource-search-input', 'resource-text', 'category-card', 'resource-name-label', 'resource-list')" id="interval-finder-resource-search-input" />
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="resetTreeSearch('interval-finder-resource-search-input', 'resource-text', 'category-card')">
<span class="fas fa-times-circle"></span>
</button>
</div>
</div>
@foreach(var category2Resources in Model.ResourceCategories2Resources)
{
<div class="card w-100 mb-3 category-card" id="resource-category-@category2Resources.Key.ValueListEntryOid">
<div class="card-header tree-card-header" data-toggle="collapse" data-target="#collapsable-resource-category-interval-finder-@category2Resources.Key.ValueListEntryOid">
<div class="d-flex align-items-center">
<h5 class="mr-auto">@category2Resources.Key.DisplayName</h5>
<div class="btn-group" role="group">
<span class="fas fa-chevron-down text-primary"></span>
</div>
</div>
</div>
<div class="collapse" id="collapsable-resource-category-interval-finder-@category2Resources.Key.ValueListEntryOid">
<div class="card-body resource-list">
@foreach(var resource in category2Resources.Value)
{
var checkedValue = Model.SelectedResourcesForIntervalFinder.Contains(resource) ? "checked" : string.Empty;
<div class="custom-control custom-checkbox resource-text">
<input type="checkbox" class="custom-control-input" id="resource-@resource.ResourceOid-interval-finder-checkbox" @checkedValue onchange="changeResourceSelection('resources-interval-finder-popup', '@Url.Action("SelectResourcesForIntervalFinder", "Scheduler")', 'selected-resources-interval-finder-list', 'related-resource-interval-finder-item-', '-interval-finder-checkbox', '@Url.Action("FetchAppointments", "Scheduler")', 'all-resources-for-interval-finder-checkbox')" />
<label class="custom-control-label resource-name-label" for="resource-@resource.ResourceOid-interval-finder-checkbox">@resource.Name</label>
</div>
}
</div>
</div>
</div>
}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
</div>
</div>
</div>
</div>
}
@if(AbstractModel.HasRightToViewEmployeeAppointments && Model.AllEmployees.Any())
{
<div class="modal" tabindex="-1" role="dialog" id="employees-interval-finder-popup">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title text-center w-100">Mitarbeiter</h6>
<button type="button" class="close" data-dismiss="modal" onclick="resetSearch('interval-finder-employee-search-input', 'interval-finder-employee-text')">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-checkbox custom-control-inline mx-auto">
@{
var allEmployeesCheckedVal = Model.AllEmployees.AreListEqual(Model.SelectedEmployeesForIntervalFinder) ? "checked" : string.Empty;
}
<input type="checkbox" class="custom-control-input" id="all-employees-for-interval-finder-checkbox" @allEmployeesCheckedVal
onchange="selectAllCheckboxOnChange('all-employees-for-interval-finder-checkbox', '@Url.Action("SelectEmployeesForIntervalFinder", "Scheduler")', 'employees-interval-finder-popup', 'selected-employees-interval-finder-list', 'related-employee-interval-finder-', false, '-interval-finder-checkbox', '@Url.Action("FetchAppointments", "Scheduler")', '')" />
<label class="custom-control-label" for="all-employees-for-interval-finder-checkbox">Alle</label>
</div>
</div>
</div>
<input class="form-control w-100" type="text" placeholder="Suchen..." oninput="listSearchOnChange('interval-finder-employee-search-input', 'interval-finder-employee-text', 'interval-finder-employee-name-label')" id="interval-finder-employee-search-input"/>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" onclick="resetSearch('interval-finder-employee-search-input', 'interval-finder-employee-text')">
<span class="fas fa-times-circle"></span>
</button>
</div>
</div>
@if(AbstractModel.HasRightToViewTeams)
{
<div class="card w-100 mb-3">
<div class="card-header" data-toggle="collapse" data-target="#collapsable-teams-selection">
<div class="d-flex align-items-center">
<h5 class="mr-auto">Meine Teams</h5>
<div class="btn-group" role="group">
<span class="fas fa-chevron-down text-primary"></span>
</div>
</div>
</div>
<div class="collapse" id="collapsable-teams-selection">
<div class="card-body">
@foreach(var team in Model.MyTeams)
{
<button type="button" class="btn btn-bewo-teams w-100 my-2" onclick="selectTeamForIntervalFinder(@team.TeamOid)">@team.Name</button>
}
</div>
</div>
</div>
<hr />
}
<div class="popup-list-item-container">
@foreach(var employee in Model.AllEmployees)
{
var checkedValue = Model.SelectedEmployeesForIntervalFinder.Contains(employee) ? "checked" : string.Empty;
var url = Url.Action("SelectEmployeesForIntervalFinder", "Scheduler");
var filterAppointmentsUrl = Url.Action("FetchAppointments", "Scheduler");
var onClickParams = $"'{url}', 'employees-interval-finder-popup', 'selected-employees-interval-finder-list', 'related-employee-interval-finder-', false, '-interval-finder-checkbox', '{filterAppointmentsUrl}', '', getTeamMemberOids(), 'all-employees-for-interval-finder-checkbox'";
<div class="custom-control custom-checkbox interval-finder-employee-text">
<input type="checkbox" class="custom-control-input" id="employee-@employee.EmployeeOid-interval-finder-checkbox" @checkedValue onchange="changeItemListSelection(@onClickParams)" />
<label class="custom-control-label interval-finder-employee-name-label" for="employee-@employee.EmployeeOid-interval-finder-checkbox">@employee.DetailDescription</label>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
</div>
</div>
</div>
</div>
}
@if(AbstractModel.HasRightToViewCustomerAppointments && Model.AllCustomers.Any())
{
<div class="modal" tabindex="-1" role="dialog" id="customers-interval-finder-popup">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title text-center w-100">Klienten</h6>
<button type="button" class="close" data-dismiss="modal" onclick="resetSearch('interval-finder-customer-search-input', 'interval-finder-customer-text')">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
@{
var allCustomersCheckedVal = Model.AllCustomers.AreListEqual(Model.SelectedCustomersForIntervalFinder) ? "checked" : string.Empty;
}
<div class="custom-control custom-checkbox custom-control-inline mx-auto">
<input type="checkbox" class="custom-control-input" id="all-customers-for-interval-finder-checkbox" @allCustomersCheckedVal
onchange="selectAllCheckboxOnChange('all-customers-for-interval-finder-checkbox', '@Url.Action("SelectCustomersForIntervalFinder")', 'customers-interval-finder-popup', 'selected-customers-interval-finder-list', 'related-customer-interval-finder-', true, '-interval-finder-checkbox', '@Url.Action("FetchAppointments")', '')" />
<label class="custom-control-label" for="all-customers-for-interval-finder-checkbox">Alle</label>
</div>
</div>
</div>
<input class="form-control w-100" type="text" placeholder="Suchen..." oninput="listSearchOnChange('interval-finder-customer-search-input', 'interval-finder-customer-text', 'interval-finder-customer-name-label')" id="interval-finder-customer-search-input"/>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" onclick="resetSearch('interval-finder-customer-search-input', 'interval-finder-customer-text')">
<span class="fas fa-times-circle"></span>
</button>
</div>
</div>
<div class="popup-list-item-container">
@foreach(var customer in Model.AllCustomers)
{
var checkedValue = Model.SelectedCustomersForIntervalFinder.Contains(customer) ? "checked" : string.Empty;
var url = Url.Action("SelectCustomersForIntervalFinder", "Scheduler");
var filterAppointmentsUrl = Url.Action("FetchAppointments", "Scheduler");
var onClickParams = $"'{url}', 'customers-interval-finder-popup', 'selected-customers-interval-finder-list', 'related-customer-interval-finder-', true, '-interval-finder-checkbox', '{filterAppointmentsUrl}', '', getTeamMemberOids(), 'all-customers-for-interval-finder-checkbox'";
<div class="custom-control custom-checkbox interval-finder-customer-text">
<input type="checkbox" class="custom-control-input" id="customer-@customer.CustomerOid-interval-finder-checkbox" @checkedValue onchange="changeItemListSelection(@onClickParams)"/>
<label class="custom-control-label interval-finder-customer-name-label" for="customer-@customer.CustomerOid-interval-finder-checkbox">@customer.DetailDescription</label>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
</div>
</div>
</div>
</div>
}