Работа над HistoryPage

client/components/Reader/HistoryPage/HistoryPage.vue

@@ -1,13 +1,56 @@
 <template>
     <div ref="main" class="main">
-        <Window>
+        <Window class="window">
             <template slot="header">
-                Прочитаные книги:
+                Последние 100 открытых книг
             </template>
 
-            <div class="list">
+            <el-table
-                Test
+                :data="tableData"
-            </div>
+                style="width: 100%"
+                size="mini"
+                height="1px"
+                stripe
+                border
+                :default-sort = "{prop: 'touchTime', order: 'descending'}"
+                >
+
+                <el-table-column
+                    prop="touchTime"
+                    min-width="120px"
+                    sortable
+                    >
+                    <template slot="header" slot-scope="scope">
+                        Время<br>просмотра
+                    </template>
+                </el-table-column>
+
+                <el-table-column
+                    min-width="300px"
+                    >
+                    <template slot="header" slot-scope="scope">
+                        <el-input
+                            v-model="search"
+                            size="mini"
+                            placeholder="Найти"/>
+                    </template>
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.desc.author }}</span><br>
+                        <span>{{ `"${scope.row.desc.title}"` }}</span>
+                    </template>                    
+                </el-table-column>
+
+                <el-table-column
+                    >
+                    <template slot-scope="scope">
+                        <el-button
+                            size="mini"
+                            @click="handleDel(scope.$index, scope.row)">Убрать
+                        </el-button>
+                    </template>
+                </el-table-column>
+
+            </el-table>
         </Window>
     </div>
 </template>
@@ -16,7 +59,8 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
-
+import _ from 'lodash';
+import {formatDate} from '../../../share/utils';
 import Window from '../../share/Window.vue';
 
 export default @Component({
@@ -25,11 +69,44 @@ export default @Component({
     },
 })
 class HistoryPage extends Vue {
+    search = null;
+
     created() {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
     }
 
+    get tableData() {
+        const state = this.reader;
+        let result = [];
+
+        for (let bookKey in state.openedBook) {
+            const book = state.openedBook[bookKey];
+            let touchTime = new Date();
+            touchTime.setTime(book.touchTime);
+
+            result.push({
+                touchTime: formatDate(touchTime),
+                desc: {
+                    title: book.fb2.bookTitle,
+                    author: _.compact([
+                        book.fb2.lastName,
+                        book.fb2.firstName,
+                        book.fb2.middleName
+                    ]).join(' '),
+                }
+            });
+        }
+
+        return result;
+    }
+
+    keyHook(event) {
+        if (event.type == 'keydown' && event.code == 'Escape') {
+            this.$emit('history-toggle');
+            return true;
+        }
+    }
 }
 //-----------------------------------------------------------------------------
 </script>
@@ -42,11 +119,9 @@ class HistoryPage extends Vue {
     align-items: center;
 }
 
-.list {
+.window {
-    flex: 1;
+    min-width: 200px;
-    background-color: #ffffff;
+    max-width: 600px;
 }
 
-.list-item {
-}
 </style>

client/components/Reader/Reader.vue

@@ -46,7 +46,12 @@
 
         <el-main>
             <keep-alive>
-                <component ref="page" :is="pageActive" @load-book="loadBook" @book-pos-changed="bookPosChanged" @tool-bar-toggle="toolBarToggle"></component>
+                <component ref="page" :is="pageActive" 
+                    @load-book="loadBook" 
+                    @book-pos-changed="bookPosChanged" 
+                    @tool-bar-toggle="toolBarToggle"
+                    @history-toggle="historyToggle"
+                ></component>
             </keep-alive>
         </el-main>
     </el-container>

client/components/Reader/share/bookManager.js

@@ -121,7 +121,12 @@ class BookManager {
         const parsed = new BookParser();
 
         const parsedMeta = await parsed.parse(data, callback);
-        const result = Object.assign({}, meta, parsedMeta, {length: data.length, data, parsed});
+        const result = Object.assign({}, meta, parsedMeta, {
+            length: data.length,
+            textLength: parsed.textLength,
+            data,
+            parsed
+        });
 
         return result;
     }

client/components/share/Window.vue

@@ -27,9 +27,7 @@ class Window extends Vue {
     flex: 1;
     display: flex;
     flex-direction: column;
-    min-width: 200px;
+    background-color: #e5e7ea;
-    max-width: 600px;
-    background-color: #f5f7fa;
     margin: 10px;
     border: 1px solid black;
     box-shadow: 3px 3px 5px black;
@@ -43,5 +41,6 @@ class Window extends Vue {
 
 .header-text {
     margin-left: 10px;
+    margin-right: 10px;
 }
 </style>

client/element.js

@@ -50,6 +50,12 @@ import './theme/main.css';
 import ElInput from 'element-ui/lib/input';
 import './theme/input.css';
 
+import ElTable from 'element-ui/lib/table';
+import './theme/table.css';
+
+import ElTableColumn from 'element-ui/lib/table-column';
+import './theme/table-column.css';
+
 import ElProgress from 'element-ui/lib/progress';
 import './theme/progress.css';
 
@@ -65,7 +71,8 @@ import './theme/message-box.css';
 const components = {
     ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
-    ElInput, ElProgress
+    ElInput, ElTable, ElTableColumn,
+    ElProgress
 };
 
 for (let name in components) {

client/share/utils.js

@@ -16,4 +16,16 @@ export function hexToString(str) {
         result += String.fromCharCode(parseInt(str.substr(i, 2), 16));
     }
     return result;
+}
+
+export function formatDate(d, format) {
+    if (!format)
+        format = 'normal';
+
+    switch (format) {
+        case 'normal':
+            return `${d.getDate().toString().padStart(2, '0')}.${(d.getMonth() + 1).toString().padStart(2, '0')}.${d.getFullYear()} ` + 
+                `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
+    }
+    
 }

client/store/modules/reader.js

@@ -25,6 +25,29 @@ const getters = {
 // actions
 const actions = {};
 
+function delBook(state, value) {
+    Vue.delete(state.openedBook, value.key);
+}
+
+function cleanBooks(state) {
+    if (Object.keys(state.openedBook).length > 100) {
+        let min = Date.now();
+        let found = null;
+        for (let bookKey in state.openedBook) {
+            const book = state.openedBook[bookKey];
+            if (book.touchTime < min) {
+                min = book.touchTime;
+                found = book;
+            }
+        }
+
+        if (found) {
+            delBook(found);
+            cleanBooks(state);
+        }
+    }
+}
+
 // mutations
 const mutations = {
     setToolBarActive(state, value) {
@@ -32,9 +55,10 @@ const mutations = {
     },
     setOpenedBook(state, value) {
         Vue.set(state.openedBook, value.key, Object.assign({}, value, {touchTime: Date.now()}));
+        cleanBooks(state);
     },
     delOpenedBook(state, value) {
-        Vue.delete(state.openedBook, value.key);
+        delBook(state, value);
     }
 };