BookView.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div class="row items-center q-my-sm">
  3. <div class="row items-center no-wrap">
  4. <div v-if="showRate || showDeleted">
  5. <div v-if="showRate && !book.del">
  6. <div v-if="book.librate">
  7. <q-knob
  8. :model-value="book.librate"
  9. :min="0"
  10. :max="5"
  11. size="18px"
  12. font-size="12px"
  13. :thickness="1"
  14. :color="rateColor"
  15. track-color="grey-4"
  16. readonly
  17. />
  18. <q-tooltip :delay="500" anchor="top middle" content-style="font-size: 80%" max-width="400px">
  19. Оценка {{ book.librate }}
  20. </q-tooltip>
  21. </div>
  22. <div v-else style="width: 18px" />
  23. </div>
  24. <div v-else class="row justify-center" style="width: 18px">
  25. <q-icon v-if="book.del" class="la la-trash text-bold text-red" size="18px">
  26. <q-tooltip :delay="500" anchor="top middle" content-style="font-size: 80%" max-width="400px">
  27. Удалено
  28. </q-tooltip>
  29. </q-icon>
  30. </div>
  31. </div>
  32. <div class="q-ml-sm row items-center">
  33. {{ book.serno ? `${book.serno}. ` : '' }}
  34. <div v-if="showAuthor && book.author">
  35. <span class="clickable2 text-green-10" @click="selectAuthor">{{ bookAuthor }}</span>
  36. &nbsp;-&nbsp;
  37. <span class="clickable2" :class="titleColor" @click="selectTitle">{{ book.title }}</span>
  38. </div>
  39. <span v-else class="clickable2" :class="titleColor" @click="selectTitle">{{ book.title }}</span>
  40. </div>
  41. </div>
  42. <div class="q-ml-sm">
  43. {{ bookSize }}, {{ book.ext }}
  44. </div>
  45. <div class="q-ml-sm clickable" @click="download">
  46. (скачать)
  47. </div>
  48. <div class="q-ml-sm clickable" @click="copyLink">
  49. <q-icon name="la la-copy" size="20px" />
  50. </div>
  51. <div v-if="showReadLink" class="q-ml-sm clickable" @click="readBook">
  52. (читать)
  53. </div>
  54. <div v-if="showGenres && book.genre" class="q-ml-sm">
  55. {{ bookGenre }}
  56. </div>
  57. <div v-show="false">
  58. {{ book }}
  59. </div>
  60. </div>
  61. </template>
  62. <script>
  63. //-----------------------------------------------------------------------------
  64. import vueComponent from '../../vueComponent.js';
  65. const componentOptions = {
  66. components: {
  67. },
  68. watch: {
  69. settings() {
  70. this.loadSettings();
  71. },
  72. }
  73. };
  74. class BookView {
  75. _options = componentOptions;
  76. _props = {
  77. book: Object,
  78. genreTree: Array,
  79. showAuthor: Boolean,
  80. showReadLink: Boolean,
  81. titleColor: { type: String, default: 'text-blue-10'},
  82. };
  83. showRate = true;
  84. showGenres = true;
  85. showDeleted = false;
  86. created() {
  87. this.loadSettings();
  88. }
  89. loadSettings() {
  90. const settings = this.settings;
  91. this.showRate = settings.showRate;
  92. this.showGenres = settings.showGenres;
  93. this.showDeleted = settings.showDeleted;
  94. }
  95. get settings() {
  96. return this.$store.state.settings;
  97. }
  98. get bookAuthor() {
  99. if (this.showAuthor && this.book.author) {
  100. let a = this.book.author.split(',');
  101. return a.slice(0, 2).join(', ') + (a.length > 2 ? ' и др.' : '');
  102. }
  103. return '';
  104. }
  105. get bookSize() {
  106. let size = this.book.size/1024;
  107. let unit = 'KB';
  108. if (size > 1024) {
  109. size = size/1024;
  110. unit = 'MB';
  111. }
  112. return `${size.toFixed(0)}${unit}`;
  113. }
  114. get rateColor() {
  115. const rate = (this.book.librate > 5 ? 5 : this.book.librate);
  116. if (rate > 2)
  117. return `green-${(rate - 1)*2}`;
  118. else
  119. return `red-${10 - rate*2}`;
  120. }
  121. get bookGenre() {
  122. let result = [];
  123. const genre = new Set(this.book.genre.split(','));
  124. for (const section of this.genreTree) {
  125. for (const g of section.value)
  126. if (genre.has(g.value))
  127. result.push(g.name);
  128. }
  129. return `(${result.join(' / ')})`;
  130. }
  131. selectAuthor() {
  132. this.$emit('bookEvent', {action: 'authorClick', book: this.book});
  133. }
  134. selectTitle() {
  135. this.$emit('bookEvent', {action: 'titleClick', book: this.book});
  136. }
  137. download() {
  138. this.$emit('bookEvent', {action: 'download', book: this.book});
  139. }
  140. copyLink() {
  141. this.$emit('bookEvent', {action: 'copyLink', book: this.book});
  142. }
  143. readBook() {
  144. this.$emit('bookEvent', {action: 'readBook', book: this.book});
  145. }
  146. }
  147. export default vueComponent(BookView);
  148. //-----------------------------------------------------------------------------
  149. </script>
  150. <style scoped>
  151. .clickable {
  152. color: blue;
  153. cursor: pointer;
  154. }
  155. .clickable2 {
  156. cursor: pointer;
  157. }
  158. </style>