158 lines
4.3 KiB
HTML
158 lines
4.3 KiB
HTML
{% extends "user/skeleton.html" %}
|
|
{% block content %}
|
|
|
|
<h3>
|
|
<div class="float-right">
|
|
<a class="btn btn-outline-success" href="/note/add"><i class="fa fa-plus"></i></a>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-secondary" v-on:click="showPanel(panels.filter)"><i class="fa fa-filter"></i></button>
|
|
|
|
Заметки
|
|
</h3>
|
|
<hr />
|
|
|
|
{% include 'inc/filter.html' %}
|
|
|
|
{% raw %}
|
|
<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getNotes"></pagination-component>
|
|
|
|
<div class="row" v-for="(note, noteIdx) in filteredNotes">
|
|
<div class="col py-2" :class="{'bg-light': noteIdx % 2}">
|
|
|
|
<a :href="'/note/' + note.id" v-html="note.title"></a>
|
|
|
|
<div class="row">
|
|
<div class="col small text-muted">
|
|
<span v-for="(tag, tagIdx) in note.tags">
|
|
<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col small text-muted">
|
|
Создано: {{ note.created }}
|
|
Обновлено: {{ note.updated }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getNotes"></pagination-component>
|
|
|
|
<backtotop-component></backtotop-component>
|
|
|
|
{% endraw %}
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<script type="text/javascript" src="/static/components/backtotop.js"></script>
|
|
<link rel="stylesheet" href="/static/components/backtotop.css"></link>
|
|
<script type="text/javascript" src="/static/components/pagination.js"></script>
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
filter: '',
|
|
notes: [],
|
|
pagination: {{ pagedata['pagination']|tojson|safe }},
|
|
panels: {
|
|
filter: {
|
|
visible: false
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
arrayRemove: function(arr, value) {
|
|
/* Удаление элемента из списка */
|
|
return arr.filter(function(ele){
|
|
return ele != value;
|
|
});
|
|
},
|
|
filterApply: function() {},
|
|
filterClear: function() {
|
|
/* Очистить фильтр */
|
|
let vm = this;
|
|
vm.filter = '';
|
|
},
|
|
filterNote: function(note) {
|
|
let vm = this;
|
|
if ( vm.filter.length<1 ) {
|
|
return true;
|
|
}
|
|
if ( note.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
getNotes: function() {
|
|
/* Получить список заметок */
|
|
let vm = this;
|
|
axios.post(
|
|
'/api',
|
|
{
|
|
"jsonrpc": "2.0",
|
|
"method": "notes",
|
|
"params": {
|
|
"page": vm.pagination.page
|
|
},
|
|
"id": 1
|
|
}
|
|
).then(
|
|
function(response) {
|
|
if ('result' in response.data) {
|
|
vm.notes = response.data['result'];
|
|
}
|
|
}
|
|
);
|
|
},
|
|
showPanel: function(panel) {
|
|
/* Показать/скрыть панель */
|
|
panel.visible = !panel.visible;
|
|
},
|
|
},
|
|
created: function() {
|
|
let vm = this;
|
|
axios.post(
|
|
'/api',
|
|
[
|
|
{
|
|
"jsonrpc": "2.0",
|
|
"method": "notes",
|
|
"params": {
|
|
"page": vm.pagination.page
|
|
},
|
|
"id": 1
|
|
},
|
|
{
|
|
"jsonrpc": "2.0",
|
|
"method": "notes.count",
|
|
"params": {},
|
|
"id": 1
|
|
}
|
|
]
|
|
).then(
|
|
function(response) {
|
|
if ('result' in response.data[0]) {
|
|
vm.notes = response.data[0]['result'];
|
|
}
|
|
if ('result' in response.data[1]) {
|
|
vm.pagination.size = response.data[1]['result'];
|
|
}
|
|
}
|
|
);
|
|
},
|
|
computed: {
|
|
filteredNotes: function() {
|
|
/* Отфильтрованный список */
|
|
let vm = this;
|
|
var result = vm.notes.filter(vm.filterNote);
|
|
return result;
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
{% endblock %}
|