treetrail-frontend/src/app/settings/settings.component.html

<div class="header">
  <h1>
    Settings
  </h1>
  <div class="userCreds">
    {{ conf.user }}
    <button *ngIf="conf.bootstrap?.user; else login"
      mat-raised-button color="primary"
      [matTooltip]="conf.bootstrap.user.username"
      (click)="actionService.logout()">
      Logout
      <mat-icon>logout</mat-icon>
    </button>
  </div>
</div>

<ng-template #login>
  <button mat-raised-button color="primary" [routerLink]="['/', 'login']">
    Login
    <mat-icon>login</mat-icon>
  </button>
</ng-template>

<mat-accordion>
<mat-expansion-panel *ngIf="conf.bootstrap?.user"
  expanded="true"
  class="admin">
  <mat-expansion-panel-header>
    <mat-panel-title color="warn">Admin</mat-panel-title>
  </mat-expansion-panel-header>
  <app-admin></app-admin>
</mat-expansion-panel>

<mat-expansion-panel expanded="true" class="settings">
  <mat-expansion-panel-header>
    <mat-panel-title>Map</mat-panel-title>
  </mat-expansion-panel-header>
  <div>
    <mat-label>Background</mat-label>
    <div>
      <mat-button-toggle-group #background="matButtonToggleGroup"
        [value]="conf.background || conf.map?.background"
        (change)="configService.setUserPref('background', background.value) ; router.navigate(['/map'])"
      >
        <mat-button-toggle
          *ngFor="let bms of conf.bootstrap.baseMapStyles.embedded"
          [value]="bms">{{ bms }}</mat-button-toggle>
        <mat-button-toggle
          *ngFor="let bms of conf.bootstrap.baseMapStyles.external | keyvalue"
          [value]="bms.key">{{ bms.key }}</mat-button-toggle>
      </mat-button-toggle-group>
    </div>
  </div>
  <div [hidden]="(conf.showZones | keyvalue).length == 0">
    <mat-label>Types of zones displayed on the map</mat-label>
    <div class="settings">
      <mat-checkbox *ngFor="let item of conf.showZones | keyvalue" [checked]="item.value"
        (change)="configService.setUserPrefValue('showZones', item.key, $event.checked) ; router.navigate(['/map'])">
        {{ item.key }}
      </mat-checkbox>
    </div>
  </div>
  <mat-divider></mat-divider>
  <mat-label>Misc.</mat-label>
  <div class="settings">
    <mat-checkbox [checked]="conf.vibrate"
      (change)="configService.setUserPref('vibrate', $event.checked)">
      Vibrate
    </mat-checkbox>
  </div>
</mat-expansion-panel>

<mat-expansion-panel expanded="false">
  <mat-expansion-panel-header>
    <mat-panel-title>Local data</mat-panel-title>
  </mat-expansion-panel-header>
  <mat-label style="font-style: italic;">
    Note: these options are temporary as data updates will be integrated
    seamlessly in the future
  </mat-label>
  <mat-action-list class="user-actions">
    <button mat-raised-button (click)="actionService.updateLocalData()" color='primary'>
      Update data
    </button>
    <button mat-raised-button (click)="actionService.updateLocalImages()" color='primary'>
      Update images
    </button>
    <button mat-raised-button (click)="actionService.updateLocalMapData()" color='primary'>
      Update map data
    </button>
    <button mat-raised-button (click)="actionService.clearLocalData()">
      Clear local data
    </button>
  </mat-action-list>
</mat-expansion-panel>

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>About Tree Trail</mat-panel-title>
  </mat-expansion-panel-header>
  <p>Tree Trail is a free and <a href="https://codeberg.org/Philo/Treetrail">Open Source</a> project,
    developped in Auroville, India.
    It can also be used for other places, please contact us if you need help.</p>
  <h3>Who are we?</h3>
  <ul>
    <li><span class='h'>Philippe May</span>: project lead, technical design, development</li>
    <li><span class='h'>Island Lescure</span>: data contribution, botanical consultant</li>
    <li><span class='h'>Dave Storey</span>: communication</li>
  </ul>
  <p><span class='h'>Contact</span>: phil.treetrail at philome.mooo.com</p>
  <p><span class='h'>Version</span>: {{conf.bootstrap?.client.version }}, frontend: {{ version }}</p>
</mat-expansion-panel>

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>Thank you notes</mat-panel-title>
  </mat-expansion-panel-header>
  We wish to address special thanks to all those who made Tree Trail possible, especially:
  <ul>
    <li>Auroville Botanical Garden (Paul Blanchflower and Glenn Baldwin): financial support, botanical data, feedbacks
    </li>
    <li>Auroville Project Coordination Group: help with funding</li>
    <li>Foundation for World Education: financing of GPS equipments, hosting</li>
  </ul>
</mat-expansion-panel>
<mat-accordion>