Skip to content
Snippets Groups Projects
Schedules.vue 3.08 KiB
Newer Older
  <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>