added modals for show description

src/components/ShowManager.vue

@@ -11,18 +11,22 @@
 
     <b-jumbotron>
       <template slot="header">
-        <span v-if="loaded.shows">{{ shows[currentShow].name }}</span>
+        <span v-if="loaded.shows">
+          {{ shows[currentShow].name }}
+          <img src="../assets/16x16/emblem-system.png" alt="edit name of show" v-on:click="$refs.appModalShow.$refs.modalShowName.show()" />
+        </span>
         <span v-else>Shows are being loaded</span>
       </template>
       <template slot="lead">
         <span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
-        <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="notYetImplemented" />
+        <img src="../assets/16x16/emblem-system.png" alt="edit short description" v-on:click="$refs.appModalShow.$refs.modalShowShortDescription.show()" />
       </template>
       <p v-if="loaded.shows">
-        <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="notYetImplemented" />
+        <b>Description:</b> <img src="../assets/16x16/emblem-system.png" alt="edit description" v-on:click="$refs.appModalShow.$refs.modalShowDescription.show()" />
         <div v-if="loaded.shows">
           <!-- TODO: see if we can make a nice but secure html rendering of the description -->
-          {{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}
+          <!--{{ shows[currentShow].description.replace(/<[^>]*>/g, '') }}-->
+          {{ shows[currentShow].description }}
           <!-- TODO: add image and logo here? -->
         </div>
       </p>
@@ -36,6 +40,7 @@
       </b-row>
     </div>
     <div v-else>
+      <app-modalShow ref="appModalShow" v-bind:show="shows[currentShow]"></app-modalShow>
       <app-modalNotes ref="appModalNotes" v-bind:note="current.note"></app-modalNotes>
 
       <p align="left">Die nächsten <select v-model="numUpcoming">
@@ -259,13 +264,15 @@
 
 <script>
 import modalNotes from './ShowManagerModalNotes.vue'
+import modalShow from './ShowManagerModalShow.vue'
 import timeslotSort from '../mixins/timeslotSort'
 import prettyDate from '../mixins/prettyDate'
 import axios from 'axios'
 
 export default {
   components: {
-    'app-modalNotes': modalNotes
+    'app-modalNotes': modalNotes,
+    'app-modalShow': modalShow
   },
   data () {
     return {

src/components/ShowManagerModalNotes.vue

@@ -40,10 +40,5 @@ export default {
 </script>
 
 <style scoped>
-div.recenttimeslots {
-  margin-top: 2em;
-}
-.showsettings, .recenttimeslots, .nexttimeslots {
-  text-align: left;
-}
+
 </style>

src/components/ShowManagerModalShow.vue

+<template>
+  <div>
+    <b-modal ref="modalShowName" title="Name of the show" size="lg">
+      <b-form-input v-model="show.name" type="text" placeholder="Enter name of the show"></b-form-input>
+    </b-modal>
+
+    <b-modal ref="modalShowShortDescription" title="Short description" size="lg">
+      <b-form-textarea v-model="show.short_description" :rows="2" placeholder="Enter a short description"></b-form-textarea>
+    </b-modal>
+
+    <b-modal ref="modalShowDescription" title="Full description" size="lg">
+      <b-form-textarea v-model="show.description" :rows="2" placeholder="Enter the full description of this show"></b-form-textarea>
+    </b-modal>
+    
+  </div>
+</template>
+
+<script>
+// import axios from 'axios'
+
+export default {
+  props: {
+    show: { type: Object, required: true }
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    save: function () {
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>