2018-02-11 22:00:56 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
|
<link rel="stylesheet" href="/css/fontawesome.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/source-sans-pro.css">
|
2018-05-18 15:07:15 +08:00
|
|
|
<link rel="stylesheet" href="/css/yla-dialog.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/yla-tooltip.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/stylesheet.css">
|
2018-02-11 22:00:56 +08:00
|
|
|
<script src="/js/vue.js"></script>
|
|
|
|
|
<script src="/js/axios.js"></script>
|
2018-02-22 17:48:36 +08:00
|
|
|
<script src="/js/js-cookie.js"></script>
|
2018-05-18 15:07:15 +08:00
|
|
|
<script src="/js/component/yla-tooltip.js"></script>
|
|
|
|
|
<script src="/js/component/yla-dialog.js"></script>
|
|
|
|
|
<script src="/js/page/base.js"></script>
|
2018-02-26 14:43:17 +08:00
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/res/apple-touch-icon-144x144.png" />
|
|
|
|
|
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/res/apple-touch-icon-152x152.png" />
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-32x32.png" sizes="32x32" />
|
|
|
|
|
<link rel="icon" type="image/png" href="/res/favicon-16x16.png" sizes="16x16" />
|
2018-02-11 22:00:56 +08:00
|
|
|
<title>Shiori - Bookmarks Manager</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-05-18 15:07:15 +08:00
|
|
|
<div id="index-page">
|
|
|
|
|
<div id="sidebar">
|
|
|
|
|
<p id="logo">栞</p>
|
|
|
|
|
<yla-tooltip placement="right" content="Reload data">
|
|
|
|
|
<a>
|
|
|
|
|
<i class="fas fa-sync-alt fa-fw"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</yla-tooltip>
|
|
|
|
|
<yla-tooltip placement="right" content="Add new bookmark">
|
|
|
|
|
<a @click="showDialogAdd">
|
|
|
|
|
<i class="fas fa-plus fa-fw"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</yla-tooltip>
|
|
|
|
|
<yla-tooltip placement="right" content="Batch edit">
|
|
|
|
|
<a>
|
|
|
|
|
<i class="fas fa-pencil-alt fa-fw"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</yla-tooltip>
|
|
|
|
|
<div class="spacer"></div>
|
|
|
|
|
<yla-tooltip placement="right" content="Toggle night mode">
|
|
|
|
|
<a>
|
|
|
|
|
<i class="fas fa-moon fa-fw"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</yla-tooltip>
|
|
|
|
|
<yla-tooltip placement="right" content="Log out">
|
|
|
|
|
<a>
|
|
|
|
|
<i class="fas fa-sign-out-alt fa-fw"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</yla-tooltip>
|
2018-02-11 22:00:56 +08:00
|
|
|
</div>
|
2018-05-18 15:07:15 +08:00
|
|
|
<div id="body">
|
|
|
|
|
<div id="header">
|
|
|
|
|
<input type="text" placeholder="Search bookmarks by url, tags, title or content">
|
|
|
|
|
<a>
|
|
|
|
|
<i class="fas fa-search fa-fw"></i>
|
|
|
|
|
</a>
|
2018-02-14 12:41:43 +08:00
|
|
|
</div>
|
2018-05-18 15:07:15 +08:00
|
|
|
<div id="grid">
|
|
|
|
|
<div class="bookmark" v-for="book in bookmarks">
|
|
|
|
|
<a class="bookmark-content" :href="'/bookmark/'+book.id" target="_blank">
|
|
|
|
|
<img v-if="book.imageURL !== ''" :src="book.imageURL">
|
|
|
|
|
<p class="title">{{book.title}}</p>
|
|
|
|
|
<p class="excerpt" v-if="book.imageURL === ''">{{book.excerpt}}</p>
|
2018-03-10 11:39:38 +08:00
|
|
|
</a>
|
2018-05-18 15:07:15 +08:00
|
|
|
<div class="bookmark-menu">
|
|
|
|
|
<a class="url" title="View original" :href="book.url" target="_blank">
|
|
|
|
|
{{getHostname(book.url)}}
|
|
|
|
|
</a>
|
|
|
|
|
<a title="Edit bookmark">
|
|
|
|
|
<i class="fas fa-pencil-alt"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a title="Edit tags">
|
|
|
|
|
<i class="fas fa-tags"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a title="Delete bookmark">
|
|
|
|
|
<i class="fas fa-trash-alt"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<a title="Update cache">
|
|
|
|
|
<i class="fas fa-cloud-download-alt"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
2018-03-10 11:39:38 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-05-18 15:07:15 +08:00
|
|
|
<yla-dialog v-bind="dialog"></yla-dialog>
|
2018-02-11 22:00:56 +08:00
|
|
|
</div>
|
|
|
|
|
<script>
|
2018-05-18 15:07:15 +08:00
|
|
|
// Prepare axios instance
|
2018-02-22 17:48:36 +08:00
|
|
|
var token = Cookies.get('token'),
|
2018-05-18 15:07:15 +08:00
|
|
|
rest = axios.create();
|
2018-02-22 17:48:36 +08:00
|
|
|
|
2018-05-18 17:18:38 +08:00
|
|
|
rest.defaults.timeout = 60000;
|
2018-05-18 15:07:15 +08:00
|
|
|
rest.defaults.headers.common['Authorization'] = 'Bearer ' + token;
|
2018-02-11 22:00:56 +08:00
|
|
|
|
2018-05-18 15:07:15 +08:00
|
|
|
// Register Vue component
|
|
|
|
|
Vue.component('yla-dialog', new YlaDialog());
|
|
|
|
|
Vue.component('yla-tooltip', new YlaTooltip());
|
|
|
|
|
|
|
|
|
|
new Vue({
|
|
|
|
|
el: '#index-page',
|
|
|
|
|
mixins: [new Base()],
|
2018-02-11 22:00:56 +08:00
|
|
|
data: {
|
2018-02-23 15:30:58 +08:00
|
|
|
loading: false,
|
2018-02-12 22:06:53 +08:00
|
|
|
bookmarks: [],
|
2018-02-11 22:00:56 +08:00
|
|
|
},
|
|
|
|
|
methods: {
|
2018-05-18 15:07:15 +08:00
|
|
|
loadData() {
|
2018-02-24 15:01:52 +08:00
|
|
|
if (this.loading) return;
|
|
|
|
|
|
2018-02-23 15:30:58 +08:00
|
|
|
// Fetch data
|
2018-02-12 22:06:53 +08:00
|
|
|
this.loading = true;
|
2018-05-18 15:07:15 +08:00
|
|
|
rest.get('/api/bookmarks')
|
|
|
|
|
.then((response) => {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.bookmarks = response.data;
|
|
|
|
|
console.log(JSON.stringify(response.data));
|
2018-02-12 22:06:53 +08:00
|
|
|
})
|
2018-05-18 15:07:15 +08:00
|
|
|
.catch((error) => {
|
|
|
|
|
var errorMsg = (error.response ? error.response.data : error.message).trim();
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.showErrorDialog(errorMsg);
|
2018-02-14 12:41:43 +08:00
|
|
|
});
|
|
|
|
|
},
|
2018-05-18 15:07:15 +08:00
|
|
|
showDialogAdd() {
|
|
|
|
|
this.showDialog({
|
|
|
|
|
title: 'New Bookmark',
|
|
|
|
|
content: 'Save an URL to bookmark',
|
|
|
|
|
fields: [{
|
|
|
|
|
name: 'url',
|
|
|
|
|
label: 'http://...',
|
|
|
|
|
}],
|
|
|
|
|
mainText: 'OK',
|
|
|
|
|
secondText: 'Cancel',
|
|
|
|
|
mainClick: (data) => {
|
|
|
|
|
this.dialog.loading = true;
|
|
|
|
|
rest.post('/api/bookmarks', {
|
|
|
|
|
url: data.url,
|
2018-03-07 16:51:47 +08:00
|
|
|
})
|
2018-05-18 15:07:15 +08:00
|
|
|
.then((response) => {
|
|
|
|
|
this.dialog.loading = false;
|
|
|
|
|
this.dialog.visible = false;
|
|
|
|
|
this.bookmarks.unshift(response.data);
|
2018-03-07 16:51:47 +08:00
|
|
|
})
|
2018-05-18 15:07:15 +08:00
|
|
|
.catch((error) => {
|
|
|
|
|
var errorMsg = (error.response ? error.response.data : error.message).trim();
|
|
|
|
|
this.showErrorDialog(errorMsg);
|
2018-03-07 16:51:47 +08:00
|
|
|
});
|
2018-05-18 15:07:15 +08:00
|
|
|
}
|
2018-02-13 17:14:08 +08:00
|
|
|
});
|
2018-05-18 15:07:15 +08:00
|
|
|
},
|
|
|
|
|
getHostname(url) {
|
|
|
|
|
parser = document.createElement('a');
|
|
|
|
|
parser.href = url;
|
|
|
|
|
return parser.hostname;
|
2018-02-13 17:14:08 +08:00
|
|
|
}
|
|
|
|
|
},
|
2018-05-18 15:07:15 +08:00
|
|
|
mounted() {
|
2018-02-11 22:00:56 +08:00
|
|
|
this.loadData();
|
|
|
|
|
}
|
2018-05-18 15:07:15 +08:00
|
|
|
});
|
2018-02-11 22:00:56 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
2018-03-10 11:39:38 +08:00
|
|
|
</html>
|
