From e86349802c5e657e23d58b24914874118b5a641e Mon Sep 17 00:00:00 2001 From: Giles Thompson Date: Fri, 17 Nov 2023 23:53:12 +1300 Subject: [PATCH] chore(demo upload): convert to gjs --- website/app/components/demo-upload.gjs | 207 +++++++++++++++++++++++++ website/app/components/demo-upload.hbs | 97 ------------ website/app/components/demo-upload.js | 102 ------------ 3 files changed, 207 insertions(+), 199 deletions(-) create mode 100644 website/app/components/demo-upload.gjs delete mode 100644 website/app/components/demo-upload.hbs delete mode 100644 website/app/components/demo-upload.js diff --git a/website/app/components/demo-upload.gjs b/website/app/components/demo-upload.gjs new file mode 100644 index 00000000..8e737069 --- /dev/null +++ b/website/app/components/demo-upload.gjs @@ -0,0 +1,207 @@ +import Component from '@glimmer/component'; +import { service } from '@ember/service'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; +import { task, timeout } from 'ember-concurrency'; +import { FileState } from 'ember-file-upload'; +import FileDropzone from 'ember-file-upload/components/file-dropzone'; +import fileQueue from 'ember-file-upload/helpers/file-queue'; +import { onloadstart, onprogress, onloadend } from 'ember-file-upload/internal'; +import { on } from '@ember/modifier'; + +// Values in kilobits per second (kbps) +const UPLOAD_RATES = { + 'Disconnected - 0 Mbps': 0, + 'Very slow - 0.1 Mbps': 100, + 'Slow 3G - 0.4 Mbps': 400, + 'Fast 3G - 0.675 Mbps': 675, + 'ADSL - 1.5 Mbps': 1_500, + '4G/LTE - 50 Mbps': 50_000, + 'Fast Fibre - 100 Mbps': 100_000, +}; + +const STEP_INTERVAL = 100; // Progress events every 100ms +const STEPS_PER_SECOND = 1_000 / STEP_INTERVAL; +const BYTES_PER_KILOBYTE = 1_024; +const BITS_PER_BYTE = 8; + +const round = (number) => Math.round(number); +const localeNumber = (number) => number.toLocaleString('en-GB'); +const eq = (a, b) => a === b; + +export default class DemoUploadComponent extends Component { + @service fileQueue; + + @tracked files = []; + @tracked uploadRate = UPLOAD_RATES['Fast 3G - 0.675 Mbps']; + + get queue() { + return this.fileQueue.find('demo'); + } + + get bytesPerStep() { + const kilobytesPerSecond = + // Convert to kilobytes + (this.uploadRate / BITS_PER_BYTE) * + // and then to bytes + BYTES_PER_KILOBYTE; + return kilobytesPerSecond / STEPS_PER_SECOND; + } + + @action + setUploadRate(event) { + this.uploadRate = parseInt(event.target.value, 10); + } + + @action + addToQueue(file) { + file.queue = this.queue; + file.state = FileState.Queued; + this.files = [file, ...this.files]; + + this.simulateUpload.perform(file); + } + + @task({ enqueue: true }) + *simulateUpload(file) { + file.state = FileState.Uploading; + + onloadstart( + file, + new ProgressEvent('loadstart', { + lengthComputable: true, + loaded: 0, + total: 0, + }), + ); + + while (file.progress < 100) { + yield timeout(STEP_INTERVAL); + + onprogress( + file, + new ProgressEvent('progress', { + lengthComputable: true, + loaded: file.loaded + this.bytesPerStep, + total: file.size, + }), + ); + } + + onloadend( + file, + new ProgressEvent('loadend', { + lengthComputable: true, + loaded: file.size, + total: file.size, + }), + ); + + file.state = FileState.Uploaded; + file.queue.flush(); + } + + +} diff --git a/website/app/components/demo-upload.hbs b/website/app/components/demo-upload.hbs deleted file mode 100644 index 4fe5e647..00000000 --- a/website/app/components/demo-upload.hbs +++ /dev/null @@ -1,97 +0,0 @@ -
- -
- -{{#let (file-queue name="demo" onFileAdded=this.addToQueue) as |queue|}} - -
- -
- {{#if dropzone.active}} - Drop to upload - {{else if queue.files.length}} - Uploading - {{queue.files.length}} - files. ({{queue.progress}}%) - {{else if dropzone.supported}} - Or drag and drop files here to upload them - {{/if}} - - -
-

Queue

- - - - - - - - - - - - - - - -
- Loaded - - Size - - Progress -
{{this.localeNumber queue.loaded}} bytes{{this.localeNumber queue.size}} bytes{{queue.progress}}%
-
-{{/let}} - -
-

Files

- - - - - - - - - - - - - {{#each this.files as |file|}} - - - - - - - - - {{/each}} - -
- Name - - Type - - Size - - Source - - State - - Progress -
{{file.name}}{{file.type}}{{this.localeNumber file.size}} bytes{{file.source}}{{file.state}}{{this.round file.progress}}
-
\ No newline at end of file diff --git a/website/app/components/demo-upload.js b/website/app/components/demo-upload.js deleted file mode 100644 index 8443e353..00000000 --- a/website/app/components/demo-upload.js +++ /dev/null @@ -1,102 +0,0 @@ -import Component from '@glimmer/component'; -import { service } from '@ember/service'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -import { task, timeout } from 'ember-concurrency'; -import { FileState } from 'ember-file-upload'; -import { onloadstart, onprogress, onloadend } from 'ember-file-upload/internal'; - -// Values in kilobits per second (kbps) -const UPLOAD_RATES = { - 'Disconnected - 0 Mbps': 0, - 'Very slow - 0.1 Mbps': 100, - 'Slow 3G - 0.4 Mbps': 400, - 'Fast 3G - 0.675 Mbps': 675, - 'ADSL - 1.5 Mbps': 1_500, - '4G/LTE - 50 Mbps': 50_000, - 'Fast Fibre - 100 Mbps': 100_000, -}; - -const STEP_INTERVAL = 100; // Progress events every 100ms -const STEPS_PER_SECOND = 1_000 / STEP_INTERVAL; -const BYTES_PER_KILOBYTE = 1_024; -const BITS_PER_BYTE = 8; - -export default class DemoUploadComponent extends Component { - @service fileQueue; - - @tracked files = []; - @tracked uploadRate = UPLOAD_RATES['Fast 3G - 0.675 Mbps']; - - UPLOAD_RATES = UPLOAD_RATES; - - get queue() { - return this.fileQueue.find('demo'); - } - - get bytesPerStep() { - const kilobytesPerSecond = - // Convert to kilobytes - (this.uploadRate / BITS_PER_BYTE) * - // and then to bytes - BYTES_PER_KILOBYTE; - return kilobytesPerSecond / STEPS_PER_SECOND; - } - - round = (number) => Math.round(number); - localeNumber = (number) => number.toLocaleString('en-GB'); - eq = (a, b) => a === b; - - @action - setUploadRate(event) { - this.uploadRate = parseInt(event.target.value, 10); - } - - @action - addToQueue(file) { - file.queue = this.queue; - file.state = FileState.Queued; - this.files = [file, ...this.files]; - - this.simulateUpload.perform(file); - } - - @task({ enqueue: true }) - *simulateUpload(file) { - file.state = FileState.Uploading; - - onloadstart( - file, - new ProgressEvent('loadstart', { - lengthComputable: true, - loaded: 0, - total: 0, - }), - ); - - while (file.progress < 100) { - yield timeout(STEP_INTERVAL); - - onprogress( - file, - new ProgressEvent('progress', { - lengthComputable: true, - loaded: file.loaded + this.bytesPerStep, - total: file.size, - }), - ); - } - - onloadend( - file, - new ProgressEvent('loadend', { - lengthComputable: true, - loaded: file.size, - total: file.size, - }), - ); - - file.state = FileState.Uploaded; - file.queue.flush(); - } -}