Commit 0401d281 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

Merge branch 'feature/schedule-block' into develop

parents 6130ad1a c4f037bd
This diff is collapsed.
......@@ -25,6 +25,8 @@
<!-- When all show data is loaded, here we display all the rest -->
<div v-else>
<show-schedules />
<!-- include the modals to edit show and timeslot entries from the modal compontents -->
<show-timeslots ref="timeslotsComponent" />
......@@ -44,6 +46,7 @@
<script>
import showJumbotron from './shows/Jumbotron.vue'
import showTimeslots from './shows/Timeslots.vue'
import showSchedules from './shows/Schedules.vue'
import showMetaSimpleTypes from './shows/MetaSimpleTypes.vue'
import showMetaArrays from './shows/MetaArrays.vue'
import showMetaOwners from './shows/MetaOwners.vue'
......@@ -57,6 +60,7 @@ export default {
components: {
'show-jumbotron': showJumbotron,
'show-timeslots': showTimeslots,
'show-schedules': showSchedules,
'show-metaArrays': showMetaArrays,
'show-metaSimpleTypes': showMetaSimpleTypes,
'show-metaOwners': showMetaOwners,
......
<template>
<div
v-if="schedules.length > 0"
:class="{ 'show-schedules': true, 'expandable': isExpandable, 'collapsed': isExpandable && collapsed }"
@click="expand"
>
<table class="table b-table table-striped border">
<thead>
<tr>
<th class="top-header">Schedules</th>
<th class="top-header text-right font-weight-normal">{{ schedules.length }} schedules</th>
</tr>
</thead>
<tbody>
<tr
v-for="schedule in schedules"
:key="schedule.id"
>
<td>
{{ renderRruleForSchedule(schedule) }}
</td>
<td class="text-right">
{{ prettyHours(schedule.tstart) }} - {{ prettyHours(schedule.tend) }}
</td>
</tr>
</tbody>
</table>
<div v-if="isExpandable" class="collapser">
click to collapse
</div>
</div>
<div class="border p-4 mb-4" v-else>
There are currently no schedules for this show.
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import rrules from '../../mixins/rrules'
import prettyDate from '../../mixins/prettyDate'
import {lowercaseFirst, uppercaseFirst} from "../../utilities";
export default {
mixins: [
rrules,
prettyDate
],
data() {
return {
collapsed: true
}
},
computed: {
...mapGetters({
schedules: 'shows/schedules',
selectedShow: 'shows/selectedShow',
}),
isExpandable() {
return this.schedules.length > 2
}
},
created() {
this.getSchedules()
},
methods: {
expand() {
this.collapsed = !this.collapsed
},
getSchedules() {
this.$store.dispatch('shows/fetchSchedules', { show: this.selectedShow.id, callback: console.log })
},
renderRruleForSchedule(schedule) {
console.log(uppercaseFirst(this.rruleRender(schedule.rrule)));
if (schedule.rrule < 3) {
return uppercaseFirst(this.rruleRender(schedule.rrule))
}
const rrule = uppercaseFirst(this.rruleRender(schedule.rrule));
const weekday = lowercaseFirst(this.prettyWeekday(schedule.byweekday));
return `${rrule} ${weekday}s`
}
},
}
</script>
<style scoped>
.show-schedules {
box-sizing: border-box;
width: 100%;
margin-bottom: .5rem;
position: relative;
overflow-y: hidden;
}
.show-schedules:hover {
cursor: pointer;
}
.show-schedules.expandable {
margin-bottom: 1rem;
}
.show-schedules.collapsed {
height: 10rem;
}
.show-schedules.collapsed::after {
content: "click to expand";
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 9) 66%);
height: 4rem;
width: 100%;
z-index: 1;
bottom: 0;
position: absolute;
}
.show-schedules.collapsed::after,
.collapser {
text-align: center;
color: var(--info);
}
.show-schedules:hover:after,
.show-schedules:hover .collapser {
text-decoration: underline;
}
</style>
......@@ -65,6 +65,9 @@ export default {
dstring += leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes()) + ':' + leadingZero(d.getSeconds())
return dstring
},
prettyHours(hours) {
return hours.replace(/:00$/, '');
},
prettyDuration: function (start, end) {
var seconds = (new Date(end).getTime() - new Date(start).getTime()) / 1000
var minutes = Math.floor(seconds / 60)
......@@ -81,11 +84,13 @@ export default {
var hours = Math.floor(sec_total / 3600)
var minutes = Math.floor((sec_total - (hours * 3600)) / 60)
var seconds = Math.floor((sec_total - (hours * 3600) - (minutes * 60)) * 10) / 10
return leadingZero(hours) + ':' + leadingZero(minutes) + ':' + leadingZero(seconds)
return hours + ':' + leadingZero(minutes) + ':' + leadingZero(seconds)
},
nanosecondsToMinutes: function(ns) {
return ns / 1000 / 1000 / 1000 / 60;
},
prettyWeekday: function(weekday) {
return day[weekday];
}
}
}
......@@ -21,7 +21,8 @@ export default {
methods: {
rruleRender (rrule) {
let rule = this.rruleOptions.find(r => r.value === rrule)
return rule.text
}
},
}
}
......@@ -25,6 +25,7 @@ const cloneMinimalShowObject = function (show) {
const state = {
shows: [],
schedule: null,
schedules: [],
scheduleTimeslots: [],
timeslots: [],
notes: [],
......@@ -60,6 +61,7 @@ const getters = {
shows: state => state.shows,
selectedShow: state => state.shows[state.selected.index],
schedule: state => state.schedule,
schedules: state => state.schedules,
scheduleTimeslots: state => state.scheduleTimeslots,
timeslots: state => state.timeslots,
notes: state => state.notes,
......@@ -100,6 +102,7 @@ const mutations = {
},
setSchedule (state, schedule) { state.schedule = schedule },
setSchedules (state, schedules) { state.schedules = schedules },
setScheduleTimeslots (state, slots) { state.scheduleTimeslots = slots },
setTimeslots(state, slots) { state.timeslots = slots },
......@@ -190,6 +193,23 @@ const actions = {
})
},
fetchSchedules (ctx, data) {
ctx.commit('loading', 'schedule')
let uri = process.env.VUE_APP_API_STEERING + 'shows/' + data.show + '/schedules/'
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + ctx.rootState.auth.user.access_token }
}).then(response => {
ctx.commit('setSchedules', response.data)
ctx.commit('finishLoading', 'schedule')
if (data && typeof(data.callback) === 'function') { data.callback(response) }
}).catch(error => {
handleApiError(this, error, 'could not load schedule')
if (data && typeof(data.callbackCancel) === 'function') { data.callbackCancel() }
})
},
fetchTimeslots (ctx, data) {
if (data.schedule !== undefined) { ctx.commit('loading', 'scheduleTimeslots') }
else { ctx.commit('loading', 'timeslots') }
......
export function uppercaseFirst(string = "") {
return string.charAt(0).toUpperCase() + string.slice(1);
}
export function lowercaseFirst(string = "") {
return string.charAt(0).toLowerCase() + string.slice(1);
}
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