7643a6ab82
Adds new components for service employees and addons Introduces detailed views with selectable employees and add-ons Updates localization translations for new sections Implements time range slider functionality for availability
66 lines
3.4 KiB
Text
66 lines
3.4 KiB
Text
@model PlanTempus.Application.Features.Services.Components.ServiceDetailEmployeesViewModel
|
||
|
||
<swp-detail-grid>
|
||
<div>
|
||
<swp-card>
|
||
<swp-section-label>@Model.LabelEmployeesForService</swp-section-label>
|
||
|
||
<swp-selectable-list>
|
||
@foreach (var employee in Model.Employees)
|
||
{
|
||
<swp-selectable-item class="@(employee.Selected ? "selected" : "") @(employee.Warning != null ? "disabled" : "")">
|
||
<swp-selectable-checkbox>
|
||
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||
</swp-selectable-checkbox>
|
||
<swp-avatar class="@employee.LevelCssClass">@employee.Initials</swp-avatar>
|
||
<swp-selectable-info>
|
||
<swp-selectable-name>
|
||
@employee.Name
|
||
@if (employee.Warning != null)
|
||
{
|
||
<swp-selectable-warning>@employee.Warning</swp-selectable-warning>
|
||
}
|
||
</swp-selectable-name>
|
||
<swp-tag class="@employee.LevelCssClass">@employee.Level</swp-tag>
|
||
</swp-selectable-info>
|
||
<swp-selectable-override>
|
||
@Model.LabelDuration: <swp-selectable-override-value>@employee.OverrideValue</swp-selectable-override-value>
|
||
</swp-selectable-override>
|
||
</swp-selectable-item>
|
||
}
|
||
</swp-selectable-list>
|
||
|
||
<swp-see-all>@Model.LabelSelectAll</swp-see-all>
|
||
</swp-card>
|
||
</div>
|
||
|
||
<div>
|
||
<swp-card>
|
||
<swp-section-label>@Model.LabelAvailability</swp-section-label>
|
||
|
||
<swp-availability-list>
|
||
@foreach (var day in Model.Availability)
|
||
{
|
||
<swp-availability-row data-enabled="@(day.Enabled ? "true" : "false")">
|
||
<swp-availability-day>@day.Day</swp-availability-day>
|
||
<swp-toggle-slider data-value="@(day.Enabled ? "yes" : "no")">
|
||
<swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
|
||
<swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
|
||
</swp-toggle-slider>
|
||
<swp-availability-time>
|
||
<swp-time-range>
|
||
<swp-time-range-slider>
|
||
<swp-time-range-track></swp-time-range-track>
|
||
<swp-time-range-fill></swp-time-range-fill>
|
||
<input type="range" class="range-start" min="0" max="60" value="8" step="1" @(day.Enabled ? "" : "disabled")>
|
||
<input type="range" class="range-end" min="0" max="60" value="48" step="1" @(day.Enabled ? "" : "disabled")>
|
||
</swp-time-range-slider>
|
||
<swp-time-range-label>@day.StartTime – @day.EndTime</swp-time-range-label>
|
||
</swp-time-range>
|
||
</swp-availability-time>
|
||
</swp-availability-row>
|
||
}
|
||
</swp-availability-list>
|
||
</swp-card>
|
||
</div>
|
||
</swp-detail-grid>
|