mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-06 14:48:02 -05:00
100 lines
2.9 KiB
Vue
100 lines
2.9 KiB
Vue
<template>
|
|
<v-snackbar
|
|
v-model="showSnackbar"
|
|
:timer="true"
|
|
:timeout="visibleMessage.showTimeout"
|
|
:color="visibleMessage.type"
|
|
:vertical="vertical"
|
|
:location="location"
|
|
multi-line
|
|
>
|
|
<small>{{ DateTime.fromSeconds(visibleMessage.createdAt).toLocaleString(DateTime.DATETIME_MED) }}</small> <br/>
|
|
{{ visibleMessage.msg }}
|
|
|
|
<template v-slot:actions>
|
|
|
|
<v-btn variant="text">View <message-list-dialog></message-list-dialog> </v-btn>
|
|
<v-btn variant="text" @click="removeItem()">
|
|
<span v-if="useMessageStore().snackbarQueue.length > 1">Next ({{ useMessageStore().snackbarQueue.length - 1 }})</span>
|
|
<span v-else>Close</span>
|
|
</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import {Message, useMessageStore} from "@/stores/MessageStore";
|
|
import {DateTime} from "luxon";
|
|
import MessageListDialog from "@/components/dialogs/MessageListDialog.vue";
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* passed to VSnackbar location prop https://vuetifyjs.com/en/api/v-snackbar/#props-location
|
|
* Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both…
|
|
*/
|
|
location: {
|
|
required: false,
|
|
type: String,
|
|
default: 'bottom'
|
|
},
|
|
/**
|
|
* passed to VSnackbar vertical prop https://vuetifyjs.com/en/api/v-snackbar/#props-vertical
|
|
* Stacks snackbar content on top of the actions (button).
|
|
*/
|
|
vertical: {
|
|
required: false,
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
// ID of message timeout currently running
|
|
const timeoutId = ref(-1)
|
|
// currently visible message
|
|
const visibleMessage = ref({} as Message)
|
|
// visible state binding of snackbar
|
|
const showSnackbar = ref(false)
|
|
|
|
/**
|
|
* subscribe to mutation of the snackbarQueue to detect new messages being added
|
|
*/
|
|
useMessageStore().$subscribe((mutation, state) => {
|
|
if ('snackbarQueue' in state) {
|
|
processQueue()
|
|
}
|
|
})
|
|
|
|
/**
|
|
* process snackbar queue
|
|
* show oldest message for desired time and remove it afterwards
|
|
*/
|
|
function processQueue() {
|
|
if (timeoutId.value == -1 && useMessageStore().snackbarQueue.length > 0) {
|
|
visibleMessage.value = useMessageStore().snackbarQueue[0]
|
|
showSnackbar.value = true
|
|
timeoutId.value = setTimeout(() => {
|
|
useMessageStore().snackbarQueue.shift()
|
|
timeoutId.value = -1
|
|
processQueue()
|
|
}, visibleMessage.value.showTimeout + 50)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* after item timeout has been reached remove it from the list
|
|
* and restart processing the queue to check for new items
|
|
*/
|
|
function removeItem() {
|
|
showSnackbar.value = false
|
|
clearTimeout(timeoutId.value)
|
|
timeoutId.value = -1
|
|
useMessageStore().snackbarQueue.shift()
|
|
processQueue()
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style> |