start-os/ui/src/app/pages/apps-routes/app-config/app-config.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{ app['title'] | async }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top">

  <!-- loading -->
  <div *ngIf="$loading$ | async" class="full-page-spinner">
    <ion-spinner style="justify-self: center; align-self: end;" name="lines" color="warning"></ion-spinner>
    <ion-label style="justify-self: center;" *ngIf="($loadingText$ | async)" color="dark">
      {{$loadingText$ | async}}
    </ion-label>
  </div>

  <!-- not loading  -->
  <ng-container *ngIf="!($loading$ | async)">
    <ion-item *ngIf="error" class="notifier-item">
      <ion-label style="margin: 7px 5px;" class="ion-text-wrap">
        <p style="color: var(--ion-color-danger)">{{error.text}}.</p>
        <p><a style="color: var(--ion-color-danger); text-decoration: underline; font-weight: bold;" *ngIf="error.moreInfo && !openErrorMoreInfo" (click)="openErrorMoreInfo = true">{{error.moreInfo.buttonText}}</a></p>

        <!-- presentPopover(error.moreInfo.title, error.moreInfo.description, $event) -->
        <ng-container *ngIf="openErrorMoreInfo">
          <p style="margin-top: 10px; color: var(--ion-color-medium);" [innerHTML]="error.moreInfo.title"></p>
          <p style="margin-top: 10px; color: var(--ion-color-medium); font-size: small" [innerHTML]="error.moreInfo.description"></p>
          <a style="font-size: x-small; font-style: italic;" (click)="openErrorMoreInfo = false">Hide</a>
        </ng-container>

      </ion-label>
      <ion-button style="position: absolute; right: 0; top: 0" *ngIf="app && (app.id | async)" color="danger" fill="clear" (click)="dismissError()">
        <ion-icon name="close-outline"></ion-icon>
      </ion-button>
    </ion-item>

    <ng-container *ngIf="app && (app.id | async)">
      <ng-container *ngIf="([AppStatus.NEEDS_CONFIG] | includes: (app.status | async)) && !edited">
        <ion-item class="notifier-item">
          <ion-label class="ion-text-wrap">
            <h2 style="display: flex; align-items: center; margin-bottom: 3px;">
              <ion-icon size="small" style="margin-right: 5px" slot="start" color="dark" slot="start" name="alert-circle-outline"></ion-icon>
              <ion-text style="font-size: smaller;">Initial Config</ion-text>
            </h2>
            <p style="font-size: small">To use the default config for {{ app.title | async }}, click "Save" below.</p>
          </ion-label>
        </ion-item>
      </ng-container>

      <ng-container *ngIf="recommendation && showRecommendation">
        <ion-item class="recommendation-item">
          <ion-label class="ion-text-wrap">
            <h2 style="display: flex; align-items: center;">
              <ion-icon size="small" style="margin: 4px" slot="start" color="primary" slot="start" name="ellipse"></ion-icon>
              <ion-avatar style="width: 3vh; height: 3vh; margin: 0px 2px 0px 5px;" slot="start">
                <img [src]="recommendation.iconURL | iconParse" [alt]="recommendation.title"/>
              </ion-avatar>
              <ion-text style="margin: 5px; font-family: 'Montserrat'; font-size: smaller;">{{recommendation.title}}</ion-text>
            </h2>
            <div style="margin: 7px 5px;">
              <p style="font-size: small; color: var(--ion-color-medium)"> {{app.title | async}} config has been modified to satisfy {{recommendation.title}}.
                <ion-text color="dark">To accept the changes, click “Save” below.</ion-text>
              </p>
              <a style="font-size: small" *ngIf="!openRecommendation" (click)="openRecommendation = true">More Info</a>
              <ng-container *ngIf="openRecommendation">
                <p style="margin-top: 10px; color: var(--ion-color-medium); font-size: small" [innerHTML]="recommendation.description"></p>
                <a style="font-size: x-small; font-style: italic;" (click)="openRecommendation = false">hide</a>
              </ng-container>
              <ion-button style="position: absolute; right: 0; top: 0" color="primary" fill="clear" (click)="dismissRecommendation()">
                <ion-icon name="close-outline"></ion-icon>
              </ion-button>
            </div>
          </ion-label>
        </ion-item>
        <ion-item-divider></ion-item-divider>
      </ng-container>

      <ion-item *ngIf="invalid" class="notifier-item">
        <ion-icon size="small" slot="start" color="danger" name="warning-outline"></ion-icon>
        <ion-label class="ion-text-wrap">
          <p style="color: var(--ion-color-danger)">{{invalid}}</p>
        </ion-label>
      </ion-item>

      <!-- no config -->
      <ion-item *ngIf="!hasConfig">
        <ion-label class="ion-text-wrap">
          <p>No config options for {{ app.title | async }} {{ app.versionInstalled | async }}.</p>
        </ion-label>
      </ion-item>

      <!-- has config -->
      <ng-container *ngIf="hasConfig">
        <ion-button
          [disabled]="invalid || (!edited && !added && !(['NEEDS_CONFIG'] | includes: (app.status | async)))"
          fill="outline"
          expand="block"
          style="margin: 10px"
          color="primary"
          (click)="save()"
        >
          <ion-text color="primary" style="font-weight: bold">
            Save
          </ion-text>
        </ion-button>

        <ion-item-group class="ion-text-wrap ion-padding-bottom">
          <ion-item-divider>Config Options</ion-item-divider>
          <object-config [cursor]="rootCursor" (onEdit)="handleObjectEdit()"></object-config>
        </ion-item-group>
      </ng-container>
    </ng-container>
  </ng-container>
</ion-content>