root
150 lines
4.5 KiB
Vue
150 lines
4.5 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
mode: 'edit' | 'view'
|
|
notifications: Record<string, any>
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'add-notification': []
|
|
'remove-notification': [key: string]
|
|
}>()
|
|
|
|
const typeOptions = [
|
|
{ title: 'Email', value: 'email' },
|
|
{ title: 'Visual (Display)', value: 'visual' },
|
|
{ title: 'Audible (Sound)', value: 'audible' }
|
|
]
|
|
|
|
const patternOptions = [
|
|
{ title: 'Absolute (Specific Time)', value: 'absolute' },
|
|
{ title: 'Relative (Before Event)', value: 'relative' },
|
|
{ title: 'Unknown', value: 'unknown' }
|
|
]
|
|
|
|
const anchorOptions = [
|
|
{ title: 'Start Time', value: 'start' },
|
|
{ title: 'End Time', value: 'end' }
|
|
]
|
|
|
|
const formatNotification = (notification: any) => {
|
|
if (notification.pattern === 'absolute' && notification.when) {
|
|
return `At ${new Date(notification.when).toLocaleString()}`
|
|
} else if (notification.pattern === 'relative' && notification.offset) {
|
|
const anchor = notification.anchor === 'end' ? 'end' : 'start'
|
|
return `${notification.offset} before ${anchor}`
|
|
}
|
|
return 'Custom notification'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="Object.keys(notifications || {}).length > 0 || mode === 'edit'" class="event-editor-section">
|
|
<div class="d-flex align-center justify-space-between mb-2">
|
|
<div class="text-subtitle-1">Notifications</div>
|
|
<v-btn v-if="mode === 'edit'"
|
|
size="small"
|
|
variant="outlined"
|
|
@click="$emit('add-notification')">
|
|
<v-icon left>mdi-plus</v-icon>
|
|
Add Notification
|
|
</v-btn>
|
|
</div>
|
|
|
|
<!-- Read-only view -->
|
|
<div v-if="mode === 'view'">
|
|
<div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div>
|
|
<div class="mb-1">
|
|
<v-icon :icon="notification.type === 'email' ? 'mdi-email' : notification.type === 'audible' ? 'mdi-bell-ring' : 'mdi-bell'" size="small" class="mr-2" />
|
|
<strong>{{ notification.type || 'Notification' }}</strong>
|
|
</div>
|
|
<div class="text-caption text-grey">{{ formatNotification(notification) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit view -->
|
|
<div v-else>
|
|
<div v-for="(notification, key) in notifications" :key="key" class="mb-3 pa-3 border rounded">
|
|
<div class="d-flex align-center justify-space-between mb-2">
|
|
<strong>Notification</strong>
|
|
<v-btn
|
|
icon="mdi-delete"
|
|
size="small"
|
|
color="error"
|
|
variant="text"
|
|
@click="$emit('remove-notification', key)">
|
|
</v-btn>
|
|
</div>
|
|
|
|
<v-row dense class="mb-2">
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="notification.type"
|
|
:items="typeOptions"
|
|
label="Type"
|
|
variant="outlined"
|
|
density="compact"
|
|
:rules="[v => !!v || 'Type is required']"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="notification.pattern"
|
|
:items="patternOptions"
|
|
label="Pattern"
|
|
variant="outlined"
|
|
density="compact"
|
|
:rules="[v => !!v || 'Pattern is required']"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<div v-if="notification.pattern === 'absolute'">
|
|
<v-text-field
|
|
v-model="notification.when"
|
|
label="When (ISO Date)"
|
|
type="datetime-local"
|
|
variant="outlined"
|
|
density="compact"
|
|
hint="Specific date and time for notification"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else-if="notification.pattern === 'relative'">
|
|
<v-row dense>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="notification.offset"
|
|
label="Offset (e.g., PT15M)"
|
|
variant="outlined"
|
|
density="compact"
|
|
hint="ISO 8601 duration before event"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="notification.anchor"
|
|
:items="anchorOptions"
|
|
label="Anchor"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.event-editor-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
</style>
|