Add expandable schedule block to show manager

src/components/ShowManager.vue

@@ -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,

src/components/shows/Schedules.vue

+<template>
+  <div :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>
+</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>

src/mixins/prettyDate.js

@@ -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)
@@ -82,6 +85,9 @@ export default {
       var minutes = Math.floor((sec_total - (hours * 3600)) / 60)
       var seconds = Math.floor((sec_total - (hours * 3600) - (minutes * 60)) * 10) / 10
       return hours + ':' + leadingZero(minutes) + ':' + leadingZero(seconds)
+    },
+    prettyWeekday: function(weekday) {
+      return day[weekday];
     }
   }
 }

src/mixins/rrules.js

@@ -21,7 +21,8 @@ export default {
   methods: {
     rruleRender (rrule) {
       let rule = this.rruleOptions.find(r => r.value === rrule)
+
       return rule.text
-    }
+    },
   }
 }

src/store/modules/shows.js

@@ -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') }

src/utilities.js

+export function uppercaseFirst(string = "") {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function lowercaseFirst(string = "") {
+    return string.charAt(0).toLowerCase() + string.slice(1);
+}