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,68 +4,65 @@
 
 {% block body %}
 
-    <div class="progress" style="height: 2px;">
-        <div class="progress-bar" role="progressbar" style="width: {{ (book.getProgress().first().pages / book.pages*100) | round }}%"></div>
-        <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" style="width: {{ 100-(book.getProgress().first().pages / book.pages*100) | round }}%"></div>
-    </div>
-    <div class="d-flex">
-        <div>
-            {% if file_exists(asset('book_covers/cover_' ~ book.id ~ '.jpg')) %}
-                <img class="img-thumbnail"
-                     style="max-width: 80px"
-                     src="{{ asset('book_covers/cover_' ~ book.id ~ '.jpg' ) }}"/> {% endif %}
-        </div>
-        <div class="mx-3">
-            <h1>{{ book.title }}</h1>
-            <h3>{{ book.subtitle }}</h3>
-            <p>{{ book.author }}</p>
-            <p>{% for i in range(1, book.rating) %}⭐{% endfor %}</p>
-        </div>
-    </div>
-
-    <table class="table">
-        <tbody>
-        <tr>
-            <th>Category</th>
-            <td colspan="3">{{ book.category }}</td>
-        </tr>
-        <tr>
-            <th>Description</th>
-            <td colspan="3">{{ book.description | nl2br }}</td>
-        </tr>
-        <tr>
-            <th>Publisher</th>
-            <td>{{ book.publisher }}</td>
-            <th>Publish date</th>
-            <td>{{ book.publishDate ? book.publishDate|date('Y-m-d') : '' }}</td>
-        </tr>
-        <tr>
-            <th>Isbn</th>
-            <td colspan="3">{{ book.isbn }}</td>
-        </tr>
-        <tr>
-            <th>Tags</th>
-            <td colspan="3">{{ book.tags }}</td>
-        </tr>
-        <tr>
-            <th>Series</th>
-            <td colspan="3">{{ book.series }} {{ book.volume }}</td>
-        </tr>
-        <tr>
-            <th>Language</th>
-            <td colspan="3">{{ book.language }}</td>
-        </tr>
-        <tr>
-            <th>Progress</th>
-            <td>{{ book.getProgress().first().pages }}</td>
-            <th>Pages</th>
-            <td>{{ book.pages }}</td>
-        </tr>
-
-        </tbody>
-    </table>
-
     <div id="app">
+        {% set progress_pages = book.getProgress() | length ? (book.getProgress().first().pages)  : 0 %}
+        {% set progress = (progress_pages / book.pages*100) | round %}
+
+        <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')) %}
+                    <img class="img-thumbnail"
+                         style="max-width: 80px"
+                         src="{{ asset('book_covers/cover_' ~ book.id ~ '.jpg' ) }}"/> {% endif %}
+            </div>
+            <div class="mx-3">
+                <h1>{{ book.title }}</h1>
+                <h3>{{ book.subtitle }}</h3>
+                <p>{{ book.author }}</p>
+                <p>{% for i in range(1, book.rating) %}⭐{% endfor %}</p>
+            </div>
+        </div>
+
+        <table class="table">
+            <tbody>
+            <tr>
+                <th>Category</th>
+                <td>{{ book.category }}</td>
+                <th>Tags</th>
+                <td>{{ book.tags }}</td>
+            </tr>
+            <tr>
+                <th>Description</th>
+                <td colspan="3">{{ book.description | nl2br }}</td>
+            </tr>
+            <tr>
+                <th>Publisher</th>
+                <td>{{ book.publisher }}</td>
+                <th>Publish date</th>
+                <td>{{ book.publishDate ? book.publishDate|date('Y-m-d') : '' }}</td>
+            </tr>
+            <tr>
+                <th>ISBN</th>
+                <td>{{ book.isbn }}</td>
+                <th>Language</th>
+                <td>{{ book.language }}</td>
+            </tr>
+            {% if(book.series) %}
+                <tr>
+                    <th>Series</th>
+                    <td colspan="3">{{ book.series }} {{ book.volume }}</td>
+                </tr>
+            {% endif %}
+            <tr>
+                <th>Progress</th>
+                <td><progresseditor :read-pages="{{ progress_pages }}" :total-pages="{{ book.pages }}"></progresseditor></td>
+                <th>Pages</th>
+                <td>{{ book.pages }}</td>
+            </tr>
+
+            </tbody>
+        </table>
         <files></files>
     </div>