deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Работа над HistoryPage

Browse Source
This commit is contained in:
Book Pauk
2019-01-26 04:25:59 +07:00
parent fc580799ab
commit 01f8bcba6e
1 changed files with 112 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
client/components/Reader/HistoryPage/HistoryPage.vue
View File

@@ -1,64 +1,82 @@
<template> <template>
<div ref="main" class="main"> <div ref="main" class="main" @click="close">
<Window class="window"> <div class="main" @click.stop>
<template slot="header"> <Window @close="close">
Последние 100 открытых книг <template slot="header">
</template> Последние 100 открытых книг
</template>
<el-table <el-table
:data="tableData" :data="tableData"
style="width: 100%" style="width: 100%"
size="mini" size="mini"
height="1px" height="1px"
stripe stripe
border border
:default-sort = "{prop: 'touchTime', order: 'descending'}" :default-sort = "{prop: 'touchDateTime', order: 'descending'}"
:header-cell-style = "headerCellStyle" :header-cell-style = "headerCellStyle"
>
<el-table-column
prop="touchTime"
min-width="115px"
sortable
> >
<template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
Время<br>просмотра
</template>
</el-table-column>
<el-table-column
>
<template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
<el-input
v-model="search"
size="mini"
style="margin: 0; padding: 0; vertical-align: bottom; margin-top: 10px"
placeholder="Найти"/>
</template>
<el-table-column <el-table-column
min-width="300px" prop="touchDateTime"
min-width="90px"
sortable
> >
<template slot-scope="scope"> <template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
<span>{{ scope.row.desc.author }}</span><br> Время<br>просм.
<span>{{ `"${scope.row.desc.title}"` }}</span> </template>
<template slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
{{ scope.row.touchDate }}<br>
{{ scope.row.touchTime }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
> >
<template slot-scope="scope"> <template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
<el-button <el-input
v-model="search"
size="mini" size="mini"
@click="handleDel(scope.$index, scope.row)">Убрать style="margin: 0; padding: 0; vertical-align: bottom; margin-top: 10px"
</el-button> placeholder="Найти"/>
</template> </template>
<el-table-column
min-width="300px"
>
<template slot-scope="scope">
<div class="desc" @click="loadBook(scope.row.url)">
<span>{{ scope.row.desc.author }}</span><br>
<span>{{ `"${scope.row.desc.title}"` }}</span>
</div>
</template>
</el-table-column>
<el-table-column
min-width="100px"
>
<template slot-scope="scope">
<span class="clickable" @click="openOriginal(scope.row.url)">Оригинал</span><br>
<a :href="scope.row.path" :download="getFileNameFromPath(scope.row.path)">Скачать FB2</a>
</template>
</el-table-column>
<el-table-column
width="60px"
>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleDel(scope.row.key)">X
</el-button>
</template>
</el-table-column>
</el-table-column> </el-table-column>
</el-table-column> </el-table>
</Window>
</el-table> </div>
</Window>
</div> </div>
</template> </template>
@@ -66,7 +84,9 @@
//----------------------------------------------------------------------------- //-----------------------------------------------------------------------------
import Vue from 'vue'; import Vue from 'vue';
import Component from 'vue-class-component'; import Component from 'vue-class-component';
import path from 'path';
import _ from 'lodash'; import _ from 'lodash';
import {formatDate} from '../../../share/utils'; import {formatDate} from '../../../share/utils';
import Window from '../../share/Window.vue'; import Window from '../../share/Window.vue';
@@ -89,11 +109,14 @@ class HistoryPage extends Vue {
for (let bookKey in state.openedBook) { for (let bookKey in state.openedBook) {
const book = state.openedBook[bookKey]; const book = state.openedBook[bookKey];
let touchTime = new Date(); let d = new Date();
touchTime.setTime(book.touchTime); d.setTime(book.touchTime);
const t = formatDate(d).split(' ');
result.push({ result.push({
touchTime: formatDate(touchTime), touchDateTime: book.touchTime,
touchDate: t[0],
touchTime: t[1],
desc: { desc: {
title: book.fb2.bookTitle, title: book.fb2.bookTitle,
author: _.compact([ author: _.compact([
@@ -101,7 +124,10 @@ class HistoryPage extends Vue {
book.fb2.firstName, book.fb2.firstName,
book.fb2.middleName book.fb2.middleName
]).join(' '), ]).join(' '),
} },
url: book.url,
path: book.path,
key: book.key,
}); });
} }
@@ -126,9 +152,34 @@ class HistoryPage extends Vue {
return result; return result;
} }
getFileNameFromPath(fb2Path) {
return path.basename(fb2Path).substr(0, 10) + '.fb2';
}
openOriginal(url) {
window.open(url, '_blank');
}
openFb2(path) {
window.open(path, '_blank');
}
handleDel(key) {
this.commit('reader/delOpenedBook', {key});
}
loadBook(url) {
this.$emit('load-book', {url});
this.close();
}
close() {
this.$emit('history-toggle');
}
keyHook(event) { keyHook(event) {
if (event.type == 'keydown' && event.code == 'Escape') { if (event.type == 'keydown' && event.code == 'Escape') {
this.$emit('history-toggle'); this.close();
return true; return true;
} }
} }
@@ -144,13 +195,18 @@ class HistoryPage extends Vue {
align-items: center; align-items: center;
} }
.window {
min-width: 200px;
max-width: 600px;
}
.header { .header {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.clickable {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.desc {
cursor: pointer;
}
</style> </style>