Skip to content

Commit

Permalink
feat: new log design and capture area tooltip (#73)
Browse files Browse the repository at this point in the history
* idea for capture Area tooltip

Signed-off-by: Kevin Beier <[email protected]>

* fixed log for capture areas

Signed-off-by: Kevin Beier <[email protected]>

* Update src/components/LogOutput.vue

Co-authored-by: Claiyc <[email protected]>

* Update src/views/RunPage.vue

Co-authored-by: Claiyc <[email protected]>

* first run log is open on default

Signed-off-by: Kevin Beier <[email protected]>

Signed-off-by: Kevin Beier <[email protected]>
Co-authored-by: Claiyc <[email protected]>
  • Loading branch information
BeierKevin and Claiyc authored Dec 14, 2022
1 parent a16ae9c commit 06d18db
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 35 deletions.
25 changes: 22 additions & 3 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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() {
Expand Down
51 changes: 27 additions & 24 deletions src/components/LogOutput.vue
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/components/MainVideoStream.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
23 changes: 16 additions & 7 deletions src/views/RunPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>

0 comments on commit 06d18db

Please sign in to comment.