text spinner component

ui/src/app/components/text-spinner/text-spinner.component.html

@@ -0,0 +1,8 @@
+<ion-grid style="height: 100%;">
+  <ion-row class="ion-align-items-center ion-text-center" style="height: 100%;">
+    <ion-col>
+      <ion-spinner name="lines" color="warning"></ion-spinner>
+      <p>{{ text }}</p>
+    </ion-col>
+  </ion-row>
+</ion-grid>

ui/src/app/components/text-spinner/text-spinner.component.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TextSpinnerComponent } from './text-spinner.component'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+
+@NgModule({
+  declarations: [
+    TextSpinnerComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild([]),
+  ],
+  exports: [TextSpinnerComponent],
+})
+export class TextSpinnerComponentModule { }

ui/src/app/components/text-spinner/text-spinner.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'text-spinner',
+  templateUrl: './text-spinner.component.html',
+  styleUrls: ['./text-spinner.component.scss'],
+})
+export class TextSpinnerComponent {
+  @Input() text: string
+}

ui/src/app/modals/markdown/markdown.module.ts

@@ -3,12 +3,14 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { MarkdownPage } from './markdown.page'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 @NgModule({
   imports: [
     CommonModule,
     IonicModule,
     SharingModule,
+    TextSpinnerComponentModule,
   ],
   declarations: [MarkdownPage],
 })

ui/src/app/modals/markdown/markdown.page.html

@@ -1,3 +1,21 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{ title | titlecase }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
 <ion-content>
-  <div [innerHTML]="content | markdown"></div>
+  <text-spinner *ngIf="loading; else loaded" [text]="'fetching ' + title"></text-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>
+
+    <div *ngIf="content" class="content-padding" [innerHTML]="content | markdown"></div>
+  </ng-template>
 </ion-content>

ui/src/app/modals/markdown/markdown.page.scss

@@ -0,0 +1,3 @@
+.content-padding {
+  padding: 0 16px 16px 16px
+}

ui/src/app/modals/markdown/markdown.page.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/api.service'
 
 @Component({
   selector: 'markdown',
@@ -7,12 +8,27 @@ import { ModalController } from '@ionic/angular'
   styleUrls: ['./markdown.page.scss'],
 })
 export class MarkdownPage {
-  @Input() content: string
+  @Input() contentUrl: string
+  @Input() title: string
+  content: string
+  loading = true
+  error = ''
 
   constructor (
     private readonly modalCtrl: ModalController,
+    private readonly apiService: ApiService,
   ) { }
 
+  async ngOnInit () {
+    try {
+      this.content = await this.apiService.getStatic(this.contentUrl)
+    } catch (e) {
+      this.error = e.message
+    } finally {
+      this.loading = false
+    }
+  }
+
   async dismiss () {
     return this.modalCtrl.dismiss(true)
   }

ui/src/app/pages/apps-routes/app-config/app-config.module.ts

@@ -10,6 +10,7 @@ import { AppConfigObjectPageModule } from 'src/app/modals/app-config-object/app-
 import { AppConfigUnionPageModule } from 'src/app/modals/app-config-union/app-config-union.module'
 import { AppConfigValuePageModule } from 'src/app/modals/app-config-value/app-config-value.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 const routes: Routes = [
   {
@@ -25,6 +26,7 @@ const routes: Routes = [
     AppConfigObjectPageModule,
     AppConfigUnionPageModule,
     AppConfigValuePageModule,
+    TextSpinnerComponentModule,
     SharingModule,
     CommonModule,
     FormsModule,

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

@@ -12,14 +12,7 @@
 <ion-content class="ion-padding-top">
 
   <!-- loading -->
-  <ion-grid *ngIf="loadingText; else loaded" style="height: 100%;">
+  <text-spinner *ngIf="loadingText; else loaded" [text]="loadingText"></text-spinner>
-    <ion-row class="ion-align-items-center ion-text-center" style="height: 100%;">
-      <ion-col>
-        <ion-spinner name="lines" color="warning"></ion-spinner>
-        <p>{{ loadingText }}</p>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
 
   <!-- not loading  -->
   <ng-template #loaded>

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

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
+import { IonContent } from '@ionic/angular'
 import { MarketplaceService } from '../marketplace.service'
 
 @Component({
@@ -8,6 +9,7 @@ import { MarketplaceService } from '../marketplace.service'
   styleUrls: ['./app-release-notes.page.scss'],
 })
 export class AppReleaseNotes {
+  @ViewChild(IonContent) content: IonContent
   error = ''
   selected: string
   pkgId: string
@@ -25,6 +27,10 @@ export class AppReleaseNotes {
     }
   }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   setSelected (selected: string) {
     if (this.selected === selected) {
       this.selected = null

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts

@@ -6,6 +6,7 @@ import { MarketplaceListPage } from './marketplace-list.page'
 import { SharingModule } from '../../../modules/sharing.module'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 
 const routes: Routes = [
@@ -23,6 +24,7 @@ const routes: Routes = [
     StatusComponentModule,
     SharingModule,
     BadgeMenuComponentModule,
+    TextSpinnerComponentModule,
   ],
   declarations: [MarketplaceListPage],
 })

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -11,7 +11,7 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <ion-spinner *ngIf="pageLoading; else pageLoaded" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="pageLoading; else pageLoaded" [text]="'loading marketplace'"></text-spinner>
 
   <ng-template #pageLoaded>
 

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { ApiService } from 'src/app/services/api/api.service'
 import { MarketplaceData, MarketplaceEOS, AvailablePreview } from 'src/app/services/api/api-types'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
-import { ModalController } from '@ionic/angular'
+import { IonContent, ModalController } from '@ionic/angular'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
@@ -14,6 +14,7 @@ import { Subscription } from 'rxjs'
   styleUrls: ['./marketplace-list.page.scss'],
 })
 export class MarketplaceListPage {
+  @ViewChild(IonContent) content: IonContent
   pageLoading = true
   pkgsLoading = true
   error = ''
@@ -65,6 +66,10 @@ export class MarketplaceListPage {
     }
   }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   ngOnDestroy () {
     this.subs.forEach(sub => sub.unsubscribe())
   }

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts

@@ -8,6 +8,7 @@ import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-b
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
 import { InstallWizardComponentModule } from 'src/app/components/install-wizard/install-wizard.component.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 const routes: Routes = [
   {
@@ -21,6 +22,7 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     StatusComponentModule,
+    TextSpinnerComponentModule,
     RouterModule.forChild(routes),
     SharingModule,
     PwaBackComponentModule,

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html

@@ -12,7 +12,7 @@
 
 <ion-content class="ion-padding">
 
-  <ion-spinner *ngIf="!marketplaceService.pkgs[pkgId]" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="!marketplaceService.pkgs[pkgId]" [text]="'fetching package'"></text-spinner>
 
   <ng-container *ngIf="marketplaceService.pkgs[pkgId] as pkg">
     <ion-item *ngIf="error" style="margin-bottom: 16px;">
@@ -162,7 +162,7 @@
                 </ion-label>
                 <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
               </ion-item>
-              <ion-item button detail="false" (click)="presentModalMd(pkg.manifest.)">
+              <ion-item button detail="false" (click)="presentModalMd('license')">
                 <ion-label>
                   <h2>License</h2>
                   <p>{{ pkg.manifest.license }}</p>

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AlertController, ModalController, NavController } from '@ionic/angular'
+import { AlertController, IonContent, ModalController, NavController } from '@ionic/angular'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Emver } from 'src/app/services/emver.service'
@@ -18,6 +18,7 @@ import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'
   styleUrls: ['./marketplace-show.page.scss'],
 })
 export class MarketplaceShowPage {
+  @ViewChild(IonContent) content: IonContent
   error = ''
   pkgId: string
   installedPkg: PackageDataEntry
@@ -53,6 +54,10 @@ export class MarketplaceShowPage {
     this.getPkg()
   }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   ngOnDestroy () {
     this.subs.forEach(sub => sub.unsubscribe())
   }
@@ -95,10 +100,11 @@ export class MarketplaceShowPage {
     await alert.present()
   }
 
-  async presentModalMd (content: string) {
+  async presentModalMd (title: string) {
     const modal = await this.modalCtrl.create({
       componentProps: {
-        content,
+        title,
+        contentUrl: this.marketplaceService.pkgs[this.pkgId][title],
       },
       component: MarkdownPage,
     })