Commit 8334dd0c authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Add basic day view for calendar

parent ff4b11ee
......@@ -5,7 +5,9 @@
<show-selector
ref="showSelector"
:title="$t('navigation.calendar')"
:calendar="true"
:callback="showHasSwitched"
@set-view="changeView"
/>
<hr>
......@@ -81,7 +83,7 @@
</b-alert>
<div class="tw-flex">
<div class="tw-w-4/5">
<div :class="{ 'tw-hidden': view !== 'week'}">
<full-calendar
ref="calendar"
default-view="agendaWeek"
......@@ -95,10 +97,24 @@
/>
</div>
<div class="schedule-panel tw-ml-2 tw-w-1/5 tw-max-h-full tw-overflow-y-scroll tw-h-[600px]">
<div class="timeslot tw-w-full tw-py-2 tw-px-3 tw-rounded hover:tw-bg-gray-200 tw-cursor-pointer tw-border tw-border-solid tw-border-gray-200 tw-mb-2" v-for="timeslot in timeslotsForDay" :key="timeslot.id" @click="() => timeslotClicked(timeslot)">
<p class="tw-mb-0 tw-leading-tight tw-font-bold">{{ timeslot.show.name }}</p>
<span class="tw-text-sm">{{ prettyTime(timeslot.start) }} - {{ prettyTime(timeslot.end) }}</span>
<div :class="{
'schedule-panel tw-w-full': true,
'tw-hidden': view !== 'day'
}">
<div :class="{
'timeslot tw-w-full tw-py-2 tw-px-3 tw-rounded hover:tw-bg-gray-200 hover:tw-text-gray-900 tw-cursor-pointer tw-border tw-border-solid tw-border-gray-200 tw-mb-2': true,
'tw-bg-gray-900 tw-text-white': new Date() >= new Date(timeslot.start) && new Date() <= new Date(timeslot.end),
}" v-for="timeslot in timeslotsForDay" :key="timeslot.id" @click="() => timeslotClicked(timeslot)">
<div class="tw-flex tw-justify-between tw-items-center">
<div>
<p class="tw-mb-0 tw-leading-tight tw-font-bold">{{ timeslot.show.name }}</p>
<span class="tw-text-sm">{{ prettyTime(timeslot.start) }} - {{ prettyTime(timeslot.end) }}</span>
</div>
<div v-if="!timeslot.playlist_id">
{{ $t('calendar.empty') }}
</div>
</div>
</div>
</div>
</div>
......@@ -151,6 +167,7 @@ export default {
data() {
return {
view: 'week',
adminUrl: `${process.env.VUE_APP_BASEURI_STEERING}/admin`,
calendarSlots: [],
selectedDay: new Date(),
......@@ -277,6 +294,10 @@ export default {
},
methods: {
changeView(view) {
this.view = view
},
selectDay(date) {
this.selectedDay = date
},
......@@ -315,7 +336,7 @@ export default {
},
timeslotClicked(slot) {
const timeslot = { ...slot }
const timeslot = {...slot}
timeslot.show = slot.show.id
if (timeslot.show !== this.selectedShow.id) {
......
......@@ -55,6 +55,11 @@
align="right"
>
<div class="tw-flex tw-justify-end tw-w-full tw-space-x-2">
<b-button-group v-if="calendar">
<b-button :variant="view === 'day' ? 'primary' : 'secondary'" @click="setView('day')">{{ $t('calendar.view.day') }}</b-button>
<b-button :variant="view === 'week' ? 'primary' : 'secondary'" @click="setView('week')">{{ $t('calendar.view.week') }}</b-button>
</b-button-group>
<b-dropdown
id="ddshows"
:text="$t('showSelector.selectShow')"
......@@ -101,12 +106,14 @@
},
props: {
calendar: { type: Boolean, default: false },
title: {type: String, default: 'Unbetitelt'},
callback: {type: Function, default: null}
},
data() {
return {
view: 'week',
inputSelector: '',
showThreshold: process.env.VUE_APP_SHOW_THRESHOLD
}
......@@ -149,6 +156,11 @@
},
methods: {
setView(view) {
this.view = view
this.$emit('set-view', view)
},
switchShow: function (index) {
this.$store.commit('shows/switchShow', index)
this.updateInputSelector()
......
......@@ -407,7 +407,11 @@ export default {
'calendar': {
'today': 'Heute',
'empty': '(Keine Playlist!)'
'empty': '(Keine Playlist!)',
'view': {
'day': 'Tagesansicht',
'week': 'Wochenansicht',
}
},
// Etc
......
......@@ -409,6 +409,10 @@ export default {
'calendar': {
'today': 'Today',
'empty': '(No playlist!)',
'view': {
'day': 'Day view',
'week': 'Week view',
}
},
// Etc
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment