skeleton for browsing book details

komga-webui/src/components/BrowseBook.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-container fluid class="ma-3">
+    <div>{{ $_.get(book, 'name', '') }}</div>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'BrowseBook',
+  data: () => {
+    return {
+      baseURL: process.env.VUE_APP_KOMGA_API_URL ? process.env.VUE_APP_KOMGA_API_URL : window.location.origin,
+      book: {} as BookDto
+    }
+  },
+  async created () {
+    this.book = await this.$komgaBooks.getBook(this.bookId)
+  },
+  props: {
+    bookId: {
+      type: Number,
+      required: true
+    }
+  },
+  async beforeRouteUpdate (to, from, next) {
+    if (to.params.bookId !== from.params.bookId) {
+      this.book = await this.$komgaBooks.getBook(this.bookId)
+    }
+
+    next()
+  },
+  methods: {
+    getThumbnailUrl () {
+      return `${this.baseURL}/api/v1/books/${this.book.id}/thumbnail`
+    },
+    getFormat () {
+      switch (this.book.metadata.mediaType) {
+        case 'application/x-rar-compressed':
+          return 'CBR'
+        case 'application/zip':
+          return 'CBZ'
+        case 'application/pdf':
+          return 'PDF'
+        default:
+          return 'UNKNOWN'
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

komga-webui/src/components/CardBook.vue

@@ -1,5 +1,6 @@
 <template>
   <v-card :width="width"
+          :to="{name:'browse-book', params: {bookId: book.id}}"
   >
     <v-img
       :src="getThumbnailUrl()"

komga-webui/src/router.ts

@@ -58,14 +58,20 @@ export default new Router({
         {
           path: '/libraries/:libraryId/:page?',
           name: 'browse-libraries',
-          component: () => import(/* webpackChunkName: "browse" */ './components/BrowseLibraries.vue'),
+          component: () => import(/* webpackChunkName: "browse-libraries" */ './components/BrowseLibraries.vue'),
           props: (route) => ({ libraryId: Number(route.params.libraryId) })
         },
         {
           path: '/series/:seriesId/:page?',
           name: 'browse-series',
-          component: () => import(/* webpackChunkName: "browse" */ './components/BrowseSeries.vue'),
+          component: () => import(/* webpackChunkName: "browse-series" */ './components/BrowseSeries.vue'),
           props: (route) => ({ seriesId: Number(route.params.seriesId) })
+        },
+        {
+          path: '/book/:bookId',
+          name: 'browse-book',
+          component: () => import(/* webpackChunkName: "browse-book" */ './components/BrowseBook.vue'),
+          props: (route) => ({ bookId: Number(route.params.bookId) })
         }
       ]
     },