Files View (#165)

* First rudimental mockup of files browser * WIP * Fix layout issue * Finish designing file details page * Started working on API * Fix issue with long filenames including seperators * Some design improvements, add breadcrumbs * Some style improvements * File browser working. Closes #15. * Load file details via API * detail view closes 17 * Show errors when files can't load + fontawesome * Load file design * Implemented rudimental file actions * some improvements * everything working
UnchartedBull · Sep 30, 2019 · 4e958a3 · 4e958a3
1 parent 2589aec
commit 4e958a3
Show file tree

Hide file tree

Showing 34 changed files with 1,059 additions and 104 deletions.
diff --git a/.gitignore b/.gitignore
@@ -48,4 +48,6 @@ Thumbs.db
 
 .vscode
 
-**/config.testing.json
+**/config.testing.json
+
+node-dht-sensor
diff --git a/icons.txt b/icons.txt
@@ -9,10 +9,16 @@
 "Sliders" by Danny Lelieveld from thenounproject.com
 "Close" by Danny Lelieveld from thenounproject.com
 "Pause" by Danny Lelieveld from thenounproject.com
-"Play" by Danny Lelieveld from the Noun Project
-"Thermometer" by Andrejs Kirma from the Noun Project
-"3d printer filament" by Cono Studio Milano from the Noun Project
-"Folder" by romzicon from the Noun Project
-"joystick" by ProSymbols from the Noun Project
-"Settings" by Karan from the Noun Project
-"help" by Rainbow Designs from the Noun Project
+"Play" by Danny Lelieveld from thenounproject.com
+"Thermometer" by Andrejs Kirma from thenounproject.com
+"3d printer filament" by Cono Studio Milano from thenounproject.com
+"Folder" by romzicon from thenounproject.com
+"joystick" by ProSymbols from thenounproject.com
+"Settings" by Karan from thenounproject.com
+"help" by Rainbow Designs from thenounproject.com
+"Refresh" by Nawicon from the Noun Project
+"Upload" by Nikita Tcherednikov from the Noun Project
+"print" by Delta from the Noun Project
+"Delete" by Daily icons from the Noun Project
+"discard" by Alice Design from the Noun Project
+"Heat" by Adrien Coquet from the Noun Project
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,13 +33,15 @@
             "output": "package"
         },
         "linux": {
-            "target": [{
-                "target": "deb",
-                "arch": [
-                    "armv7l",
-                    "arm64"
-                ]
-            }],
+            "target": [
+                {
+                    "target": "deb",
+                    "arch": [
+                        "armv7l",
+                        "arm64"
+                    ]
+                }
+            ],
             "category": "Utility"
         }
     },
@@ -70,12 +72,14 @@
         "@angular/platform-browser-dynamic": "~8.2.2",
         "@angular/router": "~8.2.8",
         "@fortawesome/angular-fontawesome": "^0.5.0",
-        "@fortawesome/fontawesome-svg-core": "^1.2.24",
-        "@fortawesome/free-solid-svg-icons": "^5.11.1",
+        "@fortawesome/fontawesome-svg-core": "^1.2.25",
+        "@fortawesome/free-solid-svg-icons": "^5.11.2",
         "ajv": "^6.10.2",
         "angular-svg-round-progressbar": "^3.0.1",
         "electron-store": "^5.0.0",
+        "hammerjs": "^2.0.8",
         "lodash": "^4.17.15",
+        "ngx-spinner": "^8.0.3",
         "node-dht-sensor": "^0.4.0",
         "rxjs": "~6.5.3",
         "tslib": "^1.9.0",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,36 +1,49 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { RoundProgressModule, ROUND_PROGRESS_DEFAULTS } from 'angular-svg-round-progressbar';
-import { FormsModule } from '@angular/forms';
+
+import { AppRoutingModule } from './app.routing.module';
 
 import { AppComponent } from './app.component';
 import { BottomBarComponent } from './bottom-bar/bottom-bar.component';
-import { PrinterStatusComponent } from './printer-status/printer-status.component';
+import { ControlComponent } from './control/control.component';
+import { ErrorComponent } from './error/error.component';
+import { FilamentComponent } from './filament/filament.component';
+import { FilesComponent } from './files/files.component';
+import { InvalidConfigComponent } from './config/invalid-config/invalid-config.component';
 import { JobStatusComponent } from './job-status/job-status.component';
-import { AppService } from './app.service';
-import { ConfigService } from './config/config.service';
 import { LayerProgressComponent } from './layer-progress/layer-progress.component';
-import { InvalidConfigComponent } from './config/invalid-config/invalid-config.component';
+import { MainMenuComponent } from './main-menu/main-menu.component';
+import { MainScreenComponent } from './main-screen/main-screen.component';
+import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-no-touch.component';
 import { NoConfigComponent } from './config/no-config/no-config.component';
 import { PrintControlComponent } from './print-control/print-control.component';
-import { ErrorComponent } from './error/error.component';
+import { PrinterStatusComponent } from './printer-status/printer-status.component';
+
+import { AppService } from './app.service';
+import { ConfigService } from './config/config.service';
 import { ErrorService } from './error/error.service';
+import { JobService } from './job.service';
 import { PrinterService } from './printer.service';
-import { MainMenuComponent } from './main-menu/main-menu.component';
 
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { ControlComponent } from './control/control.component';
-import { AppRoutingModule } from './app.routing.module';
-import { MainScreenComponent } from './main-screen/main-screen.component';
-import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-no-touch.component';
-import { JobService } from './job.service';
-import { FilamentComponent } from './filament/filament.component';
-import { FilesComponent } from './files/files.component';
 import { URLSafePipe } from './url.pipe';
 
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { NgxSpinnerModule } from 'ngx-spinner';
+
+
+import * as Hammer from 'hammerjs';
+import { SettingsComponent } from './settings/settings.component';
+
+export class MyHammerConfig extends HammerGestureConfig {
+  overrides = {
+    press: { pointers: 1, time: 501, threshold: 15 },
+    swipe: { pointers: 1, direction: Hammer.DIRECTION_LEFT, threshold: 20, velocity: 0.4 }
+  } as any;
+}
 
 @NgModule({
   declarations: [
@@ -49,6 +62,7 @@ import { URLSafePipe } from './url.pipe';
     MainScreenNoTouchComponent,
     FilamentComponent,
     FilesComponent,
+    SettingsComponent,
     URLSafePipe
   ],
   imports: [
@@ -57,13 +71,24 @@ import { URLSafePipe } from './url.pipe';
     AppRoutingModule,
     RoundProgressModule,
     FormsModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    NgxSpinnerModule,
+  ],
+  providers: [
+    AppService,
+    ConfigService,
+    ErrorService,
+    PrinterService,
+    JobService,
+    {
+      provide: HAMMER_GESTURE_CONFIG,
+      useClass: MyHammerConfig
+    }
   ],
-  providers: [AppService, ConfigService, ErrorService, PrinterService, JobService],
   bootstrap: [AppComponent]
 })
 export class AppModule {
-  constructor() {
-    library.add(fas);
+  constructor(library: FaIconLibrary) {
+    library.addIconPacks(fas);
   }
 }
diff --git a/src/app/app.routing.module.ts b/src/app/app.routing.module.ts
@@ -8,12 +8,14 @@ import { NoConfigComponent } from './config/no-config/no-config.component';
 import { MainScreenNoTouchComponent } from './main-screen/no-touch/main-screen-no-touch.component';
 import { FilamentComponent } from './filament/filament.component';
 import { FilesComponent } from './files/files.component';
+import { SettingsComponent } from './settings/settings.component';
 
 
 const routes: Routes = [
   {
     path: 'main-screen',
     component: MainScreenComponent
+    // component: FilesComponent
   },
   {
     path: 'main-screen-no-touch',
@@ -39,6 +41,10 @@ const routes: Routes = [
     path: 'no-config',
     component: NoConfigComponent
   },
+  {
+    path: 'settings',
+    component: SettingsComponent
+  }
 ];
 
 

diff --git a/src/app/app.service.ts b/src/app/app.service.ts
@@ -7,6 +7,7 @@ import { ConfigService } from './config/config.service';
 export class AppService {
 
   private updateError: string[];
+  private loadedFile = false;
 
   constructor(private configService: ConfigService) {
     this.updateError = [
@@ -19,6 +20,39 @@ export class AppService {
     return this.updateError;
   }
 
+  public setLoadedFile(value: boolean): void {
+    this.loadedFile = value;
+  }
+
+  public getLoadedFile(): boolean {
+    return this.loadedFile;
+  }
+
+  public convertByteToMegabyte(byte: number): string {
+    return (byte / 1000000).toFixed(1);
+  }
+
+  public convertDateToString(date: Date): string {
+    return `${('0' + date.getDate()).slice(-2)}.${('0' + (date.getMonth() + 1)).slice(-2)}.${date.getFullYear()} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
+  }
+
+  public convertSecondsToHours(input: number): string {
+    const hours = (input / 60 / 60);
+    let roundedHours = Math.floor(hours);
+    const minutes = (hours - roundedHours) * 60;
+    let roundedMinutes = Math.round(minutes);
+    if (roundedMinutes === 60) {
+      roundedMinutes = 0;
+      roundedHours += 1;
+    }
+    return roundedHours + ':' + ('0' + roundedMinutes).slice(-2);
+  }
+
+  public convertFilamentLengthToAmount(filamentLength: number): number {
+    return Math.round((Math.PI * (this.configService.config.filament.thickness / 2) * filamentLength)
+      * this.configService.config.filament.density / 100) / 10;
+  }
+
   // If the errors can be automatically fixed return true here
   public autoFixError(): boolean {
     const config = this.configService.config;

diff --git a/src/app/config/config.service.ts b/src/app/config/config.service.ts
@@ -45,7 +45,10 @@ export class ConfigService {
     if (this.valid) {
       this.httpHeaders = {
         headers: new HttpHeaders({
-          'x-api-key': this.config.octoprint.accessToken
+          'x-api-key': this.config.octoprint.accessToken,
+          'Cache-Control': 'no-cache',
+          Pragma: 'no-cache',
+          Expires: '0'
         })
       };
     }