1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
pigallery2/frontend/app/ui/settings/tasks/tasks.settings.component.html
Patrik J. Braun 1ddc73d461 improving tasks settings
updating settings
version bump
2019-12-07 18:16:37 +01:00

197 lines
9.6 KiB
HTML

<form #settingsForm="ngForm" class="form-horizontal">
<div class="card mb-4">
<h5 class="card-header" i18n>
<ng-container i18n>Tasks</ng-container>
<ng-container *ngIf="changed">*</ng-container>
</h5>
<div class="card-body">
<div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
<div *ngFor="let schedule of settings.scheduled; let i= index">
<div class="card bg-light">
<div class="card-header clickable" (click)="showDetails[i]=!showDetails[i]">
<div class="d-flex justify-content-between">
{{schedule.taskName}} @<!--
-->
<ng-container [ngSwitch]="schedule.trigger.type">
<ng-container *ngSwitchCase="TaskTriggerType.periodic">
<ng-container i18n>every</ng-container>
{{periods[schedule.trigger.periodicity]}} {{schedule.trigger.atTime | date:"HH:mm":"+0"}}
</ng-container>
<ng-container
*ngSwitchCase="TaskTriggerType.scheduled">{{schedule.trigger.time | date:"medium"}}</ng-container>
<ng-container *ngSwitchCase="TaskTriggerType.never" i18n>never</ng-container>
</ng-container>
<button class="btn btn-danger button-delete"
(click)="remove(i)" i18n><span class="oi oi-trash"></span>
</button>
</div>
</div>
<div class="card-body" [hidden]="!showDetails[i]">
<div class="row">
<div class="col-md-9">
<div class="form-group row">
<label class="col-md-2 control-label" [for]="'taskName'+i" i18n>Task:</label>
<div class="col-md-10">
<select class="form-control" [(ngModel)]="schedule.taskName" [name]="'taskName'+i" required>
<option *ngFor="let availableTask of _settingsService.availableTasks | async"
[ngValue]="availableTask.Name">{{availableTask.Name}}
</option>
</select>
<small class="form-text text-muted"
i18n>Select a task to schedule.
</small>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 control-label" [for]="'repeatType'+i" i18n>Periodicity:</label>
<div class="col-md-10">
<select class="form-control" [(ngModel)]="schedule.trigger.type"
(ngModelChange)="taskTriggerTypeChanged($event,schedule)"
[name]="'repeatType'+i" required>
<option *ngFor="let taskTrigger of taskTriggerType"
[ngValue]="taskTrigger.key">{{taskTrigger.value}}
</option>
</select>
<small class="form-text text-muted"
i18n>Set the time to run the task.
</small>
</div>
</div>
<div class="form-group row" *ngIf="schedule.trigger.type == TaskTriggerType.scheduled">
<label class="col-md-2 control-label" [for]="'triggerTime'+i" i18n>At:</label>
<div class="col-md-10">
<app-timestamp-datepicker
[name]="'triggerTime'+i"
(timestampChange)="testSettingChanges()"
[(timestamp)]="schedule.trigger.time"></app-timestamp-datepicker>
</div>
</div>
<div class="form-group row" *ngIf="schedule.trigger.type == TaskTriggerType.periodic">
<label class="col-md-2 control-label" [for]="'periodicity'+i" i18n>At:</label>
<div class="col-md-10">
<select
class="form-control" [(ngModel)]="schedule.trigger.periodicity"
[name]="'periodicity' + i"
required>
<option *ngFor="let period of periods; let i = index"
[ngValue]="i">
<ng-container i18n>every</ng-container>
{{period}}
</option>
</select>
<app-timestamp-timepicker
[name]="'atTime'+i"
(timestampChange)="testSettingChanges()"
[(timestamp)]="schedule.trigger.atTime"></app-timestamp-timepicker>
</div>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-success float-right"
*ngIf="!tasksService.progress.value[schedule.taskName]"
[disabled]="disableButtons"
title="Trigger task run manually"
i18n-title
(click)="start(schedule)" i18n>Start now
</button>
<button class="btn btn-secondary float-right"
*ngIf="tasksService.progress.value[schedule.taskName]"
[disabled]="disableButtons"
(click)="stop(schedule)" i18n>Stop
</button>
</div>
</div>
<ng-container *ngIf="getConfigTemplate(schedule.taskName) ">
<hr/>
<div *ngFor="let configEntry of getConfigTemplate(schedule.taskName)">
<ng-container [ngSwitch]="configEntry.type">
<ng-container *ngSwitchCase="'boolean'">
<div class="form-group row">
<label class="col-md-2 control-label" [for]="configEntry.id"
i18n>{{configEntry.name}}</label>
<div class="col-md-10">
<bSwitch
id="enableThreading"
class="switch"
[name]="configEntry.id"
[id]="configEntry.id"
[switch-on-color]="'primary'"
[switch-inverse]="true"
[switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled"
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="schedule.config[configEntry.id]">
</bSwitch>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'string'">
<div class="form-group row" [hidden]="simplifiedMode">
<label class="col-md-2 control-label" [for]="configEntry.id"
i18n>{{configEntry.name}}</label>
<div class="col-md-10">
<input type="text" class="form-control" [name]="configEntry.id" [id]="configEntry.id"
[(ngModel)]="schedule.config[configEntry.id]" required>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'number'">
<div class="form-group row" [hidden]="simplifiedMode">
<label class="col-md-2 control-label" [for]="configEntry.id"
i18n>{{configEntry.name}}</label>
<div class="col-md-10">
<input type="number" class="form-control" [name]="configEntry.id" [id]="configEntry.id"
[(ngModel)]="schedule.config[configEntry.id]" required>
</div>
</div>
</ng-container>
</ng-container>
</div>
</ng-container>
</div>
<div class="card-footer bg-transparent" *ngIf="tasksService.progress.value[schedule.taskName]">
<span class="progress-details"
i18n>status</span>: {{tasksService.progress.value[schedule.taskName].comment}} <br/>
<span class="progress-details" i18n>elapsed</span>: {{getTimeElapsed(schedule.taskName) | duration}}<br/>
<span class="progress-details" i18n>left</span>: {{getTimeLeft(schedule.taskName) | duration}}
<div class="progress">
<div class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="2"
aria-valuemin="0"
aria-valuemax="100"
style="min-width: 2em;"
[style.width.%]="(tasksService.progress.value[schedule.taskName].progress/(tasksService.progress.value[schedule.taskName].left+tasksService.progress.value[schedule.taskName].progress))*100">
{{tasksService.progress.value[schedule.taskName].progress}}
/{{tasksService.progress.value[schedule.taskName].progress + tasksService.progress.value[schedule.taskName].left}}
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-success float-right"
[disabled]="!settingsForm.form.valid || !changed || inProgress"
(click)="save()" i18n>Save
</button>
<button class="btn btn-secondary float-right"
[disabled]=" !changed || inProgress"
(click)="reset()" i18n>Reset
</button>
<button class="btn btn-primary float-right"
(click)="addNewTask()" i18n>+ Add task
</button>
</div>
</div>
</form>