feat: new log design and capture area tooltip (#73)

* idea for capture Area tooltip

Signed-off-by: Kevin Beier <beierkevin2002@outlook.com>

* fixed log for capture areas

Signed-off-by: Kevin Beier <beierkevin2002@outlook.com>

* Update src/components/LogOutput.vue

Co-authored-by: Claiyc <58397976+Claiyc@users.noreply.github.com>

* Update src/views/RunPage.vue

Co-authored-by: Claiyc <58397976+Claiyc@users.noreply.github.com>

* first run log is open on default

Signed-off-by: Kevin Beier <beierkevin2002@outlook.com>

Signed-off-by: Kevin Beier <beierkevin2002@outlook.com>
Co-authored-by: Claiyc <58397976+Claiyc@users.noreply.github.com>

Author: tonoizer

src/App.vue

@@ -28,15 +28,33 @@
 
         <!-- Bottom Navigation -->
         <v-bottom-navigation :elevation="24" bg-color="surface" grow>
-            <v-btn to="/run" tonal prepend-icon="mdi-play" value="run">
+            <v-btn
+                :disabled="isRunning"
+                to="/run"
+                tonal
+                prepend-icon="mdi-play"
+                value="run"
+            >
                 Capturing
             </v-btn>
 
-            <v-btn to="/" tonal prepend-icon="mdi-monitor" value="source">
+            <v-btn
+                :disabled="isRunning"
+                to="/"
+                tonal
+                prepend-icon="mdi-monitor"
+                value="source"
+            >
                 Source
             </v-btn>
 
-            <v-btn to="/regex" tonal prepend-icon="mdi-regex" value="regex">
+            <v-btn
+                :disabled="isRunning"
+                to="/regex"
+                tonal
+                prepend-icon="mdi-regex"
+                value="regex"
+            >
                 Regex
             </v-btn>
         </v-bottom-navigation>
@@ -45,6 +63,7 @@
 
 <script setup lang="ts">
 import MainVideoStream from './components/MainVideoStream.vue';
+import { isRunning } from './composables/useRunning';
 
 // Handle System Bar Functions for later
 async function minimizeScreen() {

src/components/LogOutput.vue

@@ -1,24 +1,33 @@
 <template>
-    <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-expansion-panel class="log-output-container">
+        <v-expansion-panel-title class="pa-4" expand-icon="mdi-menu-down">
+            Capture area
+            {{ captureAreaId }}
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+            <p v-if="matchedElementsIsEmpty">Start capturing first!</p>
+            <v-list v-else lines="three" disabled class="reverse">
+                <v-list-item v-for="(item, i) in matchedElements" :key="i">
+                    <template v-slot:prepend>
+                        <v-icon
+                            :color="item.rating > 0 ? 'success' : 'error'"
+                            icon="mdi-information"
+                        ></v-icon>
+                    </template>
 
-                <v-list-item-title> {{ item.timestamp }}</v-list-item-title>
-                <v-list-item-subtitle>
+                    <v-list-item-title expand-icon="mdi-menu-down">
+                        {{ item.timestamp }}</v-list-item-title
+                    >
                     <div>Element: {{ item.match.element }}</div>
                     <div>Rating: {{ item.rating }}</div>
-                </v-list-item-subtitle>
-            </v-list-item>
-        </v-list>
-    </v-card>
+                </v-list-item>
+            </v-list>
+        </v-expansion-panel-text>
+    </v-expansion-panel>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { Vigad } from '@/proc/Vigad';
 import { isRunning } from '@/composables/useRunning';
 
@@ -41,6 +50,10 @@ interface MatchedElement {
     timestamp?: string;
 }
 
+const matchedElementsIsEmpty = computed(() => {
+    return matchedElements.value.length === 0;
+});
+
 const matchedElements = ref<MatchedElement[]>([]);
 
 let timerId: string | number | NodeJS.Timeout | undefined;
@@ -70,16 +83,6 @@ watch(isRunning, (newValue) => {
         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>

src/components/MainVideoStream.vue

@@ -28,7 +28,9 @@
                 ref="drag"
                 class="center-text"
             >
-                CA: {{ captureArea.getId() }}
+                <v-tooltip activator="parent" location="top"
+                    >Capture area: {{ captureArea.getId() }}</v-tooltip
+                >
             </VueDragResize>
         </v-responsive>
     </div>

src/views/RunPage.vue

@@ -19,17 +19,19 @@
             >
         </template>
         <template v-slot:default>
-            <LogOutput
-                v-for="captureArea in captureAreas"
-                :key="captureArea.getId()"
-                :captureAreaId="captureArea.getId()"
-            />
+            <v-expansion-panels v-model="defaultOpenPanel" multiple>
+                <LogOutput
+                    v-for="captureArea in captureAreas"
+                    :key="captureArea.getId()"
+                    :captureAreaId="captureArea.getId()"
+                />
+            </v-expansion-panels>
         </template>
     </ViewComponent>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import ViewComponent from '@/components/ViewComponent.vue';
 import { useRunning, isRunning } from '@/composables/useRunning';
 import LogOutput from '@/components/LogOutput.vue';
@@ -44,6 +46,13 @@ const vigad = ref(Vigad.getInstance());
  * Get a reactive reference to all of the capture areas
  */
 const captureAreas = ref(vigad.value.getAllCaptureAreas());
+
+const defaultOpenPanel = ref<number[]>([0]);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.output {
+    display: flex;
+    justify-content: row;
+}
+</style>