Expand playlist duration automatically

src/Pages/EditPlaylist.vue

@@ -295,23 +295,25 @@
                     return !entry.duration
                 });
 
-                console.log(unknowns);
-
                 return unknowns.length > 1;
             },
 
             playlistDuration() {
+                if (!this.playlistEditor.entries) {
+                    return 0
+                }
+
                 const totalDuration = this.playlistEditor.entries.reduce((acc, entry) => {
-                    const file = entry.file || {}
-                    const {id} = file
-                    const savedFile = this.getFileById(id) || {};
+                    const newDuration = entry.file
+                        ? acc + this.getFileById(entry.file.id).duration
+                        : acc + entry.duration
 
-                    if (Number.isNaN(acc + savedFile.duration)) {
-                        return acc;
+                    if (Number.isNaN(newDuration)) {
+                        return acc
                     }
 
-                    return acc + savedFile.duration;
-                }, 0);
+                    return newDuration
+                }, 0)
 
                 return this.prettyNanoseconds(totalDuration)
             },
@@ -344,7 +346,7 @@
                     this.playlistEditor.durationField = false;
                     this.playlistEditor.newDuration = '';
 
-                    Vue.delete(this.playlistEditor[entryIndex], 'duration');
+                    Vue.delete(this.playlistEditor.entries[entryIndex], 'duration');
                     return;
                 }
 
@@ -359,7 +361,7 @@
                 }
 
                 Vue.set(entry, 'duration', this.hmsToNanoseconds(duration));
-                Vue.set(this.playlistEditor, entryIndex, entry);
+                Vue.set(this.playlistEditor.entries, entryIndex, entry);
 
                 this.playlistEditor.durationField = false;
                 this.playlistEditor.newDuration = '';
@@ -477,6 +479,7 @@
                         entry.file.id = playlist.entries[i].file.id
                     } else {
                         entry.uri = playlist.entries[i].uri
+                        entry.duration = playlist.entries[i].duration
                     }
                     this.playlistEditor.entries.push(entry)
                 }

src/Pages/EmissionManager.vue

@@ -465,8 +465,6 @@ export default {
 
     // submit a conflict-resolved schedule to steering
     resolveSubmit () {
-      console.log("before", this.resolveData);
-
       // TODO: check why steering retourns undefined and null values here
       if (this.resolveData.schedule.add_business_days_only === undefined) { this.resolveData.schedule.add_business_days_only = false }
       if (this.resolveData.schedule.add_days_no === null) { this.resolveData.schedule.add_days_no = 0 }
@@ -475,8 +473,6 @@ export default {
       if (this.resolveData.schedule.automation_id === null) { this.resolveData.schedule.automation_id = 0 }
       if (this.resolveData.schedule.byweekday === undefined) { this.resolveData.schedule.byweekday = 0 }
 
-      console.log("after", this.resolveData);
-
       // create the resolved schedule object including solutions
       let resolvedSchedule = {
         schedule: this.resolveData.schedule,

src/components/emissions/ModalEdit.vue

@@ -293,8 +293,6 @@ export default {
         }
       };
 
-      console.log(newSchedule);
-
       this.$store.dispatch('shows/submitSchedule', {
         showId: this.selectedShow.id,
         schedule: newSchedule,
@@ -392,8 +390,6 @@ export default {
     },
 
     getRepetitionParameters() {
-      console.log(typeof this.repetitionRule);
-
       if (this.repetitionRule == 1) {
         return {
           onlyBusinessDays: false,

src/components/shows/PlaylistSelector.vue

@@ -30,14 +30,12 @@
           This column displays the number of entries of the playlist.
           -->
           <template v-slot:cell(entries)="data">
-            {{ data.value.length }} items
-            <b-button
+            <span
               v-b-tooltip.html="playlistToolTip(data.value)"
-              variant="outline-success"
-              size="sm"
+              class="tw-underline hover:tw-no-underline tw-cursor-help"
             >
-              show entries
-            </b-button>
+              {{ data.value.length }} items
+            </span>
           </template>
 
 
@@ -48,7 +46,7 @@
             <span
               :class="{'is-mismatched': isMismatchedLength(data) }"
             >
-              {{ playlistDuration(data) }}
+              {{ prettyNanoseconds(playlistDuration(data)) }}
 
               <abbr
                 v-if="isMismatchedLength(data)"
@@ -124,6 +122,15 @@ export default {
   computed: {
     loaded () { return this.$store.state.playlists.loaded.playlists },
 
+    timeslotDurationInNs() {
+      const mm = this.timeslotDuration % 60;
+      const hh = (this.timeslotDuration - mm) / 60;
+
+      return this.hmsToNanoseconds(
+              `${this.leadingZero(hh)}:${this.leadingZero(mm)}:00`
+      );
+    },
+
     timeslotDuration() {
       const { start, end } = this.timeslot
 
@@ -199,20 +206,40 @@ export default {
     },
 
     playlistDuration({ item }) {
-      const totalDuration = item.entries.reduce((acc, entry) => acc + entry.duration, 0);
-      return this.prettyNanoseconds(totalDuration)
-    },
+      if (!item.entries) {
+        return 0;
+      }
 
-    isMismatchedLength({ item }) {
-      const totalDuration = this.calculatePlaylistDuration(item)
-      const durationInMinutes = this.nanosecondsToMinutes(totalDuration)
+      let delta = 0;
+      const totalDuration = item.entries.reduce((acc, entry) => {
+        const newDuration = acc + entry.duration;
+
+        if (Number.isNaN(newDuration)) {
+          return acc;
+        }
 
-      return this.timeslotDuration !== durationInMinutes
+        return newDuration
+      }, 0);
+
+      const unknowns = item.entries.filter(entry => !entry.duration);
+      if (unknowns.length === 1) {
+        delta = this.timeslotDurationInNs - totalDuration;
+      }
+
+      return totalDuration + delta
     },
 
-    calculatePlaylistDuration(item) {
-      return item.entries.reduce((acc, entry) => acc + entry.duration, 0)
-    }
+    isMismatchedLength(playlist) {
+      const totalDuration = this.playlistDuration(playlist);
+      let delta = 0;
+
+      const unknowns = playlist.item.entries.filter(entry => !entry.duration);
+      if (unknowns.length === 1) {
+        delta = this.timeslotDurationInNs - totalDuration;
+      }
+
+      return this.timeslotDurationInNs !== totalDuration + delta;
+    },
   }
 }
 </script>

src/mixins/prettyDate.js

-function leadingZero (num) {
-  if (num < 10) { return '0' + num }
-  else { return num.toString() }
-}
-
 var day = [
   'Sunday',
   'Monday',
@@ -30,9 +25,14 @@ var month = [
 
 export default {
   methods: {
+    leadingZero (num) {
+      if (num < 10) { return '0' + num }
+      else { return num.toString() }
+    },
+
     apiDate: function (date) {
       var d = new Date(date)
-      return d.getFullYear() + '-' + leadingZero(d.getMonth() + 1) + '-' + leadingZero(d.getDate())
+      return d.getFullYear() + '-' + this.leadingZero(d.getMonth() + 1) + '-' + this.leadingZero(d.getDate())
     },
     getWeekdayFromApiDate: function (date) {
       let d = new Date(date)
@@ -45,7 +45,7 @@ export default {
       var d = new Date(date)
       var dstring = ''
       dstring += day[d.getDay()] + ', '
-      dstring += leadingZero(d.getDate()) + '. '
+      dstring += this.leadingZero(d.getDate()) + '. '
       dstring += month[d.getMonth()] + ' '
       dstring += d.getFullYear()
       return dstring
@@ -55,14 +55,14 @@ export default {
       /*
       // This is a simple numbered representation - have to decide which one to use in final design
       // note: Date.getMonth() returns the month as an index from 0 to 11
-      return leadingZero(d.getDate()) + '.' + leadingZero(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes())
+      return this.leadingZero(d.getDate()) + '.' + this.leadingZero(d.getMonth() + 1) + '.' + d.getFullYear() + ' ' + this.leadingZero(d.getHours()) + ':' + this.leadingZero(d.getMinutes())
       */
       var dstring = ''
       dstring += day[d.getDay()] + ', '
-      dstring += leadingZero(d.getDate()) + '. '
+      dstring += this.leadingZero(d.getDate()) + '. '
       dstring += month[d.getMonth()] + ' '
       dstring += d.getFullYear() + ', '
-      dstring += leadingZero(d.getHours()) + ':' + leadingZero(d.getMinutes()) + ':' + leadingZero(d.getSeconds())
+      dstring += this.leadingZero(d.getHours()) + ':' + this.leadingZero(d.getMinutes()) + ':' + this.leadingZero(d.getSeconds())
       return dstring
     },
     prettyHours(hours) {
@@ -84,7 +84,7 @@ 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.toFixed(0))
+      return this.leadingZero(hours) + ':' + this.leadingZero(minutes) + ':' + this.leadingZero(seconds.toFixed(0))
     },
     nanosecondsToMinutes: function(ns) {
       return ns / 1000 / 1000 / 1000 / 60;

src/store/modules/files.js

@@ -200,7 +200,6 @@ const actions = {
     */
 
     let uri = process.env.VUE_APP_API_TANK + 'shows/' + data.show + '/files/' + data.file + '/upload'
-    console.log(data);
     axios.put(uri, data.uploadSourceFile, {
       withCredentials: true,
       headers: {