FIX: emissions manager instead of schedule modal

src/App.vue

@@ -34,6 +34,7 @@ export default {
         { slug: 'home', title: 'Home' },
         { slug: 'shows', title: 'Sendungen verwalten' },
         { slug: 'files', title: 'Dateien und Playlists' },
+        { slug: 'emissions', title: 'Sendezeiten'},
         { slug: 'settings', title: 'Settings' },
         { slug: 'credits', title: 'Credits' },
         { slug: 'debug', title: 'Debug' }

src/components/ShowManagerModalSchedules.vue → src/components/EmissionManager.vue

 <template>
-  <div>
-    <!-- Modal for adding new shows -->
-    <b-modal
-      id="idModalSchedules"
-      ref="modalSchedules"
-      title="Add/delete emission"
-      size="lg"
-      @ok="updateSchedules"
-    >
-      <p v-if="loaded.show">
-        Editing schedules for <b>{{ show.name }}</b>
-      </p>
+  <b-container>
+    <b-row v-if="loaded.shows">
+      <b-col>
+        <h3>{{ shows[currentShow].name }}</h3>
+      </b-col>
+      <b-col align="right">
+        <b-dropdown
+          id="ddshows"
+          text="Sendereihe auswählen"
+          variant="outline-info"
+        >
+          <b-dropdown-item
+            v-for="(show, index) in shows"
+            :key="show.id"
+            @click="switchShow(index)"
+          >
+            {{ show.name }}
+          </b-dropdown-item>
+        </b-dropdown>
+      </b-col>
+    </b-row>
+    <b-row v-else>
+      <b-col cols="12">
+        <div align="center">
+          ... loading show data ...
+        </div>
+      </b-col>
+    </b-row>
 
-      <full-calendar
-        ref="calendar"
-        editable="false"
-        default-view="agendaWeek"
-        :events="calendarSlots"
-        :config="calendarConfig"
-        @view-render="renderView"
-      />
-    </b-modal>
-  </div>
+    <hr>
+
+    <full-calendar
+      ref="calendar"
+      editable="false"
+      default-view="agendaWeek"
+      :events="calendarSlots"
+      :config="calendarConfig"
+      @view-render="renderView"
+    />
+  </b-container>
 </template>
 
 <script>
 import axios from 'axios'
-import {FullCalendar} from 'vue-full-calendar'
+import { FullCalendar } from 'vue-full-calendar'
 import 'fullcalendar/dist/fullcalendar.css'
 
 export default {
@@ -35,7 +52,7 @@ export default {
   },
   data () {
     return {
-      show: null,
+      currentShow: 0,
       shows: [],
       timeslots: [],
       calendarSlots: [],
@@ -65,30 +82,26 @@ export default {
         },
       },
       loaded: {
-        show: false,
         shows: false,
         timeslots: false,
+        calendarSlots: false,
       },
     }
   },
 
-  mounted() {
-    this.$root.$on('bv::modal::shown', (bvEvent, modalId) => {
-      if (this.$refs.calendar && modalId === 'idModalSchedules') {
-        this.loadShows()
-        this.$refs.calendar.fireMethod('render')
-      }
-    })
+  created () {
+    if (this.$route.query.show) {
+      this.currentShow = this.$route.query.show
+    } else {
+      this.currentShow = 0
+    }
+    this.loadShows()
   },
 
   methods: {
-    // opens the main modal
-    open (show) {
-      this.show = show
-      this.loaded.show = true
-      this.timeslots = []
-      this.calendarSlots = []
-      this.$refs.modalSchedules.show()
+    switchShow (index) {
+      this.currentShow = index
+      this.loadCalendarSlots()
     },
 
     getShowTitleById (id) {
@@ -103,35 +116,41 @@ export default {
     // this is called when the user changes the calendar view, so we just
     // refetch the timeslots with the updated visible date range
     renderView (view) {
-      this.$log.debug(view.start.format() + ' ' + view.end.format())
       if (this.loaded.shows) {
         this.$log.debug('refetching')
         this.loadTimeslots(view.start.format(), view.end.format())
       }
     },
 
+    loadCalendarSlots () {
+      this.loaded.calendarSlots = false
+      this.calendarSlots = []
+      for (let i in this.timeslots) {
+        let highlighting = 'otherShow'
+        if (this.timeslots[i].show === this.shows[this.currentShow].id) {
+          highlighting = 'currentShow'
+        }
+        this.calendarSlots.push({
+          start: this.timeslots[i].start,
+          end: this.timeslots[i].end,
+          title: this.getShowTitleById(this.timeslots[i].show),
+          className: highlighting
+        })
+      }
+      this.loaded.calendarSlots = true
+    },
+
     loadTimeslots (start, end) {
+      this.$log.debug('loadTimeslots: currentShow = '+this.currentShow)
       this.loaded.timeslots = false
-      this.calendarSlots = []
       let uri = process.env.VUE_APP_API_STEERING + 'timeslots?start=' + start + '&end=' + end
       axios.get(uri, {
         withCredentials: true,
-        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
       }).then(response => {
         this.timeslots = response.data
-        for (let i in this.timeslots) {
-          let highlighting = 'otherShow'
-          if (this.timeslots[i].show === this.show.id) {
-            highlighting = 'currentShow'
-          }
-          this.calendarSlots.push({
-            start: this.timeslots[i].start,
-            end: this.timeslots[i].end,
-            title: this.getShowTitleById(this.timeslots[i].show),
-            className: highlighting
-          })
-        }
         this.loaded.timeslots = true
+        this.loadCalendarSlots()
       }).catch(error => {
         this.$log.error(error.response.status + ' ' + error.response.statusText)
         this.$log.error(error.response)
@@ -144,7 +163,7 @@ export default {
       let uri = process.env.VUE_APP_API_STEERING + 'shows'
       axios.get(uri, {
         withCredentials: true,
-        headers: { 'Authorization': 'Bearer ' + this.$parent.$parent.user.access_token }
+        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
       }).then(response => {
         this.shows = response.data
         this.loaded.shows = true

src/components/ShowManager.vue

@@ -115,15 +115,26 @@
       <app-modalSuperuser
         ref="appModalSuperuser"
       />
-      <app-modalSchedules
-        ref="appModalSchedules"
-      />
 
       <!-- here are the filter settings for our timeslots table -->
       <b-card>
-        <b-btn v-b-toggle.timeslotFilterCollapse>
-          Toggle timeslot filters
-        </b-btn>
+        <b-row>
+          <b-col>
+            <b-btn v-b-toggle.timeslotFilterCollapse>
+              Toggle timeslot filters
+            </b-btn>
+          </b-col>
+          <b-col align="right">
+            <b-button
+              v-if="$parent.user.steeringUser.is_superuser"
+              variant="info"
+              @click="$router.push({path: 'emissions', query: { show: currentShow }})"
+            >
+              Switch to Emission Manager
+            </b-button>
+          </b-col>
+        </b-row>
+
         <b-collapse id="timeslotFilterCollapse">
           <br>
           <!-- How many slots to show per table page -->
@@ -178,7 +189,7 @@
               Reset filter
             </b-btn> &nbsp;
             <b-btn
-              variant="info"
+              variant="outline-success"
               @click="applyFilter()"
             >
               Apply filter
@@ -276,16 +287,6 @@
         </div>
       </div>
 
-      <div align="center">
-        <b-button
-          v-if="$parent.user.steeringUser.is_superuser"
-          variant="info"
-          @click="$refs.appModalSchedules.open(shows[currentShow])"
-        >
-          Add/delete emissions
-        </b-button>
-      </div>
-
       <hr>
 
       <h2>Allgemeine Einstellungen zur Sendereihe:</h2>
@@ -697,7 +698,6 @@
 import modalNotes from './ShowManagerModalNotes.vue'
 import modalShow from './ShowManagerModalShow.vue'
 import modalSuperuser from './ShowManagerModalSuperuser.vue'
-import modalSchedules from './ShowManagerModalSchedules.vue'
 import timeslotSort from '../mixins/timeslotSort'
 import prettyDate from '../mixins/prettyDate'
 import axios from 'axios'
@@ -710,7 +710,6 @@ export default {
     'app-modalNotes': modalNotes,
     'app-modalShow': modalShow,
     'app-modalSuperuser': modalSuperuser,
-    'app-modalSchedules': modalSchedules,
   },
 
   // generic functions that we want to use from our mixins folder

src/router.js

@@ -6,6 +6,7 @@ import Credits from '@/components/Credits'
 import Settings from '@/components/Settings'
 import ShowManager from '@/components/ShowManager'
 import FileManager from '@/components/FileManager'
+import EmissionManager from '@/components/EmissionManager'
 import Debug from '@/components/Debug'
 
 Vue.use(Router)
@@ -15,6 +16,7 @@ export default new Router({
     { path: '/', alias: '/home', name: 'home', component: Home },
     { path: '/shows', name: 'shows', component: ShowManager },
     { path: '/files', name: 'files', component: FileManager },
+    { path: '/emissions', name: 'emissions', component: EmissionManager },
     { path: '/help', name: 'help', component: Help },
     { path: '/settings', name: 'settings', component: Settings },
     { path: '/credits', name: 'credits', component: Credits },