From f067aab44cf3f6012b82bfe67946397c7b638f04 Mon Sep 17 00:00:00 2001
From: Chakib Benziane <chakib.benz@gmail.com>
Date: Sun, 17 Mar 2019 19:24:24 +0100
Subject: [PATCH] worker thread interface

---
 .eslintrc.js           |  5 ++++-
 src/App.vue            | 21 ++++++++++++++++++
 src/index.js           |  4 +++-
 src/upload.vue         | 50 ++++++++++++++++++++++++++++++++++++++++++
 src/worker.js          | 28 +++++++++++++++++++++++
 src/workerInterface.js | 33 ++++++++++++++++++++++++++++
 6 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 src/App.vue
 create mode 100644 src/upload.vue
 create mode 100644 src/worker.js
 create mode 100644 src/workerInterface.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 21486dc..63eaabc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,5 +4,8 @@ module.exports = {
     extends: [
         'eslint:recommended',
         'plugin:vue/essential'
-    ]
+    ],
+    rules: {
+        'no-console': 'off'
+    }
 }
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..b70f273
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,21 @@
+<template>
+    <div id="app">
+        <upload></upload>
+    </div>
+</template>
+
+<script charset="utf-8">
+import Upload from './upload.vue';
+
+export default {
+    name: 'app',
+    data() {
+        return {
+            msg: 'Hello World'
+        }
+    },
+    components: {
+        Upload,
+    }
+}
+</script>
diff --git a/src/index.js b/src/index.js
index 9fc8cdb..6e79749 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,8 +2,10 @@ import './styles/index.css';
 
 import Vue from 'vue';
 import App from './App.vue';
+import GetWorker from './workerInterface.js'
 
-new Vue({
+
+window.app = new Vue({
     el: '#app',
     template: '<App/>',
     components: { App }
diff --git a/src/upload.vue b/src/upload.vue
new file mode 100644
index 0000000..70e2148
--- /dev/null
+++ b/src/upload.vue
@@ -0,0 +1,50 @@
+<template>
+    <div id="upload">
+        <input v-on:change="fileChange($event)" type="file" multiple />
+        <p>selected {{fileCount}} files</p>
+        <ul>
+            <li v-bind:files="files" v-for="file in files">  
+                {{ file.name }}
+                <ul>
+                    <li>size: {{ file.size / 1000 }} kB </li>
+                    <li>type: {{ file.type }} </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script charset="utf-8">
+import GetWorker from './workerInterface.js';
+const w = GetWorker('main');
+
+export default {
+    data(){
+        return {
+            fileCount: 0,
+            files: []
+        }
+    },
+    methods: {
+        fileChange(event) {
+            // reset
+            this.files = []
+
+
+            console.log("change")
+            this.fileCount = event.target.files.length
+            this.files = event.target.files
+
+            // Get sha256 of files
+            for (let file of this.files) {
+                w.post({
+                    msg: 'file-sha256',
+                    payload: file
+                })
+
+            }
+        }
+    }
+}
+
+</script>
diff --git a/src/worker.js b/src/worker.js
new file mode 100644
index 0000000..2663f2f
--- /dev/null
+++ b/src/worker.js
@@ -0,0 +1,28 @@
+//This worker will be used for cryptographic, long running and API calls
+//to keep the UI free
+//
+const name = 'main'
+
+function getSHA256(file){
+    console.log('getting sha 256 for ');
+    console.log(file);
+
+}
+
+onmessage = function(e) {
+
+    switch (e.data.msg) {
+        case 'init':
+            console.log(`initialized ${name} worker`);
+            break;
+
+        case 'file-sha256':
+            getSHA256(e.data.payload)
+            break;
+
+        default:
+            console.log(`${name} worker: need {msg: "message type", ... }`)
+
+    }
+
+}
diff --git a/src/workerInterface.js b/src/workerInterface.js
new file mode 100644
index 0000000..62d2f08
--- /dev/null
+++ b/src/workerInterface.js
@@ -0,0 +1,33 @@
+
+class Worker {
+    constructor(script) {
+        if (window.Worker) {
+            this.worker = new window.Worker(script);
+
+            this.onmessage = this.worker.onmessage;
+        }
+    }
+
+    post(m) {
+        this.worker.postMessage(m)
+    }
+}
+
+const workers = {
+    'main': new Worker('./worker.js')
+}
+
+
+
+
+
+function getWorker(name){
+    if (name in workers) {
+        return workers[name];
+    } else {
+        console.log(`unknown worker ${name}`)
+    }
+}
+
+
+export default getWorker;