web-app Incorporate setup into wizard

- Fix bugs in database connection setup. - Build out the rest of the setup wizard and include all of the setup pages. - Remove incomplete and unused pages. - Remove sliders icon and menu, as all of setup is now under the cogwheel. - Remove test icon.
MythTV · May 9, 2023 · 7ac8ce5 · 7ac8ce5
1 parent 8dd90f6
commit 7ac8ce5
Show file tree

Hide file tree

Showing 73 changed files with 824 additions and 994 deletions.
diff --git a/mythtv/html/assets/i18n/en_US.json b/mythtv/html/assets/i18n/en_US.json
@@ -131,6 +131,18 @@
     "weekHeader": "Wk"
   },
   "setupwizard": {
+    "steps": {
+      "selectlanguage": "Choose Language",
+      "dbsetup": "Database Setup",
+      "general": "General",
+      "capture_cards": "Capture Cards",
+      "recording_profiles": "Recording Profiles",
+      "video_sources": "Video Sources",
+      "input_connections": "Input Connections",
+      "channel_editor": "Channel Editor",
+      "storage_groups": "Storage Groups",
+      "system_events": "System Events"
+    },
     "IPorAddressRequired": "IP Address or Hostname is required",
     "MySQLDatabaseName": "MySQL Database Name",
     "MySQLPassword": "MySQL Password",
@@ -159,15 +171,22 @@
     "setupNetwork": "Backend Network",
     "setupStorageGroups": "Storage Groups",
     "testConnection": "Test Database Connection",
-    "title": "Initial Setup Wizard",
     "userRequired": "User is required",
     "connectionsuccess": "Connection to database was successful",
     "connectionfail": "Unsuccessful connection to database",
     "ipaddress_help": "The hostname or IP address of the machine hosting the database.",
     "port_help": "The port number the database is running on. This is usually the default 3306.",
     "user_help": "The MySQL user name to use while connecting to the database. The default is mythtv.",
     "password_help": "The MySQL password to use while connecting to the database.",
-    "dbname_help": "The name of the database. This is usually 'mythconverg'."
+    "dbname_help": "The name of the database. This is usually 'mythconverg'.",
+    "LocalEnabled_label": "Use custom identifier for frontend preferences",
+    "LocalEnabled_desc": "If this frontend's host name changes often, check this box and provide a network-unique name to identify it. If unchecked, the frontend machine's local host name will be used to save preferences in the database.",
+    "LocalHostName_label": "Custom identifier",
+    "LocalHostName_desc": "An identifier to use while saving the settings for this backend or frontend on the same machine.",
+    "WOLEnabled_label": "Enable database server wakeup",
+    "WOLEnabled_desc": "If enabled, the frontend will use database wakeup parameters to reconnect to the database server.",
+    "WOLCommand_label": "Wake Command or MAC",
+    "WOLCommand_desc": "The command executed on this machine or server MAC to wake up the database server (eg. sudo /etc/init.d/mysql restart or 32:D2:86:00:17:A8)."
   },
   "testbed": {
     "title": "This is a testbed area",
@@ -605,7 +624,11 @@
       "grabberconfig_label": "Configure Grabber",
       "grabberconfig_desc": "Configure the grabber by running this command using ssh or terminal logged into the backend:",
       "eit_label": "Perform EIT scan",
-      "eit_desc": "If enabled, program guide data for channels on this source will be updated with data provided by the channels themselves 'Over-the-Air'."
+      "eit_desc": "If enabled, program guide data for channels on this source will be updated with data provided by the channels themselves 'Over-the-Air'.",
+      "WOLReconnect_label": "Reconnect Time",
+      "WOLReconnect_desc": "The time in seconds to wait for the server to wake up.",
+      "WOLRetry_label": "Retry Attempts",
+      "WOLRetry_desc": "The number of retries to wake the server before the frontend gives up."
     },
     "iconnection": {
       "title": "Input Connection",
@@ -969,18 +992,5 @@
       "rolloff_label": "Roll-off",
       "rolloff_desc": "Roll-off factor (Default: 0.35)"
     }
-  },
-  "sidenav": {
-    "settingsmenu": {
-      "title": "MythTV Setup",
-      "1_general": "1. General",
-      "2_capture_cards": "2. Capture Cards",
-      "3_recording_profiles": "3. Recording Profiles",
-      "4_video_sources": "4. Video Sources",
-      "5_input_connections": "5. Input Connections",
-      "6_channel_editor": "6. Channel Editor",
-      "7_storage_directories": "7. Storage Directories",
-      "8_system_events": "8. System Events"
-    }
   }
 }
diff --git a/mythtv/html/assets/i18n/nl.json b/mythtv/html/assets/i18n/nl.json
@@ -1,5 +1,7 @@
 {
-    "setupwizard": {
-        "title": "Initiële Installatiewizard"
+    "settings":  {
+        "main": {
+            "title" : "MythTV-installatie"
+        }
     }
 }
diff --git a/mythtv/html/backend/src/app/app.module.ts b/mythtv/html/backend/src/app/app.module.ts
@@ -26,9 +26,6 @@ import { JobqueueComponent } from './status/components/jobqueue/jobqueue.compone
 import { MachineinfoComponent } from './status/components/machineinfo/machineinfo.component';
 import { SelectLanguageComponent } from './config/setupwizard/selectlanguage/selectlanguage.component';
 import { DbsetupComponent } from './config/setupwizard/dbsetup/dbsetup.component';
-import { BackendnetworkComponent } from './config/setupwizard/backendnetwork/backendnetwork.component';
-import { SgsetupComponent } from './config/setupwizard/sgsetup/sgsetup.component';
-import { RestartComponent } from './config/setupwizard/restart/restart.component';
 import { TestbedComponent } from './testbed/testbed.component';
 import { GuideComponent } from './guide/guide.component';
 import { ChannelIconComponent } from './guide/components/channelicon/channelicon.component';
@@ -98,9 +95,6 @@ export function HttpLoaderFactory(http: HttpClient) {
     MachineinfoComponent,
     SelectLanguageComponent,
     DbsetupComponent,
-    BackendnetworkComponent,
-    SgsetupComponent,
-    RestartComponent,
     TestbedComponent,
     GuideComponent,
     ChannelIconComponent,

diff --git a/mythtv/html/backend/src/app/config/backend-warning/backend-warning.component.html b/mythtv/html/backend/src/app/config/backend-warning/backend-warning.component.html
@@ -1,8 +1,8 @@
 <div class="block card w-full">
     <div class="block">
-        <h1 style="text-align: center;">{{ 'settings.main.title' | translate }}</h1>
+        <!-- <h1 style="text-align: center;">{{ 'settings.main.title' | translate }}</h1> -->
         <p-card class="m-5">
-            <div *ngIf="retryCount == 0">
+            <!-- <div *ngIf="retryCount == 0">
                 <p>{{ 'settings.main.schedstatus' | translate }}:
                     <b *ngIf="setupService.schedulingEnabled">{{ 'settings.main.schedenabled' | translate }}</b>
                     <b *ngIf="!setupService.schedulingEnabled">{{ 'settings.main.scheddisabled' | translate }}</b>
@@ -28,14 +28,34 @@ <h1 style="text-align: center;">{{ 'settings.main.title' | translate }}</h1>
                         {{ 'settings.main.scheddisabled_desc' | translate }}
                     </p>
                 </div>
+            </div> -->
+            <div class="flex" *ngIf="setupService.schedulingEnabled && retryCount == 0">
+                <div class="flex align-items-center">
+                    <p-button class="pr-5 pb-1 pt-0 m-0" label="Enable Updates" icon="pi pi-save" iconPos="left"
+                        (onClick)="disableSched();"></p-button>
+                </div>
+                <div class="flex align-items-center">Enabling updates will prevent any recordings from taking place
+                    until you restart</div>
+            </div>
+            <div class="flex" *ngIf="!setupService.schedulingEnabled && retryCount == 0">
+                <div class="flex align-items-center">
+                    <p-button class="pr-5 pb-1 pt-0 m-0" label="Restart Backend" icon="pi pi-save" iconPos="left"
+                        (onClick)="restart();"></p-button>
+                </div>
+                <div class="flex align-items-center">
+                    <div class="text-pink-500">Recordings are disabled until you restart</div>
+                </div>
+            </div>
+            <div>
+                <small *ngIf="upComing.length > 0" class="pb-0 m-0">
+                    {{ 'settings.main.upcomingrec' |
+                    translate: { Title: upComing[0].Title, StartTime: recStartTime, Status: recStatusDesc } }}
+                </small>
             </div>
-            <div class="block">
-                <p-button class="col pr-1" label="Disable Scheduler" icon="pi pi-save" iconPos="left"
-                    (onClick)="disableSched();"
-                    [disabled]="!setupService.schedulingEnabled || retryCount > 0"></p-button>
-                <p-button class="col pr-1" label="Restart Backend" icon="pi pi-save" iconPos="left"
-                    (onClick)="restart();" [disabled]="setupService.schedulingEnabled || retryCount > 0"></p-button>
+            <div>
                 <p-progressSpinner *ngIf="retryCount > 0"></p-progressSpinner>
+                <p-message *ngIf="retryCount > 0" severity="info"
+                    text="Restarting Backend"></p-message>
                 <p>
                     <p-message *ngIf="this.errorCount > 0 && retryCount == 0" severity="error"
                         text="{{ 'common.networkfail' | translate }}"></p-message>

diff --git a/mythtv/html/backend/src/app/config/settings/capture-cards/capture-cards.component.html b/mythtv/html/backend/src/app/config/settings/capture-cards/capture-cards.component.html
@@ -1,5 +1,4 @@
-<app-backend-warning></app-backend-warning>
-<div class="block card w-full">
+<p-card class="m-5">
     <h2>{{ 'settings.capture.title' | translate }}</h2>
 
     <p-button label="{{ 'settings.capture.new_capture_card' | translate }}" (onClick)="displayModal = true"
@@ -131,4 +130,14 @@ <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
             </ng-template>
         </p-accordionTab>
     </p-accordion>
-</div>
+
+    <div class="flex justify-content-end">
+        <p-button class="p-3" label="{{ 'common.back' | translate }}"
+            (onClick)="router.navigate(['setupwizard/general'])" icon="pi pi-angle-left"
+            iconPos="left"></p-button>
+
+        <p-button class="p-3" label="{{ 'common.next' | translate }}"
+            (onClick)="router.navigate(['setupwizard/recording-profiles'])" icon="pi pi-angle-right" iconPos="right"></p-button>
+    </div>
+
+</p-card>
diff --git a/mythtv/html/backend/src/app/config/settings/capture-cards/capture-cards.component.ts b/mythtv/html/backend/src/app/config/settings/capture-cards/capture-cards.component.ts
@@ -1,5 +1,6 @@
 import { Component, HostListener, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, of } from 'rxjs';
 import { CanComponentDeactivate } from 'src/app/can-deactivate-guard.service';
@@ -62,7 +63,7 @@ export class CaptureCardsComponent implements OnInit, CanComponentDeactivate {
 
   cardTypes!: CardTypeExt[];
 
-  constructor(private mythService: MythService,
+  constructor(private mythService: MythService, public router: Router,
     private captureCardService: CaptureCardService, public setupService: SetupService,
     private translate: TranslateService) {
     this.setupService.setCurrentForm(null);

diff --git a/mythtv/html/backend/src/app/config/settings/capture-cards/ceton/ceton.component.html b/mythtv/html/backend/src/app/config/settings/capture-cards/ceton/ceton.component.html
@@ -11,7 +11,7 @@
                 <div class="mb-4 w-full">
 
                     <div class="form-group field">
-                        <label for="ip" class="block">{{ 'settings.capture.ceton.ipaddress_label' | translate }}</label>
+                        <label for="ip" class="label block">{{ 'settings.capture.ceton.ipaddress_label' | translate }}</label>
                         <input pInputText id="ip" [(ngModel)]="work.ipAddress" name="ip" #ipAddress="ngModel"
                             class="mb-2 form-control w-full" />
                         <small class="block">
@@ -20,7 +20,7 @@
                     </div>
 
                     <div class="form-group field">
-                        <label for="tuner" class="block">{{ 'settings.capture.ceton.tuner_label' | translate }}</label>
+                        <label for="tuner" class="label block">{{ 'settings.capture.ceton.tuner_label' | translate }}</label>
                         <input pInputText id="tuner" [(ngModel)]="work.tuner" name="tuner" #ipAddress="ngModel"
                             class="mb-2 form-control w-full" />
                         <small class="block">
@@ -29,7 +29,7 @@
                     </div>
 
                     <div class="form-group field">
-                        <label for="VideoDevice" class="block">{{ 'settings.capture.ceton.deviceid_label' | translate
+                        <label for="VideoDevice" class="label block">{{ 'settings.capture.ceton.deviceid_label' | translate
                             }}</label>
                         <input pInputText id="VideoDevice" [(ngModel)]="card.VideoDevice" name="VideoDevice"
                             disabled="true" #VideoDevice="ngModel" class="mb-2 form-control w-full" />
@@ -39,7 +39,7 @@
                     </div>
 
                     <div class="form-group field">
-                        <label for="SignalTimeout" class="block">{{ 'settings.capture.sigtimeout_label' | translate
+                        <label for="SignalTimeout" class="label block">{{ 'settings.capture.sigtimeout_label' | translate
                             }}</label>
                         <p-inputNumber [(ngModel)]="card.SignalTimeout" name="SignalTimeout" id="SignalTimeout"
                             [showButtons]="true" [min]="250" [max]="60000" [step]="250"></p-inputNumber>
@@ -49,7 +49,7 @@
                     </div>
 
                     <div class="form-group field">
-                        <label for="ChannelTimeout" class="block">{{ 'settings.capture.tunetimeout_label' | translate
+                        <label for="ChannelTimeout" class="label block">{{ 'settings.capture.tunetimeout_label' | translate
                             }}</label>
                         <p-inputNumber [(ngModel)]="card.ChannelTimeout" name="ChannelTimeout" id="ChannelTimeout"
                             [showButtons]="true" [min]="1750" [max]="65000" [step]="250"></p-inputNumber>

diff --git a/mythtv/html/backend/src/app/config/settings/capture-cards/demo/demo.component.html b/mythtv/html/backend/src/app/config/settings/capture-cards/demo/demo.component.html
@@ -11,7 +11,7 @@
                 <div class="mb-4 w-full">
 
                     <div class="form-group field">
-                        <label for="VideoDevice" class="block">{{ 'settings.capture.import.file_label' | translate
+                        <label for="VideoDevice" class="label block">{{ 'settings.capture.import.file_label' | translate
                             }}</label>
                         <input pInputText id="VideoDevice" [(ngModel)]="card.VideoDevice" name="VideoDevice"
                             #VideoDevice="ngModel" class="mb-2 form-control w-full" />