New Design for Loaded files

README.md

@@ -15,6 +15,7 @@
 - [Table of Contents](#table-of-contents)
 - [Installation](#installation)
 - [Update](#update)
+- [Tips and Tricks](#tips-and-tricks)
 - [Screenshots](#screenshots)
 - [Troubleshooting](#troubleshooting)
 - [Bugs and more](#bugs-and-more)
@@ -39,6 +40,13 @@ wget -qO- https://github.com/UnchartedBull/OctoDash/raw/master/scripts/update.sh
 
 For more info have a look at the [wiki](https://github.com/UnchartedBull/OctoDash/wiki/Update)
 
+## Tips and Tricks
+
+- Long press (~ 1s) on a file to get a more detailed view
+- If you loaded a file and don't want to unload it, just swipe left at the top portion of the screen
+- You can press multiple arrows directly after another in the control view. All actions will be executed one after another, even if the prior didn't finish before pressing the button
+- The six actions on the right in the control view can be customized. They can either send GCode commands to your printer, restart OctoPrint or your Pi and even open iFrames so you can view your camera
+
 
 ## Screenshots
 <p float="left">
@@ -60,7 +68,7 @@ If you encounter an issue, while using OctoDash please have a look at the [wiki]
 
 If you find a bug, please open an issue, so I can have a look at it. Please also add the steps to reproduce and the .gcode file. Thank you!
 
-One more thing: If you're Octoprint is running on a Raspberry Pi 1 you may want to opt out of this because it just does not have enough power.
+One more thing: If you're Octoprint is running on a Raspberry Pi 1 you may want to opt-out of this because it just does not have enough power.
 
 ## Contributing
 

scripts/install-no-autostart.sh

@@ -5,6 +5,7 @@ dependencies="libgtk-3-0 libnotify4 libnss3 libxss1 libxtst6 xdg-utils libatspi2
 
 echo "Installing OctoPrint Plugins"
 ~/OctoPrint/venv/bin/pip install -q "https://github.com/OllisGit/OctoPrint-DisplayLayerProgress/releases/latest/download/master.zip"
+~/OctoPrint/venv/bin/pip install -q "https://github.com/marian42/octoprint-preheat/archive/master.zip"
 if [[ $* == *--ptg* ]]
 then
     ~/OctoPrint/venv/bin/pip install -q "https://github.com/eyal0/OctoPrint-PrintTimeGenius/archive/master.zip"

scripts/install.sh

@@ -5,6 +5,7 @@ dependencies="libgtk-3-0 libnotify4 libnss3 libxss1 libxtst6 xdg-utils libatspi2
 
 echo "Installing OctoPrint Plugins"
 ~/OctoPrint/venv/bin/pip install -q "https://github.com/OllisGit/OctoPrint-DisplayLayerProgress/releases/latest/download/master.zip"
+~/OctoPrint/venv/bin/pip install -q "https://github.com/marian42/octoprint-preheat/archive/master.zip"
 if [[ $* == *--ptg* ]]
 then
     ~/OctoPrint/venv/bin/pip install -q "https://github.com/eyal0/OctoPrint-PrintTimeGenius/archive/master.zip"

src/app/job-status/job-status.component.html

@@ -10,26 +10,30 @@
             class="job-info__time-left">{{ job.timeLeft.value }}</span>{{ job.timeLeft.unit }} left,
         elapsed: {{ job.timePrinted.value }}{{ job.timePrinted.unit }}</span>
 </div>
-<div class="job-info__file-loaded" *ngIf="job && job.status !== 'Printing' && isFileLoaded()">
+<div class="job-info__file-loaded" *ngIf="job && job.status !== 'Printing' && isFileLoaded()"
+    (swipe)="cancelLoadedFile()">
     <img src="assets/object.svg" class="job-info__preview" />
     <span class="job-info__filename">{{ job.filename }}</span> <br />
-    <table class="job-info__actions">
-        <tr>
-            <td class="job-info__actions-item-column" (click)="cancelLoadedFile()">
-                <img src="assets/discard.svg" class="job-info__actions-item job-info__actions-item-1" /> <br />
-                discard
-            </td>
-            <td class="job-info__actions-item-column" (click)="preheat()">
-                <img src="assets/heat.svg" class="job-info__actions-item job-info__actions-item-2" /> <br />
-                preheat
-
-            </td>
-            <td class="job-info__actions-item-column" (click)="startJob()">
-                <img src="assets/print.svg" class="job-info__actions-item job-info__actions-item-3" /> <br>
-                print
-            </td>
-        </tr>
-    </table>
+    <img src="assets/heat.svg" class="job-info__actions-item job-info__actions-item-heat" (click)="preheat()" /> <br />
+    <img src="assets/print.svg" class="job-info__actions-item job-info__actions-item-print" (click)="startJob()" />
+    <br />
+    <div class="job-info__print-details">
+        <fa-icon [icon]="['fas', 'clock']" class="job-info__print-details-icon"></fa-icon>
+        <span
+            class="job-info__print-details-value">{{ job.estimatedPrintTime.value }}{{ job.estimatedPrintTime.unit }}</span>
+        <span class="job-info__print-details-finish-state">
+            - will finish ~{{ job.estimatedEndTime }}
+        </span>
+        <br />
+        <fa-icon [icon]="['fas', 'dharmachakra']" class="job-info__print-details-icon"></fa-icon>
+        <span class="job-info__print-details-value">
+            {{ job.filamentAmount }}g
+        </span>
+        <span class="job-info__print-details-finish-state">
+            <!-- TODO Once Filament Manager is up and working either display costs here or filament left-->
+            filament will be used
+        </span>
+    </div>
 </div>
 <div class="job-info__no-job" *ngIf="!job && isFileLoaded()">
     loading info ...

src/app/job-status/job-status.component.scss

@@ -56,7 +56,7 @@
     }
 
     &__file-loaded>.job-info__filename {
-        width: 77vw;
+        font-size: 5vw;
     }
 
     &__preview {
@@ -69,29 +69,39 @@
     }
 
     &__actions {
-        float: right;
-        margin-top: 0vh;
-        overflow: visible;
-        width: 63vw;
-        margin-right: 11vw;
-        margin-bottom: 2vh;
-
         &-item {
-            width: 7vw;
-            padding: 0 2vw;
-
+            float: right;
 
-            &-column {
-                font-size: 3vw;
-                text-align: center;
-                width: 33.3%;
-                font-weight: 500;
+            &-heat {
+                width: 5.5vw;
+                margin: -13vh 7vw 0 0;
             }
 
-            &-3 {
-                width: 8.7vw;
-                margin-bottom: -1.6vh;
+            &-print {
+                width: 11vw;
+                margin: -7vh 5vw 0 0;
             }
         }
     }
+
+    &__print-details {
+        width: 63vw;
+        margin-top: -17vh;
+        margin-bottom: 1.5vh;
+
+        &-icon {
+            padding-right: 2vw;
+            font-size: 3vw;
+            vertical-align: .8vh;
+        }
+
+        &-value {
+            padding-bottom: 3vh;
+            display: inline-flex;
+        }
+
+        &-finish-state {
+            font-size: 2.6vw;
+        }
+    }
 }

src/app/job-status/job-status.component.ts

@@ -29,7 +29,7 @@ export class JobStatusComponent implements OnInit, OnDestroy {
   }
 
   public preheat(): void {
-    this.notificationService.setError('Operation not yet supported', 'sorry about that one ... will come in the future!');
+    this.jobService.preheat();
   }
 
   public cancelLoadedFile(): void {

src/app/job.service.ts

@@ -45,6 +45,11 @@ export class JobService {
                   value: this.service.convertSecondsToHours(data.progress.printTime),
                   unit: 'h'
                 },
+                estimatedPrintTime: {
+                  value: this.service.convertSecondsToHours(data.job.estimatedPrintTime),
+                  unit: 'h'
+                },
+                estimatedEndTime: this.calculateEndTime(data.job.estimatedPrintTime),
               };
             }
             observer.next(job);
@@ -137,6 +142,27 @@ export class JobService {
       }
     );
   }
+
+  public preheat(): void {
+    if (this.httpPOSTRequest) {
+      this.httpPOSTRequest.unsubscribe();
+    }
+    const preheatPayload: JobCommand = {
+      command: 'preheat'
+    };
+    this.httpPOSTRequest = this.http.post(this.configService.getURL('plugin/preheat'), preheatPayload, this.configService.getHTTPHeaders())
+      .subscribe(
+        () => null, (error: HttpErrorResponse) => {
+          this.notificationService.setError('Can\'t preheat printer!', error.message);
+        }
+      );
+  }
+
+  private calculateEndTime(duration: number): string {
+    const date = new Date();
+    date.setSeconds(date.getSeconds() + duration);
+    return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;
+  }
 }
 
 interface Duration {
@@ -151,4 +177,6 @@ export interface Job {
   filamentAmount: number;
   timeLeft: Duration;
   timePrinted: Duration;
+  estimatedPrintTime: Duration;
+  estimatedEndTime: string;
 }