modal for notes & prettyDate mixins

src/components/ShowManager.vue

@@ -36,6 +36,8 @@
       </b-row>
     </div>
     <div v-else>
+      <app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
+
       <p align="left">Die nächsten <select v-model="numUpcoming">
         <option>8</option>
         <option>16</option>
@@ -50,7 +52,7 @@
               {{ prettyDate(timeslot.start) }} ({{ prettyDuration(timeslot.start, timeslot.end) }})
               <span v-if="loaded.notes">{{ prettyTimeslotNote(timeslot.id) }}</span>
               <span v-else style="background: ../assets/radio.gif"></span>
-              <img src="../assets/16x16/emblem-system.png" alt="edit" v-on:click="notYetImplemented" />
+              <img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="editNote(timeslot.id)" />
             </div>
           </b-col>
         </b-row>
@@ -256,15 +258,15 @@
 </template>
 
 <script>
+import modalNotes from './ShowManagerModalNotes.vue'
 import timeslotSort from '../mixins/timeslotSort'
+import prettyDate from '../mixins/prettyDate'
 import axios from 'axios'
 
-function leadingZero (num) {
-  if (num < 10) return '0' + num
-  else return num.toString()
-}
-
 export default {
+  components: {
+    'app-modalNotes': modalNotes
+  },
   data () {
     return {
       shows: [],      // an array of objects describing our shows (empty at load, will be populated on created())
@@ -293,11 +295,12 @@ export default {
         topics: [],
         musicfocus: [],
         rtrcategory: [],
-        type: []
+        type: [],
+        note: {}
       }
     }
   },
-  mixins: [ timeslotSort ],
+  mixins: [ timeslotSort, prettyDate ],
   computed: {
     timeslotsFutureShow: function () {
       if (this.numUpcoming === 'all') return this.timeslotsFuture
@@ -335,14 +338,14 @@ export default {
       this.getRTRCategory()
       this.getType()
       // now fetch the single timeslots for a given show from PV backend
-      axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/').then(response => {
+      axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/timeslots/', {withCredentials: true}).then(response => {
         this.timeslots = response.data
         this.loaded.timeslots = true
         // now that we have the timeslots we can fetch notes for all those timeslots
         // TODO: curently we are fetching all notes for the show into a single array
         // for bigger data sets it might be preferable to fetch only the notes for those
         // timeslots that are also visible to the user
-        axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/').then(response => {
+        axios.get(process.env.API_STEERING_SHOWS + this.currentShowID + '/notes/', {withCredentials: true}).then(response => {
           this.notes = response.data
           this.loaded.notes = true
         }).catch(error => {
@@ -354,6 +357,15 @@ export default {
       })
       // done fetching timeslots
     },
+    editNote: function (timeslotID) {
+      for (var n in this.notes) {
+        if (this.notes[n].timeslot === timeslotID) {
+          this.current.note = this.notes[n]
+          break
+        }
+      }
+      this.$refs.appModalNotes.$refs.modalNote.show()
+    },
     getTimeslotNote: function (timeslotID) {
       for (var n in this.notes) {
         if (this.notes[n].timeslot === timeslotID && this.notes[n].title !== undefined) {
@@ -362,17 +374,6 @@ export default {
       }
       return null
     },
-    prettyDate: function (date) {
-      var d = new Date(date)
-      // 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())
-    },
-    prettyDuration: function (start, end) {
-      var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
-      var hours = Math.floor(duration / 60 / 60)
-      var minutes = (duration / 60) % 60
-      return leadingZero(hours) + ':' + leadingZero(minutes)
-    },
     prettyTimeslotNote: function (timeslotID) {
       var note = this.getTimeslotNote(timeslotID)
       if (note !== null) {
@@ -396,7 +397,7 @@ export default {
         this.loaded.categories = true
       } else {
         for (var i in this.shows[this.currentShow].category) {
-          axios.get(process.env.API_STEERING + 'categories/' + this.shows[this.currentShow].category[i]).then(response => {
+          axios.get(process.env.API_STEERING + 'categories/' + this.shows[this.currentShow].category[i], {withCredentials: true}).then(response => {
             this.current.categories.push(response.data)
           }).catch(error => {
             loadingError = true
@@ -413,7 +414,7 @@ export default {
         this.loaded.hosts = true
       } else {
         for (var i in this.shows[this.currentShow].hosts) {
-          axios.get(process.env.API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/').then(response => {
+          axios.get(process.env.API_STEERING + 'hosts/' + this.shows[this.currentShow].hosts[i] + '/', {withCredentials: true}).then(response => {
             this.current.hosts.push(response.data)
           }).catch(error => {
             loadingError = true
@@ -430,7 +431,7 @@ export default {
         this.loaded.categories = true
       } else {
         for (var i in this.shows[this.currentShow].language) {
-          axios.get(process.env.API_STEERING + 'languages/' + this.shows[this.currentShow].language[i]).then(response => {
+          axios.get(process.env.API_STEERING + 'languages/' + this.shows[this.currentShow].language[i], {withCredentials: true}).then(response => {
             this.current.languages.push(response.data)
           }).catch(error => {
             loadingError = true
@@ -447,7 +448,7 @@ export default {
         this.loaded.topics = true
       } else {
         for (var i in this.shows[this.currentShow].topic) {
-          axios.get(process.env.API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i]).then(response => {
+          axios.get(process.env.API_STEERING + 'topics/' + this.shows[this.currentShow].topic[i], {withCredentials: true}).then(response => {
             this.current.topics.push(response.data)
           }).catch(error => {
             loadingError = true
@@ -464,7 +465,7 @@ export default {
         this.loaded.musicfocus = true
       } else {
         for (var i in this.shows[this.currentShow].musicfocus) {
-          axios.get(process.env.API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i]).then(response => {
+          axios.get(process.env.API_STEERING + 'musicfocus/' + this.shows[this.currentShow].musicfocus[i], {withCredentials: true}).then(response => {
             this.current.musicfocus.push(response.data)
           }).catch(error => {
             loadingError = true
@@ -480,7 +481,7 @@ export default {
       if (typeof this.shows[this.currentShow].rtrcategory !== 'number') {
         this.loaded.rtrcategory = true
       } else {
-        axios.get(process.env.API_STEERING + 'rtrcategories/' + this.shows[this.currentShow].rtrcategory).then(response => {
+        axios.get(process.env.API_STEERING + 'rtrcategories/' + this.shows[this.currentShow].rtrcategory, {withCredentials: true}).then(response => {
           this.current.rtrcategory.push(response.data)
         }).catch(error => {
           loadingError = true
@@ -492,13 +493,10 @@ export default {
     getType: function () {
       this.current.type = []
       var loadingError = false
-      console.log(this.shows[this.currentShow])
-      console.log(typeof this.shows[this.currentShow].type)
       if (typeof this.shows[this.currentShow].type !== 'number') {
         this.loaded.type = true
       } else {
-        axios.get(process.env.API_STEERING + 'types/' + this.shows[this.currentShow].type).then(response => {
-          console.log(response.data)
+        axios.get(process.env.API_STEERING + 'types/' + this.shows[this.currentShow].type, {withCredentials: true}).then(response => {
           this.current.type.push(response.data)
         }).catch(error => {
           loadingError = true
@@ -512,7 +510,7 @@ export default {
     }
   },
   created () {
-    axios.get(process.env.API_STEERING_SHOWS).then(response => {
+    axios.get(process.env.API_STEERING_SHOWS, {withCredentials: true}).then(response => {
       this.shows = response.data
       this.currentShowID = this.shows[0].id
       this.currentShow = 0

src/components/ShowManagerModalNotes.vue

+<template>
+  <b-modal ref="modalNote" title="Editing a note" size="lg">
+    <b-container fluid>
+      <p>This is the note for the timeslot on {{ prettyDate(note.start) }}.)</p>
+      <b-row>
+        <b-col cols="2">Title:</b-col>
+        <b-col cols="10"><b-form-input v-model="note.title" type="text" placeholder="Enter a title"></b-form-input></b-col>
+      </b-row>
+      <b-row>
+        <b-col cols="2">Summary:</b-col>
+        <b-col cols="10"><b-form-textarea v-model="note.summary" :rows="4" placeholder="Enter a summary"></b-form-textarea></b-col>
+      </b-row>
+      <b-row>
+        <b-col cols="2">Content:</b-col>
+        <b-col cols="10"><b-form-textarea v-model="note.content" :rows="8" placeholder="Enter a text describing this timeslot"></b-form-textarea></b-col>
+      </b-row>
+    </b-container>
+  </b-modal>
+</template>
+
+<script>
+import prettyDate from '../mixins/prettyDate'
+// import axios from 'axios'
+
+export default {
+  props: {
+    note: { type: Object, required: true }
+  },
+  mixins: [ prettyDate ],
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    save: function () {
+    }
+  }
+}
+</script>
+
+<style scoped>
+div.recenttimeslots {
+  margin-top: 2em;
+}
+.showsettings, .recenttimeslots, .nexttimeslots {
+  text-align: left;
+}
+</style>

src/mixins/prettyDate.js

+function leadingZero (num) {
+  if (num < 10) return '0' + num
+  else return num.toString()
+}
+
+export default {
+  methods: {
+    prettyDate: function (date) {
+      var d = new Date(date)
+      // 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())
+    },
+    prettyDuration: function (start, end) {
+      var duration = (new Date(end).getTime() - new Date(start).getTime()) / 1000
+      var hours = Math.floor(duration / 60 / 60)
+      var minutes = (duration / 60) % 60
+      return leadingZero(hours) + ':' + leadingZero(minutes)
+    }
+  }
+}