styling etc

ui/src/app/pages/server-routes/lan/lan.page.html

@@ -69,7 +69,6 @@
           <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
         </ion-button>
       </ion-item>
-      <ion-item-divider></ion-item-divider>
     </ng-container>
   </ion-item-group>
 

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 { }

ui/src/app/pages/server-routes/preferences/preferences.page.html

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
-    <ion-title>General Settings</ion-title>
+    <ion-title>Preferences</ion-title>
   </ion-toolbar>
 </ion-header>
 

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,

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',

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

@@ -7,65 +7,17 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top ion-padding-bottom">
+<ion-content>
 
-  <ion-item-divider>Backups</ion-item-divider>
-
-  <ion-item [routerLink]="['backup']">
-    <ion-icon slot="start" name="save-outline"></ion-icon>
-    <ion-label>Create Backup</ion-label>
-  </ion-item>
-  
-  <ion-item-divider>Insights</ion-item-divider>
-  
-  <ion-item-group>
-    <ion-item [routerLink]="['specs']">
-      <ion-icon slot="start" name="information-circle-outline"></ion-icon>
-      <ion-label>About</ion-label>
-    </ion-item>
-
-    <ion-item [routerLink]="['metrics']">
-      <ion-icon slot="start" name="pulse"></ion-icon>
-      <ion-label>Monitor</ion-label>
-    </ion-item>
-
-    <ion-item [routerLink]="['logs']">
-      <ion-icon slot="start" name="newspaper-outline"></ion-icon>
-      <ion-label>Logs</ion-label>
-    </ion-item>
-
-    <ion-item-divider>Settings</ion-item-divider>
-
-    <ion-item lines="none" [routerLink]="['settings']">
-      <ion-icon slot="start" name="cog-outline"></ion-icon>
-      <ion-label>General</ion-label>
-    </ion-item>
-
-    <ion-item [routerLink]="['lan']">
-      <ion-icon slot="start" name="home-outline"></ion-icon>
-      <ion-label>LAN</ion-label>
-    </ion-item>
-
-    <ion-item [routerLink]="['wifi']">
-      <ion-icon slot="start" name="wifi"></ion-icon>
-      <ion-label>WiFi</ion-label>
-    </ion-item>
-
-    <ion-item lines="none" [routerLink]="['developer']">
-      <ion-icon slot="start" name="terminal-outline"></ion-icon>
-      <ion-label>Developer Options</ion-label>
-    </ion-item>
-
-    <ion-item-divider>Power</ion-item-divider>
-
-    <ion-item button (click)="presentAlertRestart()">
-      <ion-icon slot="start" name="reload-outline"></ion-icon>
-      <ion-label>Restart</ion-label>
-    </ion-item>
-
-    <ion-item button lines="none" (click)="presentAlertShutdown()">
-      <ion-icon slot="start" name="power"></ion-icon>
-      <ion-label>Shutdown</ion-label>
-    </ion-item>
-  </ion-item-group>
+  <ion-grid>
+    <ion-row>
+      <ion-col *ngFor="let cat of settings | keyvalue : asIsOrder" sizeXs="12" sizeMd="6">
+        <ion-item-divider>{{ cat.key }}</ion-item-divider>
+        <ion-item style="cursor: pointer;" button *ngFor="let button of cat.value" (click)="button.action()">
+          <ion-icon slot="start" [name]="button.icon"></ion-icon>
+          <ion-label>{{ button.title }}</ion-label>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

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;
-}

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
+  }[]
+}