Migrated progress bar and progress editor to vuex.

assets/js/pages/progressbar.vue

@@ -1,41 +1,31 @@
 <template>
   <div>
     <div class="progress" style="height: 2px;">
-      <div class="progress-bar" role="progressbar" :style="{width:progress+'%'}"></div>
-      <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" :style="{width:100-progress+'%'}"></div>
+      <div class="progress-bar" role="progressbar" :style="{width:progressPercent+'%'}"></div>
+      <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar"
+           :style="{width:100-progressPercent+'%'}"></div>
     </div>
   </div>
 </template>
 
 <script>
-import {EventBus} from "../event-bus";
+import {UPDATING_PROGRESS_SUCCESS} from '../store/mutation-types'
+import {mapState} from "vuex";
 
 export default {
   name: 'Progressbar',
-  components: {
-    EventBus
-  },
   props: {
     totalPages: Number,
     readPages: Number
   },
-  data() {
-    return {
-      newProgress: this.readPages
-    }
-  },
   computed: {
-    progress() {
-      return Math.round(this.newProgress / this.totalPages * 100);
+    ...mapState('bookprogressmodule', ['progress']),
+    progressPercent() {
+      return Math.round(this.progress / this.totalPages * 100);
     }
   },
-  mounted() {
-  },
   created() {
-    window.EventBus.$on('updateProgress', (data) => {
-      this.newProgress = data.readPages;
-    });
+    this.$store.commit('bookprogressmodule/' + UPDATING_PROGRESS_SUCCESS, this.readPages);
   },
-  methods: {}
 }
 </script>