diff options
| author | Orangerot <purple@orangerot.dev> | 2024-06-19 00:14:49 +0200 |
|---|---|---|
| committer | Orangerot <purple@orangerot.dev> | 2024-06-27 12:11:14 +0200 |
| commit | 5b8851b6c268d0e93c158908fbfae9f8473db5ff (patch) | |
| tree | 7010eb85d86fa2da06ea4ffbcdb01a685d502ae8 /pse-dashboard/src/components/EpisodeEntry.vue | |
Diffstat (limited to 'pse-dashboard/src/components/EpisodeEntry.vue')
| -rw-r--r-- | pse-dashboard/src/components/EpisodeEntry.vue | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/pse-dashboard/src/components/EpisodeEntry.vue b/pse-dashboard/src/components/EpisodeEntry.vue new file mode 100644 index 0000000..c651484 --- /dev/null +++ b/pse-dashboard/src/components/EpisodeEntry.vue @@ -0,0 +1,53 @@ +<script setup> +import { LastUpdate, ProgressTime } from '@/components' + +const props = defineProps({ + action: { + type: Object, + default: undefined + } +}); + +</script> +<template> + <a + href="#" + class="list-group-item list-group-item-action py-3" + aria-current="true" + > + <!-- title with timestamp --> + <div class="d-flex gap-3"> + <i + class="fa fa-podcast rounded-circle flex-shring-0" + style="font-size: 32px" + /> + <div class="d-flex gap-2 w-100 justify-content-between"> + <div> + <h6 class="mb-0">{{ action.title }}</h6> + <p class="mb-0 opacity-75">{{ action.description }}</p> + </div> + <small class="opacity-50 text-nowrap"> + <LastUpdate :iso="action.timestamp" /> + </small> + </div> + </div> + + <!-- Progress bar with Progress time --> + <div class="d-flex"> + <ProgressTime :unix="action.position" /> + <div + class="progress flex-grow-1 m-2" + style="height:10px; " + > + <div + class="progress-bar" + :style="{width: 100*action.position/action.total + '%'}" + /> + </div> + <ProgressTime :unix="action.total" /> + </div> + </a> +</template> +<style> +</style> + |