pigallery2/frontend/app/ui/settings/tasks/tasks.settings.component.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>