Finish initial buildout of new modal Playlist form.

web/static/assets.json

@@ -46,8 +46,8 @@
   "dist/light.css": "dist/light-a0a23d9ad3.css",
   "dist/material.js": "dist/material-8a0f31e5be.js",
   "dist/radio_player.js": "dist/radio_player-b8df57d8b4.js",
-  "dist/station_media.js": "dist/station_media-05d6d23bfa.js",
-  "dist/station_playlists.js": "dist/station_playlists-f1b5c19c44.js",
+  "dist/station_media.js": "dist/station_media-f6552ed90b.js",
+  "dist/station_playlists.js": "dist/station_playlists-ad24176ce6.js",
   "dist/vue_gettext.js": "dist/vue_gettext-3680f650b9.js",
   "dist/webcaster.js": "dist/webcaster-137f49b033.js",
   "dist/zxcvbn.js": "dist/zxcvbn-f4433cd930.js"

web/static/vue/StationPlaylists.vue

@@ -44,8 +44,8 @@
                                         </b-dropdown-item>
                                         <template v-for="format in ['pls', 'm3u']">
                                             <b-dropdown-item :href="row.item.links.export[format]" target="_blank">
-                                                <translate :translate-params="{ format: format.toUpperCase() }">Export
-                                                    %{format}
+                                                <translate :translate-params="{ format: format.toUpperCase() }">
+                                                    Export %{format}
                                                 </translate>
                                             </b-dropdown-item>
                                         </template>
@@ -94,7 +94,7 @@
             </b-tabs>
         </b-card>
 
-        <edit-modal ref="editModal" :create-url="listUrl"></edit-modal>
+        <edit-modal ref="editModal" :create-url="listUrl" :station-time-zone="stationTimeZone"></edit-modal>
         <reorder-modal ref="reorderModal"></reorder-modal>
     </div>
 </template>
@@ -201,7 +201,7 @@
           delay: 3000
         })
 
-        axios.put(record.links_toggle).then((resp) => {
+        axios.put(url).then((resp) => {
           notify('<b>' + resp.data.message + '</b>', 'success')
 
           this.relist()
@@ -212,13 +212,29 @@
           }
         })
       },
-      doDelete () {
+      doDelete (url) {
+        let buttonText = this.$gettext('Delete')
+        let buttonConfirmText = this.$gettext('Delete playlist?')
 
+        swal({
+          title: buttonConfirmText,
+          buttons: [true, buttonText],
+          dangerMode: true
+        }).then((value) => {
+          if (value) {
+            axios.delete(url).then((resp) => {
+              notify('<b>' + resp.data.message + '</b>', 'success')
+
+              this.relist()
+            }).catch((err) => {
+              console.error(err)
+              if (err.response.message) {
+                notify('<b>' + err.response.message + '</b>', 'danger')
+              }
+            })
+          }
+        })
       }
     }
   }
-</script>
-
-<style lang="scss">
-
-</style>
+</script>

web/static/vue/components/PlaylistTime.vue

@@ -0,0 +1,39 @@
+<template>
+    <b-input v-bind="$attrs" type="time" v-model="timeCode" pattern="[0-9]{2}:[0-9]{2}" placeholder="13:45"></b-input>
+</template>
+
+<script>
+  import _ from 'lodash'
+
+  export default {
+    props: ['value'],
+    computed: {
+      timeCode: {
+        get () {
+          return this.parseTimeCode(this.value)
+        },
+        set (newValue) {
+          this.$emit('input', this.convertToTimeCode(newValue))
+        }
+      }
+    },
+    methods: {
+      parseTimeCode (timeCode) {
+        if (timeCode !== '' && timeCode !== null) {
+          timeCode = _.padStart(timeCode, 4, '0')
+          return timeCode.substr(0, 2) + ':' + timeCode.substr(2)
+        }
+
+        return null
+      },
+      convertToTimeCode (time) {
+        if (_.isEmpty(time)) {
+          return null
+        }
+
+        let timeParts = time.split(':')
+        return (100 * parseInt(timeParts[0], 10)) + parseInt(timeParts[1], 10)
+      }
+    }
+  }
+</script>

web/static/vue/station_playlists/PlaylistEditModal.vue

@@ -7,10 +7,18 @@
             <b-tabs content-class="mt-3">
                 <form-basic-info :form="$v.form"></form-basic-info>
                 <form-source :form="$v.form"></form-source>
-                <form-order :form="$v.form"></form-order>
-                <form-schedule :form="$v.form"></form-schedule>
+                <form-schedule :form="$v.form" :schedule-items="form.schedule_items"
+                               :station-time-zone="stationTimeZone"></form-schedule>
             </b-tabs>
         </b-form>
+        <template v-slot:modal-footer>
+            <b-button variant="default" @click="close">
+                <translate>Close</translate>
+            </b-button>
+            <b-button variant="primary" @click="doSubmit" :disabled="$v.form.$invalid">
+                <translate>Save Changes</translate>
+            </b-button>
+        </template>
     </b-modal>
 </template>
 
@@ -19,16 +27,16 @@
   import { validationMixin } from 'vuelidate'
   import required from 'vuelidate/src/validators/required'
   import FormBasicInfo from './form/PlaylistFormBasicInfo'
-  import FormOrder from './form/PlaylistFormOrder'
   import FormSource from './form/PlaylistFormSource'
   import FormSchedule from './form/PlaylistFormSchedule'
 
   export default {
     name: 'EditModal',
-    components: { FormSchedule, FormSource, FormBasicInfo, FormOrder },
+    components: { FormSchedule, FormSource, FormBasicInfo },
     mixins: [validationMixin],
     props: {
-      createUrl: String
+      createUrl: String,
+      stationTimeZone: String
     },
     data () {
       return {
@@ -39,7 +47,12 @@
     },
     computed: {
       langTitle () {
-        return this.$gettext('Edit Playlist')
+        return this.isEditMode
+          ? this.$gettext('Edit Playlist')
+          : this.$gettext('Add Playlist')
+      },
+      isEditMode () {
+        return this.editUrl !== null
       }
     },
     validations: {
@@ -61,7 +74,13 @@
         'include_in_automation': {},
         'backend_options': {},
         'schedule_items': {
-          $each: {}
+          $each: {
+            'start_time': { required },
+            'end_time': { required },
+            'start_date': {},
+            'end_date': {},
+            'days': {}
+          }
         }
       }
     },
@@ -135,8 +154,12 @@
         }
 
         axios({
-          method: (this.editUrl === null) ? 'POST' : 'PUT',
-          url: (this.editUrl === null) ? this.createUrl : this.editUrl,
+          method: (this.isEditMode)
+            ? 'PUT'
+            : 'POST',
+          url: (this.isEditMode)
+            ? this.editUrl
+            : this.createUrl,
           data: this.form
         }).then((resp) => {
           let notifyMessage = this.$gettext('Changes saved.')
@@ -153,15 +176,15 @@
           this.$emit('relist')
           this.close()
         })
-      }
-    },
-    close () {
-      this.loading = false
-      this.editUrl = null
-      this.resetForm()
+      },
+      close () {
+        this.loading = false
+        this.editUrl = null
+        this.resetForm()
 
-      this.$v.form.$reset()
-      this.$refs.modal.hide()
+        this.$v.form.$reset()
+        this.$refs.modal.hide()
+      }
     }
   }
 </script>