diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts index 8d5fad4d2..dfb54cdfc 100644 --- a/ui/src/app/app-routing.module.ts +++ b/ui/src/app/app-routing.module.ts @@ -27,6 +27,12 @@ const routes: Routes = [ canActivate: [AuthGuard, UnmaintenanceGuard], loadChildren: () => import('./pages/maintenance/maintenance.module').then(m => m.MaintenancePageModule), }, + { + path: 'marketplace', + canActivate: [AuthGuard, MaintenanceGuard], + canActivateChild: [AuthGuard, MaintenanceGuard], + loadChildren: () => import('./pages/marketplace-routes/marketplace-routing.module').then(m => m.MarketplaceRoutingModule), + }, { path: 'notifications', canActivate: [AuthGuard, MaintenanceGuard], diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss index dbacbb664..e3d6ad8bc 100644 --- a/ui/src/app/app.component.scss +++ b/ui/src/app/app.component.scss @@ -1,5 +1,5 @@ .selected { - --background: linear-gradient(120deg, #1e1e1e -1%, var(--ion-color-start9) 96%); + --background: linear-gradient(120deg, #1e1e1e -1%, var(--ion-color-start9) 100%); } .menu-style { @@ -10,4 +10,8 @@ .selected-badge { background-color: #1e1e1e; +} + +ion-split-pane { + --side-max-width: 280px; } \ No newline at end of file diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 2930ed227..568843242 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -28,7 +28,7 @@ export class AppComponent { appPages = [ { title: 'Services', - url: '/services/installed', + url: '/services', icon: 'grid-outline', }, { @@ -38,7 +38,7 @@ export class AppComponent { }, { title: 'Marketplace', - url: '/services/marketplace', + url: '/marketplace', icon: 'storefront-outline', }, { diff --git a/ui/src/app/components/status/status.component.html b/ui/src/app/components/status/status.component.html index 19737a908..e4f1a2925 100644 --- a/ui/src/app/components/status/status.component.html +++ b/ui/src/app/components/status/status.component.html @@ -1,24 +1,9 @@ -

- {{ display }} +

+ {{ display }}

- -

- {{ display }} - -

- -

- {{ display }} - -

- -

- {{ display }} - -

- -

- {{ display }} - -

diff --git a/ui/src/app/components/status/status.component.scss b/ui/src/app/components/status/status.component.scss index 7a81c76eb..18f7ad769 100644 --- a/ui/src/app/components/status/status.component.scss +++ b/ui/src/app/components/status/status.component.scss @@ -1,17 +1,5 @@ -.icon-small { - width: auto; - height: 14px; - padding-left: 6px; -} - -.icon-medium { - width: auto; - height: 18px; - padding-left: 8px; -} - -.icon-large { - width: auto; - height: 24px; - padding-left: 12px; +p { + margin: 0; + overflow: hidden; + text-overflow: ellipsis; } diff --git a/ui/src/app/components/status/status.component.ts b/ui/src/app/components/status/status.component.ts index a9dff2c97..07783c7d6 100644 --- a/ui/src/app/components/status/status.component.ts +++ b/ui/src/app/components/status/status.component.ts @@ -11,7 +11,9 @@ import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service' export class StatusComponent { @Input() pkg: PackageDataEntry @Input() connection: ConnectionState - @Input() size: 'small' | 'medium' | 'large' | 'italics-small' | 'bold-large' = 'large' + @Input() size?: 'small' | 'medium' | 'large' = 'large' + @Input() style?: string = 'regular' + @Input() weight?: string = 'normal' display = '' color = '' showDots = false diff --git a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts index ce1e4a2fc..d7b8945e5 100644 --- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts +++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts @@ -89,7 +89,7 @@ export class AppActionsPage { ) if (data.cancelled) return - return this.navCtrl.navigateRoot('/services/installed') + return this.navCtrl.navigateRoot('/services') } private async executeAction (pkgId: string, actionId: string) { diff --git a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.html b/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.html deleted file mode 100644 index 37bc86756..000000000 --- a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.html +++ /dev/null @@ -1,161 +0,0 @@ - - - - - - Listing - - - - - - - - - - - - - {{ error }} - - - - - - - - - -

{{ pkg.manifest.title }}

-

{{ pkg.manifest.version | displayEmver }}

- -

- Not Installed -

- - -

- - {{ localPkg.state }} - -

- - -

- Installed at {{ localPkg.installed.manifest.version | displayEmver }} -

-
-
-
-
-
- - - - Install - - - - - - - - Go to Service - - - - - Update to {{ pkg.manifest.version | displayEmver }} - - - Downgrade to {{ pkg.manifest.version | displayEmver }} - - - - -
- - - - -

- - - - {{ rec.dependentTitle }} -

-
-

{{ rec.description }}

-

{{ pkg.manifest.title }} version {{ pkg.manifest.version | displayEmver }} is compatible.

-

{{ pkg.manifest.title }} version {{ pkg.manifest.version | displayEmver }} is NOT compatible.

- - - -
-
-
- - - - - New in {{ pkg.manifest.version | displayEmver }} - - Version History - - - - - -
-
-
- - - Description - - - - -
{{ pkg.manifest.description.long }}
-
-
-
- - - - Service Dependencies - - - - - -
- - - - - -

- {{ pkg['dependency-metadata'][dep.key].title }} - (recommended) -

-

{{ dep.value.version | displayEmver }}

-
-
- - -
-
-
-
- - - - - - Other versions - -
- -
-
\ No newline at end of file diff --git a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.scss b/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.scss deleted file mode 100644 index 20dc5bd27..000000000 --- a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.scss +++ /dev/null @@ -1,24 +0,0 @@ -.recommendation-text { - font-style: italic; -} - -.recommendation-error { - color: var(--ion-color-danger); -} - -.main-action-button { - margin: 20px 5px 20px 5px; -} - -.divider { - margin-top: 15px; - color: var(--ion-color-medium); - font-size: medium; - padding-left: 10px; - font-weight: unset; -} - -#release-notes { - overflow: auto; - max-height: 160px; -} \ No newline at end of file diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.module.ts b/ui/src/app/pages/apps-routes/app-list/app-list.module.ts similarity index 80% rename from ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.module.ts rename to ui/src/app/pages/apps-routes/app-list/app-list.module.ts index 298daed57..393e0bd51 100644 --- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.module.ts +++ b/ui/src/app/pages/apps-routes/app-list/app-list.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { Routes, RouterModule } from '@angular/router' import { IonicModule } from '@ionic/angular' -import { AppInstalledListPage } from './app-installed-list.page' +import { AppListPage } from './app-list.page' import { StatusComponentModule } from 'src/app/components/status/status.component.module' import { SharingModule } from 'src/app/modules/sharing.module' import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module' @@ -10,7 +10,7 @@ import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/b const routes: Routes = [ { path: '', - component: AppInstalledListPage, + component: AppListPage, }, ] @@ -24,7 +24,7 @@ const routes: Routes = [ BadgeMenuComponentModule, ], declarations: [ - AppInstalledListPage, + AppListPage, ], }) -export class AppInstalledListPageModule { } +export class AppListPageModule { } diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html b/ui/src/app/pages/apps-routes/app-list/app-list.page.html similarity index 84% rename from ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html rename to ui/src/app/pages/apps-routes/app-list/app-list.page.html index db9619b7e..4f3de538e 100644 --- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.html +++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html @@ -15,7 +15,7 @@

Welcome to your Embassy

Get started by installing your first service.

- + Marketplace @@ -24,10 +24,10 @@ - - + +
-
+
@@ -40,8 +40,8 @@ - -

{{ (pkg.value | manifest).title }}

+ + {{ (pkg.value | manifest).title }}
diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss similarity index 85% rename from ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss rename to ui/src/app/pages/apps-routes/app-list/app-list.page.scss index 9721ccccc..60733179d 100644 --- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.scss +++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss @@ -5,21 +5,16 @@ text-align: center; ion-card-header { - padding: 0; + padding: 0 10px; status { - font-size: 9px; - font-weight: bold; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - p { - font-family: 'Montserrat'; - font-size: 11px; + ion-card-title { + font-size: calc(8px + .7vw); color: white; - margin: 0px 12px 8px 12px; + margin: 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -72,7 +67,7 @@ } } -.disabled { +.launch-disabled { pointer-events: none; border-color: transparent; &:hover { diff --git a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts similarity index 81% rename from ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts rename to ui/src/app/pages/apps-routes/app-list/app-list.page.ts index 0c9261512..b5860eb33 100644 --- a/ui/src/app/pages/apps-routes/app-installed-list/app-installed-list.page.ts +++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts @@ -5,11 +5,11 @@ import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model' import { PackageDataEntry } from 'src/app/models/patch-db/data-model' @Component({ - selector: 'app-installed-list', - templateUrl: './app-installed-list.page.html', - styleUrls: ['./app-installed-list.page.scss'], + selector: 'app-list', + templateUrl: './app-list.page.html', + styleUrls: ['./app-list.page.scss'], }) -export class AppInstalledListPage { +export class AppListPage { pkgs: PackageDataEntry[] = [] constructor ( diff --git a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts index f6c81ffd5..4a4f3fc50 100644 --- a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts +++ b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts @@ -6,7 +6,6 @@ import { copyToClipboard } from 'src/app/util/web.util' import { AlertController, NavController, PopoverController, ToastController } from '@ionic/angular' import { PackageProperties } from 'src/app/util/properties.util' import { QRComponent } from 'src/app/components/qr/qr.component' -import { PropertyStore } from './property-store' import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model' import * as JsonPointer from 'json-pointer' import { FEStatus } from 'src/app/services/pkg-status-rendering.service' @@ -34,7 +33,6 @@ export class AppPropertiesPage { private readonly alertCtrl: AlertController, private readonly toastCtrl: ToastController, private readonly popoverCtrl: PopoverController, - private readonly propertyStore: PropertyStore, private readonly navCtrl: NavController, public readonly patch: PatchDbModel, ) { } @@ -75,7 +73,7 @@ export class AppPropertiesPage { } async goToNested (key: string): Promise { - this.navCtrl.navigateForward(`/services/installed/${this.pkgId}/properties`, { + this.navCtrl.navigateForward(`/services/${this.pkgId}/properties`, { queryParams: { pointer: `${this.pointer || ''}/${key}/value`, }, diff --git a/ui/src/app/pages/apps-routes/app-properties/property-store.ts b/ui/src/app/pages/apps-routes/app-properties/property-store.ts deleted file mode 100644 index e339a48ee..000000000 --- a/ui/src/app/pages/apps-routes/app-properties/property-store.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Injectable } from '@angular/core' -import { BehaviorSubject } from 'rxjs' -import { PackageProperties } from '../../../util/properties.util' - -@Injectable({ - providedIn: 'root', -}) -export class PropertyStore { - properties$: BehaviorSubject = new BehaviorSubject({ }) - watch$ () { return this.properties$.asObservable() } - - update (properties: PackageProperties): void { - this.properties$.next(properties) - } -} \ No newline at end of file diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.module.ts b/ui/src/app/pages/apps-routes/app-show/app-show.module.ts similarity index 73% rename from ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.module.ts rename to ui/src/app/pages/apps-routes/app-show/app-show.module.ts index 411c6188c..565484e3b 100644 --- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.module.ts +++ b/ui/src/app/pages/apps-routes/app-show/app-show.module.ts @@ -2,18 +2,17 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { Routes, RouterModule } from '@angular/router' import { IonicModule } from '@ionic/angular' -import { AppInstalledShowPage } from './app-installed-show.page' +import { AppShowPage } from './app-show.page' import { StatusComponentModule } from 'src/app/components/status/status.component.module' import { SharingModule } from 'src/app/modules/sharing.module' import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module' import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module' import { InstallWizardComponentModule } from 'src/app/components/install-wizard/install-wizard.component.module' -import { InformationPopoverComponentModule } from 'src/app/components/information-popover/information-popover.component.module' const routes: Routes = [ { path: '', - component: AppInstalledShowPage, + component: AppShowPage, }, ] @@ -27,9 +26,8 @@ const routes: Routes = [ PwaBackComponentModule, BadgeMenuComponentModule, InstallWizardComponentModule, - InformationPopoverComponentModule, ], - declarations: [AppInstalledShowPage], + declarations: [AppShowPage], }) -export class AppInstalledShowPageModule { } +export class AppShowPageModule { } diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html similarity index 80% rename from ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html rename to ui/src/app/pages/apps-routes/app-show/app-show.page.html index a55dfb715..872226d30 100644 --- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.html +++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html @@ -41,23 +41,21 @@ - - - - - Configure - - - Stop - - - Fix - - - Start - - - +
+ + + Configure + + + Stop + + + Fix + + + Start + +
Launch Web Interface @@ -69,11 +67,11 @@ - +
- +

- {{ button.title }} + {{ button.title }}
@@ -101,7 +99,7 @@

{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}

- + View @@ -111,7 +109,7 @@ - + Start diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss b/ui/src/app/pages/apps-routes/app-show/app-show.page.scss similarity index 80% rename from ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss rename to ui/src/app/pages/apps-routes/app-show/app-show.page.scss index 79e83f0f8..d85206dfa 100644 --- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.scss +++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.scss @@ -1,15 +1,3 @@ -.full-width { - margin: 10px; -} - -.about-attribute { - font-size: small; -} - -.about-attribute-value { - font-size: small; -} - .less-large { font-size: 20px !important; } @@ -23,9 +11,10 @@ } .status-readout { + --background: transparent; display: flex; justify-content: space-between; - padding: 4px 10px; + padding: 0 10px; border-radius: 10px; align-items: center; background: var(--ion-background-color); @@ -35,10 +24,6 @@ border-color: #404040; } -.no-cushion-item { - --background: transparent; --padding-start: 0px; --inner-padding-end: 0px; --padding-end: 0px; -} - .launch-button { --background: rgb(70 193 255 / 75%); --background-hover: rgb(70 193 255); diff --git a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts similarity index 89% rename from ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts rename to ui/src/app/pages/apps-routes/app-show/app-show.page.ts index b7e80fe99..160874d31 100644 --- a/ui/src/app/pages/apps-routes/app-installed-show/app-installed-show.page.ts +++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from '@angular/core' -import { AlertController, NavController, ModalController, IonContent, PopoverController } from '@ionic/angular' +import { AlertController, NavController, ModalController, IonContent } from '@ionic/angular' import { ApiService } from 'src/app/services/api/api.service' import { ActivatedRoute, NavigationExtras } from '@angular/router' import { chill, isEmptyObject } from 'src/app/util/misc.util' @@ -7,7 +7,6 @@ import { LoaderService } from 'src/app/services/loader.service' import { Observable, of, Subscription } from 'rxjs' import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component' import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards' -import { InformationPopoverComponent } from 'src/app/components/information-popover/information-popover.component' import { ConfigService, getManifest } from 'src/app/services/config.service' import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model' import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model' @@ -16,11 +15,11 @@ import { ConnectionService } from 'src/app/services/connection.service' import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component' @Component({ - selector: 'app-installed-show', - templateUrl: './app-installed-show.page.html', - styleUrls: ['./app-installed-show.page.scss'], + selector: 'app-show', + templateUrl: './app-show.page.html', + styleUrls: ['./app-show.page.scss'], }) -export class AppInstalledShowPage { +export class AppShowPage { error: string pkgId: string pkg: PackageDataEntry @@ -43,7 +42,6 @@ export class AppInstalledShowPage { private readonly modalCtrl: ModalController, private readonly apiService: ApiService, private readonly wizardBaker: WizardBaker, - private readonly popoverController: PopoverController, private readonly config: ConfigService, public readonly patch: PatchDbModel, public readonly connectionService: ConnectionService, @@ -120,20 +118,6 @@ export class AppInstalledShowPage { } } - async presentPopover (information: string, ev: any) { - const popover = await this.popoverController.create({ - component: InformationPopoverComponent, - event: ev, - translucent: false, - showBackdrop: true, - backdropDismiss: true, - componentProps: { - information, - }, - }) - return await popover.present() - } - scrollToRequirements () { const el = document.getElementById('dependencies') if (!el) return @@ -170,7 +154,7 @@ export class AppInstalledShowPage { state: { installRec }, } - await this.navCtrl.navigateForward(`/services/marketplace/${depId}`, navigationExtras) + await this.navCtrl.navigateForward(`/marketplace/${depId}`, navigationExtras) } private async configureDep (depId: string): Promise { @@ -189,7 +173,7 @@ export class AppInstalledShowPage { state: { configRecommendation }, } - await this.navCtrl.navigateForward(`/services/installed/${depId}/config`, navigationExtras) + await this.navCtrl.navigateForward(`/services/${depId}/config`, navigationExtras) } private async presentAlertStart (message: string): Promise { @@ -300,7 +284,7 @@ export class AppInstalledShowPage { disabled: [], }, { - action: () => this.navCtrl.navigateForward(['/services', 'marketplace', this.pkgId], { relativeTo: this.route }), + action: () => this.navCtrl.navigateForward(['/marketplace', this.pkgId], { relativeTo: this.route }), title: 'Marketplace Listing', icon: 'storefront-outline', color: 'danger', diff --git a/ui/src/app/pages/apps-routes/apps-routing.module.ts b/ui/src/app/pages/apps-routes/apps-routing.module.ts index 83c884bd5..05ae01bc0 100644 --- a/ui/src/app/pages/apps-routes/apps-routing.module.ts +++ b/ui/src/app/pages/apps-routes/apps-routing.module.ts @@ -4,69 +4,57 @@ import { Routes, RouterModule } from '@angular/router' const routes: Routes = [ { path: '', - redirectTo: 'installed', + redirectTo: 'list', pathMatch: 'full', }, { - path: 'installed', - loadChildren: () => import('./app-installed-list/app-installed-list.module').then(m => m.AppInstalledListPageModule), + path: 'list', + loadChildren: () => import('./app-list/app-list.module').then(m => m.AppListPageModule), }, { - path: 'installed/:pkgId', - loadChildren: () => import('./app-installed-show/app-installed-show.module').then(m => m.AppInstalledShowPageModule), + path: ':pkgId', + loadChildren: () => import('./app-show/app-show.module').then(m => m.AppShowPageModule), }, { - path: 'installed/:pkgId/actions', + path: ':pkgId/actions', loadChildren: () => import('./app-actions/app-actions.module').then(m => m.AppActionsPageModule), }, { - path: 'installed/:pkgId/config', + path: ':pkgId/config', loadChildren: () => import('./app-config/app-config.module').then(m => m.AppConfigPageModule), }, { - path: 'installed/:pkgId/config/:edit', + path: ':pkgId/config/:edit', loadChildren: () => import('./app-config/app-config.module').then(m => m.AppConfigPageModule), }, { - path: 'installed/:pkgId/instructions', + path: ':pkgId/instructions', loadChildren: () => import('./app-instructions/app-instructions.module').then(m => m.AppInstructionsPageModule), }, { - path: 'installed/:pkgId/interfaces', + path: ':pkgId/interfaces', loadChildren: () => import('./app-interfaces/app-interfaces.module').then(m => m.AppInterfacesPageModule), }, { - path: 'installed/:pkgId/logs', + path: ':pkgId/logs', loadChildren: () => import('./app-logs/app-logs.module').then(m => m.AppLogsPageModule), }, { - path: 'installed/:pkgId/manifest', + path: ':pkgId/manifest', loadChildren: () => import('./app-manifest/app-manifest.module').then(m => m.AppManifestPageModule), }, { - path: 'installed/:pkgId/metrics', + path: ':pkgId/metrics', loadChildren: () => import('./app-metrics/app-metrics.module').then(m => m.AppMetricsPageModule), }, { - path: 'installed/:pkgId/properties', + path: ':pkgId/properties', loadChildren: () => import('./app-properties/app-properties.module').then(m => m.AppPropertiesPageModule), }, { - path: 'installed/:pkgId/restore', + path: ':pkgId/restore', loadChildren: () => import('./app-restore/app-restore.module').then(m => m.AppRestorePageModule), }, - { - path: 'marketplace', - loadChildren: () => import('./app-available-list/app-available-list.module').then(m => m.AppAvailableListPageModule), - }, - { - path: 'marketplace/:pkgId', - loadChildren: () => import('./app-available-show/app-available-show.module').then(m => m.AppAvailableShowPageModule), - }, - { - path: 'marketplace/:pkgId/notes', - loadChildren: () => import('./app-release-notes/app-release-notes.module').then(m => m.ReleaseNotesModule), - }, ] @NgModule({ diff --git a/ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.module.ts b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.module.ts similarity index 100% rename from ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.module.ts rename to ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.module.ts diff --git a/ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.html b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html similarity index 74% rename from ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.html rename to ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html index c850c7acb..38ca00abd 100644 --- a/ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.html +++ b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html @@ -8,10 +8,10 @@ - + -
+

{{ note.key | displayEmver }}

diff --git a/ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.scss b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.scss similarity index 100% rename from ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.scss rename to ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.scss diff --git a/ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.ts b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts similarity index 88% rename from ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.ts rename to ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts index cf0159045..83d21fc67 100644 --- a/ui/src/app/pages/apps-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,6 +1,6 @@ import { Component } from '@angular/core' import { ActivatedRoute } from '@angular/router' -import { AppAvailableService } from '../app-available.service' +import { MarketplaceService } from '../marketplace.service' @Component({ selector: 'app-release-notes', @@ -14,7 +14,7 @@ export class AppReleaseNotes { constructor ( private readonly route: ActivatedRoute, - public aaService: AppAvailableService, + public aaService: MarketplaceService, ) { } ngOnInit () { diff --git a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.module.ts b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts similarity index 78% rename from ui/src/app/pages/apps-routes/app-available-list/app-available-list.module.ts rename to ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts index 4c51804b3..693957f9d 100644 --- a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.module.ts +++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { Routes, RouterModule } from '@angular/router' import { IonicModule } from '@ionic/angular' -import { AppAvailableListPage } from './app-available-list.page' +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' @@ -11,7 +11,7 @@ import { StatusComponentModule } from 'src/app/components/status/status.componen const routes: Routes = [ { path: '', - component: AppAvailableListPage, + component: MarketplaceListPage, }, ] @@ -24,6 +24,6 @@ const routes: Routes = [ SharingModule, BadgeMenuComponentModule, ], - declarations: [AppAvailableListPage], + declarations: [MarketplaceListPage], }) -export class AppAvailableListPageModule { } +export class MarketplaceListPageModule { } diff --git a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.html b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html similarity index 74% rename from ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.html rename to ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html index 9db1e87a6..6eb212d50 100644 --- a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.html +++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html @@ -19,19 +19,7 @@ {{ error }} -
- - {{ cat }} - -
- - + Now Available... EmbassyOS Version {{ eos.version }} @@ -41,10 +29,42 @@ - +

Categories

+ +
+ + {{ cat }} + +
+ +
+ +
- + + + + + + + {{ pkg.title }} + + + {{ pkg.descriptionShort }} + + + + + + + diff --git a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.scss b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.scss similarity index 76% rename from ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.scss rename to ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.scss index 5110a8ea4..1e2b65764 100644 --- a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.scss +++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.scss @@ -8,8 +8,8 @@ .scrollable { overflow: auto; white-space: nowrap; - background-color: var(--ion-color-light); - margin-bottom: 16px; + // background-color: var(--ion-color-light); + height: 80px; /* Hide scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar { @@ -23,6 +23,11 @@ .eos-card { --background: linear-gradient(45deg, #101010 16%, var(--ion-color-danger) 150%); - margin: 16px 10px; + margin: 0 10px 16px 10px; cursor: pointer; } + +.cat-selected { + border-width: 0 0 1px 0; + border-style: solid; +} diff --git a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.ts b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts similarity index 93% rename from ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.ts rename to ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts index 0eb3a192f..3d83481c1 100644 --- a/ui/src/app/pages/apps-routes/app-available-list/app-available-list.page.ts +++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts @@ -8,11 +8,11 @@ import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model' import { PackageState } from 'src/app/models/patch-db/data-model' @Component({ - selector: 'app-available-list', - templateUrl: './app-available-list.page.html', - styleUrls: ['./app-available-list.page.scss'], + selector: 'marketplace-list', + templateUrl: './marketplace-list.page.html', + styleUrls: ['./marketplace-list.page.scss'], }) -export class AppAvailableListPage { +export class MarketplaceListPage { pageLoading = true pkgsLoading = true error = '' diff --git a/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts b/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts new file mode 100644 index 000000000..ea4fa17b7 --- /dev/null +++ b/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core' +import { Routes, RouterModule } from '@angular/router' + +const routes: Routes = [ + { + path: '', + redirectTo: 'browse', + pathMatch: 'full', + }, + { + path: 'browse', + loadChildren: () => import('./marketplace-list/marketplace-list.module').then(m => m.MarketplaceListPageModule), + }, + { + path: ':pkgId', + loadChildren: () => import('./marketplace-show/marketplace-show.module').then(m => m.MarketplaceShowPageModule), + }, + { + path: ':pkgId/notes', + loadChildren: () => import('./app-release-notes/app-release-notes.module').then(m => m.ReleaseNotesModule), + }, +] + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class MarketplaceRoutingModule { } \ No newline at end of file diff --git a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.module.ts b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts similarity index 76% rename from ui/src/app/pages/apps-routes/app-available-show/app-available-show.module.ts rename to ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts index 12921f357..1f9bac22d 100644 --- a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.module.ts +++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts @@ -2,19 +2,18 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { Routes, RouterModule } from '@angular/router' import { IonicModule } from '@ionic/angular' -import { AppAvailableShowPage } from './app-available-show.page' +import { MarketplaceShowPage } from './marketplace-show.page' import { SharingModule } from 'src/app/modules/sharing.module' import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.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 { RecommendationButtonComponentModule } from 'src/app/components/recommendation-button/recommendation-button.component.module' import { InstallWizardComponentModule } from 'src/app/components/install-wizard/install-wizard.component.module' -import { InformationPopoverComponentModule } from 'src/app/components/information-popover/information-popover.component.module' const routes: Routes = [ { path: '', - component: AppAvailableShowPage, + component: MarketplaceShowPage, }, ] @@ -29,8 +28,7 @@ const routes: Routes = [ RecommendationButtonComponentModule, BadgeMenuComponentModule, InstallWizardComponentModule, - InformationPopoverComponentModule, ], - declarations: [AppAvailableShowPage], + declarations: [MarketplaceShowPage], }) -export class AppAvailableShowPageModule { } +export class MarketplaceShowPageModule { } diff --git 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 new file mode 100644 index 000000000..18b6e9159 --- /dev/null +++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html @@ -0,0 +1,156 @@ + + + + + + Listing + + + + + + + + + + + + + {{ error }} + + + + + + +
+ +
+

{{ pkg.manifest.title }}

+

{{ pkg.manifest.version | displayEmver }}

+
+ +

+ Not Installed +

+ + +

+ + {{ localPkg.state }} + +

+ + +

+ Installed at {{ localPkg.installed.manifest.version | displayEmver }} +

+
+
+
+
+
+
+ + + + Install + + + + + + + Update + + + Downgrade + + + + +
+
+
+ + + + +

+ + + + {{ rec.dependentTitle }} +

+
+

{{ rec.description }}

+

{{ pkg.manifest.title }} version {{ pkg.manifest.version | displayEmver }} is compatible.

+

{{ pkg.manifest.title }} version {{ pkg.manifest.version | displayEmver }} is NOT compatible.

+ + + +
+
+
+ + + + + New in {{ pkg.manifest.version | displayEmver }} + + Release History + + + + + +
+
+
+ + Description + + + +
{{ pkg.manifest.description.long }}
+
+
+
+ + + Dependencies + + + + + + + + + +

+ {{ pkg['dependency-metadata'][dep.key].title }} + (recommended) +

+

{{ dep.value.version | displayEmver }}

+
+
+ + {{ dep.value.description }} + +
+
+
+
+
+ + + Additional Information + + + Other versions + +
+ +
+
\ No newline at end of file diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss new file mode 100644 index 000000000..08bc259ad --- /dev/null +++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss @@ -0,0 +1,48 @@ +.header { + font-family: 'Montserrat'; + padding: 2%; + img { + min-width: 16%; + max-width: 18%; + } + .header-text { + margin-left: 5%; + display: inline-block; + vertical-align: top; + .header-title { + line-height: .65; + margin: 0 0 0 -2px; + font-size: calc(20px + 3vw) + } + .header-version { + padding: 12px 0; + margin: 0; + font-size: calc(10px + 1vw) + } + .header-status { + p { + margin: 0; + font-size: calc(6px + 1vw) + } + } + } +} + +.recommendation-text { + font-style: italic; +} + +.recommendation-error { + color: var(--ion-color-danger); +} + +ion-item-divider { + text-transform: uppercase; + margin-top: 22px; + font-weight: 400; +} + +#release-notes { + overflow: auto; + max-height: 160px; +} diff --git a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.ts b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts similarity index 65% rename from ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.ts rename to ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts index f56e91460..da3e9676e 100644 --- a/ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.ts +++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts @@ -1,23 +1,22 @@ import { Component } from '@angular/core' import { ActivatedRoute } from '@angular/router' -import { AlertController, ModalController, NavController, PopoverController } from '@ionic/angular' +import { AlertController, ModalController, NavController } from '@ionic/angular' import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component' import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component' import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards' -import { InformationPopoverComponent } from 'src/app/components/information-popover/information-popover.component' import { Emver } from 'src/app/services/emver.service' import { displayEmver } from 'src/app/pipes/emver.pipe' import { pauseFor } from 'src/app/util/misc.util' import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model' import { PackageState } from 'src/app/models/patch-db/data-model' -import { AppAvailableService } from '../app-available.service' +import { MarketplaceService } from '../marketplace.service' @Component({ - selector: 'app-available-show', - templateUrl: './app-available-show.page.html', - styleUrls: ['./app-available-show.page.scss'], + selector: 'marketplace-show', + templateUrl: './marketplace-show.page.html', + styleUrls: ['./marketplace-show.page.scss'], }) -export class AppAvailableShowPage { +export class MarketplaceShowPage { error = '' pkgId: string @@ -26,18 +25,15 @@ export class AppAvailableShowPage { rec: Recommendation | null = null showRec = true - depDefinition = 'Service Dependencies are other services that this service recommends or requires in order to run.' - constructor ( private readonly route: ActivatedRoute, private readonly alertCtrl: AlertController, private readonly modalCtrl: ModalController, private readonly wizardBaker: WizardBaker, private readonly navCtrl: NavController, - private readonly popoverController: PopoverController, private readonly emver: Emver, public readonly patch: PatchDbModel, - public aaService: AppAvailableService, + public marketplaceService: MarketplaceService, ) { } async ngOnInit () { @@ -48,38 +44,24 @@ export class AppAvailableShowPage { async getPkg (version?: string): Promise { this.pkgId = this.route.snapshot.paramMap.get('pkgId') try { - await this.aaService.setPkg(this.pkgId, version) + await this.marketplaceService.setPkg(this.pkgId, version) } catch (e) { console.error(e) this.error = e.message } } - async presentPopover (information: string, ev: any) { - const popover = await this.popoverController.create({ - component: InformationPopoverComponent, - event: ev, - translucent: false, - showBackdrop: true, - backdropDismiss: true, - componentProps: { - information, - }, - }) - return await popover.present() - } - async presentAlertVersions () { const alert = await this.alertCtrl.create({ header: 'Versions', backdropDismiss: false, - inputs: this.aaService.pkgs[this.pkgId].versions.sort((a, b) => -1 * this.emver.compare(a, b)).map(v => { + inputs: this.marketplaceService.pkgs[this.pkgId].versions.sort((a, b) => -1 * this.emver.compare(a, b)).map(v => { return { name: v, // for CSS type: 'radio', label: displayEmver(v), // appearance on screen value: v, // literal SEM version value - checked: this.aaService.pkgs[this.pkgId].manifest.version === v, + checked: this.marketplaceService.pkgs[this.pkgId].manifest.version === v, } }), buttons: [ @@ -99,7 +81,7 @@ export class AppAvailableShowPage { } async install () { - const { id, title, version, dependencies, alerts } = this.aaService.pkgs[this.pkgId].manifest + const { id, title, version, dependencies, alerts } = this.marketplaceService.pkgs[this.pkgId].manifest const { cancelled } = await wizardModal( this.modalCtrl, this.wizardBaker.install({ @@ -115,7 +97,7 @@ export class AppAvailableShowPage { } async update (action: 'update' | 'downgrade') { - const { id, title, version, dependencies, alerts } = this.aaService.pkgs[this.pkgId].manifest + const { id, title, version, dependencies, alerts } = this.marketplaceService.pkgs[this.pkgId].manifest const value = { id, title, diff --git a/ui/src/app/pages/apps-routes/app-available.service.ts b/ui/src/app/pages/marketplace-routes/marketplace.service.ts similarity index 93% rename from ui/src/app/pages/apps-routes/app-available.service.ts rename to ui/src/app/pages/marketplace-routes/marketplace.service.ts index fcf15d180..0bc87d496 100644 --- a/ui/src/app/pages/apps-routes/app-available.service.ts +++ b/ui/src/app/pages/marketplace-routes/marketplace.service.ts @@ -5,7 +5,7 @@ import { ApiService } from 'src/app/services/api/api.service' @Injectable({ providedIn: 'root', }) -export class AppAvailableService { +export class MarketplaceService { pkgs: { [id: string]: AvailableShow } = { } constructor ( diff --git a/ui/src/app/pages/notifications/notifications.page.html b/ui/src/app/pages/notifications/notifications.page.html index b22b5500c..089829f4b 100644 --- a/ui/src/app/pages/notifications/notifications.page.html +++ b/ui/src/app/pages/notifications/notifications.page.html @@ -46,7 +46,7 @@

{{ not['created-at'] | date: 'short' }} - + - {{ not['package-id'] }}

diff --git a/ui/src/app/pages/server-routes/lan/lan.page.html b/ui/src/app/pages/server-routes/lan/lan.page.html index 0d34a989b..01582a3e8 100644 --- a/ui/src/app/pages/server-routes/lan/lan.page.html +++ b/ui/src/app/pages/server-routes/lan/lan.page.html @@ -69,7 +69,6 @@ - diff --git a/ui/src/app/pages/server-routes/general-settings/general-settings.module.ts b/ui/src/app/pages/server-routes/preferences/preferences.module.ts similarity index 77% rename from ui/src/app/pages/server-routes/general-settings/general-settings.module.ts rename to ui/src/app/pages/server-routes/preferences/preferences.module.ts index a77b0538e..3d6183464 100644 --- a/ui/src/app/pages/server-routes/general-settings/general-settings.module.ts +++ b/ui/src/app/pages/server-routes/preferences/preferences.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' import { IonicModule } from '@ionic/angular' -import { GeneralSettingsPage } from './general-settings.page' +import { PreferencesPage } from './preferences.page' import { Routes, RouterModule } from '@angular/router' import { SharingModule } from 'src/app/modules/sharing.module' import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module' @@ -9,7 +9,7 @@ import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-b const routes: Routes = [ { path: '', - component: GeneralSettingsPage, + component: PreferencesPage, }, ] @@ -22,7 +22,7 @@ const routes: Routes = [ PwaBackComponentModule, ], declarations: [ - GeneralSettingsPage, + PreferencesPage, ], }) -export class GeneralSettingsPageModule { } +export class PreferencesPageModule { } diff --git a/ui/src/app/pages/server-routes/general-settings/general-settings.page.html b/ui/src/app/pages/server-routes/preferences/preferences.page.html similarity index 95% rename from ui/src/app/pages/server-routes/general-settings/general-settings.page.html rename to ui/src/app/pages/server-routes/preferences/preferences.page.html index 103ef7479..f1eeb8ee8 100644 --- a/ui/src/app/pages/server-routes/general-settings/general-settings.page.html +++ b/ui/src/app/pages/server-routes/preferences/preferences.page.html @@ -3,7 +3,7 @@ - General Settings + Preferences diff --git a/ui/src/app/pages/server-routes/general-settings/general-settings.page.scss b/ui/src/app/pages/server-routes/preferences/preferences.page.scss similarity index 100% rename from ui/src/app/pages/server-routes/general-settings/general-settings.page.scss rename to ui/src/app/pages/server-routes/preferences/preferences.page.scss diff --git a/ui/src/app/pages/server-routes/general-settings/general-settings.page.ts b/ui/src/app/pages/server-routes/preferences/preferences.page.ts similarity index 75% rename from ui/src/app/pages/server-routes/general-settings/general-settings.page.ts rename to ui/src/app/pages/server-routes/preferences/preferences.page.ts index 5f8077617..68fea05f4 100644 --- a/ui/src/app/pages/server-routes/general-settings/general-settings.page.ts +++ b/ui/src/app/pages/server-routes/preferences/preferences.page.ts @@ -3,11 +3,11 @@ import { ServerConfigService } from 'src/app/services/server-config.service' import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model' @Component({ - selector: 'general-settings', - templateUrl: './general-settings.page.html', - styleUrls: ['./general-settings.page.scss'], + selector: 'preferences', + templateUrl: './preferences.page.html', + styleUrls: ['./preferences.page.scss'], }) -export class GeneralSettingsPage { +export class PreferencesPage { constructor ( private readonly serverConfigService: ServerConfigService, public readonly patch: PatchDbModel, diff --git a/ui/src/app/pages/server-routes/server-routing.module.ts b/ui/src/app/pages/server-routes/server-routing.module.ts index c60509c6b..af45a7906 100644 --- a/ui/src/app/pages/server-routes/server-routing.module.ts +++ b/ui/src/app/pages/server-routes/server-routing.module.ts @@ -23,8 +23,8 @@ const routes: Routes = [ loadChildren: () => import('./server-logs/server-logs.module').then(m => m.ServerLogsPageModule), }, { - path: 'settings', - loadChildren: () => import('./general-settings/general-settings.module').then(m => m.GeneralSettingsPageModule), + path: 'preferences', + loadChildren: () => import('./preferences/preferences.module').then(m => m.PreferencesPageModule), }, { path: 'wifi', diff --git a/ui/src/app/pages/server-routes/server-show/server-show.page.html b/ui/src/app/pages/server-routes/server-show/server-show.page.html index 14e903d59..81a063600 100644 --- a/ui/src/app/pages/server-routes/server-show/server-show.page.html +++ b/ui/src/app/pages/server-routes/server-show/server-show.page.html @@ -7,65 +7,17 @@ - + - Backups - - - - Create Backup - - - Insights - - - - - About - - - - - Monitor - - - - - Logs - - - Settings - - - - General - - - - - LAN - - - - - WiFi - - - - - Developer Options - - - Power - - - - Restart - - - - - Shutdown - - + + + + {{ cat.key }} + + + {{ button.title }} + + + + \ No newline at end of file diff --git a/ui/src/app/pages/server-routes/server-show/server-show.page.scss b/ui/src/app/pages/server-routes/server-show/server-show.page.scss index 272d5c3dc..e69de29bb 100644 --- a/ui/src/app/pages/server-routes/server-show/server-show.page.scss +++ b/ui/src/app/pages/server-routes/server-show/server-show.page.scss @@ -1,12 +0,0 @@ -.notification-button { - ion-badge { - position: absolute; - font-size: 8px; - bottom: .7rem; - left: .8rem; - } -} - -ion-item-divider { - margin-top: 0px; -} \ No newline at end of file diff --git a/ui/src/app/pages/server-routes/server-show/server-show.page.ts b/ui/src/app/pages/server-routes/server-show/server-show.page.ts index 52e125d0a..582ae9f4a 100644 --- a/ui/src/app/pages/server-routes/server-show/server-show.page.ts +++ b/ui/src/app/pages/server-routes/server-show/server-show.page.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core' import { LoadingOptions } from '@ionic/core' -import { AlertController, ModalController } from '@ionic/angular' +import { AlertController, NavController } from '@ionic/angular' import { ApiService } from 'src/app/services/api/api.service' import { LoaderService } from 'src/app/services/loader.service' import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model' import { ServerStatus } from 'src/app/models/patch-db/data-model' +import { ActivatedRoute } from '@angular/router' @Component({ selector: 'server-show', @@ -13,15 +14,21 @@ import { ServerStatus } from 'src/app/models/patch-db/data-model' }) export class ServerShowPage { ServerStatus = ServerStatus + settings: ServerSettings = { } constructor ( private readonly alertCtrl: AlertController, private readonly loader: LoaderService, private readonly apiService: ApiService, - private readonly modalCtrl: ModalController, + private readonly navCtrl: NavController, + private readonly route: ActivatedRoute, public readonly patch: PatchDbModel, ) { } + ngOnInit () { + this.setButtons() + } + async presentAlertRestart () { const alert = await this.alertCtrl.create({ backdropDismiss: false, @@ -73,7 +80,7 @@ export class ServerShowPage { // this.serverModel.markUnreachable() await this.apiService.restartServer({ }) }) - .catch(e => this.setError(e)) + .catch(console.error) } private async shutdown () { @@ -83,11 +90,74 @@ export class ServerShowPage { // this.serverModel.markUnreachable() await this.apiService.shutdownServer({ }) }) - .catch(e => this.setError(e)) + .catch(console.error) } - setError (e: Error) { - console.error(e) + private setButtons (): void { + this.settings = { + 'Settings': [ + { + title: 'Preferences', + icon: 'cog-outline', + action: () => this.navCtrl.navigateForward(['preferences'], { relativeTo: this.route }), + }, + { + title: 'LAN', + icon: 'home-outline', + action: () => this.navCtrl.navigateForward(['lan'], { relativeTo: this.route }), + }, + { + title: 'WiFi', + icon: 'wifi', + action: () => this.navCtrl.navigateForward(['wifi'], { relativeTo: this.route }), + }, + { + title: 'Developer Options', + icon: 'terminal-outline', + action: () => this.navCtrl.navigateForward(['developer'], { relativeTo: this.route }), + }, + ], + 'Insights': [ + { + title: 'About', + icon: 'information-circle-outline', + action: () => this.navCtrl.navigateForward(['specs'], { relativeTo: this.route }), + }, + { + title: 'Monitor', + icon: 'pulse', + action: () => this.navCtrl.navigateForward(['metrics'], { relativeTo: this.route }), + }, + { + title: 'Logs', + icon: 'newspaper-outline', + action: () => this.navCtrl.navigateForward(['logs'], { relativeTo: this.route }), + }, + ], + 'Backups': [ + { + title: 'Create Backup', + icon: 'save-outline', + action: () => this.navCtrl.navigateForward(['backup'], { relativeTo: this.route }), + }, + ], + 'Power': [ + { + title: 'Restart', + icon: 'reload-outline', + action: () => this.presentAlertRestart(), + }, + { + title: 'Shutdown', + icon: 'power', + action: () => this.presentAlertShutdown(), + }, + ], + } + } + + asIsOrder () { + return 0 } } @@ -100,4 +170,10 @@ const LoadingSpinner: (m?: string) => LoadingOptions = (m) => { } as LoadingOptions } - +interface ServerSettings { + [key: string]: { + title: string + icon: string + action: Function + }[] +} diff --git a/ui/src/app/services/api/mock-api.service.ts b/ui/src/app/services/api/mock-api.service.ts index faa471e86..c20754cb4 100644 --- a/ui/src/app/services/api/mock-api.service.ts +++ b/ui/src/app/services/api/mock-api.service.ts @@ -469,7 +469,7 @@ export class MockApiService extends ApiService { async getMarketplaceData (params: RR.GetMarketplaceDataReq): Promise { await pauseFor(2000) return { - categories: ['featured', 'bitcoin', 'lightning', 'data', 'messaging'], + categories: ['featured', 'bitcoin', 'lightning', 'data', 'messaging', 'social', 'alt coin'], } } diff --git a/ui/src/app/services/api/mock-app-fixures.ts b/ui/src/app/services/api/mock-app-fixures.ts index 5ff7a69ed..8b937e939 100644 --- a/ui/src/app/services/api/mock-app-fixures.ts +++ b/ui/src/app/services/api/mock-app-fixures.ts @@ -20,7 +20,7 @@ export module Mock { }, { id: 'lnd', - title: 'Lightning Network Daemon', + title: 'LND', version: '0.11.1', descriptionShort: 'A BOLT-compliant, lightning network node.', icon: 'assets/img/service-icons/lnd.png', @@ -157,7 +157,7 @@ export module Mock { export const MockManifestLnd: Manifest = { id: 'lnd', - title: 'Lightning Network Daemon', + title: 'LND', version: '0.11.1', description: { short: 'A bolt spec compliant client.', diff --git a/ui/src/app/services/pkg-status-rendering.service.ts b/ui/src/app/services/pkg-status-rendering.service.ts index 0e47bbc08..6ef09d9dd 100644 --- a/ui/src/app/services/pkg-status-rendering.service.ts +++ b/ui/src/app/services/pkg-status-rendering.service.ts @@ -20,7 +20,7 @@ function handleInstalledState (status: Status): PkgStatusRendering { } if (Object.keys(status['dependency-errors']).length) { - return { display: 'Dependency Issue', color: 'warning', showDots: false, feStatus: FEStatus.DependencyIssue } + return { display: 'Needs Attention', color: 'warning', showDots: false, feStatus: FEStatus.DependencyIssue } } switch (status.main.status) { @@ -36,7 +36,7 @@ function handleRunningState (status: MainStatusRunning): PkgStatusRendering { if (Object.values(status.health).some(h => h.result === 'failure')) { return { display: 'Needs Attention', color: 'danger', showDots: false, feStatus: FEStatus.NeedsAttention } } else if (Object.values(status.health).some(h => h.result === 'starting')) { - return { display: 'Starting Up', color: 'warning', showDots: true, feStatus: FEStatus.Starting } + return { display: 'Starting', color: 'warning', showDots: true, feStatus: FEStatus.Starting } } else if (Object.values(status.health).some(h => h.result === 'loading')) { const firstLoading = Object.values(status.health).find(h => h.result === 'loading') as HealthCheckResultLoading return { display: firstLoading.message, color: 'warning', showDots: true, feStatus: FEStatus.Loading } diff --git a/ui/src/app/services/startup-alerts.notifier.ts b/ui/src/app/services/startup-alerts.notifier.ts index 3770dd767..3af4e7a2c 100644 --- a/ui/src/app/services/startup-alerts.notifier.ts +++ b/ui/src/app/services/startup-alerts.notifier.ts @@ -183,7 +183,7 @@ export class StartupAlertsNotifier { { text: 'View in Marketplace', handler: () => { - return this.navCtrl.navigateForward('/services/marketplace').then(() => resolve(false)) + return this.navCtrl.navigateForward('/marketplace').then(() => resolve(false)) }, }, ], diff --git a/ui/src/global.scss b/ui/src/global.scss index 5b4c09a6b..bf26f5d38 100644 --- a/ui/src/global.scss +++ b/ui/src/global.scss @@ -117,9 +117,12 @@ white-space: normal !important; } +ion-card-title { + font-family: 'Montserrat'; +} + ion-title { font-family: 'Montserrat'; - font-weight: unset; } ion-textarea { @@ -272,11 +275,6 @@ ion-avatar { --border-radius: var(--icon-border-radius); } -.no-white-space { - --white-space: 0; - --box-shadow: 3px 3px 10px var(--ion-color-primary); -} - .notifier-item { margin: 12px; margin-top: 0px; @@ -301,7 +299,6 @@ ion-item-divider { color: var(--ion-color-medium); font-size: medium; padding-left: 10px; - font-weight: unset; } .dots {