Add local IP address to About screen: Resolves #622, #1202, #1320, #4128

src/app/model/index.ts

@@ -7,3 +7,4 @@ export * from './job.model';
 export * from './printer-profile.model';
 export * from './printer.model';
 export * from './system.model';
+export * from './util-test.model';

src/app/model/util-test.model.ts

@@ -0,0 +1,5 @@
+export interface TestAddress {
+  address: string;
+  is_lan_address: boolean;
+  subnet: string;
+}

src/app/services/system/system.octoprint.service.ts

@@ -5,7 +5,7 @@ import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
 import { ConfigService } from '../../config/config.service';
-import { NotificationType, SocketAuth } from '../../model';
+import { NotificationType, SocketAuth, TestAddress } from '../../model';
 import { ConnectCommand, OctoprintLogin } from '../../model/octoprint';
 import { NotificationService } from '../../notification/notification.service';
 import { SystemService } from './system.service';
@@ -74,4 +74,14 @@ export class SystemOctoprintService implements SystemService {
       )
       .subscribe();
   }
+
+  public getLocalIpAddress() {
+    const payload = {
+      command: 'address',
+    };
+
+    return this.http
+      .post<TestAddress>(this.configService.getApiURL('util/test'), payload, this.configService.getHTTPHeaders())
+      .pipe(map(result => (result?.is_lan_address && result?.address ? result.address : null)));
+  }
 }

src/app/services/system/system.service.ts

@@ -5,6 +5,8 @@ import { SocketAuth } from '../../model';
 
 @Injectable()
 export abstract class SystemService {
+  abstract getLocalIpAddress(): Observable<string | null>;
+
   abstract getSessionKey(): Observable<SocketAuth>;
 
   abstract sendCommand(command: string): void;

src/app/settings/settings.component.html

@@ -659,6 +659,10 @@
             install v{{ service.latestVersion }}
           </button>
           <span class="settings__about-copyright">&#169; 2019-2020 UnchartedBull</span>
+          <span class="settings__heading-2" i18n="@@connection">Connection</span>
+          <p class="settings__text" *ngIf="{address: localIpAddress$ | async} as vm">
+            {{vm.address ? 'IP Address: ' + vm.address : 'Could not detect your IP address' }}
+          </p>
           <span class="settings__heading-2" i18n="@@licence">License</span>
           <p class="settings__text">
             Licensed under the Apache 2.0 License.

src/app/settings/settings.component.ts

@@ -6,6 +6,7 @@ import { ConfigService } from '../config/config.service';
 import { ElectronService } from '../electron.service';
 import { NotificationType } from '../model';
 import { NotificationService } from '../notification/notification.service';
+import { SystemService } from '../services/system/system.service';
 
 @Component({
   selector: 'app-settings',
@@ -34,10 +35,13 @@ export class SettingsComponent implements OnInit, OnDestroy {
   private pages = [];
   public update = false;
 
+  public localIpAddress$ = this.systemService.getLocalIpAddress();
+
   public constructor(
     private configService: ConfigService,
     private notificationService: NotificationService,
     private electronService: ElectronService,
+    private systemService: SystemService,
     public service: AppService,
   ) {
     this.config = this.configService.getCurrentConfig();