Feat/56 configuration for regex inputs

src/components/LogOutput.vue

@@ -1,25 +1,84 @@
 <template>
-    <v-alert
-        border="start"
-        icon="mdi-information"
-        :title="title"
-        type="success"
-        class="log-output-container"
-    >
-        {{ log }}
-    </v-alert>
+    <v-card class="log-output-container mb-4">
+        <v-card-title>{{ `Capture Area ${captureAreaId}` }}</v-card-title>
+        <v-list lines="three" disabled class="reverse">
+            <v-list-item v-for="(item, i) in matchedElements" :key="i">
+                <template v-slot:prepend>
+                    <v-icon color="primary" icon="mdi-information"></v-icon>
+                </template>
+
+                <v-list-item-title> {{ getCurrentTime() }}</v-list-item-title>
+                <v-list-item-subtitle>
+                    <div>Element: {{ item.match.element }}</div>
+                    <div>Rating: {{ item.rating }}</div>
+                </v-list-item-subtitle>
+            </v-list-item>
+        </v-list>
+    </v-card>
 </template>
 
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Vigad } from '@/proc/Vigad';
+import { isRunning } from '@/composables/useRunning';
+
 const props = defineProps<{
-    title: string;
-    log: string;
+    captureAreaId: number;
 }>();
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
+
+// local interface otherwise typescript is complaining
+interface MatchedElement {
+    match: {
+        index: number;
+        element: string;
+    };
+    rating: number;
+}
+
+const matchedElements = ref<MatchedElement[]>([]);
+
+let timerId: string | number | NodeJS.Timeout | undefined;
+
+// watch for changes in isRunning and start/stop the timer
+watch(isRunning, (newValue) => {
+    if (newValue) {
+        timerId = setTimeout(function tick() {
+            let newValue: MatchedElement = vigad.value
+                .getCaptureArea(0)
+                .getRegexGroups()[0]
+                .getValueRegex()
+                .getLastBestMatch();
+            matchedElements.value.push(newValue);
+            timerId = setTimeout(tick, 1000);
+        }, 1000);
+    } else {
+        clearTimeout(timerId);
+    }
+});
+
+function getCurrentTime() {
+    let date = new Date();
+    let hours = date.getHours();
+    let minutes = '0' + date.getMinutes();
+    let seconds = '0' + date.getSeconds();
+    let formattedTime =
+        hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+    return formattedTime;
+}
 </script>
 
 <style lang="scss" scoped>
 .log-output-container {
-    max-height: 350px;
+    max-height: 400px;
     overflow-y: auto;
 }
+.reverse {
+    display: flex;
+    flex-direction: column-reverse;
+}
 </style>

src/components/capture-area/AfterConstraint.vue

@@ -0,0 +1,215 @@
+<template>
+    <v-text-field
+        v-model="afterValueConstraint"
+        label="After Constraint"
+        placeholder="Enter a constraint value"
+        variant="outlined"
+        hide-details="auto"
+    >
+        <template v-slot:prepend-inner>
+            <v-icon icon="mdi-table-column-plus-after"></v-icon>
+        </template>
+        <template v-slot:append-inner>
+            <v-fade-transition leave-absolute>
+                <v-progress-circular
+                    v-if="false"
+                    color="info"
+                    indeterminate
+                    size="24"
+                ></v-progress-circular>
+            </v-fade-transition>
+        </template>
+    </v-text-field>
+
+    <v-btn
+        @click="expand = !expand"
+        class="rounded"
+        size="x-small"
+        variant="text"
+    >
+        {{ !expand ? 'More Options' : 'Less Options' }}
+    </v-btn>
+
+    <v-expand-transition>
+        <div v-if="expand" class="pa-4">
+            <v-select
+                v-model="currentMatchingOption"
+                :items="matchingOptions"
+                label="Matching"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSlicingOption"
+                :items="slicingOptions"
+                label="Slicing"
+                variant="underlined"
+            ></v-select>
+
+            <v-select
+                v-model="currentSimilarityOption"
+                :items="similarityOptions"
+                label="Similarity"
+                variant="underlined"
+            ></v-select>
+
+            <v-text-field
+                v-if="currentMatchingOption === 'Approximate'"
+                v-model="currentNumberOfMatches"
+                label="Number of Matches"
+                placeholder="Enter a number"
+                variant="outlined"
+                :rules="[(v:number) => !!Number(v) || 'Please enter a number']"
+                hide-details="auto"
+            >
+                <template v-slot:prepend-inner>
+                    <v-icon icon="mdi-numeric"></v-icon>
+                </template>
+            </v-text-field>
+
+            <v-btn
+                @click="reset()"
+                class="rounded mt-2 mb-2"
+                size="small"
+                variant="text"
+                color="primary"
+                width="100%"
+            >
+                Reset options
+            </v-btn>
+            <v-divider></v-divider>
+        </div>
+    </v-expand-transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Vigad } from '@/proc/Vigad';
+import { Matching } from '@/proc/regex/Regex';
+import { Slicing } from '@/proc/regex/Regex';
+import { Similarity } from '@/proc/regex/Regex';
+
+const props = defineProps<{
+    captureAreaId: number;
+}>();
+
+/**
+ * Get singelton instance reference to vigad
+ */
+const vigad = ref(Vigad.getInstance());
+
+const expand = ref(false);
+
+// Value Regex input
+const afterValueConstraint = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getRegex()
+        .toString()
+        .slice(1, -1)
+);
+
+watch(afterValueConstraint, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setRegex(newValue.toString());
+});
+
+// Matching options
+const currentMatchingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getMatching()
+);
+
+const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
+
+watch(currentMatchingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setMatching(newValue);
+});
+
+// Slicing options
+const currentSlicingOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getSlicing()
+);
+
+const slicingOptions = ref([
+    Slicing.SUBSTR,
+    Slicing.SPACES,
+    Slicing.ENTIRE_STR,
+]);
+
+watch(currentSlicingOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setSlicing(newValue);
+});
+
+// Similarity options
+const currentSimilarityOption = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getSimilarity()
+);
+
+const similarityOptions = ref([
+    Similarity.NONE,
+    Similarity.NUM_LET,
+    Similarity.LET_NUM,
+]);
+
+watch(currentSimilarityOption, (newValue) => {
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setSimilarity(newValue);
+});
+
+// Number of matches
+const currentNumberOfMatches = ref(
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .getMatchesNum()
+);
+
+watch(currentNumberOfMatches, (newValue) => {
+    if (!Number(newValue)) return;
+
+    vigad.value
+        .getCaptureArea(props.captureAreaId)
+        .getRegexGroups()[0]
+        .getConstraintRegex()[1]
+        .setMatchesNum(newValue);
+});
+
+// Reset all options to default
+function reset() {
+    currentMatchingOption.value = Matching.APPROX;
+    currentSlicingOption.value = Slicing.SUBSTR;
+    currentSimilarityOption.value = Similarity.NONE;
+    currentNumberOfMatches.value = 10000;
+}
+</script>
+
+<style lang="scss" scoped></style>