Skip to content

Commit

Permalink
Add sdcard support (#563)
Browse files Browse the repository at this point in the history 
* show sdcard files in file browser

* allow printing from both local and sdcard

* split local and sdcard files into separate folders

* update variable scope

Co-authored-by: Timon G <timon.gaebelein@icloud.com>
  • Loading branch information
@harleyg321 @UnchartedBull
harleyg321 and UnchartedBull authored Apr 14, 2020
1 parent 924fa34 commit 840d164
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 82 deletions.
96 changes: 67 additions & 29 deletions src/app/files.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,50 +30,84 @@ export class FilesService {
this.httpGETRequest.unsubscribe();
}
this.httpGETRequest = this.http
.get(this.configService.getURL('files/local' + folderPath), this.configService.getHTTPHeaders())
.get(this.configService.getURL('files' + folderPath), this.configService.getHTTPHeaders())
.subscribe(
(data: OctoprintFolderAPI & OctoprintFolderContentAPI): void => {
if ('children' in data) {
data.files = data.children;
delete data.children;
}
const folder: (File | Folder)[] = [];
let localCount = 0;
let sdcardCount = 0;
data.files.forEach((fileOrFolder): void => {
if (fileOrFolder.type === 'folder') {
if (folderPath === '') {
if (fileOrFolder.origin == 'local') {
localCount += fileOrFolder.children.length;
} else {
sdcardCount += fileOrFolder.children.length;
}
}

folder.push(({
type: 'folder',
path: '/' + fileOrFolder.path,
path: '/' + fileOrFolder.origin + '/' + fileOrFolder.path,
name: fileOrFolder.name,
// TODO: Think of a way to retrieve number of children
files: fileOrFolder.children ? fileOrFolder.children.length : '-',
} as unknown) as Folder);
} else if (fileOrFolder.typePath.includes('gcode') && fileOrFolder.origin === 'local') {
if (!fileOrFolder.gcodeAnalysis) {
this.notificationService.setError(
'Corrupted file found!',
`File ${fileOrFolder.name} does not include GCodeAnalysis. Ignoring it for now ...`,
} else if (fileOrFolder.typePath.includes('gcode')) {
let filamentLength = 0;
if (fileOrFolder.gcodeAnalysis) {
_.forEach(fileOrFolder.gcodeAnalysis.filament, (tool): void => {
filamentLength += tool.length;
});
var estimatedPrintTime = this.service.convertSecondsToHours(
fileOrFolder.gcodeAnalysis.estimatedPrintTime,
);
return;
}
let filamentLength = 0;
_.forEach(fileOrFolder.gcodeAnalysis.filament, (tool): void => {
filamentLength += tool.length;
});

if (folderPath === '') {
if (fileOrFolder.origin == 'local') {
localCount += 1;
} else {
sdcardCount += 1;
}
}

folder.push(({
type: 'file',
path: '/' + fileOrFolder.path,
path: '/' + fileOrFolder.origin + '/' + fileOrFolder.path,
name: fileOrFolder.name,
date: fileOrFolder.date,
size: this.service.convertByteToMegabyte(fileOrFolder.size),
printTime: this.service.convertSecondsToHours(
fileOrFolder.gcodeAnalysis.estimatedPrintTime,
),
filamentWeight: this.service.convertFilamentLengthToAmount(filamentLength),
... (fileOrFolder.gcodeAnalysis) ? {
printTime: estimatedPrintTime,
filamentWeight: this.service.convertFilamentLengthToAmount(filamentLength),
} : {},
} as unknown) as File);
}
});
data = null;

if (folderPath === '') {
if (localCount > 0 && sdcardCount > 0) {
folder.length = 0;
folder.push(({
type: 'folder',
path: '/local',
name: 'local',
files: localCount,
} as unknown) as Folder);
folder.push(({
type: 'folder',
path: '/sdcard',
name: 'sdcard',
files: sdcardCount,
} as unknown) as Folder);
}
}

resolve(folder);
},
Expand All @@ -100,21 +134,25 @@ export class FilesService {
this.httpGETRequest.unsubscribe();
}
this.httpGETRequest = this.http
.get(this.configService.getURL('files/local' + filePath), this.configService.getHTTPHeaders())
.get(this.configService.getURL('files' + filePath), this.configService.getHTTPHeaders())
.subscribe(
(data: OctoprintFilesAPI): void => {
let filamentLength = 0;
_.forEach(data.gcodeAnalysis.filament, (tool): void => {
filamentLength += tool.length;
});
if (data.gcodeAnalysis) {
_.forEach(data.gcodeAnalysis.filament, (tool): void => {
filamentLength += tool.length;
});
}
const file = ({
type: 'file',
path: '/' + data.path,
path: '/' + data.origin + '/' + data.path,
name: data.name,
size: this.service.convertByteToMegabyte(data.size),
printTime: this.service.convertSecondsToHours(data.gcodeAnalysis.estimatedPrintTime),
filamentWeight: this.service.convertFilamentLengthToAmount(filamentLength),
date: this.service.convertDateToString(new Date(data.date * 1000)),
... (data.gcodeAnalysis) ? {
date: this.service.convertDateToString(new Date(data.date * 1000)),
printTime: this.service.convertSecondsToHours(data.gcodeAnalysis.estimatedPrintTime),
filamentWeight: this.service.convertFilamentLengthToAmount(filamentLength),
} : {},
thumbnail: data.path.endsWith('.ufp.gcode')
? this.configService
.getURL('plugin/UltimakerFormatPackage/thumbnail/')
Expand Down Expand Up @@ -142,7 +180,7 @@ export class FilesService {
this.httpGETRequest.unsubscribe();
}
this.httpGETRequest = this.http
.get(this.configService.getURL('files/local/' + filePath), this.configService.getHTTPHeaders())
.get(this.configService.getURL('files' + filePath), this.configService.getHTTPHeaders())
.subscribe(
(data: OctoprintFilesAPI): void => {
let thumbnail = data.path.endsWith('.ufp.gcode')
Expand Down Expand Up @@ -170,7 +208,7 @@ export class FilesService {
};
this.httpPOSTRequest = this.http
.post(
this.configService.getURL('files/local' + filePath),
this.configService.getURL('files' + filePath),
loadFileBody,
this.configService.getHTTPHeaders(),
)
Expand All @@ -192,7 +230,7 @@ export class FilesService {
};
this.httpPOSTRequest = this.http
.post(
this.configService.getURL('files/local' + filePath),
this.configService.getURL('files' + filePath),
printFileBody,
this.configService.getHTTPHeaders(),
)
Expand All @@ -209,7 +247,7 @@ export class FilesService {
this.httpDELETERequest.unsubscribe();
}
this.httpDELETERequest = this.http
.delete(this.configService.getURL('files/local' + filePath), this.configService.getHTTPHeaders())
.delete(this.configService.getURL('files' + filePath), this.configService.getHTTPHeaders())
.subscribe(
(): void => null,
(error: HttpErrorResponse): void => {
Expand Down
14 changes: 7 additions & 7 deletions src/app/files/files.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</tr>
</table>
<div class="breadcrumbs">
<fa-icon [icon]="['fas', 'home']" (click)="openFolder('/')" class="breadcrumbs__item-home"></fa-icon>
<fa-icon [icon]="['fas', 'home']" (click)="openFolder(homeFolder)" class="breadcrumbs__item-home"></fa-icon>
<span class="breadcrumbs__item" *ngFor="let folder of currentFolder.split('/')">
<span (click)="openFolder(currentFolder.split(folder)[0] + folder)">
{{ folder }}
Expand All @@ -28,7 +28,7 @@
can't load files ...
</div>

<div *ngIf="folderContent && currentFolder !== '/' && currentFolder !== ''" class="files__object">
<div *ngIf="folderContent && currentFolder !== homeFolder && currentFolder !== ''" class="files__object">
<div (click)="openFolder(currentFolder.substr(0, currentFolder.lastIndexOf('/')))" matRipple
[matRippleUnbounded]="false">
<img src="assets/folder.svg" class="files__icon" />
Expand All @@ -51,9 +51,9 @@
<img src="assets/object.svg" class="files__icon" />
<div class="files__info">
<span class="files__info-value">{{ content.size }}<span class="files__info-unit">mb</span></span>
<span class="files__info-value">{{ content.filamentWeight }}<span
<span class="files__info-value" *ngIf="content.hasOwnProperty('filamentWeight')">{{ content.filamentWeight }}<span
class="files__info-unit">g</span></span>
<span class="files__info-value">{{ content.printTime }}<span class="files__info-unit">h</span></span>
<span class="files__info-value" *ngIf="content.hasOwnProperty('printTime')">{{ content.printTime }}<span class="files__info-unit">h</span></span>
</div>
<span class="files__name">
{{ content.name }}
Expand All @@ -69,13 +69,13 @@
<img src="assets/error.svg" class="file__close" (click)="closeDetails()">
<span class="file__name">{{ fileDetail.name }}</span>
<span class="file__directory">{{ fileDetail.path }}</span>
<span class="file__creation-date">{{ fileDetail.date }}</span>
<span class="file__creation-date" *ngIf="fileDetail.hasOwnProperty('date')">{{ fileDetail.date }}</span>
<img src="{{fileDetail.thumbnail ? fileDetail.thumbnail : 'assets/object.svg'}}" class="file__render"/>
<table class="file__details">
<tr>
<td>{{ fileDetail.size }}<span class="file__details-name">mb</span></td>
<td>{{ fileDetail.printTime }}<span class="file__details-name">h</span></td>
<td>{{ fileDetail.filamentWeight }}<span class="file__details-name">g</span></td>
<td *ngIf="fileDetail.hasOwnProperty('printTime')">{{ fileDetail.printTime }}<span class="file__details-name">h</span></td>
<td *ngIf="fileDetail.hasOwnProperty('filamentWeight')">{{ fileDetail.filamentWeight }}<span class="file__details-name">g</span></td>
</tr>
</table>
<table class="file__actions">
Expand Down
4 changes: 2 additions & 2 deletions src/app/files/files.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,11 +202,11 @@
font-size: 4vw;
font-weight: 500;

&:first-of-type {
&:first-of-type:not(:only-of-type) {
text-align: left;
}

&:last-of-type {
&:last-of-type:not(:only-of-type) {
text-align: right;
}
}
Expand Down
8 changes: 7 additions & 1 deletion src/app/files/files.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export class FilesComponent {
public sortingAttribute: 'name' | 'date' | 'size';
public sortingOrder: 'asc' | 'dsc';
public showSorting: boolean = false;
public homeFolder: string = '/';

public constructor(
private filesService: FilesService,
Expand Down Expand Up @@ -60,7 +61,12 @@ export class FilesComponent {
.getFolder(folderPath)
.then((data): void => {
this.folderContent = data;
this.currentFolder = folderPath;
if (folderPath === '/' && !(data[0].name === 'local' && data[1].name == 'sdcard')) {
this.currentFolder = data[0].path.startsWith('/local') ? '/local' : '/sdcard';
this.homeFolder = this.currentFolder;
} else {
this.currentFolder = folderPath;
}
this.sortFolder(this.sortingAttribute, this.sortingOrder);
this.spinner.hide();
})
Expand Down
36 changes: 20 additions & 16 deletions src/app/job-status/job-status.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@
<img *ngIf="job.thumbnail && showPreview()" class="job-info__progress-preview" [src]="job.thumbnail" />
</div>
<span class="job-info__filename">{{ job.filename }}</span> <br />
<span class="job-info__filament" *ngIf="job.filamentAmount !== null">{{ job.filamentAmount }}g Filament</span>
<br />
<span class="job-info__time"><span *ngIf="job.timeLeft.value !== null"><span
class="job-info__time-left">{{ job.timeLeft.value }}</span>{{ job.timeLeft.unit }} left,</span>
<span class="job-info__filament" *ngIf="job.hasOwnProperty('filamentAmount')">{{ job.filamentAmount }}g Filament</span> <br />
<span class="job-info__time"><span *ngIf="job.hasOwnProperty('timeLeft')"><span
class="job-info__time-left">{{ job.timeLeft.value }}</span>{{ job.timeLeft.unit }} left,</span>
elapsed: {{ job.timePrinted.value }}{{ job.timePrinted.unit }}</span>
</div>
<div class="job-info__file-loaded" *ngIf="job && !isPrinting() && isFileLoaded()" (swipe)="cancelLoadedFile()">
Expand All @@ -33,19 +32,24 @@
</span>
<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 *ngIf="job.hasOwnProperty('estimatedPrintTime') && job.hasOwnProperty('estimatedEndTime')">
<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 />
</span>
<span class="job-info__print-details-finish-state">
filament will be used
<span *ngIf="job.hasOwnProperty('filamentAmount')">
<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">
filament will be used
</span>
</span>
</div>
</div>
Expand Down
Loading

0 comments on commit 840d164

Please sign in to comment.