Show projected duration when adding new timeslot

src/components/emissions/ModalCreate.vue

@@ -11,7 +11,7 @@
                     variant="warning"
                     :show="pastEventWarning"
             >
-                <span v-html="$t('scheduleEditor.pastEventWarning')" />
+                <span v-html="$t('scheduleEditor.pastEventWarning')"/>
             </b-alert>
 
             <div v-if="loaded.modal && !submitting">
@@ -39,7 +39,7 @@
                     </b-col>
                     <b-col cols="3" v-if="valuePick.rrule != 1">
                         <label class="tw-w-full tw-font-bold">
-                            <span class="tw-inline-block tw-pb-2" v-html="$t('scheduleEditor.toDate')" />
+                            <span class="tw-inline-block tw-pb-2" v-html="$t('scheduleEditor.toDate')"/>
                             <b-form-input
                                     v-model="valuePick.until"
                                     type="date"
@@ -76,6 +76,18 @@
                     </b-col>
                 </b-row>
             </div>
+
+            <template v-slot:modal-footer="{ ok, cancel }">
+                <div class="tw-flex tw-justify-between tw-items-center tw-w-full">
+                    <span v-html="$t('scheduleEditor.projectedDuration', { duration: projectedTimeslotDuration })"/>
+
+                    <div class="tw-space-x-2">
+                        <b-button @click="cancel()">{{ $t('cancel') }}</b-button>
+                        <b-button variant='primary' @click="ok()">OK</b-button>
+                    </div>
+                </div>
+
+            </template>
         </b-modal>
     </div>
 </template>
@@ -97,6 +109,7 @@
                 valuePick: {
                     dstart: null,
                     tstart: null,
+                    dend: null,
                     tend: null,
                     until: null,
                     rrule: 1
@@ -112,6 +125,18 @@
                 }
             },
 
+            projectedTimeslotDuration() {
+                const {dstart, tstart, dend, tend} = this.valuePick;
+
+                const d1 = new Date(`${dstart} ${tstart}`);
+                const d2 = new Date(`${dend} ${tend}`);
+
+                const diffInNs = (d2 - d1) * 1000 * 1000;
+                const diffInMinutes = this.nanosecondsToMinutes(diffInNs);
+
+                return this.minutesToHm(diffInMinutes);
+            },
+
             ...mapGetters({
                 selectedShow: 'shows/selectedShow',
             })
@@ -201,6 +226,7 @@
             open(start, end) {
                 let dstart = start.format('YYYY-MM-DD')
                 let tstart = start.format('HH:mm')
+                let dend = end.format('YYYY-MM-DD')
                 let tend = end.format('HH:mm')
                 let until = end.format('YYYY-MM-DD')
                 let now = this.apiDate(new Date())
@@ -212,6 +238,7 @@
                 }
                 this.valuePick.dstart = dstart
                 this.valuePick.tstart = tstart
+                this.valuePick.dend = dend
                 this.valuePick.tend = tend
                 this.valuePick.until = until
                 this.newSchedule = {

src/i18n/de.js

@@ -369,6 +369,7 @@ export default {
 
         'start': 'Start',
         'end': 'Ende',
+        'projectedDuration': '<b>Geplante Dauer: </b> %{duration}',
 
         'pastEventWarning': 'Vergangene Daten werden ignoriert. Startdatum wurde auf heute gesetzt!<br>Versuch es noch einmal oder setze ein Startdatum in die Zukunft.',
         'from': 'Von',

src/i18n/en.js

@@ -369,6 +369,7 @@ export default {
 
         'start': 'Start',
         'end': 'End',
+        'projectedDuration': '<b>Projected duration: </b> %{duration}',
 
         'pastEventWarning': 'Past events will be ignored. Start date was set to today!<br>Try again or change the start date to something in the future.',
         'from': 'From',

src/mixins/prettyDate.js

@@ -110,6 +110,12 @@ export default {
 
             return seconds * 1000 * 1000 * 1000;
         },
+        minutesToHm: function(minutes) {
+            var m = minutes % 60;
+            var h = (minutes-m)/60;
+
+            return `${this.leadingZero(h)}:${this.leadingZero(m)}`;
+        },
         prettyWeekday: function (weekday) {
             let w;