feat(FE): implement building block for encoding

src/components/OpenActivity.vue

@@ -46,7 +46,14 @@ import { Summary } from '@/spec/summary'
                 :isWebAssemblySupported="isWebAssemblySupported"
               >
               </TheNavigatorInput>
-              <div style="font-size: 0.8em" class="pt-1">Supported files: *.fit, *.gpx, *.tcx</div>
+              <Transition>
+                <div style="font-size: 0.8em" class="pt-1">
+                  <span v-if="isActivityServiceReady"> Supported files: *.fit, *.gpx, *.tcx </span>
+                  <span v-else>
+                    Instantiating WebAssembly <i class="fas fa-spinner fa-spin"></i>
+                  </span>
+                </div>
+              </Transition>
             </div>
             <div class="mb-3" v-if="isActivityFileReady">
               <TheSummary
@@ -286,6 +293,7 @@ import { Summary } from '@/spec/summary'
 
 <script lang="ts">
 import { ActivityFile, Lap, Record, SPORT_GENERIC, Session } from '@/spec/activity'
+import { DecodeResult, EncodeResult, ManufacturerListResult } from '@/spec/activity-service'
 import { Feature } from 'ol'
 import { GeoJSON } from 'ol/format'
 import { shallowRef } from 'vue'
@@ -297,24 +305,6 @@ if (isWebAssemblySupported == false) {
   alert('Sorry, it appears that your browser does not support WebAssembly :(')
 }
 
-class Result {
-  err: string | null = null
-  activities: Array<ActivityFile>
-  decodeTook: number
-  serializationTook: number
-  totalElapsed: number
-
-  constructor(json?: any) {
-    const casted = json as Result
-
-    this.err = casted?.err
-    this.activities = casted?.activities
-    this.decodeTook = casted?.decodeTook
-    this.serializationTook = casted?.serializationTook
-    this.totalElapsed = casted?.totalElapsed
-  }
-}
-
 // shallowRef
 const sessions = shallowRef(new Array<Session>())
 const activities = shallowRef(new Array<ActivityFile>())
@@ -330,19 +320,20 @@ const selectedSessions = shallowRef(new Array<Session>())
 const selectedLaps = shallowRef(new Array<Lap>())
 const selectedFeatures = shallowRef(new Array<Feature>())
 const selectedGraphRecords = shallowRef(new Array<Record>())
+const manufacturerList = shallowRef(new ManufacturerListResult())
 
 export default {
   data() {
     return {
       loading: false,
-      decodeWorker: new Worker(new URL('@/workers/activity-service.ts', import.meta.url), {
+      activityService: new Worker(new URL('@/workers/activity-service.ts', import.meta.url), {
         type: 'module'
       }),
-      decodeBeginTimestamp: 0,
       sessionSelected: NONE,
       summary: new Summary(),
       hoveredRecord: new Record(),
-      hoveredRecordFreeze: new Boolean()
+      hoveredRecordFreeze: new Boolean(),
+      isActivityServiceReady: false
     }
   },
   computed: {
@@ -450,17 +441,33 @@ export default {
 
       Promise.all(promisers)
         .then((arr) => {
-          this.decodeBeginTimestamp = new Date().getTime()
           this.loading = true
-          this.decodeWorker.postMessage(arr)
+          this.activityService.postMessage({ type: 'decode', input: arr })
         })
         .catch((e: string) => {
           console.log(e)
           alert(e)
         })
     },
-    decodeWorkerOnMessage(e: MessageEvent) {
-      const result = new Result(e.data)
+    activityServiceOnMessage(e: MessageEvent) {
+      const [type, result, elapsed] = [e.data.type, e.data.result, e.data.elapsed]
+      switch (type) {
+        case 'isReady':
+          this.isActivityServiceReady = true
+          break
+        case 'decode':
+          this.decodeHandler(result, elapsed)
+          break
+        case 'encode':
+          this.encodeHandler(result, elapsed)
+          break
+        case 'manufacturerList':
+          this.manufacturerListHandler(result)
+          break
+      }
+    },
+    decodeHandler(result: DecodeResult, elapsed: number) {
+      result = new DecodeResult(result)
       if (result.err != null) {
         console.error(`Decode: ${result.err}`)
         alert(`Decode: ${result.err}`)
@@ -469,23 +476,34 @@ export default {
       }
 
       // Instrumenting...
-      const totalDuration = new Date().getTime() - this.decodeBeginTimestamp
       console.group('Decoding:')
       console.group('Spent on WASM:')
       console.debug('Decode took:\t\t', result.decodeTook, 'ms')
       console.debug('Serialization took:\t', result.serializationTook, 'ms')
       console.debug('Total elapsed:\t\t', result.totalElapsed, 'ms')
       console.groupEnd()
-      console.debug('Interop WASM to JS:\t', totalDuration - result.totalElapsed, 'ms')
-      console.debug('Total elapsed:\t\t', totalDuration, 'ms')
+      console.debug('Interop WASM to JS:\t', elapsed - result.totalElapsed, 'ms')
+      console.debug('Total elapsed:\t\t', elapsed, 'ms')
       console.groupEnd()
 
       requestAnimationFrame(() => {
         this.preprocessing(result)
         this.scrollTop()
       })
     },
-    preprocessing(result: Result) {
+    encodeHandler(result: EncodeResult, elapsed: number) {
+      result = new EncodeResult(result)
+      if (result.err != null) {
+        console.error(`Encode: ${result.err}`)
+        alert(`Encode: ${result.err}`)
+        this.loading = false
+        return
+      }
+    },
+    manufacturerListHandler(result: ManufacturerListResult) {
+      manufacturerList.value = new ManufacturerListResult(result)
+    },
+    preprocessing(result: DecodeResult) {
       console.time('Preprocessing')
 
       activities.value = result.activities
@@ -756,7 +774,9 @@ export default {
   },
   mounted() {
     document.getElementById('fileInput')?.addEventListener('change', this.fileInputEventListener)
-    this.decodeWorker.onmessage = this.decodeWorkerOnMessage
+    this.activityService.onmessage = this.activityServiceOnMessage
+    this.activityService.postMessage({ type: 'isReady' })
+    this.activityService.postMessage({ type: 'manufacturerList' })
     this.selectSession(this.sessionSelected)
   }
 }

src/spec/activity-service.ts

@@ -0,0 +1,73 @@
+import type { ActivityFile } from './activity'
+
+export class DecodeResult {
+  err: string | null = null
+  activities: Array<ActivityFile>
+  decodeTook: number
+  serializationTook: number
+  totalElapsed: number
+
+  constructor(json?: any) {
+    const casted = json as DecodeResult
+
+    this.err = casted?.err
+    this.activities = casted?.activities
+    this.decodeTook = casted?.decodeTook
+    this.serializationTook = casted?.serializationTook
+    this.totalElapsed = casted?.totalElapsed
+  }
+}
+
+export class EncodeResult {
+  err: string | null = null
+  encodeTook: number
+  serializationTook: number
+  totalElapsed: number
+  fileName: string
+  fileType: string
+  fileBytes: Uint8Array
+
+  constructor(data?: any) {
+    const casted = data as EncodeResult
+    this.err = casted?.err
+    this.encodeTook = casted?.encodeTook
+    this.serializationTook = casted?.serializationTook
+    this.totalElapsed = casted?.totalElapsed
+    this.fileName = casted?.fileName
+    this.fileType = casted?.fileType
+    this.fileBytes = casted?.fileBytes
+  }
+}
+
+export class ManufacturerListResult {
+  manufacturers: Manufacturer[] = []
+
+  constructor(data?: any) {
+    const casted = data as ManufacturerListResult
+    this.manufacturers = casted?.manufacturers
+  }
+}
+
+export class Manufacturer {
+  id: number = 0
+  name: string = ''
+  products: Product[] = []
+
+  constructor(data?: any) {
+    const casted = data as Manufacturer
+    this.id = casted?.id
+    this.name = casted?.name
+    this.products = casted?.products
+  }
+}
+
+export class Product {
+  id: number = 0
+  name: string = ''
+
+  constructor(data?: any) {
+    const casted = data as Product
+    this.id = casted?.id
+    this.name = casted?.name
+  }
+}

src/workers/activity-service.ts

@@ -2,7 +2,42 @@ import { activityService } from '@/workers/wasm-services'
 
 onmessage = async (e) => {
   await activityService
-  // @ts-ignore
-  const result = decode(e.data)
-  postMessage(result)
+
+  const begin = new Date()
+
+  switch (e.data.type) {
+    case 'isReady':
+      postMessage({ type: e.data.type })
+      break
+    case 'decode': {
+      // @ts-ignore
+      const result = decode(e.data.input)
+      postMessage({
+        type: e.data.type,
+        result: result,
+        elapsed: new Date().getTime() - begin.getTime()
+      })
+      break
+    }
+    case 'encode': {
+      // @ts-ignore
+      const result = encode(e.data.input)
+      postMessage({
+        type: e.data.type,
+        result: result,
+        elapsed: new Date().getTime() - begin.getTime()
+      })
+      break
+    }
+    case 'manufacturerList': {
+      // @ts-ignore
+      const manufacturers = manufacturerList(e.data.input)
+      postMessage({
+        type: e.data.type,
+        result: manufacturers,
+        elapsed: new Date().getTime() - begin.getTime()
+      })
+      break
+    }
+  }
 }