first pass at accordion

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.module.ts

@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
-import { AppReleaseNotesList } from './app-release-notes-list.page'
+import { AppReleaseNotesListPage } from './app-release-notes-list.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
   {
     path: '',
-    component: AppReleaseNotesList,
+    component: AppReleaseNotesListPage,
   },
 ]
 
@@ -21,6 +21,6 @@ const routes: Routes = [
     PwaBackComponentModule,
     SharingModule,
   ],
-  declarations: [AppReleaseNotesList],
+  declarations: [AppReleaseNotesListPage],
 })
 export class AppReleaseNotesListModule { }

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.html

@@ -7,6 +7,17 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content *ngIf="pkg">
-  hello
+<ion-content>
+  <ion-spinner *ngIf="!pkg; else loaded" class="center" name="lines" color="warning"></ion-spinner>
+
+  <ng-template #loaded>
+    <div *ngFor="let note of pkg['release-notes'] | keyvalue : asIsOrder">
+      <ion-button (click)="setSelected(note.key)"  expand="full" color="light" style="height: 50px;" >
+        <p style="position: absolute; left: 10px;">{{note.key | displayEmver}}</p>
+      </ion-button>
+      <ion-card *ngIf="selected === note.key" class="acc-text" color="light" >
+        <ion-text id='release-notes' [innerHTML]="note.value | markdown"></ion-text>
+      </ion-card>
+    </div>
+  </ng-template>
 </ion-content>

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.scss

@@ -1,3 +1,8 @@
 .metric-note {
   font-size: 16px;
+}
+
+.acc-text {
+  margin: 0px 0px 10px 0px;
+  padding: 15px;
 }

ui/src/app/pages/apps-routes/app-release-notes-list/app-release-notes-list.page.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
 import { AvailableShow } from 'src/app/services/api/api-types'
 import { ApiService } from 'src/app/services/api/api.service'
 
@@ -9,10 +8,12 @@ import { ApiService } from 'src/app/services/api/api.service'
   templateUrl: './app-release-notes-list.page.html',
   styleUrls: ['./app-release-notes-list.page.scss'],
 })
-export class AppReleaseNotesList {
+export class AppReleaseNotesListPage {
   loading = true
+  error = ''
   pkgId: string
   pkg: AvailableShow
+  selected: string
 
   constructor (
     private readonly route: ActivatedRoute,
@@ -22,6 +23,7 @@ export class AppReleaseNotesList {
 
   ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
+    this.getPkg()
   }
 
   async getPkg (version?: string): Promise<void> {
@@ -36,6 +38,14 @@ export class AppReleaseNotesList {
     }
   }
 
+  setSelected (selected: string) {
+    if (this.selected === selected) {
+      this.selected = null
+    } else {
+      this.selected = selected
+    }
+  }
+
   asIsOrder (a: any, b: any) {
     return 0
   }