Handling the progress sent from the frontend to the controller.

assets/js/pages/progressbar.vue

@@ -34,8 +34,6 @@ export default {
   created() {
     window.EventBus.$on('updateProgress', (data) => {
       this.newProgress = data.readPages;
-      console.info(this.newProgress);
-      console.info(this.progress);
     });
   },
   methods: {}

assets/js/pages/progresseditor.vue

@@ -5,13 +5,14 @@
     </span>
     <span v-show="editmode">
       <input type="number" @keydown.esc="cancelEdit" @keydown.enter="submit" ref="readPagesInput" min="0"
-             :max="totalPages" v-model.number="newProgress" />
+             :max="totalPages" v-model.number="newProgress"/>
     </span>
   </div>
 </template>
 
 <script>
 import {EventBus} from "../event-bus";
+import axios from "axios";
 
 export default {
   name: 'Progresseditor',
@@ -20,7 +21,8 @@ export default {
   },
   props: {
     totalPages: Number,
-    readPages: Number
+    readPages: Number,
+    bookId: Number
   },
   data() {
     return {
@@ -48,7 +50,16 @@ export default {
     },
     submit: function () {
       this.editmode = false;
-      window.EventBus.$emit('updateProgress', {readPages: this.newProgress});
+      axios.post('/progress/update', {
+        bookId: this.bookId,
+        progress: this.newProgress
+      }, {
+        headers: {
+          'content-type': 'text/json'
+        }
+      }).then(() => {
+        window.EventBus.$emit('updateProgress', {readPages: this.newProgress});
+      })
     }
   }
 }