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

<form #settingsForm="ngForm" class="form-horizontal">
  <div class="card mb-4">
    <h5 class="card-header">
      <ng-container i18n>Map settings</ng-container>
      <div class="switch-wrapper">
        <bSwitch
          class="switch"
          name="enabled"
          [switch-on-color]="'success'"
          [switch-inverse]="'inverse'"
          [switch-off-text]="text.Disabled"
          [switch-on-text]="text.Enabled"
          [switch-disabled]="inProgress"
          [switch-handle-width]="'100'"
          [switch-label-width]="'20'"
          [(ngModel)]="settings.enabled">
        </bSwitch>
      </div>
    </h5>
    <div class="card-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>


      <div class="form-group row">
        <label class="col-md-2 control-label" for="mapProvider" i18n>Map provider</label>
        <div class="col-md-10">
          <select name="mapProvider" id="mapProvider"
                  [disabled]="!settings.enabled"
                  class="form-control" [(ngModel)]="settings.mapProvider" required>
            <option *ngFor="let type of mapProviders" [ngValue]="type.key">{{type.value}}
            </option>
          </select>
        </div>
      </div>

      <div class="form-group row" *ngIf="settings.mapProvider === MapProviders.Custom">
        <label class="col-md-2 control-label" for="tileUrl" i18n>Map tile url</label>
        <div class="col-md-10">
          <input type="text" class="form-control" placeholder="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                 [(ngModel)]="settings.tileUrl"
                 name="tileUrl" id="tileUrl" required>
          <small class="form-text text-muted">
            <ng-container i18n>The map module will use this url to fetch the map tiles.</ng-container>
          </small>
        </div>
      </div>

      <div class="form-group row" *ngIf="settings.mapProvider === MapProviders.Mapbox">
        <label class="col-md-2 control-label" for="mapboxAccessToken" i18n>Mapbox access token</label>
        <div class="col-md-10">
          <input type="text" class="form-control" placeholder="Mapbox access token"
                 [(ngModel)]="settings.mapboxAccessToken"
                 name="mapboxAccessToken" id="mapboxAccessToken" required>
          <small class="form-text text-muted">
            <ng-container i18n>MapBox needs an access token to work, create one at </ng-container><a href="https://www.mapbox.com">https://www.mapbox.com</a>.
          </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>
    </div>
  </div>

</form>