RecentBooksPage.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. <template>
  2. <Window width="600px" ref="window" @close="close">
  3. <template slot="header">
  4. <span v-show="!loading">{{ header }}</span>
  5. <span v-if="loading"><q-spinner class="q-mr-sm" color="lime-12" size="20px" :thickness="7"/>Список загружается</span>
  6. </template>
  7. <a ref="download" style='display: none;' target="_blank"></a>
  8. <q-table
  9. class="recent-books-table col"
  10. :data="tableData"
  11. :columns="columns"
  12. row-key="key"
  13. :pagination.sync="pagination"
  14. separator="cell"
  15. hide-bottom
  16. virtual-scroll
  17. dense
  18. >
  19. <template v-slot:header="props">
  20. <q-tr :props="props">
  21. <q-th class="td-mp" style="width: 25px" key="num" :props="props"><span v-html="props.cols[0].label"></span></q-th>
  22. <q-th class="td-mp break-word" style="width: 77px" key="date" :props="props"><span v-html="props.cols[1].label"></span></q-th>
  23. <q-th class="td-mp" style="width: 332px" key="desc" :props="props" colspan="4">
  24. <q-input ref="input" outlined dense rounded style="position: absolute; top: 6px; left: 90px; width: 380px" bg-color="white"
  25. placeholder="Найти"
  26. v-model="search"
  27. @click.stop
  28. />
  29. <span v-html="props.cols[2].label"></span>
  30. </q-th>
  31. </q-tr>
  32. </template>
  33. <template v-slot:body="props">
  34. <q-tr :props="props">
  35. <q-td key="num" :props="props" class="td-mp" auto-width>
  36. <div class="break-word" style="width: 25px">
  37. {{ props.row.num }}
  38. </div>
  39. </q-td>
  40. <q-td key="date" :props="props" class="td-mp clickable" @click="loadBook(props.row.url)" auto-width>
  41. <div class="break-word" style="width: 68px">
  42. {{ props.row.touchDate }}<br>
  43. {{ props.row.touchTime }}
  44. </div>
  45. </q-td>
  46. <q-td key="desc" :props="props" class="td-mp clickable" @click="loadBook(props.row.url)" auto-width>
  47. <div class="break-word" style="width: 332px; font-size: 90%">
  48. <div style="color: green">{{ props.row.desc.author }}</div>
  49. <div>{{ props.row.desc.title }}</div>
  50. </div>
  51. </q-td>
  52. <q-td key="links" :props="props" class="td-mp" auto-width>
  53. <div class="break-word" style="width: 75px; font-size: 90%">
  54. <a v-show="isUrl(props.row.url)" :href="props.row.url" target="_blank">Оригинал</a><br>
  55. <a :href="props.row.path" @click.prevent="downloadBook(props.row.path, props.row.fullTitle)">Скачать FB2</a>
  56. </div>
  57. </q-td>
  58. <q-td key="close" :props="props" class="td-mp" auto-width>
  59. <div style="width: 38px">
  60. <q-btn
  61. dense
  62. style="width: 30px; height: 30px; padding: 7px 0 7px 0; margin-left: 4px"
  63. @click="handleDel(props.row.key)">
  64. <q-icon class="la la-times" size="14px" style="top: -6px"/>
  65. </q-btn>
  66. </div>
  67. </q-td>
  68. <q-td key="last" :props="props" class="no-mp">
  69. </q-td>
  70. </q-tr>
  71. </template>
  72. </q-table>
  73. </Window>
  74. </template>
  75. <script>
  76. //-----------------------------------------------------------------------------
  77. import Vue from 'vue';
  78. import Component from 'vue-class-component';
  79. import path from 'path';
  80. //import _ from 'lodash';
  81. import * as utils from '../../../share/utils';
  82. import Window from '../../share/Window.vue';
  83. import bookManager from '../share/bookManager';
  84. import readerApi from '../../../api/reader';
  85. export default @Component({
  86. components: {
  87. Window,
  88. },
  89. watch: {
  90. search: function() {
  91. this.updateTableData();
  92. }
  93. },
  94. })
  95. class RecentBooksPage extends Vue {
  96. loading = false;
  97. search = null;
  98. tableData = [];
  99. columns = [];
  100. pagination = {};
  101. created() {
  102. this.pagination = {rowsPerPage: 0};
  103. this.columns = [
  104. {
  105. name: 'num',
  106. label: '#',
  107. align: 'center',
  108. sortable: true,
  109. field: 'num',
  110. },
  111. {
  112. name: 'date',
  113. label: 'Время<br>просм.',
  114. align: 'left',
  115. field: 'touchDateTime',
  116. sortable: true,
  117. sort: (a, b, rowA, rowB) => rowA.touchDateTime - rowB.touchDateTime,
  118. },
  119. {
  120. name: 'desc',
  121. label: 'Название',
  122. align: 'left',
  123. field: 'descString',
  124. sortable: true,
  125. },
  126. {
  127. name: 'links',
  128. label: '',
  129. align: 'left',
  130. },
  131. {
  132. name: 'close',
  133. label: '',
  134. align: 'left',
  135. },
  136. {
  137. name: 'last',
  138. label: '',
  139. align: 'left',
  140. },
  141. ];
  142. }
  143. init() {
  144. this.$refs.window.init();
  145. this.$nextTick(() => {
  146. //this.$refs.input.focus();//плохо на планшетах
  147. });
  148. (async() => {//подгрузка списка
  149. if (this.initing)
  150. return;
  151. this.initing = true;
  152. if (!bookManager.loaded) {
  153. await this.updateTableData(10);
  154. //для отзывчивости
  155. await utils.sleep(100);
  156. let i = 0;
  157. let j = 5;
  158. while (i < 500 && !bookManager.loaded) {
  159. if (i % j == 0) {
  160. bookManager.sortedRecentCached = null;
  161. await this.updateTableData(20);
  162. j *= 2;
  163. }
  164. await utils.sleep(100);
  165. i++;
  166. }
  167. } else {
  168. //для отзывчивости
  169. await utils.sleep(100);
  170. }
  171. await this.updateTableData();
  172. this.initing = false;
  173. })();
  174. }
  175. async updateTableData(limit) {
  176. while (this.updating) await utils.sleep(100);
  177. this.updating = true;
  178. let result = [];
  179. this.loading = !!limit;
  180. const sorted = bookManager.getSortedRecent();
  181. let num = 0;
  182. for (let i = 0; i < sorted.length; i++) {
  183. const book = sorted[i];
  184. if (book.deleted)
  185. continue;
  186. num++;
  187. if (limit && result.length >= limit)
  188. break;
  189. let d = new Date();
  190. d.setTime(book.touchTime);
  191. const t = utils.formatDate(d).split(' ');
  192. let perc = '';
  193. let textLen = '';
  194. const p = (book.bookPosSeen ? book.bookPosSeen : (book.bookPos ? book.bookPos : 0));
  195. if (book.textLength) {
  196. perc = ` [${((p/book.textLength)*100).toFixed(2)}%]`;
  197. textLen = ` ${Math.round(book.textLength/1000)}k`;
  198. }
  199. const bt = utils.getBookTitle(book.fb2);
  200. let title = bt.bookTitle;
  201. title = (title ? `"${title}"`: '');
  202. const author = (bt.author ? bt.author : (bt.bookTitle ? bt.bookTitle : book.url));
  203. result.push({
  204. num,
  205. touchDateTime: book.touchTime,
  206. touchDate: t[0],
  207. touchTime: t[1],
  208. desc: {
  209. author,
  210. title: `${title}${perc}${textLen}`,
  211. },
  212. descString: `${author}${title}${perc}${textLen}`,//для сортировки
  213. url: book.url,
  214. path: book.path,
  215. fullTitle: bt.fullTitle,
  216. key: book.key,
  217. });
  218. }
  219. const search = this.search;
  220. result = result.filter(item => {
  221. return !search ||
  222. item.touchTime.includes(search) ||
  223. item.touchDate.includes(search) ||
  224. item.desc.title.toLowerCase().includes(search.toLowerCase()) ||
  225. item.desc.author.toLowerCase().includes(search.toLowerCase())
  226. });
  227. this.tableData = result;
  228. this.updating = false;
  229. }
  230. wordEnding(num) {
  231. const endings = ['', 'а', 'и', 'и', 'и', '', '', '', '', ''];
  232. const deci = num % 100;
  233. if (deci > 10 && deci < 20) {
  234. return '';
  235. } else {
  236. return endings[num % 10];
  237. }
  238. }
  239. get header() {
  240. const len = (this.tableData ? this.tableData.length : 0);
  241. return `${(this.search ? 'Найдено' : 'Всего')} ${len} книг${this.wordEnding(len)}`;
  242. }
  243. async downloadBook(fb2path, fullTitle) {
  244. try {
  245. await readerApi.checkCachedBook(fb2path);
  246. const d = this.$refs.download;
  247. d.href = fb2path;
  248. try {
  249. const fn = utils.makeValidFilename(fullTitle);
  250. d.download = fn.substring(0, 100) + '.fb2';
  251. } catch(e) {
  252. d.download = path.basename(fb2path).substr(0, 10) + '.fb2';
  253. }
  254. d.click();
  255. } catch (e) {
  256. let errMes = e.message;
  257. if (errMes.indexOf('404') >= 0)
  258. errMes = 'Файл не найден на сервере (возможно был удален как устаревший)';
  259. this.$root.stdDialog.alert(errMes, 'Ошибка', {color: 'negative'});
  260. }
  261. }
  262. async handleDel(key) {
  263. await bookManager.delRecentBook({key});
  264. //this.updateTableData();//обновление уже происходит Reader.bookManagerEvent
  265. if (!bookManager.mostRecentBook())
  266. this.close();
  267. }
  268. loadBook(url) {
  269. this.$emit('load-book', {url});
  270. this.close();
  271. }
  272. isUrl(url) {
  273. if (url)
  274. return (url.indexOf('file://') != 0);
  275. else
  276. return false;
  277. }
  278. close() {
  279. this.$emit('recent-books-close');
  280. }
  281. keyHook(event) {
  282. if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
  283. this.close();
  284. }
  285. return true;
  286. }
  287. }
  288. //-----------------------------------------------------------------------------
  289. </script>
  290. <style scoped>
  291. .recent-books-table {
  292. width: 600px;
  293. overflow-y: auto;
  294. overflow-x: hidden;
  295. }
  296. .clickable {
  297. cursor: pointer;
  298. }
  299. .td-mp {
  300. margin: 0 !important;
  301. padding: 4px 4px 4px 4px !important;
  302. border-bottom: 1px solid #ddd;
  303. }
  304. .no-mp {
  305. margin: 0 !important;
  306. padding: 0 !important;
  307. border: 0;
  308. border-left: 1px solid #ddd !important;
  309. }
  310. .break-word {
  311. line-height: 180%;
  312. overflow-wrap: break-word;
  313. word-wrap: break-word;
  314. white-space: normal;
  315. }
  316. </style>
  317. <style>
  318. .recent-books-table .q-table__middle {
  319. height: 100%;
  320. overflow-x: hidden;
  321. }
  322. .recent-books-table thead tr:first-child th {
  323. position: sticky;
  324. z-index: 1;
  325. top: 0;
  326. background-color: #c1f4cd;
  327. }
  328. .recent-books-table tr:nth-child(even) {
  329. background-color: #f8f8f8;
  330. }
  331. </style>