<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-default float-right" (click)="reset()" i18n>Reset </button> </div> </div> </form>