pigallery2/frontend/app/ui/settings/indexing/indexing.settings.component.html

<form #settingsForm="ngForm" class="form-horizontal">
  <div class="card mb-4">
    <h5 class="card-header" i18n>
      Folder indexing
    </h5>
    <div class="card-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>

      <ng-container *ngIf="!simplifiedMode">
        <div class="form-group row">
          <label class="col-md-2 control-label" for="cachedFolderTimeout" i18n>Index cache timeout [ms]</label>
          <div class="col-md-10">
            <input type="number" class="form-control" placeholder="36000"
                   id="cachedFolderTimeout"
                   min="0"
                   step="1"
                   [(ngModel)]="settings.cachedFolderTimeout"
                   name="cachedFolderTimeout" required>
            <small class="form-text text-muted" i18n>If there was no indexing in this time, it reindexes. (skipped if
              indexes are in DB and sensitivity is low)
            </small>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-md-2 control-label" for="folderPreviewSize" i18n>Sub folder preview size</label>
          <div class="col-md-10">
            <input type="number" class="form-control" placeholder="1"
                   id="folderPreviewSize"
                   min="0"
                   step="1"
                   [(ngModel)]="settings.folderPreviewSize"
                   name="folderPreviewSize" required>
            <small class="form-text text-muted" i18n>Reads this many photos from sub folders</small>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-md-2 control-label" for="reIndexingSensitivity" i18n>Folder reindexing sensitivity</label>
          <div class="col-md-10">
            <select id="reIndexingSensitivity" class="form-control" [(ngModel)]="settings.reIndexingSensitivity"
                    name="reIndexingSensitivity" required>
              <option *ngFor="let type of types" [ngValue]="type.key">{{type.value}}
              </option>
            </select>
            <small
              class="form-text text-muted"
              i18n>Set the reindexing sensitivity. High value check the folders for change more often
            </small>
          </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"
                (click)="reset()" i18n>Reset
        </button>
        <br/>
        <hr/>
      </ng-container>

      <ng-container i18n>If you add a new folder to your gallery, the site indexes it automatically.</ng-container>&nbsp;
      <ng-container i18n>If you would like to trigger indexing manually, click index button.</ng-container>
      <br/>
      (
      <ng-container i18n>Note: search only works among the indexed directories</ng-container>
      )<br/>


      <div *ngIf="Progress != null">
        <span class="progress-details" i18n>indexing</span>: {{Progress.comment}} <br/>
        <span class="progress-details" i18n>elapsed</span>: {{TimeElapsed | duration}}<br/>
        <span class="progress-details" i18n>left</span>: {{TimeLeft | 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.%]="(Progress.progress/(Progress.left+Progress.progress))*100">
            {{Progress.progress}}
            /{{Progress.progress + Progress.left}}
          </div>
        </div>
      </div>

      <div class="row justify-content-center buttons-row">
        <button class="btn btn-success"
                *ngIf="Progress == null"
                [disabled]="inProgress"
                title="Indexes the folders"
                i18n-title
                (click)="index(false)" i18n>Index
        </button>
        <button class="btn btn-primary"
                title="Indexes the folders and also creates the thumbnails"
                i18n-title
                *ngIf="Progress == null"
                [disabled]="inProgress"
                (click)="index(true)" i18n>Index with Thumbnails
        </button>
        <button class="btn btn-secondary"
                *ngIf="Progress != null"
                [disabled]="inProgress"
                (click)="cancelIndexing()" i18n>Cancel
        </button>
        <button class="btn btn-danger"
                [disabled]="inProgress"
                (click)="resetDatabase()" i18n>Reset Indexes
        </button>
      </div>
      <hr/>
      <div class="row statics">
        <div class="col-md-4 col-12" i18n>
          Statistic:
        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-folder" title="Folders" i18n-title aria-hidden="true">  </span>
          {{statistic ? statistic.directories : '...'}}
        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-camera-slr" title="Photos" i18n-title aria-hidden="true">  </span>
          {{statistic ? statistic.photos : '...'}}
        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-video" title="Videos" i18n-title aria-hidden="true">  </span>
          {{statistic ? statistic.videos : '...'}}

        </div>
        <div class="col-md-2 col-6">
          <span class="oi oi-pie-chart" title="Size" i18n-title aria-hidden="true">  </span>
          {{statistic ? (statistic.diskUsage | fileSize) : '...'}}
        </div>
      </div>
    </div>
  </div>

</form>