diff --git a/src/Pages/Calendar.vue b/src/Pages/Calendar.vue index 1e8852bb4f275ece9b178fb196c945d54c3ac973..14cbb59fa5f134ddd52adf68aeb8d0a069785c31 100644 --- a/src/Pages/Calendar.vue +++ b/src/Pages/Calendar.vue @@ -122,6 +122,7 @@ import AConflictResolver from '@/components/schedule/AConflictResolver.vue' import { ScheduleConflictResponse, TimeSlot } from '@/types' import { DateSelectArg, EventClickArg } from '@fullcalendar/core' import { useProgramSlots } from '@/stores/program' +import { useCurrentRadioSettings } from '@/stores/radio-settings' const slotDurationMinutes = 15 @@ -136,6 +137,7 @@ const rruleStore = useRRuleStore() const showStore = useShowStore() const timeslotStore = useTimeSlotStore() const playlistStore = usePlaylistStore() +const radioSettings = useCurrentRadioSettings() const canAddSchedule = useHasUserPermission(['program.add_schedule']) const CreateSchedule = createTemplatePromise<undefined, [Date, Date]>() @@ -199,7 +201,10 @@ const calendarEvents = computedAsync(async () => { show?.ownerIds?.includes?.(authStore?.steeringUser?.id as SteeringUser['id']) ?? false const className = ['calendar-event', isOwner ? 'is-mine' : 'is-not-mine'] if (durationMinutes < 0) className.push('is-invalid') - if (entry.timeslotId === null) className.push('is-fallback') + if (entry.timeslotId) className.push('is-scheduled') + else className.push('is-generated') + if (entry.timeslotId === null || radioSettings.value?.program.fallback.showId === show?.id) + className.push('is-fallback') else className.push('is-normal') const title = sanitizeHTML(show?.name ?? '') + emptyText diff --git a/src/tailwind.css b/src/tailwind.css index 6c337bd3658476b37872512a489ab5a025c50168..839fa4df4d806da8423360ac8dfce79200ca7e51 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -283,16 +283,29 @@ thead .fc-day-selected:hover { display: none; } + &.is-scheduled { + @apply tw-border; + } + &.is-normal { @apply tw-bg-gray-100 tw-border-gray-200 tw-text-gray-900 hocus:tw-bg-gray-200; } &.is-mine { - @apply tw-bg-gray-700 tw-border-gray-800 tw-text-white hocus:tw-bg-gray-800; + @apply tw-bg-gray-700 tw-border-gray-900 tw-text-white hocus:tw-bg-gray-800; + } + + &.is-generated { + @apply tw-pointer-events-none; } &.is-fallback { - @apply tw-bg-yellow-50 tw-border-yellow-50 tw-text-yellow-900 dark:tw-bg-yellow-950 dark:tw-border-yellow-950 tw-pointer-events-none; + @apply tw-bg-yellow-50 tw-border-yellow-50 tw-text-yellow-900 dark:tw-bg-yellow-950 dark:tw-border-yellow-950; + + &.is-scheduled { + @apply tw-border-yellow-600 hocus:tw-bg-yellow-100; + } + & .fc-event-main { @apply tw-relative tw-h-full;