Displaying progress bar and a progress editor.

assets/js/files.js

@@ -1,5 +1,9 @@
 import Vue from 'vue';
 import Files from "./pages/files";
+import Progressbar from "./pages/progressbar";
+import Progresseditor from "./pages/progresseditor";
 
 Vue.component('Files', Files);
+Vue.component('Progressbar', Progressbar);
+Vue.component('Progresseditor', Progresseditor);
 new Vue().$mount('#app');

assets/js/pages/progressbar.vue

@@ -0,0 +1,43 @@
+<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>
+  </div>
+</template>
+
+<script>
+import {EventBus} from "../event-bus";
+
+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);
+    }
+  },
+  mounted() {
+  },
+  created() {
+    window.EventBus.$on('updateProgress', (data) => {
+      this.newProgress = data.readPages;
+      console.info(this.newProgress);
+      console.info(this.progress);
+    });
+  },
+  methods: {}
+}
+</script>

assets/js/pages/progresseditor.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <span @click="edit" v-if="!editmode">
+      {{ newProgress }} pages | {{ progress }}%
+    </span>
+    <span v-show="editmode">
+      <input type="number" @keydown.esc="cancelEdit" @keydown.enter="submit" ref="readPagesInput" min="0"
+             :max="totalPages" v-model.number="newProgress" />
+    </span>
+  </div>
+</template>
+
+<script>
+import {EventBus} from "../event-bus";
+
+export default {
+  name: 'Progresseditor',
+  components: {
+    EventBus
+  },
+  props: {
+    totalPages: Number,
+    readPages: Number
+  },
+  data() {
+    return {
+      editmode: false,
+      newProgress: this.readPages
+    }
+  },
+  computed: {
+    progress() {
+      return Math.round(this.newProgress / this.totalPages * 100);
+    }
+  },
+  mounted() {
+  },
+  created() {
+    this.newProgress = this.readPages;
+  },
+  methods: {
+    edit: function () {
+      this.editmode = true;
+      setTimeout(() => this.$refs.readPagesInput.focus(), 1)
+    },
+    cancelEdit: function () {
+      this.editmode = false;
+    },
+    submit: function () {
+      this.editmode = false;
+      window.EventBus.$emit('updateProgress', {readPages: this.newProgress});
+    }
+  }
+}
+</script>