remove octoprint script + rework setup + scrollable custom actions

main.js

@@ -43,7 +43,6 @@ function createWindow() {
       nodeIntegration: true,
       enableRemoteModule: true,
       worldSafeExecuteJavaScript: true,
-      // TODO: enable + contextBridge (probably electron-ngx before release 12)
       contextIsolation: false,
     },
     icon: path.join(__dirname, 'dist', 'assets', 'icon', 'icon.png'),

package.json

@@ -86,7 +86,6 @@
     "compare-versions": "^3.6.0",
     "electron-store": "^6.0.1",
     "got": "^11.8.0",
-    "jquery": "^3.5.1",
     "lodash": "^4.17.20",
     "ngx-electron": "^2.2.0",
     "ngx-spinner": "^10.0.1",

src/app/app.component.ts

@@ -1,21 +1,11 @@
-import { ChangeDetectorRef, Component, NgZone, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import _ from 'lodash';
 import { ElectronService } from 'ngx-electron';
 
 import { AppService } from './app.service';
 import { ConfigService } from './config/config.service';
 import { NotificationService } from './notification/notification.service';
-import { OctoprintScriptService } from './octoprint-script.service';
-
-declare global {
-  interface Window {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    require: any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    process: any;
-  }
-}
 
 @Component({
   selector: 'app-root',
@@ -26,12 +16,10 @@ export class AppComponent implements OnInit {
   public constructor(
     private service: AppService,
     private configService: ConfigService,
-    private octoprintScriptService: OctoprintScriptService,
     private notificationService: NotificationService,
     private router: Router,
     private electronService: ElectronService,
-    private changeDetector: ChangeDetectorRef,
-    private ngZone: NgZone,
+    private zone: NgZone,
   ) {}
 
   public activated = false;
@@ -79,9 +67,9 @@ export class AppComponent implements OnInit {
 
   private waitForOctoprint() {
     this.electronService.ipcRenderer.on('octoprintReady', (_, octoprintReady: boolean) => {
-      this.ngZone.run(() => {
+      this.zone.run(() => {
         if (octoprintReady) {
-          this.initializeOctoprintService();
+          this.connectWebsocket();
           this.status = 'initializing';
         } else {
           this.notificationService
@@ -92,12 +80,11 @@ export class AppComponent implements OnInit {
             .then(this.checkOctoprintPort.bind(this));
           this.status = 'no connection';
         }
-        this.changeDetector.detectChanges();
       });
     });
 
     this.electronService.ipcRenderer.on('waitPortError', (_, error: Error) => {
-      this.ngZone.run(() => {
+      this.zone.run(() => {
         this.notificationService.setError('System Error - please restart', error.message);
       });
     });
@@ -112,30 +99,29 @@ export class AppComponent implements OnInit {
       host: urlNoProtocol.split(':')[0],
       port: Number(urlNoProtocol.split(':')[1].split('/')[0]),
     });
-    this.changeDetector.detectChanges();
   }
 
-  private initializeOctoprintService() {
-    const showPrinterConnectedTimeout = setTimeout(() => {
-      this.showConnectionHint = true;
-    }, 30000);
-    this.octoprintScriptService
-      .initialize(this.configService.getURL(''), this.configService.getAccessKey())
-      .then(() => {
-        this.octoprintScriptService.authenticate(this.configService.getAccessKey());
-        if (this.configService.isTouchscreen()) {
-          this.router.navigate(['/main-screen']);
-        } else {
-          this.router.navigate(['/main-screen-no-touch']);
-        }
-      })
-      .catch(() => {
-        console.log('REJECTED');
-        this.notificationService.setError(
-          "Can't get OctoPrint script!",
-          'Please restart your machine. If the error persists open a new issue on GitHub.',
-        );
-      })
-      .finally(() => clearTimeout(showPrinterConnectedTimeout));
+  private connectWebsocket() {
+    if (this.configService.isTouchscreen()) {
+      this.router.navigate(['/main-screen']);
+    } else {
+      this.router.navigate(['/main-screen-no-touch']);
+    }
+    // const showPrinterConnectedTimeout = setTimeout(() => {
+    //   this.showConnectionHint = true;
+    // }, 30000);
+    // this.octoprintScriptService
+    //   .initialize(this.configService.getURL(''), this.configService.getAccessKey())
+    //   .then(() => {
+    //     this.octoprintScriptService.authenticate(this.configService.getAccessKey());
+    //   })
+    //   .catch(() => {
+    //     console.log('REJECTED');
+    //     this.notificationService.setError(
+    //       "Can't get OctoPrint script!",
+    //       'Please restart your machine. If the error persists open a new issue on GitHub.',
+    //     );
+    //   })
+    //   .finally(() => clearTimeout(showPrinterConnectedTimeout));
   }
 }

src/app/app.module.ts

@@ -15,8 +15,14 @@ import { AppRoutingModule } from './app.routing.module';
 import { AppService } from './app.service';
 import { BottomBarComponent } from './bottom-bar/bottom-bar.component';
 import { ConfigService } from './config/config.service';
-import { InvalidConfigComponent } from './config/invalid-config/invalid-config.component';
-import { NoConfigComponent } from './config/no-config/no-config.component';
+import { ConfigInvalidComponent } from './config/invalid/invalid.component';
+import { DiscoverOctoprintComponent } from './config/setup/discover-octoprint/discover-octoprint.component';
+import { ExtruderInformationComponent } from './config/setup/extruder-information/extruder-information.component';
+import { OctoprintAuthenticationComponent } from './config/setup/octoprint-authentication/octoprint-authentication.component';
+import { PersonalizationComponent } from './config/setup/personalization/personalization.component';
+import { PluginsComponent } from './config/setup/plugins/plugins.component';
+import { ConfigSetupComponent } from './config/setup/setup.component';
+import { WelcomeComponent } from './config/setup/welcome/welcome.component';
 import { ControlComponent } from './control/control.component';
 import { FilamentComponent } from './filament/filament.component';
 import { FilesComponent } from './files/files.component';
@@ -29,7 +35,6 @@ import { MainScreenComponent } from './main-screen/main-screen.component';
 import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-no-touch.component';
 import { NotificationComponent } from './notification/notification.component';
 import { NotificationService } from './notification/notification.service';
-import { OctoprintScriptService } from './octoprint-script.service';
 import { PrintControlComponent } from './print-control/print-control.component';
 import { PrinterStatusComponent } from './printer-status/printer-status.component';
 import { PrinterService } from './printer.service';
@@ -45,21 +50,27 @@ import { URLSafePipe } from './url.pipe';
     ControlComponent,
     FilamentComponent,
     FilesComponent,
-    InvalidConfigComponent,
+    ConfigInvalidComponent,
     JobStatusComponent,
     LayerProgressComponent,
     LongPress,
     MainMenuComponent,
     MainScreenComponent,
     MainScreenNoTouchComponent,
-    NoConfigComponent,
+    ConfigSetupComponent,
     NotificationComponent,
     PrintControlComponent,
     PrinterStatusComponent,
     SettingsComponent,
     StandbyComponent,
     UpdateComponent,
     URLSafePipe,
+    WelcomeComponent,
+    DiscoverOctoprintComponent,
+    OctoprintAuthenticationComponent,
+    PersonalizationComponent,
+    ExtruderInformationComponent,
+    PluginsComponent,
   ],
   imports: [
     BrowserModule,
@@ -73,7 +84,7 @@ import { URLSafePipe } from './url.pipe';
     BrowserAnimationsModule,
     MatRippleModule,
   ],
-  providers: [AppService, ConfigService, NotificationService, PrinterService, JobService, OctoprintScriptService],
+  providers: [AppService, ConfigService, NotificationService, PrinterService, JobService],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })

src/app/app.routing.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { InvalidConfigComponent } from './config/invalid-config/invalid-config.component';
-import { NoConfigComponent } from './config/no-config/no-config.component';
+import { ConfigInvalidComponent } from './config/invalid/invalid.component';
+import { ConfigSetupComponent } from './config/setup/setup.component';
 import { ControlComponent } from './control/control.component';
 import { FilamentComponent } from './filament/filament.component';
 import { FilesComponent } from './files/files.component';
@@ -35,11 +35,11 @@ const routes: Routes = [
   },
   {
     path: 'invalid-config',
-    component: InvalidConfigComponent,
+    component: ConfigInvalidComponent,
   },
   {
     path: 'no-config',
-    component: NoConfigComponent,
+    component: ConfigSetupComponent,
   },
   {
     path: 'settings',

src/app/app.service.ts

@@ -37,7 +37,6 @@ export class AppService {
     config.printer.zBabystepGCode = 'M290 Z';
     config.octodash.previewProgressCircle = false;
     this.configService.saveConfig(config);
-    this.configService.updateConfig();
     return true;
   }