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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>Listing</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

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

  <ion-spinner *ngIf="loading; else loaded" class="center" name="lines" color="warning"></ion-spinner>

  <ng-template #loaded>
    <ion-item *ngIf="error" style="margin-bottom: 16px;">
      <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
    </ion-item>

    <ng-container *ngrxLet="patch.watch$('package-data', pkgId) as localPkg">
      <ion-item-group>
        <ion-item lines="none">
          <ion-avatar slot="start">
            <img [src]="pkg.icon" />
          </ion-avatar>
          <ion-label class="ion-text-wrap">
            <h1 style="font-family: 'Montserrat'">{{ pkg.manifest.title }}</h1>
            <h3>{{ pkg.manifest.version | displayEmver }}</h3>
            <!-- no localPkg -->
            <h3 *ngIf="!localPkg; else local">
              <ion-text color="medium">Not Installed</ion-text>
            </h3>
            <!-- localPkg -->
            <ng-template #local>
              <h3 *ngIf="localPkg.state !== PackageState.Installed; else installed">
                <!-- installing, updating, removing -->
                <ion-text [color]="localPkg.state === PackageState.Removing ? 'danger' : 'primary'">{{ localPkg.state }}</ion-text>
                <ion-spinner class="dots dots-medium" name="dots" [color]="localPkg.state === PackageState.Removing ? 'danger' : 'primary'"></ion-spinner>
              </h3>
              <!-- installed -->
              <ng-template #installed>
                <h3>
                  <ion-text color="medium">Installed at {{ localPkg.installed.manifest.version | displayEmver }}</ion-text>
                </h3>
              </ng-template>
            </ng-template>
          </ion-label>
        </ion-item>
      </ion-item-group>
  
      <!-- no localPkg -->
      <ion-button *ngIf="!localPkg; else localPkg2" class="main-action-button" expand="block" fill="outline" color="success" (click)="install()">
        Install
      </ion-button>
  
      <!-- localPkg -->
      <ng-template #localPkg2>
        <!-- not removing -->
        <ng-container *ngIf="localPkg.state !== PackageState.Removing">
          <ion-button class="main-action-button" expand="block" fill="outline" [routerLink]="['/services', 'installed', pkgId]">
            Go to Service
          </ion-button>
          <!-- not installing or updating -->
          <ng-container *ngIf="localPkg.state === PackageState.Installed">
            <ion-button *ngIf="(localPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" fill="outline" color="success" (click)="update('update')">
              Update to {{ pkg.manifest.version | displayEmver }}
            </ion-button>
            <ion-button *ngIf="(localPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" fill="outline" color="warning" (click)="update('downgrade')">
              Downgrade to {{ pkg.manifest.version | displayEmver }}
            </ion-button>
          </ng-container>
        </ng-container>
      </ng-template>
    </ng-container>

    <!-- recommendation -->
    <ion-item *ngIf="rec && showRec" class="rec-item">
      <ion-label class="ion-text-wrap">
        <h2 style="display: flex; align-items: center;">
          <ion-avatar style="height: 3vh; width: 3vh; margin: 5px" slot="start">
            <img [src]="rec.dependentIcon" [alt]="rec.dependentTitle"/>
          </ion-avatar>
          <ion-text style="margin: 5px; font-family: 'Montserrat'; font-size: smaller;">{{ rec.dependentTitle }}</ion-text>
        </h2>
        <div style="margin: 7px 5px;">
          <p style="color: var(--ion-color-dark); font-size: small">{{ rec.description }}</p>
          <p *ngIf="pkg.manifest.version | satisfiesEmver: rec.version" class="recommendation-text">{{ pkg.manifest.title }} version {{ pkg.manifest.version | displayEmver }} is compatible.</p>
          <p *ngIf="!(pkg.manifest.version | satisfiesEmver: rec.version)" class="recommendation-text recommendation-error">{{ pkg.manifest.title }} version {{ pkg.manifest.version | displayEmver }} is NOT compatible.</p>
          <ion-button style="position: absolute; right: 0; top: 0" color="primary" fill="clear" (click)="dismissRec()">
            <ion-icon name="close-outline"></ion-icon>
          </ion-button>
        </div>
      </ion-label>
    </ion-item>

    <ion-item-group>
      <!-- release notes -->
      <ion-item-divider style="color: var(--ion-color-dark); font-weight: bold;">New in {{ pkg.manifest.version | displayEmver }}</ion-item-divider>
      <ion-item lines="none">
        <ion-label style="display: flex; align-items: center; justify-content: space-between;" class="ion-text-wrap" >
          <div id='release-notes' color="dark" [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
        </ion-label>
      </ion-item>
      <!-- description -->
      <ion-item-divider class="divider">
        <ion-text color="dark">Description</ion-text>
      </ion-item-divider>
      <ion-item lines="none">
        <ion-label class="ion-text-wrap">
          <ion-text color="dark">
            <h5>{{ pkg.manifest.description.long }}</h5>
          </ion-text>
        </ion-label>
      </ion-item>
      <!-- dependencies -->
      <ng-container *ngIf="!(pkg.manifest.dependencies | empty)">
        <ion-item-divider class="divider">
          <ion-text color="dark">Service Dependencies</ion-text>
          <ion-button style="position: relative; right: 10px;" size="small" fill="clear" color="dark"  (click)="presentPopover(depDefintion, $event)">
            <ion-icon name="help-circle-outline"></ion-icon>
          </ion-button>
        </ion-item-divider>

        <div *ngFor="let dep of pkg.manifest.dependencies | keyvalue">
          <ion-item *ngIf="!dep.value.optional" class="dependency-item">
            <ion-avatar slot="start">
              <img [src]="pkg['dependency-metadata'][dep.key].icon" />
            </ion-avatar>
            <ion-label class="ion-text-wrap" style="padding: 1vh; padding-left: 2vh">
              <h4 style="font-family: 'Montserrat'">
                {{ pkg['dependency-metadata'][dep.key].title }}
                <span *ngIf="dep.value.recommended" style="font-family: 'Open Sans'; font-size: small; color: var(--ion-color-dark)"> (recommended)</span>
              </h4>
              <p style="font-size: small">{{ dep.value.version | displayEmver }}</p>
            </ion-label>
          </ion-item>

          <ion-item style="margin-bottom: 10px" *ngIf="dep.value.description" lines="none">
            <div style="font-size: small; color: var(--ion-color-dark)" [innerHtml]="dep.value.description"></div>
          </ion-item>
        </div>
      </ng-container>

      <!-- versions -->
      <ion-item-divider></ion-item-divider>
      <ion-item lines="none" button (click)="presentAlertVersions()">
        <ion-icon color="dark" slot="start" name="file-tray-stacked-outline"></ion-icon>
        <ion-label color="dark">Other versions</ion-label>
      </ion-item>
    </ion-item-group>

  </ng-template>
</ion-content>