FEAT: add past event warning and recurring schedules

src/components/EmissionManagerModalCreate.vue

@@ -17,32 +17,101 @@
         </b-col>
       </b-row>
 
-      <b-row v-if="loaded">
-        <b-col cols="2">
-          Start:
-        </b-col>
-        <b-col cols="4">
-          {{ newSchedule.schedule.dstart }} {{ newSchedule.schedule.tstart }}
-        </b-col>
-        <b-col cols="2">
-          End:
-        </b-col>
-        <b-col cols="4">
-          {{ newSchedule.schedule.tend }}
-        </b-col>
-      </b-row>
+      <b-alert
+        variant="warning"
+        :show="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.
+      </b-alert>
+
+      <div v-if="loaded">
+        <b-row>
+          <b-col cols="2">
+            Start:
+          </b-col>
+          <b-col cols="3">
+            <b-form-input
+              v-model="valuePick.dstart"
+              type="date"
+            />
+          </b-col>
+          <b-col cols="3">
+            <b-form-input
+              v-model="valuePick.tstart"
+              type="time"
+            />
+          </b-col>
+          <b-col cols="1">
+            End:
+          </b-col>
+          <b-col cols="3">
+            <b-form-input
+              v-model="valuePick.tend"
+              type="time"
+            />
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col cols="2">
+            Type of event:
+          </b-col>
+          <b-col cols="6">
+            <b-form-select
+              v-model="valuePick.rrule"
+              :options="rruleOptions"
+            />
+          </b-col>
+          <b-col v-if="valuePick.rrule != 1">
+            Until:
+          </b-col>
+          <b-col v-if="valuePick.rrule != 1">
+            <b-form-input
+              v-model="valuePick.until"
+              type="date"
+            />
+          </b-col>
+        </b-row>
+      </div>
     </b-modal>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
+import prettyDate from '../mixins/prettyDate'
 
 export default {
+  mixins: [ prettyDate ],
+
   data () {
     return {
       newSchedule: null,
-      loaded: false
+      loaded: false,
+      pastEventWarning: false,
+      valuePick: {
+        dstart: null,
+        tstart: null,
+        tend: null,
+        until: null,
+        rrule: 1
+      },
+      rruleOptions: [
+        { value: 1, text: 'einmalig' },
+        { value: 2, text: 'täglich' },
+        { value: 3, text: 'werktäglich' },
+        { value: 4, text: 'wöchentlich' },
+        { value: 5, text: 'zweiwöchentlich' },
+        { value: 6, text: 'vierwöchentlich' },
+        { value: 7, text: 'gerade Kalenderwoche' },
+        { value: 8, text: 'ungerade Kalenderwoche' },
+        { value: 9, text: 'Jede 1. Woche im Monat' },
+        { value: 10, text: 'Jede 2. Woche im Monat' },
+        { value: 11, text: 'Jede 3. Woche im Monat' },
+        { value: 12, text: 'Jede 4. Woche im Monat' },
+        { value: 13, text: 'Jede 5. Woche im Monat' },
+      ],
     }
   },
 
@@ -50,6 +119,25 @@ export default {
     create (event) {
       // prevent the modal from closing automatically on click
       event.preventDefault()
+      // check for past dates; as past dates will be ignored by steering we
+      // want to make the user aware - otherwise it might get confusing in
+      // conflict resolution
+      let now = this.apiDate(new Date())
+      if (this.valuePick.dstart < now) {
+        this.valuePick.dstart = now
+        this.pastEventWarning = true
+        return
+      } else {
+        this.pastEventWarning = false
+      }
+      // take all values that have been picked and put them into our new
+      // schedule. so far we do not need any transformations.
+      this.newSchedule.schedule.dstart = this.valuePick.dstart
+      this.newSchedule.schedule.tstart = this.valuePick.tstart
+      this.newSchedule.schedule.tend = this.valuePick.tend
+      this.newSchedule.schedule.until = this.valuePick.until
+      this.newSchedule.schedule.rrule = this.valuePick.rrule
+      // now generate the URL and POST our new schedule
       let uri = process.env.VUE_APP_API_STEERING_SHOWS + this.$parent.shows[this.$parent.currentShow].id + '/schedules/'
       axios.post(uri, this.newSchedule, {
         withCredentials: true,
@@ -107,15 +195,30 @@ export default {
 
     // initialise a new schedule and open the modal
     open (start, end) {
+      let dstart = start.format('YYYY-MM-DD')
+      let tstart = start.format('HH:mm')
+      let tend = end.format('HH:mm')
+      let until = end.format('YYYY-MM-DD')
+      let now = this.apiDate(new Date())
+      if (dstart < now) {
+        dstart = now
+        this.pastEventWarning = true
+      } else {
+        this.pastEventWarning = false
+      }
+      this.valuePick.dstart = dstart
+      this.valuePick.tstart = tstart
+      this.valuePick.tend = tend
+      this.valuePick.until = until
       this.newSchedule = {
         schedule: {
           rrule: 1,
           show: 21,
           byweekday: 0,
-          dstart: start.format('YYYY-MM-DD'),
-          tstart: start.format('HH:mm'),
-          tend: end.format('HH:mm'),
-          until: end.format('YYYY-MM-DD'),
+          dstart: dstart,
+          tstart: tstart,
+          tend: tend,
+          until: until,
           is_repetition: false,
           add_days_no: 0,
           add_business_days_only: false,
@@ -131,7 +234,7 @@ export default {
 </script>
 
 <style scoped>
-.slug {
-  color: gray;
+.row {
+  margin-bottom: 1em;
 }
 </style>