From b255f0921aad0807a3269c0be9e63b0865517f6c Mon Sep 17 00:00:00 2001 From: UnchartedBull Date: Tue, 18 Feb 2020 11:43:57 +0100 Subject: [PATCH 1/6] Started working --- src/app/files.service.ts | 3 --- src/app/files/files.component.ts | 34 ++++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/src/app/files.service.ts b/src/app/files.service.ts index 49ecdb517..59cdae68d 100644 --- a/src/app/files.service.ts +++ b/src/app/files.service.ts @@ -73,9 +73,6 @@ export class FilesService { } }); data = null; - folder.sort((a, b): number => - a.type === b.type ? (a.name > b.name ? 1 : -1) : a.type === 'folder' ? -1 : 1, - ); resolve(folder); }, diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts index 1b19c3f5a..7421b4994 100644 --- a/src/app/files/files.component.ts +++ b/src/app/files/files.component.ts @@ -64,6 +64,40 @@ export class FilesComponent { }, 300); } + public sortFolder(by: 'name' | 'date' | 'size', order: 'asc' | 'dsc'): void { + switch (by) { + case 'name': { + this.folderContent.sort((a, b): number => + a.type === b.type ? (a.name > b.name ? 1 : -1) : a.type === 'folder' ? -1 : 1, + ); + } + case 'date': { + this.sortFolder('name', order); + this.folderContent.sort((a, b): number => { + if (a.type === b.type && (a as File).type) { + const aFile = (a as unknown) as File; + const bFile = (b as unknown) as File; + return aFile.date > bFile.date ? 1 : -1; + } else { + return 1; + } + }); + } + case 'size': { + this.sortFolder('name', order); + this.folderContent.sort((a, b): number => { + if (a.type === b.type && (a as File).type) { + const aFile = (a as unknown) as File; + const bFile = (b as unknown) as File; + return aFile.size > bFile.size ? 1 : -1; + } else { + return 1; + } + }); + } + } + } + public closeDetails(): void { const fileDOMElement = document.getElementById('fileDetailView'); fileDOMElement.style.opacity = '0'; From 2e598410d3fb4befe36357d6361023504287f63a Mon Sep 17 00:00:00 2001 From: UnchartedBull Date: Thu, 20 Feb 2020 18:56:51 +0100 Subject: [PATCH 2/6] Sorting by name works --- main.js | 1 - src/app/files/files.component.ts | 17 +++++++++++++++-- src/app/main-screen/main-screen.component.html | 5 +++-- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index 35971f774..116662177 100644 --- a/main.js +++ b/main.js @@ -31,7 +31,6 @@ function createWindow() { backgroundColor: '#353b48', webPreferences: { nodeIntegration: true, - webSecurity: false, }, icon: path.join(__dirname, 'src/assets/icon.png'), }); diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts index 7421b4994..cc710bcce 100644 --- a/src/app/files/files.component.ts +++ b/src/app/files/files.component.ts @@ -54,9 +54,11 @@ export class FilesComponent { .then((data): void => { this.folderContent = data; this.currentFolder = folderPath; + this.sortFolder('name', 'dsc'); this.spinner.hide(); }) - .catch(({}): void => { + .catch((err): void => { + console.error(err); this.folderContent = null; this.currentFolder = folderPath; this.spinner.hide(); @@ -68,8 +70,17 @@ export class FilesComponent { switch (by) { case 'name': { this.folderContent.sort((a, b): number => - a.type === b.type ? (a.name > b.name ? 1 : -1) : a.type === 'folder' ? -1 : 1, + a.type === b.type + ? (order === 'asc' + ? a.name > b.name + : a.name < b.name) + ? 1 + : -1 + : a.type === 'folder' + ? -1 + : 1, ); + break; } case 'date': { this.sortFolder('name', order); @@ -82,6 +93,7 @@ export class FilesComponent { return 1; } }); + break; } case 'size': { this.sortFolder('name', order); @@ -94,6 +106,7 @@ export class FilesComponent { return 1; } }); + break; } } } diff --git a/src/app/main-screen/main-screen.component.html b/src/app/main-screen/main-screen.component.html index cbbaaf5b3..217f99806 100644 --- a/src/app/main-screen/main-screen.component.html +++ b/src/app/main-screen/main-screen.component.html @@ -1,11 +1,12 @@ -
+ +
-
+
From 240fbcc2af0de68e226c473b21cf5b387e7ad033 Mon Sep 17 00:00:00 2001 From: UnchartedBull Date: Thu, 20 Feb 2020 19:06:53 +0100 Subject: [PATCH 3/6] size and date working as well --- src/app/files.service.ts | 1 + src/app/files/files.component.ts | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/files.service.ts b/src/app/files.service.ts index 59cdae68d..ce2c94cb5 100644 --- a/src/app/files.service.ts +++ b/src/app/files.service.ts @@ -64,6 +64,7 @@ export class FilesService { type: 'file', path: '/' + fileOrFolder.path, name: fileOrFolder.name, + date: fileOrFolder.date, size: this.service.convertByteToMegabyte(fileOrFolder.size), printTime: this.service.convertSecondsToHours( fileOrFolder.gcodeAnalysis.estimatedPrintTime, diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts index cc710bcce..64a372d4e 100644 --- a/src/app/files/files.component.ts +++ b/src/app/files/files.component.ts @@ -54,7 +54,7 @@ export class FilesComponent { .then((data): void => { this.folderContent = data; this.currentFolder = folderPath; - this.sortFolder('name', 'dsc'); + this.sortFolder('size', 'asc'); this.spinner.hide(); }) .catch((err): void => { @@ -85,12 +85,12 @@ export class FilesComponent { case 'date': { this.sortFolder('name', order); this.folderContent.sort((a, b): number => { - if (a.type === b.type && (a as File).type) { + if (a.type === b.type && a.type === 'file') { const aFile = (a as unknown) as File; const bFile = (b as unknown) as File; - return aFile.date > bFile.date ? 1 : -1; + return (order === 'asc' ? aFile.date > bFile.date : aFile.date < bFile.date) ? 1 : -1; } else { - return 1; + return a.type === 'folder' ? -1 : 1; } }); break; @@ -101,7 +101,7 @@ export class FilesComponent { if (a.type === b.type && (a as File).type) { const aFile = (a as unknown) as File; const bFile = (b as unknown) as File; - return aFile.size > bFile.size ? 1 : -1; + return (order === 'asc' ? aFile.size > bFile.size : aFile.size < bFile.size) ? 1 : -1; } else { return 1; } From 5efe09371d6424ff03df50629fecb004b2790679 Mon Sep 17 00:00:00 2001 From: UnchartedBull Date: Thu, 20 Feb 2020 19:16:24 +0100 Subject: [PATCH 4/6] Respect config values --- src/app/config/config.service.ts | 12 ++++++++++-- src/app/files/files.component.ts | 7 ++++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app/config/config.service.ts b/src/app/config/config.service.ts index bf33e5b70..3b58183bb 100644 --- a/src/app/config/config.service.ts +++ b/src/app/config/config.service.ts @@ -211,6 +211,14 @@ export class ConfigService { public getFilamentDensity(): number { return this.config.filament.density; } + + public getDefaultSortingAttribute(): 'name' | 'date' | 'size' { + return this.config.octodash.fileSorting.attribute; + } + + public getDefaultSortingOrder(): 'asc' | 'dsc' { + return this.config.octodash.fileSorting.order; + } } export interface Config { @@ -283,8 +291,8 @@ interface CustomAction { } interface FileSorting { - attribute: string; - order: string; + attribute: 'name' | 'date' | 'size'; + order: 'asc' | 'dsc'; } const schema = { diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts index 64a372d4e..5da2f5d36 100644 --- a/src/app/files/files.component.ts +++ b/src/app/files/files.component.ts @@ -3,6 +3,7 @@ import { Router } from '@angular/router'; import { NgxSpinnerService } from 'ngx-spinner'; import { AppService } from '../app.service'; +import { ConfigService } from '../config/config.service'; import { File, FilesService, Folder } from '../files.service'; import { JobService } from '../job.service'; @@ -22,6 +23,7 @@ export class FilesComponent { private service: AppService, private router: Router, private jobService: JobService, + private configService: ConfigService, ) { this.showLoader(); this.folderContent = []; @@ -54,7 +56,10 @@ export class FilesComponent { .then((data): void => { this.folderContent = data; this.currentFolder = folderPath; - this.sortFolder('size', 'asc'); + this.sortFolder( + this.configService.getDefaultSortingAttribute(), + this.configService.getDefaultSortingOrder(), + ); this.spinner.hide(); }) .catch((err): void => { From d06972a07d5404f813dfc64ea709588fabeb5d10 Mon Sep 17 00:00:00 2001 From: UnchartedBull Date: Thu, 20 Feb 2020 22:04:36 +0100 Subject: [PATCH 5/6] Sorting UI --- src/app/files/files.component.html | 56 +++++++++++- src/app/files/files.component.scss | 90 +++++++++++++++++++ src/app/files/files.component.ts | 30 +++++-- .../main-screen/main-screen.component.html | 5 +- src/app/settings/settings.component.html | 2 +- src/assets/refresh.svg | 1 - src/assets/sort.svg | 1 + 7 files changed, 173 insertions(+), 12 deletions(-) delete mode 100644 src/assets/refresh.svg create mode 100644 src/assets/sort.svg diff --git a/src/app/files/files.component.html b/src/app/files/files.component.html index d8b031416..74f92704f 100644 --- a/src/app/files/files.component.html +++ b/src/app/files/files.component.html @@ -6,8 +6,8 @@ - - refresh + + sort @@ -107,3 +107,55 @@ can't load file.
+ +
+
+ + sort files + + + + + +
+ sort by
+
+ + + Name +

+
+ + + Date +

+
+ + + Size +

+ 		+ order
+
+ + + Ascending +

+
+ + + Descending +

+
+
+
\ No newline at end of file diff --git a/src/app/files/files.component.scss b/src/app/files/files.component.scss index 1dd71f189..e5088b3e6 100755 --- a/src/app/files/files.component.scss +++ b/src/app/files/files.component.scss @@ -264,3 +264,93 @@ } } } + +.sorting { + display: block; + position: fixed; + background-color: rgba(0, 0, 0, .85); + left: 0; + top: 0; + width: 100vw; + height: 100vh; + opacity: 0; + z-index: 10; + transition: opacity ease-in-out .5s; + + &-close { + position: absolute; + right: 1.5vw; + top: 2vh; + width: 4vw; + } + + &-wrapper { + position: fixed; + left: 25vw; + top: 24vh; + width: 50vw; + height: 47vh; + background-color: #353b48; + z-index: 10; + border-radius: 2vw; + padding: 2vh 1.5vw; + box-shadow: 8px 4px 18px 0 rgba(0, 0, 0, 0.75); + } + + &-heading { + display: block; + font-size: 3.5vw; + margin-bottom: 1vh; + font-weight: 500; + } + + &-selection { + padding-left: 4vw; + display: block; + + & td { + width: 30vw; + } + } + + &__checkbox { + position: absolute; + top: 0; + left: 0; + height: 3vw; + width: 3vw; + background-color: transparent; + border: 2px solid #dcdde1; + border-radius: 1vw; + + &-container { + display: inline-block; + position: relative; + user-select: none; + padding-left: 5vw; + height: 4.5vw; + margin-top: 1.4vh; + cursor: pointer; + overflow: visible; + } + + &-checked { + background-color: #2196F3; + width: 1.8vw; + height: 1.8vw; + display: block; + margin-left: .6vw; + margin-top: .6vw; + border-radius: .4vw; + + &-disabled { + background-color: rgba(255, 255, 255, .5) + } + } + + &-descriptor { + font-size: 2.5vw; + vertical-align: 2vh; + } + } +} \ No newline at end of file diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts index 5da2f5d36..ce7ea5fd2 100644 --- a/src/app/files/files.component.ts +++ b/src/app/files/files.component.ts @@ -16,6 +16,9 @@ export class FilesComponent { public currentFolder: string; public folderContent: (File | Folder)[]; public fileDetail: File; + public sortingAttribute: 'name' | 'date' | 'size'; + public sortingOrder: 'asc' | 'dsc'; + public showSorting: boolean = false; public constructor( private filesService: FilesService, @@ -28,6 +31,8 @@ export class FilesComponent { this.showLoader(); this.folderContent = []; this.currentFolder = '/'; + this.sortingAttribute = this.configService.getDefaultSortingAttribute(); + this.sortingOrder = this.configService.getDefaultSortingOrder(); this.openFolder(this.currentFolder); } @@ -56,10 +61,7 @@ export class FilesComponent { .then((data): void => { this.folderContent = data; this.currentFolder = folderPath; - this.sortFolder( - this.configService.getDefaultSortingAttribute(), - this.configService.getDefaultSortingOrder(), - ); + this.sortFolder(this.sortingAttribute, this.sortingOrder); this.spinner.hide(); }) .catch((err): void => { @@ -71,7 +73,7 @@ export class FilesComponent { }, 300); } - public sortFolder(by: 'name' | 'date' | 'size', order: 'asc' | 'dsc'): void { + public sortFolder(by: 'name' | 'date' | 'size' = 'name', order: 'asc' | 'dsc' = 'asc'): void { switch (by) { case 'name': { this.folderContent.sort((a, b): number => @@ -125,6 +127,24 @@ export class FilesComponent { }, 500); } + public openSorting(): void { + this.showSorting = true; + setTimeout((): void => { + const sortingDOMElement = document.getElementById('sortingView'); + sortingDOMElement.style.opacity = '1'; + }, 50); + } + + public closeSorting(): void { + const sortingDOMElement = document.getElementById('sortingView'); + sortingDOMElement.style.opacity = '0'; + this.sortFolder(this.sortingAttribute, this.sortingOrder); + setTimeout((): void => { + sortingDOMElement.style.display = 'none'; + this.showSorting = false; + }, 500); + } + public loadFile(filePath: string): void { setTimeout((): void => { this.filesService.loadFile(filePath); diff --git a/src/app/main-screen/main-screen.component.html b/src/app/main-screen/main-screen.component.html index 217f99806..cbbaaf5b3 100644 --- a/src/app/main-screen/main-screen.component.html +++ b/src/app/main-screen/main-screen.component.html @@ -1,12 +1,11 @@ - -
+
-
+
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 1af2788e1..d46e7ef66 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -325,12 +325,12 @@
  • "joystick" by ProSymbols from thenounproject.com
  • "Settings" by Karan from thenounproject.com
  • "help" by Rainbow Designs from thenounproject.com
    • -
  • "Refresh" by Nawicon from thenounproject.com
  • "Upload" by Nikita Tcherednikov from thenounproject.com
  • "print" by Delta from thenounproject.com
  • "Delete" by Daily icons from thenounproject.com
  • "Heat" by Adrien Coquet from thenounproject.com
  • "cubes" by artworkbean from thenounproject.com
    • +
  • "Sort" by Adrien Coquet from thenounproject.com
    • Special Thanks

    diff --git a/src/assets/refresh.svg b/src/assets/refresh.svg deleted file mode 100644 index 1f760f451..000000000 --- a/src/assets/refresh.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/sort.svg b/src/assets/sort.svg new file mode 100644 index 000000000..e42706d9a --- /dev/null +++ b/src/assets/sort.svg @@ -0,0 +1 @@ + \ No newline at end of file From 66e8e96d61ab9cc4f7d3ee877f483bbf8e4de787 Mon Sep 17 00:00:00 2001 From: UnchartedBull Date: Thu, 20 Feb 2020 22:22:39 +0100 Subject: [PATCH 6/6] update sorting icon --- src/assets/sort.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/sort.svg b/src/assets/sort.svg index e42706d9a..37fc6b477 100644 --- a/src/assets/sort.svg +++ b/src/assets/sort.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file