feat(Calendar): highlight timeslots of the station fallback show

refs #128

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

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;