43 lines
1 KiB
Vue
43 lines
1 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="Books">
|
|
<h2 class="subtitle">
|
|
<i class="fa fa-fw fa-book"></i> Select A Book
|
|
</h2>
|
|
<div class="is-flex m-b-md">
|
|
<div
|
|
class="book-thumb m-l-md"
|
|
v-for="(book, index) in callManager.books"
|
|
:key="index"
|
|
@click="goToBook(book, index)"
|
|
:disabled="!callManager.isHost"
|
|
>
|
|
<div class="book-cover">
|
|
<figure class="image is-2by3 m-a">
|
|
<img :src="`/u/books/${book.id}/page/1`" />
|
|
</figure>
|
|
</div>
|
|
<div class="book-text">
|
|
<div>{{book.title}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
name: "CallLobby",
|
|
methods: {
|
|
goToBook(book, index) {
|
|
this.callManager.selectBook(index);
|
|
this.$router.replace({ name: "book" });
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(["callManager"])
|
|
}
|
|
};
|
|
</script>
|