RecentBooksPage.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. <template>
  2. <div ref="main" class="main" @click="close">
  3. <div class="mainWindow" @click.stop>
  4. <Window @close="close">
  5. <template slot="header">
  6. <span v-show="!loading">Последние {{tableData ? tableData.length : 0}} открытых книг</span>
  7. <span v-show="loading"><i class="el-icon-loading" style="font-size: 30px"></i> <span style="position: relative; top: -5px">Список загружается</span></span>
  8. </template>
  9. <el-table
  10. :data="tableData"
  11. style="width: 100%"
  12. size="mini"
  13. height="1px"
  14. stripe
  15. border
  16. :default-sort = "{prop: 'touchDateTime', order: 'descending'}"
  17. :header-cell-style = "headerCellStyle"
  18. :row-key = "rowKey"
  19. >
  20. <el-table-column
  21. type="index"
  22. width="35px"
  23. >
  24. </el-table-column>
  25. <el-table-column
  26. prop="touchDateTime"
  27. min-width="90px"
  28. sortable
  29. >
  30. <template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
  31. <span style="font-size: 90%">Время<br>просм.</span>
  32. </template>
  33. <template slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
  34. <div class="desc" @click="loadBook(scope.row.url)">
  35. {{ scope.row.touchDate }}<br>
  36. {{ scope.row.touchTime }}
  37. </div>
  38. </template>
  39. </el-table-column>
  40. <el-table-column
  41. >
  42. <template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
  43. <!--el-input ref="input"
  44. :value="search" @input="search = $event"
  45. size="mini"
  46. style="margin: 0; padding: 0; vertical-align: bottom; margin-top: 10px"
  47. placeholder="Найти"/-->
  48. <div class="el-input el-input--mini">
  49. <input class="el-input__inner"
  50. ref="input"
  51. placeholder="Найти"
  52. style="margin: 0; padding: 0; vertical-align: bottom; margin-top: 20px; padding: 0 10px 0 10px"
  53. :value="search" @input="search = $event.target.value"
  54. />
  55. </div>
  56. </template>
  57. <el-table-column
  58. min-width="300px"
  59. >
  60. <template slot-scope="scope">
  61. <div class="desc" @click="loadBook(scope.row.url)">
  62. <span style="color: green">{{ scope.row.desc.author }}</span><br>
  63. <span>{{ scope.row.desc.title }}</span>
  64. </div>
  65. </template>
  66. </el-table-column>
  67. <el-table-column
  68. min-width="100px"
  69. >
  70. <template slot-scope="scope">
  71. <a v-show="isUrl(scope.row.url)" :href="scope.row.url" target="_blank">Оригинал</a><br>
  72. <a :href="scope.row.path" :download="getFileNameFromPath(scope.row.path)">Скачать FB2</a>
  73. </template>
  74. </el-table-column>
  75. <el-table-column
  76. width="60px"
  77. >
  78. <template slot-scope="scope">
  79. <el-button
  80. size="mini"
  81. style="width: 30px; padding: 7px 0 7px 0; margin-left: 4px"
  82. @click="handleDel(scope.row.key)"><i class="el-icon-close"></i>
  83. </el-button>
  84. </template>
  85. </el-table-column>
  86. </el-table-column>
  87. </el-table>
  88. </Window>
  89. </div>
  90. </div>
  91. </template>
  92. <script>
  93. //-----------------------------------------------------------------------------
  94. import Vue from 'vue';
  95. import Component from 'vue-class-component';
  96. import path from 'path';
  97. import _ from 'lodash';
  98. import * as utils from '../../../share/utils';
  99. import Window from '../../share/Window.vue';
  100. import bookManager from '../share/bookManager';
  101. export default @Component({
  102. components: {
  103. Window,
  104. },
  105. watch: {
  106. search: function() {
  107. this.updateTableData();
  108. }
  109. },
  110. })
  111. class RecentBooksPage extends Vue {
  112. loading = false;
  113. search = null;
  114. tableData = [];
  115. created() {
  116. }
  117. init() {
  118. this.$nextTick(() => {
  119. //this.$refs.input.focus();
  120. });
  121. (async() => {//отбражение подгрузки списка
  122. if (this.initing)
  123. return;
  124. this.initing = true;
  125. await this.updateTableData(3);
  126. await utils.sleep(200);
  127. if (bookManager.loaded) {
  128. await this.updateTableData(10);
  129. if (bookManager.getSortedRecent().length > 10)
  130. await utils.sleep(1800);
  131. } else {
  132. let i = 0;
  133. let j = 5;
  134. while (i < 500 && !bookManager.loaded) {
  135. if (i % j == 0) {
  136. bookManager.sortedRecentCached = null;
  137. await this.updateTableData(100);
  138. j *= 2;
  139. }
  140. await utils.sleep(100);
  141. i++;
  142. }
  143. }
  144. await this.updateTableData();
  145. this.initing = false;
  146. })();
  147. }
  148. rowKey(row) {
  149. return row.key;
  150. }
  151. async updateTableData(limit) {
  152. while (this.updating) await utils.sleep(100);
  153. this.updating = true;
  154. let result = [];
  155. this.loading = !!limit;
  156. const sorted = bookManager.getSortedRecent();
  157. for (let i = 0; i < sorted.length; i++) {
  158. const book = sorted[i];
  159. if (book.deleted)
  160. continue;
  161. if (limit && result.length >= limit)
  162. break;
  163. let d = new Date();
  164. d.setTime(book.touchTime);
  165. const t = utils.formatDate(d).split(' ');
  166. let perc = '';
  167. let textLen = '';
  168. const p = (book.bookPosSeen ? book.bookPosSeen : (book.bookPos ? book.bookPos : 0));
  169. if (book.textLength) {
  170. perc = ` [${((p/book.textLength)*100).toFixed(2)}%]`;
  171. textLen = ` ${Math.round(book.textLength/1000)}k`;
  172. }
  173. const fb2 = (book.fb2 ? book.fb2 : {});
  174. let title = fb2.bookTitle;
  175. if (title)
  176. title = `"${title}"`;
  177. else
  178. title = '';
  179. let author = '';
  180. if (fb2.author) {
  181. const authorNames = fb2.author.map(a => _.compact([
  182. a.lastName,
  183. a.firstName,
  184. a.middleName
  185. ]).join(' '));
  186. author = authorNames.join(', ');
  187. } else {
  188. author = _.compact([
  189. fb2.lastName,
  190. fb2.firstName,
  191. fb2.middleName
  192. ]).join(' ');
  193. }
  194. author = (author ? author : (fb2.bookTitle ? fb2.bookTitle : book.url));
  195. result.push({
  196. touchDateTime: book.touchTime,
  197. touchDate: t[0],
  198. touchTime: t[1],
  199. desc: {
  200. title: `${title}${perc}${textLen}`,
  201. author,
  202. },
  203. url: book.url,
  204. path: book.path,
  205. key: book.key,
  206. });
  207. if (result.length >= 100)
  208. break;
  209. }
  210. const search = this.search;
  211. result = result.filter(item => {
  212. return !search ||
  213. item.touchTime.includes(search) ||
  214. item.touchDate.includes(search) ||
  215. item.desc.title.toLowerCase().includes(search.toLowerCase()) ||
  216. item.desc.author.toLowerCase().includes(search.toLowerCase())
  217. });
  218. /*for (let i = 0; i < result.length; i++) {
  219. if (!_.isEqual(this.tableData[i], result[i])) {
  220. this.$set(this.tableData, i, result[i]);
  221. await utils.sleep(10);
  222. }
  223. }
  224. if (this.tableData.length > result.length)
  225. this.tableData.splice(result.length);*/
  226. this.tableData = result;
  227. this.updating = false;
  228. }
  229. headerCellStyle(cell) {
  230. let result = {margin: 0, padding: 0};
  231. if (cell.columnIndex > 0) {
  232. result['border-bottom'] = 0;
  233. }
  234. if (cell.rowIndex > 0) {
  235. result.height = '0px';
  236. result['border-right'] = 0;
  237. }
  238. return result;
  239. }
  240. getFileNameFromPath(fb2Path) {
  241. return path.basename(fb2Path).substr(0, 10) + '.fb2';
  242. }
  243. openOriginal(url) {
  244. window.open(url, '_blank');
  245. }
  246. openFb2(path) {
  247. window.open(path, '_blank');
  248. }
  249. async handleDel(key) {
  250. await bookManager.delRecentBook({key});
  251. this.updateTableData();
  252. if (!bookManager.mostRecentBook())
  253. this.close();
  254. }
  255. loadBook(url) {
  256. this.$emit('load-book', {url});
  257. this.close();
  258. }
  259. isUrl(url) {
  260. if (url)
  261. return (url.indexOf('file://') != 0);
  262. else
  263. return false;
  264. }
  265. close() {
  266. this.$emit('recent-books-toggle');
  267. }
  268. keyHook(event) {
  269. if (event.type == 'keydown' && event.code == 'Escape') {
  270. this.close();
  271. }
  272. return true;
  273. }
  274. }
  275. //-----------------------------------------------------------------------------
  276. </script>
  277. <style scoped>
  278. .main {
  279. position: absolute;
  280. width: 100%;
  281. height: 100%;
  282. z-index: 50;
  283. display: flex;
  284. flex-direction: column;
  285. align-items: center;
  286. }
  287. .mainWindow {
  288. height: 100%;
  289. display: flex;
  290. }
  291. .desc {
  292. cursor: pointer;
  293. }
  294. </style>