Files
brewman/overlord/src/app/settings/settings.component.html
T

199 lines
8.2 KiB
HTML

<mat-tab-group>
<mat-tab label="Lock Dates">
<form class="flex flex-col" [formRoot]="lockInfoForm">
<div class="row-container">
<mat-checkbox [formField]="lockInfoForm.lockOlder" class="flex-auto basis-1-5">Lock Older</mat-checkbox>
@if (lockOlder()) {
<mat-checkbox [formField]="lockInfoForm.olderRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
}
@if (lockOlder() && !olderRolling()) {
<mat-form-field class="flex-auto basis-3-5">
<mat-label>Date</mat-label>
<input matInput [matDatepicker]="olderDate" [formField]="lockInfoForm.olderDate" autocomplete="off" />
<mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
<mat-datepicker #olderDate></mat-datepicker>
</mat-form-field>
}
@if (lockOlder() && olderRolling()) {
<mat-form-field class="flex-auto basis-3-5">
<mat-label>Days</mat-label>
<input matInput type="number" [formField]="lockInfoForm.olderDays" autocomplete="off" />
</mat-form-field>
}
</div>
<div class="row-container">
<mat-checkbox [formField]="lockInfoForm.lockNewer" class="flex-auto basis-1-5">Lock Newer</mat-checkbox>
@if (lockNewer()) {
<mat-checkbox [formField]="lockInfoForm.newerRolling" class="flex-auto basis-1-5"> Is Rolling </mat-checkbox>
}
@if (lockNewer() && !newerRolling()) {
<mat-form-field class="flex-auto basis-3-5">
<mat-label>Date</mat-label>
<input matInput [matDatepicker]="newerDate" [formField]="lockInfoForm.newerDate" autocomplete="off" />
<mat-datepicker-toggle matSuffix [for]="newerDate"></mat-datepicker-toggle>
<mat-datepicker #newerDate></mat-datepicker>
</mat-form-field>
}
@if (lockNewer() && newerRolling()) {
<mat-form-field class="flex-auto basis-3-5">
<mat-label>Days</mat-label>
<input matInput type="number" [formField]="lockInfoForm.newerDays" autocomplete="off" />
</mat-form-field>
}
</div>
<div class="row-container">
<div>
<h3>Account Types</h3>
@for (at of accountTypes(); track at; let i = $index) {
<div class="flex flex-row justify-around content-start items-start">
@if (lockInfoForm.accountTypes[i]) {
<mat-checkbox [formField]="lockInfoForm.accountTypes[i].accountType" class="flex-auto">{{
at.name
}}</mat-checkbox>
}
</div>
}
</div>
<div>
<h3>Voucher Types</h3>
@for (vt of voucherTypes(); track vt; let j = $index) {
<div class="flex flex-row justify-around content-start items-start">
@if (lockInfoForm.voucherTypes[j]) {
<mat-checkbox [formField]="lockInfoForm.voucherTypes[j].voucherType" class="flex-auto">{{
vt.name
}}</mat-checkbox>
}
</div>
}
</div>
</div>
<div class="row-container">
<mat-form-field class="flex-auto basis-30">
<mat-label>Valid From</mat-label>
<input matInput [matDatepicker]="validFrom" [formField]="lockInfoForm.validFrom" autocomplete="off" />
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
<mat-datepicker #validFrom></mat-datepicker>
</mat-form-field>
<mat-form-field class="flex-auto basis-30">
<mat-label>Valid Till</mat-label>
<input matInput [matDatepicker]="validTill" [formField]="lockInfoForm.validTill" autocomplete="off" />
<mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
<mat-datepicker #validTill></mat-datepicker>
</mat-form-field>
<mat-form-field class="flex-auto basis-1-5">
<mat-label>Index</mat-label>
<input type="number" matInput [formField]="lockInfoForm.index" autocomplete="off" />
</mat-form-field>
<button mat-raised-button color="primary" (click)="saveLock()" class="flex-auto basis-1-5">Add</button>
</div>
<mat-table #table [dataSource]="this.lockInformation()">
<!-- Index Column -->
<ng-container matColumnDef="index">
<mat-header-cell *matHeaderCellDef>Index</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.index }}</mat-cell>
</ng-container>
<!-- Validity Column -->
<ng-container matColumnDef="validity">
<mat-header-cell *matHeaderCellDef>Validity</mat-header-cell>
<mat-cell *matCellDef="let row"
>{{ !!row.validFrom ? row.validFrom : '\u221E' }} -
{{ !!row.validTill ? row.validTill : '\u221E' }}</mat-cell
>
</ng-container>
<!-- Voucher Types Column -->
<ng-container matColumnDef="voucherTypes">
<mat-header-cell *matHeaderCellDef>Voucher Types</mat-header-cell>
<mat-cell *matCellDef="let row">
<ul>
@for (vt of row.voucherTypes; track vt) {
<li>{{ vt.name }}</li>
}
</ul>
</mat-cell>
</ng-container>
<!-- Account Types Column -->
<ng-container matColumnDef="accountTypes">
<mat-header-cell *matHeaderCellDef>Account Types</mat-header-cell>
<mat-cell *matCellDef="let row">
<ul>
@for (at of row.accountTypes; track at) {
<li>{{ at.name }}</li>
}
</ul>
</mat-cell>
</ng-container>
<!-- Lock Column -->
<ng-container matColumnDef="lock">
<mat-header-cell *matHeaderCellDef>Lock Dates</mat-header-cell>
<mat-cell *matCellDef="let row"
>{{ !!row.start.days ? row.start.days : '' }}{{ !!row.start.date ? row.start.date : ''
}}{{ !row.start.days && !row.start.date ? '\u221E' : '' }} - {{ !!row.finish.days ? row.finish.days : ''
}}{{ !!row.finish.date ? row.finish.date : ''
}}{{ !row.finish.days && !row.finish.date ? '\u221E' : '' }}</mat-cell
>
</ng-container>
<!-- Action Column -->
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
<mat-cell *matCellDef="let row" class="center">
<button mat-icon-button tabindex="-1" color="warn" (click)="deleteLock(row)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</form>
</mat-tab>
<mat-tab label="Rebase Data">
<form class="flex flex-col" [formRoot]="rebaseDataForm">
<div class="row-container">
<mat-form-field class="flex-auto basis-4-5">
<mat-label>Date</mat-label>
<input
matInput
[matDatepicker]="rebaseDataDate"
(focus)="rebaseDataDate.open()"
[formField]="rebaseDataForm.date"
autocomplete="off"
/>
<mat-datepicker-toggle matSuffix [for]="rebaseDataDate"></mat-datepicker-toggle>
<mat-datepicker #rebaseDataDate></mat-datepicker>
</mat-form-field>
<button mat-raised-button color="primary" (click)="confirmRebase()" class="flex-auto basis-1-5">Rebase</button>
</div>
</form>
</mat-tab>
<mat-tab label="Maintenance Mode">
@if (maintenance().enabled) {
<div class="row-container">
Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance().user }}</strong
>.
</div>
}
@if (!maintenance().enabled) {
<div class="row-container">Maintenance mode is <strong>DISABLED</strong>.</div>
}
<button
mat-raised-button
[color]="maintenance().enabled ? 'warn' : 'primary'"
(click)="toggleMaintenance()"
class="flex-auto"
>
{{ maintenance().enabled ? 'Disable' : 'Enable' }}
</button>
</mat-tab>
</mat-tab-group>
<footer class="footer">
<p>v{{ auth.user?.ver }}</p>
</footer>