text spinner component

2026-03-26 10:21:52 +00:00 · 2021-07-07 22:54:56 -06:00
parent 1d9fd0d678
commit fbe1b26a55
17 changed files with 111 additions and 20 deletions
--- a/ui/src/app/components/text-spinner/text-spinner.component.html
+++ b/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>
--- a/ui/src/app/components/text-spinner/text-spinner.component.module.ts
+++ b/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 { }
--- a/ui/src/app/components/text-spinner/text-spinner.component.scss
+++ b/ui/src/app/components/text-spinner/text-spinner.component.scss
--- a/ui/src/app/components/text-spinner/text-spinner.component.ts
+++ b/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
+}
--- a/ui/src/app/modals/markdown/markdown.module.ts
+++ b/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],
 })
--- a/ui/src/app/modals/markdown/markdown.page.html
+++ b/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>
--- a/ui/src/app/modals/markdown/markdown.page.scss
+++ b/ui/src/app/modals/markdown/markdown.page.scss
@@ -0,0 +1,3 @@
+.content-padding {
+  padding: 0 16px 16px 16px
+}
--- a/ui/src/app/modals/markdown/markdown.page.ts
+++ b/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)
  }
--- a/ui/src/app/pages/apps-routes/app-config/app-config.module.ts
+++ b/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,
--- a/ui/src/app/pages/apps-routes/app-config/app-config.page.html
+++ b/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%;">
-    <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>
+  <text-spinner *ngIf="loadingText; else loaded" [text]="loadingText"></text-spinner>

  <!-- not loading  -->
  <ng-template #loaded>
--- a/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts
+++ b/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
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts
+++ b/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],
 })
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
+++ b/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>

--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
+++ b/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())
  }
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
+++ b/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,
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/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>
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
+++ b/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,
    })