feat: upload data

.env

@@ -0,0 +1,2 @@
+VITE_BASEURL=https://api.example.com
+VITE_BEARERTOKEN=YOUR_BEARER_TOKEN

src/components/SettingsPrompt/SettingsPrompt.vue

@@ -131,6 +131,7 @@
                             class="mr-4"
                             color="primary"
                             inset
+                            :disabled="true"
                         ></v-switch>
                     </template>
                 </v-list-item>
@@ -140,16 +141,20 @@
 </template>
 
 <script setup lang="ts">
+import { Ref, ref, watch } from 'vue';
 import useNotificationSystem from '@/composables/useNotificationSystem/useNotificationSystem';
 import useClipboard from '@/composables/useClipboard/useClipboard';
 import useTokenGenerator from '@/composables/useTokenGenerator/useTokenGenerator';
-import { Ref, ref, watch } from 'vue';
+import useUploadData from '@/composables/useUploadData/useUploadData';
+import useSession from '@/composables/useSession/useSession';
 
 /**
  * Composables
  */
+const { isSessionActive, startSession, stopSession } = useSession();
 const { writeClipboardText } = useClipboard();
 const { defaultRules, generateValidToken } = useTokenGenerator();
+const { streamData, streamRegexAndCaptureAreaSettings } = useUploadData();
 
 /**
  * Data
@@ -158,9 +163,6 @@ const accessToken = ref('');
 const isAccessTokenValid = ref(false);
 const errorMessage: Ref<string[]> = ref([]);
 const tokenVisibility = ref(false);
-const isSessionActive = ref(false);
-const streamData = ref(false);
-const streamRegexAndCaptureAreaSettings = ref(false);
 
 /**
  * Dialog visibility
@@ -203,29 +205,6 @@ watch(
     }
 );
 
-/**
- * Start the session
- */
-function startSession() {
-    isSessionActive.value = true;
-    // TODO: Start session functionality
-    useNotificationSystem().createNotification({
-        title: 'Session started',
-    });
-}
-
-/**
- * Stop the session
- */
-function stopSession() {
-    isSessionActive.value = false;
-    // TODO: Stop session functionality
-    useNotificationSystem().createNotification({
-        title: 'Session stopped',
-        type: 'info',
-    });
-}
-
 /**
  * Function which will toggle the visibility of the access token
  */

src/composables/useAPI/useAPI.ts

@@ -0,0 +1,80 @@
+import useNotificationSystem from '@/composables/useNotificationSystem/useNotificationSystem';
+
+/**
+ * API usage composable
+ */
+export default function useAPI() {
+    /**
+     * Perform a GET request to the specified API endpoint.
+     * @param {string} endpoint - The API endpoint to fetch data from.
+     * @returns {Promise<object>} A Promise that resolves to the API response.
+     * @throws {Error} If the request fails or the response is not OK.
+     */
+    const get = async (endpoint: string): Promise<object> => {
+        try {
+            const url: string = `${import.meta.env.VITE_BASEURL}/${endpoint}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${import.meta.env.VITE_BEARERTOKEN}`,
+                },
+            });
+
+            if (!response.ok) {
+                useNotificationSystem().createErrorNotification({
+                    title: 'Failed to fetch data',
+                });
+                throw new Error('Failed to fetch data');
+            }
+
+            return await response.json();
+        } catch (error) {
+            useNotificationSystem().createErrorNotification({
+                title: 'Error occurred while fetching data',
+                message: `${error}`,
+            });
+            throw error;
+        }
+    };
+
+    /**
+     * Perform a POST request to the specified API endpoint.
+     * @param {string} endpoint - The API endpoint to post data to.
+     * @param {object} data - The data to be posted to the API.
+     * @returns {Promise<object>} A Promise that resolves to the API response.
+     * @throws {Error} If the request fails or the response is not OK.
+     */
+    const post = async (endpoint: string, data: object): Promise<object> => {
+        try {
+            const url: string = `${import.meta.env.VITE_BASEURL}/${endpoint}`;
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${import.meta.env.VITE_BEARERTOKEN}`,
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (!response.ok) {
+                useNotificationSystem().createErrorNotification({
+                    title: 'Failed to post data',
+                });
+                throw new Error('Failed to post data');
+            }
+
+            return await response.json();
+        } catch (error) {
+            useNotificationSystem().createErrorNotification({
+                title: 'Error occurred while posting data',
+                message: `${error}`,
+            });
+            throw error;
+        }
+    };
+
+    return {
+        get,
+        post,
+    };
+}

src/composables/useSession/useSession.ts

@@ -0,0 +1,34 @@
+import { ref, Ref } from 'vue';
+import useNotificationSystem from '@/composables/useNotificationSystem/useNotificationSystem';
+
+// Reactive variable to track session status
+const isSessionActive: Ref<boolean> = ref(false);
+
+export default function useSession() {
+    /**
+     * Starts the session
+     */
+    const startSession = (): void => {
+        isSessionActive.value = true;
+        useNotificationSystem().createNotification({
+            title: 'Session started',
+        });
+    };
+
+    /**
+     * Stops the session
+     */
+    const stopSession = (): void => {
+        isSessionActive.value = false;
+        useNotificationSystem().createNotification({
+            title: 'Session stopped',
+            type: 'info',
+        });
+    };
+
+    return {
+        isSessionActive,
+        startSession,
+        stopSession,
+    };
+}

src/composables/useUploadData/useUploadData.ts

@@ -0,0 +1,14 @@
+import { ref } from 'vue';
+
+const streamData = ref(false);
+const streamRegexAndCaptureAreaSettings = ref(false);
+
+/**
+ * Uploadable data composable
+ */
+export default function useUploadData() {
+    return {
+        streamData,
+        streamRegexAndCaptureAreaSettings,
+    };
+}

src/proc/Vigad.ts

@@ -1,6 +1,9 @@
 import { CaptureArea } from './CaptureArea';
 import { RegexHandler } from './regex/RegexHandler';
 import { TesseractHandler } from './TesseractHandler';
+import useSession from '@/composables/useSession/useSession';
+import useUploadData from '@/composables/useUploadData/useUploadData';
+import useAPI from '@/composables/useAPI/useAPI';
 import useStreamHandler from '@/composables/useStreamHandler/useStreamHandler';
 
 export class Vigad {
@@ -99,30 +102,102 @@ export class Vigad {
         if (!this.intervalRunning) {
             this.tesseractInterval = setInterval(() => {
                 const { currentSelectedSource } = useStreamHandler();
-                this.tesseractHandler.run(currentSelectedSource.value!, (result: { ca_id: number, data: string }[]) => {
-                    result.forEach((value: { ca_id: number, data: string }, index: number) => {
-                        let ca = this.getCaptureArea(value.ca_id);
-                        let regexGrp = ca.getRegexGroups()[0];
-                        if (regexGrp.getConstraintRegex()[0].getRegex().toString() === "/(?:)/" && regexGrp.getConstraintRegex()[1].getRegex().toString() === "/(?:)/") {
-                            this.regexHandler.findValue(value.data, regexGrp.getValueRegex());
-                        } else if (regexGrp.getConstraintRegex()[0].getRegex().toString() === "/(?:)/") {
-                            this.regexHandler.findValue(value.data, regexGrp.getValueRegex(), regexGrp.getConstraintRegex()[1]);
-                        } else if (regexGrp.getConstraintRegex()[1].getRegex().toString() === "/(?:)/") {
-                            this.regexHandler.findValue(value.data, regexGrp.getValueRegex(), regexGrp.getConstraintRegex()[0]);
+                this.tesseractHandler.run(
+                    currentSelectedSource.value!,
+                    async (result: { ca_id: number; data: string }[]) => {
+                        result.forEach(
+                            (
+                                value: { ca_id: number; data: string },
+                                index: number
+                            ) => {
+                                let ca = this.getCaptureArea(value.ca_id);
+                                let regexGrp = ca.getRegexGroups()[0];
+                                if (
+                                    regexGrp
+                                        .getConstraintRegex()[0]
+                                        .getRegex()
+                                        .toString() === '/(?:)/' &&
+                                    regexGrp
+                                        .getConstraintRegex()[1]
+                                        .getRegex()
+                                        .toString() === '/(?:)/'
+                                ) {
+                                    this.regexHandler.findValue(
+                                        value.data,
+                                        regexGrp.getValueRegex()
+                                    );
+                                } else if (
+                                    regexGrp
+                                        .getConstraintRegex()[0]
+                                        .getRegex()
+                                        .toString() === '/(?:)/'
+                                ) {
+                                    this.regexHandler.findValue(
+                                        value.data,
+                                        regexGrp.getValueRegex(),
+                                        regexGrp.getConstraintRegex()[1]
+                                    );
+                                } else if (
+                                    regexGrp
+                                        .getConstraintRegex()[1]
+                                        .getRegex()
+                                        .toString() === '/(?:)/'
+                                ) {
+                                    this.regexHandler.findValue(
+                                        value.data,
+                                        regexGrp.getValueRegex(),
+                                        regexGrp.getConstraintRegex()[0]
+                                    );
+                                } else {
+                                    this.regexHandler.findValue(
+                                        value.data,
+                                        regexGrp.getValueRegex(),
+                                        regexGrp.getConstraintRegex()[0],
+                                        regexGrp.getConstraintRegex()[1]
+                                    );
+                                }
+                            }
+                        );
+                        // Uploading Data to the server
+                        const { isSessionActive } = useSession();
+                        const { get, post } = useAPI();
+                        const {
+                            streamData,
+                            streamRegexAndCaptureAreaSettings,
+                        } = useUploadData();
+
+                        // Check whether the user streamData or streamRegexAndCaptureAreaSettings is enabled and if the session is active at all
+                        if (
+                            isSessionActive.value &&
+                            (streamData.value ||
+                                streamRegexAndCaptureAreaSettings.value)
+                        ) {
+                            for (let i = 0; i < result.length; i++) {
+                                await post(
+                                    `session/abc/data/ca/${result[i].ca_id}`,
+                                    {
+                                        data: `${result[i].data}`,
+                                    }
+                                );
+                            }
                         } else {
-                            this.regexHandler.findValue(value.data, regexGrp.getValueRegex(), regexGrp.getConstraintRegex()[0], regexGrp.getConstraintRegex()[1]);
+                            console.log(
+                                'Session is not active or streamData/streamRegexAndCaptureAreaSettings is not enabled'
+                            );
                         }
-                    });
-                }, this.previewWidth, this.previewHeight);
+                    },
+                    this.previewWidth,
+                    this.previewHeight
+                );
             }, 500);
             this.intervalRunning = true;
-            console.log("started tesseract");
+            console.log('started tesseract');
         }
     }
 
     public stopTesseract(): void {
         clearInterval(this.tesseractInterval);
         this.intervalRunning = false;
-        console.log("stopped tesseract");
+        console.log('stopped tesseract');
     }
 }