Cleanup wifi settings page

src/frontend-box/src/app/app.routes.ts

@@ -27,8 +27,8 @@ export const routes: Routes = [
     loadComponent: () => import('./edit/edit.page').then((m) => m.EditPage),
   },
   {
-    path: 'admin',
-    loadComponent: () => import('./admin/admin.page').then((m) => m.AdminPage),
+    path: 'wifi',
+    loadComponent: () => import('./wifi/wifi.page').then((m) => m.WifiPage),
   },
   {
     path: 'add',

src/frontend-box/src/app/edit/edit.page.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core'
-import { NavigationExtras, Router } from '@angular/router'
 import {
   IonBackButton,
   IonButton,
@@ -16,6 +15,8 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/angular/standalone'
+import { NavigationExtras, Router } from '@angular/router'
+import { PlayerCmds, PlayerService } from '../player.service'
 import {
   addOutline,
   arrowBackOutline,
@@ -25,16 +26,15 @@ import {
   trashOutline,
   wifiOutline,
 } from 'ionicons/icons'
-import { PlayerCmds, PlayerService } from '../player.service'
 
-import { AsyncPipe } from '@angular/common'
-import { AlertController } from '@ionic/angular/standalone'
-import { addIcons } from 'ionicons'
-import type { Observable } from 'rxjs'
 import { ActivityIndicatorService } from '../activity-indicator.service'
+import { AlertController } from '@ionic/angular/standalone'
+import { AsyncPipe } from '@angular/common'
 import type { Media } from '../media'
 import { MediaService } from '../media.service'
 import type { Network } from '../network'
+import type { Observable } from 'rxjs'
+import { addIcons } from 'ionicons'
 
 @Component({
   selector: 'app-edit',
@@ -180,7 +180,7 @@ export class EditPage implements OnInit {
   }
 
   adminButtonPressed() {
-    this.router.navigate(['/admin'])
+    this.router.navigate(['/wifi'])
   }
 
   async clearResumePressed() {

src/frontend-box/src/app/wifi/wifi.page.html

@@ -0,0 +1,69 @@
+<ion-header class="wifi-header">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button icon="arrow-back-outline" defaultHref="/edit"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+        WiFi settings
+    </ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="wifiRestartButtonPressed()">
+        <ion-icon slot="icon-only" name="refresh"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button (click)="enableWifiOnButtonPressed()">
+        <ion-icon slot="icon-only" name="wifi-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="wifi-content">
+  <div>
+    <div class="top">
+      <form #libraryForm="ngForm" (ngSubmit)="submit(libraryForm)">
+        <ion-grid>
+          <ion-row>
+            <ion-col size="12">
+              <div>
+                <ion-item>
+                  <ion-input #wlan_ssid name="wlan_ssid" type="text" placeholder="WLAN-SSID" (ionInput)="inputChanged($event)" (ionFocus)="focusChanged($event)" ngModel></ion-input>
+                </ion-item>
+              </div>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col size="12">
+              <div>
+                <ion-item>
+                  <ion-input #wlan_pw name="wlan_pw" type="text" placeholder="WLAN-Key" (ionInput)="inputChanged($event)" (ionFocus)="focusChanged($event)" ngModel></ion-input>
+                </ion-item>
+              </div>
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col size="6">
+              <div>
+                <div class="add-button">
+                  <ion-button size="large" type="submit" expand="block" [disabled]="!valid">Set new WLAN</ion-button>
+                </div>
+              </div>
+            </ion-col>
+            <ion-col size="6">
+              <div>
+                <div class="cancel-button">
+                  <ion-button size="large" color="danger" (click)="cancelButtonPressed()" expand="block">Cancel</ion-button>
+                </div>
+              </div>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </form>
+    </div>
+  </div>
+
+  <div class="bottom">
+    <div class="simple-keyboard"></div>
+  </div>
+</ion-content>

src/frontend-box/src/app/admin/admin.page.scss → src/frontend-box/src/app/wifi/wifi.page.scss

@@ -159,6 +159,6 @@ ion-item {
     max-width: 80px;
 }
 
-.admin-content {
+.wifi-content {
     --ion-background-color: #000000 !important;
 }

src/frontend-box/src/app/admin/admin.page.spec.ts → src/frontend-box/src/app/wifi/wifi.page.spec.ts

@@ -1,22 +1,22 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 import { FormsModule } from '@angular/forms'
 import { UrlSerializer } from '@angular/router'
-import { AdminPage } from './admin.page'
+import { WifiPage } from './wifi.page'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 
-describe('AdminPage', () => {
-  let component: AdminPage
-  let fixture: ComponentFixture<AdminPage>
+describe('WifiPage', () => {
+  let component: WifiPage
+  let fixture: ComponentFixture<WifiPage>
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule, AdminPage],
+      imports: [FormsModule, WifiPage],
       providers: [UrlSerializer, provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
     }).compileComponents()
 
-    fixture = TestBed.createComponent(AdminPage)
+    fixture = TestBed.createComponent(WifiPage)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

src/frontend-box/src/app/admin/admin.page.ts → src/frontend-box/src/app/wifi/wifi.page.ts

@@ -1,9 +1,5 @@
 import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'
-import { AlertController, IonSelect, NavController } from '@ionic/angular/standalone'
-import { PlayerCmds, PlayerService } from '../player.service'
-
-import { FormsModule } from '@angular/forms'
-import type { NgForm } from '@angular/forms'
+import { AlertController, IonSelect, IonTitle, NavController } from '@ionic/angular/standalone'
 import {
   IonBackButton,
   IonButton,
@@ -15,33 +11,33 @@ import {
   IonIcon,
   IonInput,
   IonItem,
-  IonLabel,
   IonRow,
   IonSegment,
-  IonSegmentButton,
   IonToolbar,
 } from '@ionic/angular/standalone'
-import { addIcons } from 'ionicons'
+import { PlayerCmds, PlayerService } from '../player.service'
 import { refresh, wifiOutline } from 'ionicons/icons'
+
+import { FormsModule } from '@angular/forms'
 import Keyboard from 'simple-keyboard'
 import { MediaService } from '../media.service'
+import type { NgForm } from '@angular/forms'
 import type { WLAN } from '../wlan'
+import { addIcons } from 'ionicons'
 
 @Component({
-  selector: 'app-admin',
+  selector: 'app-wifi',
   encapsulation: ViewEncapsulation.None,
-  templateUrl: './admin.page.html',
-  styleUrls: ['./admin.page.scss'],
+  templateUrl: './wifi.page.html',
+  styleUrls: ['./wifi.page.scss'],
   standalone: true,
   imports: [
+    IonTitle,
     FormsModule,
     IonHeader,
     IonToolbar,
     IonButtons,
     IonBackButton,
-    IonSegment,
-    IonSegmentButton,
-    IonLabel,
     IonButton,
     IonIcon,
     IonContent,
@@ -52,7 +48,7 @@ import type { WLAN } from '../wlan'
     IonInput,
   ],
 })
-export class AdminPage implements OnInit, AfterViewInit {
+export class WifiPage implements OnInit, AfterViewInit {
   @ViewChild('segment', { static: false }) segment: IonSegment
   @ViewChild('select', { static: false }) select: IonSelect
 
@@ -61,8 +57,6 @@ export class AdminPage implements OnInit, AfterViewInit {
   @ViewChild('wlan_ssid', { static: false }) wlanSsid: IonInput
   @ViewChild('wlan_pw', { static: false }) wlanPw: IonInput
 
-  source = 'wlan'
-  category = 'WLAN'
   keyboard: Keyboard
   selectedInputElem: any
   valid = false
@@ -172,40 +166,25 @@ export class AdminPage implements OnInit, AfterViewInit {
     }
   }
 
-  segmentChanged(event: any) {
-    this.source = event.detail.value
-    window.setTimeout(() => {
-      // wait for new elements to be visible before altering them
-      this.validate()
-    }, 10)
-  }
-
   submit(form: NgForm) {
     const wlan: WLAN = {
-      category: this.category,
+      category: 'WLAN',
     }
 
-    if (this.source === 'network') {
-      //if (form.form.value.network_host?.length) { wlan.host = form.form.value.spotify_artist; }
-      //if (form.form.value.network_ip?.length) { wlan.title = form.form.value.spotify_title; }
-    } else if (this.source === 'wlan') {
-      const wlanSsid = this.keyboard.getInput('wlan_ssid') ?? ''
-      const wlanPw = this.keyboard.getInput('wlan_pw') ?? ''
+    const wlanSsid = this.keyboard.getInput('wlan_ssid') ?? ''
+    const wlanPw = this.keyboard.getInput('wlan_pw') ?? ''
 
-      if (wlanSsid.length) {
-        wlan.ssid = wlanSsid
-      }
-      if (wlanPw.length) {
-        wlan.pw = wlanPw
-      }
+    if (wlanSsid.length) {
+      wlan.ssid = wlanSsid
+    }
+    if (wlanPw.length) {
+      wlan.pw = wlanPw
     }
 
     this.mediaService.addWLAN(wlan)
 
     form.reset()
 
-    this.keyboard.clearInput('network_ip')
-    this.keyboard.clearInput('network_host')
     this.keyboard.clearInput('wlan_ssid')
     this.keyboard.clearInput('wlan_pw')
 
@@ -215,17 +194,10 @@ export class AdminPage implements OnInit, AfterViewInit {
   }
 
   validate() {
-    if (this.source === 'network') {
-      const artist = this.keyboard.getInput('network_ip')
-      const title = this.keyboard.getInput('network_host')
-
-      this.valid = title?.length > 0 && artist?.length > 0
-    } else if (this.source === 'wlan') {
-      const wlanSsid = this.keyboard.getInput('wlan_ssid') ?? ''
-      const wlanPw = this.keyboard.getInput('wlan_pw') ?? ''
+    const wlanSsid = this.keyboard.getInput('wlan_ssid') ?? ''
+    const wlanPw = this.keyboard.getInput('wlan_pw') ?? ''
 
-      this.valid = wlanSsid.length > 0 && (wlanPw.length === 0 || (wlanPw.length >= 8 && wlanPw.length <= 63))
-    }
+    this.valid = wlanSsid.length > 0 && (wlanPw.length === 0 || (wlanPw.length >= 8 && wlanPw.length <= 63))
   }
 
   async wifiRestartButtonPressed() {

themes/axolotl.css

@@ -64,7 +64,7 @@ body .home-content, body .medialist-content, body .player-content{
         box-shadow: 10px 20px 0px 0px !important;
 }
 
-body .edit-header, body .add-header, body .admin-header {
+body .edit-header, body .add-header, body .wifi-header {
         --ion-color-light: #054b61 !important;
 }