feat: implement temporary progressbar

- implement UI feature to trigger download asset progress bar
- UI design is temporary

Author: ZanzyTHEbar

GUI/ETVR/src/components/ProgessBar/index.tsx

@@ -0,0 +1,27 @@
+import { Progress } from '@kobalte/core'
+import { Show } from 'solid-js'
+import './style.css'
+
+interface IProgressBarProps {
+    progress: number
+    msg: string
+    show: boolean
+}
+
+export const ProgressBar = (props: IProgressBarProps) => {
+    return (
+        <Show when={props.show}>
+            <div class="fixed bottom-0 right-0">
+                <Progress.Root value={props.progress} class="progress">
+                    <div class="progress__label-container">
+                        <Progress.Label class="progress__label">{props.msg}</Progress.Label>
+                        <Progress.ValueLabel class="progress__value-label" />
+                    </div>
+                    <Progress.Track class="progress__track">
+                        <Progress.Fill class="progress__fill" />
+                    </Progress.Track>
+                </Progress.Root>
+            </div>
+        </Show>
+    )
+}

GUI/ETVR/src/components/ProgessBar/style.css

@@ -0,0 +1,33 @@
+.progress {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 300px;
+}
+
+.progress__label-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.progress__label,
+.progress__value-label {
+    color: hsl(240 4% 16%);
+    font-size: 14px;
+}
+
+.progress__track {
+    height: 10px;
+    background-color: hsl(240 6% 90%);
+}
+
+.progress__fill {
+    background-color: hsl(200 98% 39%);
+    height: 100%;
+    width: var(--kb-progress-fill-width);
+    transition: width 250ms linear;
+}
+
+.progress__fill[data-progress="complete"] {
+    background-color: #16a34a;
+}

GUI/ETVR/src/components/WebSerial/index.tsx

@@ -17,11 +17,11 @@ const WebSerial = () => {
 
     createEffect(() => {
         appDataDir().then((appDataDirPath) => {
-            console.log('appDataDirPath', appDataDirPath)
+            //console.log('[WebSerial]: appDataDirPath', appDataDirPath)
             join(appDataDirPath, 'manifest.json').then((manifestfilePath) => {
-                console.log('manifestfilePath', manifestfilePath)
+                //console.log('[WebSerial]: manifestfilePath', manifestfilePath)
                 const url = convertFileSrc(manifestfilePath)
-                console.log('url', url)
+                //console.log('[WebSerial]: url', url)
                 setManifest(url)
             })
         })

GUI/ETVR/src/pages/appSettings/index.tsx

@@ -1,8 +1,10 @@
+import { ProgressBar } from '@components/ProgessBar'
 import WebSerial from '@components/WebSerial'
+import { progressBar } from '@src/store/ui/selectors'
 import { useGHRelease } from '@utils/hooks/api/useGHReleases'
 
 const AppSettings = () => {
-    const { data, downloadAsset } = useGHRelease()
+    const downloadAsset = useGHRelease()
     return (
         <div class="flex justify-center items-center content-center flex-col pt-[100px] text-white">
             Coming Soon
@@ -12,6 +14,11 @@ const AppSettings = () => {
                 Download Release Asset
             </button>
             <WebSerial />
+            <ProgressBar
+                progress={progressBar()?.progress as number}
+                msg={progressBar()?.msg as string}
+                show={progressBar()?.show as boolean}
+            />
         </div>
     )
 }

GUI/ETVR/src/store/api/ghAPI.ts

@@ -4,7 +4,7 @@ import { RESTStatus } from './restAPI'
 
 export interface IGHAsset {
     name: string
-    url: string
+    browser_download_url: string
 }
 
 export interface IGHRest {

GUI/ETVR/src/store/ui/selectors.ts

@@ -10,3 +10,4 @@ export const showCameraView = createMemo(() => uiState().showCameraView)
 export const notifications = createMemo(() => uiState().notifications)
 export const notificationsType = createMemo(() => uiState().notificationsType)
 export const hideHeaderButtons = createMemo(() => uiState().hideHeaderButtons)
+export const progressBar = createMemo(() => uiState().progressBar)

GUI/ETVR/src/store/ui/ui.ts

@@ -8,6 +8,12 @@ interface IMenuOpen {
     y: number
 }
 
+interface IProgressBar {
+    progress: number
+    msg: string
+    show: boolean
+}
+
 export interface INewMenu {
     children: JSXElement
     ref: HTMLElement | null
@@ -30,6 +36,7 @@ export interface IUiStore {
     notifications?: ToasterStore<string>
     notificationsType?: ENotificationType
     hideHeaderButtons: boolean
+    progressBar?: IProgressBar
 }
 
 export const defaultState = {
@@ -110,4 +117,12 @@ export const setNotificationsType = (type: ENotificationType) => {
     )
 }
 
+export const setProgressBar = (progress: number, msg: string, show: boolean) => {
+    setState(
+        produce((s) => {
+            s.progressBar = { progress, msg, show }
+        }),
+    )
+}
+
 export const uiState = createMemo(() => state)

GUI/ETVR/src/utils/hooks/api/useGHReleases.ts

@@ -2,11 +2,12 @@ import { readTextFile, BaseDirectory, writeTextFile } from '@tauri-apps/api/fs'
 import { getClient, ResponseType } from '@tauri-apps/api/http'
 import { appConfigDir, join } from '@tauri-apps/api/path'
 import { invoke, convertFileSrc } from '@tauri-apps/api/tauri'
-import { createSignal } from 'solid-js'
 import { download } from 'tauri-plugin-upload-api'
-import { RESTStatus } from '@src/store/api/restAPI'
+import { addNotification, ENotificationType, ENotificationAction } from '@hooks/notifications'
 import { setFirmwareAssets, setGHRestStatus, setFirmwareVersion } from '@store/api/ghAPI'
+import { RESTStatus } from '@store/api/restAPI'
 import { ghRESTEndpoint, firmwareAssets, firmwareVersion } from '@store/api/selectors'
+import { setProgressBar } from '@store/ui/ui'
 
 interface IGHRelease {
     data: object
@@ -35,19 +36,38 @@ const getRelease = async (firmware: string) => {
 
     if (firmwareAsset) {
         console.log('[Github Release]: Downloading firmware: ', firmware)
+        console.log('[Github Release]: Firmware URL: ', firmwareAsset)
 
         // parse out the file name from the firmwareAsset.url and append it to the appConfigDirPath
-        const fileName = firmwareAsset.url.split('/')[firmwareAsset.url.split('/').length - 1]
+        const fileName =
+            firmwareAsset.browser_download_url.split('/')[
+                firmwareAsset.browser_download_url.split('/').length - 1
+            ]
         //console.log('[Github Release]: File Name: ', fileName)
         // ${appConfigDirPath}${fileName}
         const path = await join(appConfigDirPath, fileName)
         console.log('[Github Release]: Path: ', path)
         // get the latest release
         const response = await download(
-            firmwareAsset.url,
+            firmwareAsset.browser_download_url,
             path,
-            (progress, total) =>
-                console.log(`[Github Release]: Downloaded ${progress} of ${total} bytes`), // a callback that will be called with the upload progress
+            (progress, total) => {
+                // UI store set prgoress bar to true and set progress
+                const download_percent = Math.round((progress / total) * 100)
+                setProgressBar(download_percent, `Downloading Firmware ${firmware}`, true)
+                console.log(`[Github Release]: Downloaded ${progress} of ${total} bytes`)
+            },
+        )
+        setProgressBar(0, '', false)
+        console.log('[Github Release]: Download Response: ', response)
+
+        addNotification(
+            {
+                title: 'ETVR Firmware Downloaded',
+                message: `Downloaded Firmware ${firmware}`,
+                type: ENotificationType.INFO,
+            },
+            ENotificationAction.OS,
         )
 
         const res = await invoke('unzip_archive', {
@@ -95,7 +115,6 @@ const getRelease = async (firmware: string) => {
             console.log('[Github Release]: Manifest: ', config_json)
             return
         }
-        return response
     }
 }
 
@@ -105,47 +124,41 @@ const getRelease = async (firmware: string) => {
  * @returns  {function} downloadAsset - The function that will download the asset from the github release endpoint
  */
 export const useGHRelease = () => {
-    const [data, setData] = createSignal({})
     const downloadAsset = async (firmware: string) => {
         const response = await getRelease(firmware)
-
-        if (typeof response === 'string') {
-            setGHRestStatus(RESTStatus.ACTIVE)
-            const parsedResponse = JSON.parse(response)
-            setData((prevData) => ({
-                ...prevData,
-                ...parsedResponse,
-            }))
-        }
+        console.log('[Github Release]: Download Response: ', response)
     }
-
-    return { data, downloadAsset }
+    return downloadAsset
 }
 
 const setGHData = (data: IGHRelease, update: boolean) => {
     setFirmwareVersion(data['name'])
     const assets = data['assets']
     const download_urls = assets.map((asset) => asset.browser_download_url)
+
     const firmware_assets = assets.map((asset) => asset.name)
 
     // split the firmware_assets array of strings on the first dash and return the first element of the array
     const boardName = firmware_assets.map((asset) => asset.split('-')[0])
 
     // set the board name in the store
     for (let i = 0; i < boardName.length; i++) {
-        setFirmwareAssets({ name: boardName[i], url: download_urls[i] })
+        //console.log('[Github Release]: Board Name: ', boardName[i])
+        //console.log('[Github Release]: URLs: ', download_urls[i])
+        setFirmwareAssets({ name: boardName[i], browser_download_url: download_urls[i] })
     }
 
     if (update) {
-        // parse out the assets and the version from the ghRestState
-        // write the config file
-        const config = {
-            version: firmwareVersion(),
-            assets: firmwareAssets(),
-        }
-        writeTextFile('config.json', JSON.stringify(config), {
-            dir: BaseDirectory.AppConfig,
-        })
+        writeTextFile(
+            'config.json',
+            JSON.stringify({
+                version: firmwareVersion(),
+                assets: firmwareAssets(),
+            }),
+            {
+                dir: BaseDirectory.AppConfig,
+            },
+        )
             .then(() => {
                 console.log(
                     update

GUI/ETVR/src/utils/hooks/notifications/index.ts

@@ -52,3 +52,6 @@ export const NotificationsType = (
             return callbackApp()
     }
 }
+
+// export imported enum
+export { ENotificationType, ENotificationAction }