fix(editor): added option to (de-)activate relative starting time fea…

…ture

src/components/EditorPlaylist.vue

@@ -3,18 +3,23 @@
     <template v-for="(item, index) in playlistItems">
       <b-list-item
         v-if="index === 0 || item.track.first_of_hour"
+        v-show="showStartingTime"
         :key="item.track.relative_start_time_ms"
         class="section-headline"
       >
         {{ item.track.relative_start_time_ms | formatTime('h:mm') }} Uhr
       </b-list-item>
-      <editor-playlist-item :item="item" :key="item.track.id"/>
+      <editor-playlist-item
+        :item="item"
+        :position="index+1"
+        :key="item.track.id"
+      />
     </template>
   </b-list>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import EditorPlaylistItem from './EditorPlaylistItem.vue';
 import formatTime from '../utils/formatTime';
 
@@ -27,6 +32,9 @@ export default {
     },
   },
   computed: {
+    ...mapState('editor', {
+      showStartingTime: state => state.showStartingTime,
+    }),
     ...mapGetters({
       playlistItems: 'editor/playlistItems',
     }),

src/components/EditorPlaylistItem.vue

@@ -1,12 +1,23 @@
 <template>
   <b-list-item class="playlist-item">
-    {{ item.track.relative_start_time_ms | formatTime('h:mm') }} -
-    {{ item.track.artists[0].name }} -
-    {{ item.track.name }} ({{ item.track.duration_ms | formatTime('mm:ss') }})
+    <b-text v-if="showStartingTime">
+      {{ item.track.relative_start_time_ms | formatTime('h:mm') }} -
+    </b-text>
+    <b-text>
+      {{ item.track.artists[0].name }}
+    </b-text>
+    -
+    <b-text>
+      {{ item.track.name }}
+    </b-text>
+    <b-text>
+      ({{ item.track.duration_ms | formatTime('mm:ss') }})
+    </b-text>
   </b-list-item>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import formatTime from '../utils/formatTime';
 
 export default {
@@ -21,6 +32,15 @@ export default {
       type: Object,
       required: true,
     },
+    position: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState('editor', {
+      showStartingTime: state => state.showStartingTime,
+    }),
   },
 };
 </script>

src/components/MainWindow.vue

@@ -28,10 +28,7 @@ export default {
     StartTimeSettings,
   },
   computed: {
-    ...mapState({
-      playlistData: state => state.playlist,
-      startHour: state => state.startHour,
-      startMinute: state => state.startMinute,
+    ...mapState('editor', {
       errorMessage: state => state.errorMessage,
     }),
     ...mapGetters({

src/components/StartTimeSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="display-settings">
     <b-labeled-element label="Starting time">
-      <div class="inputs">
+      <div v-if="showStartingTime" class="inputs">
         <b-number-input
           v-model="startHour"
           type="number"
@@ -17,11 +17,21 @@
           step="5"
           @input="onChangeTime"
         />
+        <b-text class="switch" @click.native="deactivateSetting">
+          Hide
+        </b-text>
+      </div>
+      <div v-else>
+        <b-text class="switch" @click.native="activateSetting">
+          Show
+        </b-text>
       </div>
     </b-labeled-element>
   </div>
 </template>
 <script>
+import { mapState } from 'vuex';
+
 export default {
   name: 'StartTimeSettings',
   data() {
@@ -30,10 +40,21 @@ export default {
       startMinute: 0,
     };
   },
+  computed: {
+    ...mapState('editor', {
+      showStartingTime: state => state.showStartingTime,
+    }),
+  },
   methods: {
     onChangeTime() {
       this.$store.dispatch('editor/setStartingTime', { startHour: this.startHour, startMinute: this.startMinute });
     },
+    activateSetting() {
+      this.$store.dispatch('editor/showStartingTime', true);
+    },
+    deactivateSetting() {
+      this.$store.dispatch('editor/showStartingTime', false);
+    },
   },
 };
 </script>
@@ -49,5 +70,17 @@ export default {
       display: flex;
       flex-direction: row;
     }
+
+    .switch {
+      text-decoration: underline;
+      font-size: 12px;
+      color: var(--spotify-green);
+      cursor: pointer;
+
+      &:not(:first-child) {
+        margin-left: 10px;
+        align-self: center;
+      }
+    }
   }
 </style>

src/store/editor/actions.js

@@ -50,4 +50,7 @@ export default {
     });
     commit('setTrackItems', trackItems);
   },
+  showStartingTime({ commit }, showIt) {
+    commit('showStartingTime', showIt);
+  },
 };

src/store/editor/index.js

@@ -8,6 +8,7 @@ const state = {
   playlist: null,
   startHour: 18,
   startMinute: 0,
+  showStartingTime: false,
 };
 
 export default {

src/store/editor/mutations.js

@@ -14,4 +14,7 @@ export default {
       state.playlist.tracks.items = items;
     }
   },
+  showStartingTime(state, showIt) {
+    state.showStartingTime = showIt;
+  },
 };