File browser working. Closes #15.

UnchartedBull · Sep 26, 2019 · 77a3a41 · 77a3a41
1 parent c519377
commit 77a3a41
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 38 deletions.
diff --git a/src/app/files.service.ts b/src/app/files.service.ts
@@ -4,6 +4,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { ErrorService } from './error/error.service';
 import { Subscription } from 'rxjs';
 import { OctoprintFolderAPI, OctoprintFilesAPI, OctoprintFolderContentAPI } from './octoprint-api/filesAPI';
+import { JobService } from './job.service';
 
 @Injectable({
   providedIn: 'root'
@@ -12,7 +13,11 @@ export class FilesService {
 
   httpGETRequest: Subscription;
 
-  constructor(private configService: ConfigService, private http: HttpClient, private errorService: ErrorService) { }
+  constructor(
+    private configService: ConfigService,
+    private http: HttpClient,
+    private errorService: ErrorService,
+    private jobService: JobService) { }
 
   public getFolder(foldername: string = '/'): Promise<Array<File | Folder>> {
     return new Promise((resolve, reject): void => {
@@ -25,37 +30,33 @@ export class FilesService {
           (data: OctoprintFolderAPI & OctoprintFolderContentAPI) => {
             if ('children' in data) {
               data.files = data.children;
+              delete data.children;
             }
             const out: Array<File | Folder> = [];
-            console.log(data);
             data.files.forEach((fileOrFolder) => {
-              if ('children' in fileOrFolder) {
+              if (fileOrFolder.type === 'folder') {
                 out.push({
                   type: 'folder',
                   path: '/' + fileOrFolder.path,
-                  name: fileOrFolder.display,
-                  files: fileOrFolder.children.length,
+                  name: fileOrFolder.name,
+                  // TODO: Think of a way to retrieve number of children
+                  files: fileOrFolder.children ? fileOrFolder.children.length : '-',
                 } as Folder);
-              } else if ('gcodeAnalysis' in fileOrFolder && 'progress' in fileOrFolder.gcodeAnalysis) {
+              } else {
                 out.push({
                   type: 'file',
                   path: '/' + fileOrFolder.path,
-                  name: fileOrFolder.display,
-                  size: fileOrFolder.size,
-                  printTime: fileOrFolder.gcodeAnalysis.estimatedPrintTime,
-                  filamentWeight: fileOrFolder.gcodeAnalysis.filament.tool0.length,
+                  name: fileOrFolder.name,
+                  size: this.convertByteToMegabyte(fileOrFolder.size),
+                  printTime: this.jobService.convertSecondsToHours(fileOrFolder.gcodeAnalysis.estimatedPrintTime),
+                  filamentWeight: this.jobService.convertFilamentLengthToAmount(fileOrFolder.gcodeAnalysis.filament.tool0.length),
                   date: new Date(fileOrFolder.date)
                 } as File);
-              } else {
-                this.errorService.setError('Found weird thing in files.',
-                  `The thing ${fileOrFolder.name} is neither a file nor a folder, omitting it for now.`);
               }
             });
             data = null;
             out.sort((a, b) => a.type === b.type ? a.name > b.name ? 1 : -1 : a.type === 'folder' ? -1 : 1);
 
-            console.log(out);
-
             resolve(out);
           },
           (error: HttpErrorResponse) => {
@@ -75,6 +76,10 @@ export class FilesService {
     });
   }
 
+  private convertByteToMegabyte(byte: number): string {
+    return (byte / 1000000).toFixed(1);
+  }
+
   public getFile(filename: string): File {
     return null;
   }
@@ -91,8 +96,8 @@ export interface File {
   type: string;
   path: string;
   name: string;
-  size?: number;
-  printTime?: number;
+  size?: string;
+  printTime?: string;
   filamentWeight?: number;
   date?: Date;
 }
diff --git a/src/app/files/files.component.html b/src/app/files/files.component.html
@@ -6,23 +6,30 @@
         <td class="top-bar__center">
             <img src="assets/folder.svg" class="top-bar__center-icon">
         </td>
-        <td class="top-bar__next" (click)="showHelp = true">
+        <td class="top-bar__next" (click)="openFolder(currentFolder)">
             refresh<img src="assets/refresh.svg" class="top-bar__next-icon">
         </td>
     </tr>
 </table>
 <div class="breadcrumbs">
     <fa-icon [icon]="['fas', 'home']" (click)="openFolder('/')" class="breadcrumbs__item-home"></fa-icon>
-    <span class="breadcrumbs__item" *ngFor="let folder of currentFolder.split('/')"
-        (click)="openFolder(currentFolder.split('folder')[0]+'/'+folder)">{{ folder }}</span>
+    <span class="breadcrumbs__item" *ngFor="let folder of currentFolder.split('/')">
+        <span (click)="openFolder(currentFolder.split(folder)[0] + folder)">
+            {{ folder }}
+        </span>
+    </span>
 </div>
 <div class="files">
-    <div *ngIf="!files" class="files__error">
+    <ngx-spinner>
+        <p class="la-pacman-text"> loading ... </p>
+    </ngx-spinner>
+
+    <div *ngIf="!folderContent" class="files__error">
         can't load files ...
     </div>
 
-    <div *ngIf="files && currentFolder !== '/'" class="files__object">
-        <div (click)="openFolder('/')">
+    <div *ngIf="folderContent && currentFolder !== '/' && currentFolder !== ''" class="files__object">
+        <div (click)="openFolder(currentFolder.substr(0, currentFolder.lastIndexOf('/')))">
             <img src="assets/folder.svg" class="files__icon" />
             <span class="files__name">..</span>
         </div>

diff --git a/src/app/files/files.component.scss b/src/app/files/files.component.scss
@@ -19,20 +19,26 @@
     &__item {
         font-size: 2.2vw;
 
+        & span {
+            font-size: 2.2vw;
+        }
+
         &::before {
             content: '/';
             padding: 0 .9vw;
+            pointer-events: none;
         }
 
         &:first-of-type {
             &::before {
-                content: ''
+                content: '';
+                display: none;
             }
         }
 
         &-home {
             font-size: 2.4vw;
-            margin-right: -1vw;
+            padding-right: .4vw;
         }
     }
 }
@@ -41,10 +47,10 @@
 .files {
     display: block;
     width: 95vw;
-    height: 81.5vh;
+    height: 76.5vh;
     margin-left: 2.5vw;
     margin-top: 0.5vh;
-    overflow: auto;
+    overflow-y: scroll;
     position: relative;
 
     &::before {
@@ -77,7 +83,7 @@
         }
 
         &:last-of-type {
-            margin-bottom: 4.5vh;
+            margin-bottom: 5.5vh;
         }
     }
 

diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts
@@ -15,7 +15,6 @@ export class FilesComponent {
 
   constructor(private filesService: FilesService, private spinner: NgxSpinnerService) {
     this.currentFolder = '/';
-    this.currentFolder = '/kingkong/src/abc';
     this.openFolder(this.currentFolder);
   }
 
@@ -29,7 +28,6 @@ export class FilesComponent {
   }
 
   openFolder(foldername: string) {
-    // TODO
     this.spinner.show(undefined, {
       bdColor: '#353b48',
       color: '#f5f6fa',
@@ -40,10 +38,10 @@ export class FilesComponent {
     this.folderContent = null;
     this.filesService.getFolder(foldername).then(
       (data) => {
-        this.spinner.hide();
         this.folderContent = data;
         this.currentFolder = foldername;
-      }).catch((reason: string) => this.spinner.hide());
+        this.spinner.hide();
+      });
   }
 
   closeDetails() {

diff --git a/src/app/job.service.ts b/src/app/job.service.ts
@@ -28,13 +28,13 @@ export class JobService {
               job = {
                 filename: data.job.file.display.replace('.gcode', ''),
                 progress: Math.round((data.progress.filepos / data.job.file.size) * 100),
-                filamentAmount: this.filamentLengthToAmount(data.job.filament.tool0.length),
+                filamentAmount: this.convertFilamentLengthToAmount(data.job.filament.tool0.length),
                 timeLeft: {
-                  value: this.timeConvert(data.progress.printTimeLeft),
+                  value: this.convertSecondsToHours(data.progress.printTimeLeft),
                   unit: 'h'
                 },
                 timePrinted: {
-                  value: this.timeConvert(data.progress.printTime),
+                  value: this.convertSecondsToHours(data.progress.printTime),
                   unit: 'h'
                 },
               };
@@ -108,7 +108,7 @@ export class JobService {
     );
   }
 
-  private timeConvert(input: number): string {
+  public convertSecondsToHours(input: number): string {
     const hours = (input / 60 / 60);
     let roundedHours = Math.floor(hours);
     const minutes = (hours - roundedHours) * 60;
@@ -120,7 +120,7 @@ export class JobService {
     return roundedHours + ':' + ('0' + roundedMinutes).slice(-2);
   }
 
-  private filamentLengthToAmount(filamentLength: number): number {
+  public convertFilamentLengthToAmount(filamentLength: number): number {
     return Math.round((Math.PI * (this.configService.config.filament.thickness / 2) * filamentLength)
       * this.configService.config.filament.density / 100) / 10;
   }

diff --git a/src/styles.scss b/src/styles.scss
@@ -154,9 +154,22 @@ app-root {
     outline: none;
 
     &-track {
-        background: #353b48;
+        background: transparent;
+        border-radius: .85vw;
         box-shadow: none;
         outline: none;
+
+        &-piece {
+            &:end {
+                background: transparent;
+                margin-bottom: 5vh;
+            }
+
+            &:start {
+                background: transparent;
+                margin-top: 5vh;
+            }
+        }
     }
 
     &-thumb {