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>

templates/book/show.html.twig

@@ -4,10 +4,11 @@
 
 {% block body %}
 
-    <div class="progress" style="height: 2px;">
+    <div id="app">
-        <div class="progress-bar" role="progressbar" style="width: {{ (book.getProgress().first().pages / book.pages*100) | round }}%"></div>
+        {% set progress_pages = book.getProgress() | length ? (book.getProgress().first().pages)  : 0 %}
-        <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" style="width: {{ 100-(book.getProgress().first().pages / book.pages*100) | round }}%"></div>
+        {% set progress = (progress_pages / book.pages*100) | round %}
-    </div>
+
+        <progressbar :read-pages="{{ progress_pages }}" :total-pages="{{ book.pages }}"></progressbar>
         <div class="d-flex">
             <div>
                 {% if file_exists(asset('book_covers/cover_' ~ book.id ~ '.jpg')) %}
@@ -27,7 +28,9 @@
             <tbody>
             <tr>
                 <th>Category</th>
-            <td colspan="3">{{ book.category }}</td>
+                <td>{{ book.category }}</td>
+                <th>Tags</th>
+                <td>{{ book.tags }}</td>
             </tr>
             <tr>
                 <th>Description</th>
@@ -40,32 +43,26 @@
                 <td>{{ book.publishDate ? book.publishDate|date('Y-m-d') : '' }}</td>
             </tr>
             <tr>
-            <th>Isbn</th>
+                <th>ISBN</th>
-            <td colspan="3">{{ book.isbn }}</td>
+                <td>{{ book.isbn }}</td>
-        </tr>
+                <th>Language</th>
-        <tr>
+                <td>{{ book.language }}</td>
-            <th>Tags</th>
-            <td colspan="3">{{ book.tags }}</td>
             </tr>
+            {% if(book.series) %}
                 <tr>
                     <th>Series</th>
                     <td colspan="3">{{ book.series }} {{ book.volume }}</td>
                 </tr>
-        <tr>
+            {% endif %}
-            <th>Language</th>
-            <td colspan="3">{{ book.language }}</td>
-        </tr>
             <tr>
                 <th>Progress</th>
-            <td>{{ book.getProgress().first().pages }}</td>
+                <td><progresseditor :read-pages="{{ progress_pages }}" :total-pages="{{ book.pages }}"></progresseditor></td>
                 <th>Pages</th>
                 <td>{{ book.pages }}</td>
             </tr>
 
             </tbody>
         </table>
-
-    <div id="app">
         <files></files>
     </div>