RemiZOffAlex/myapp-full
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update templates

Browse Source
This commit is contained in:
RemiZOffAlex
2020-02-08 05:05:43 +03:00
parent 5913836f53
commit db995990d4
14 changed files with 480 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
myapp/static/components/pagination.js Normal file
View File

@@ -0,0 +1,113 @@
/*
<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getRecipes"></pagination-component>
<script type="text/javascript" src="/static/components/pagination.js"></script>
Vue
...
data: {
pagination: {
page: 1,
per_page: {{ per_page }},
size: {{ pagedata['count'] }}
},
}
...
Flask
pagedata['pagination'] = {
"page": page,
"per_page": app.config['ITEMS_ON_PAGE'],
"size": 0
}
*/
let paginationTemplate = `<div class="row">
<div class="col py-2 text-center">
<div class="btn btn-outline-secondary" v-if="pages()<=1">...</div>
<template v-else>
<button type="button" class="btn btn-outline-secondary pull-left" v-if="has_prev" v-on:click="handlePageSelected(pagination.page-1)">Предыдущая</button>
<template v-for="page in iter_pages">
<button type="button" class="btn btn-outline-secondary mr-1" v-if="page" v-on:click="handlePageSelected(page)">{{ page }}</button>
<div class="btn btn-outline-secondary mr-1" v-else>...</div>
</template>
<button type="button" class="btn btn-outline-secondary float-right" v-if="has_next" v-on:click="handlePageSelected(pagination.page+1)">Следующая</button>
</template>
</div>
</div>`;
Vue.component('pagination-component', {
template: paginationTemplate,
data: function() {
return {
}
},
props:{
pagination: {
type: Array,
required: true,
default: {
page: 1,
per_page: 25,
size: 0
}
},
clickHandler: {
type: Function,
default: function() { }
},
},
methods: {
handlePageSelected: function(selected) {
/* Установить номер текущей страницы и вызвать функция обновления
* страницы
*
* Аргументы:
* selected -- номер страницы
*/
let vm = this;
vm.pagination.page = selected;
vm.clickHandler();
},
pages: function() {
let vm = this;
return Math.ceil(vm.pagination.size/vm.pagination.per_page);
},
},
computed: {
has_prev: function() {
let vm = this;
return vm.pagination.page > 1;
},
has_next: function() {
let vm = this;
return vm.pagination.page < vm.pages();
},
iter_pages: function() {
/* */
let vm = this;
let last = 0;
let left_edge=2, left_current=2,
right_current=5, right_edge=2;
let result = [];
for (let num = 1; num < vm.pages()+1; num++) {
if (num <= left_edge ||
(num > vm.pagination.page - left_current - 1 &&
num < vm.pagination.page + right_current) ||
num > vm.pages() - right_edge) {
if (last + 1 != num) {
result.push(null);
} else {
result.push(num);
}
last = num
}
};
return result;
},
}
});

268
myapp/static/components/tags.js Normal file
View File

@@ -0,0 +1,268 @@
var tagsTemplate = `
<div>
<!-- Начало: Теги -->
<div class="row my-3">
<div class="col">
<div class="btn mb-1"><i class="fa fa-tags"></i></div>
<div class="btn btn-outline-success mb-1" v-on:click="showPanel(panels.standart)"><i class="fa fa-plus"></i></div>
<div class="btn-group mr-2 mb-1" v-for="(tag, index) in sortedTags">
<a class="btn btn-outline-secondary text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>
<div class="btn btn-outline-danger" v-on:click="removeTag(tag.id)"><i class="fa fa-remove"></i></div>
</div>
</div>
</div>
<div class="row mt-3" v-if="panels.standart.visible">
<div class="col">
<div class="input-group">
<input v-model="newtag" v-on:keyup.13="addTag" class="form-control" />
<div class="input-group-append">
<div class="btn btn-outline-success" v-on:click="addTag"><i class="fa fa-save"></i></div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<template v-for="(tags, key, index) in groups">
<a class="btn btn-outline-secondary mt-2 mr-2" v-if="(index % 2)===0" :href="'#' + index">{{ key }}</a>
<a class="btn btn-outline-primary mt-2 mr-2" v-else :href="'#' + index">{{ key }}</a>
</template>
</div>
</div>
<!-- Начало: Форма добавления нового тега -->
<div class="row" v-if="panels.new.visible">
<div class="col py-2">
Добавить новый тег [<b id="newTag">{{ newtag }}</b>]?
<div class="row">
<div class="col py-2">
<div class="btn btn-outline-danger" v-on:click="cancelNewTag">Отмена</div>
<div class="btn btn-outline-success float-right" v-on:click="addNewTag">Добавить</div>
</div>
</div>
</div>
</div>
<!-- Конец: Форма добавления нового тега -->
<div class="row mt-3" v-for="(tags, key, index) in groups">
<div class="col pr-0">
<a :name="index" class="btn btn-outline-danger mr-2 mb-1">{{ key }}</a>
<template v-for="(tag, tagIdx) in tags">
<div class="btn btn-outline-secondary mr-2 mb-1" v-if="!tag_ids.includes(tag.id)" v-on:click="tag_add_to_node(tag)">{{ tag.name }}</div>
<div class="btn btn-primary mr-2 mb-1" v-else v-on:click="removeTag(tag.id)">{{ tag.name }}</div>
</template>
</div>
</div>
</div>
</div>
<!-- Конец: Теги -->
</div>`;
Vue.component('tags-component', {
data: function() {
return {
newtag: '',
groups: {},
forms: {
modal: false,
panel: false
},
panels: {
standart: {
visible: false
},
new: {
visible: false
}
}
}
},
props: ['tags', 'node', 'url'],
template: tagsTemplate,
methods: {
arrayRemove: function(arr, value) {
/* Удаление элемента из списка */
return arr.filter(function(ele){
return ele != value;
});
},
removeTag: function (id) {
/* Удаление тега из ресурса */
let vm = this;
var tag = null;
for (var i = 0; i < vm.tags.length; i++) {
if (id == vm.tags[i].id) {
tag = vm.tags[i]
}
}
if (!tag) {return;}
axios.post(
'/api',
{
"jsonrpc": "2.0",
"method": 'tag.deleteFrom' + vm.url,
"params": {
"id": vm.node,
"tag": tag.id
},
"id": 1
}
).then(
function(response) {
if ('result' in response.data) {
vm.tags = vm.arrayRemove(vm.tags, tag);
} else if ('error' in response.data) {
console.log(response.data);
}
}
);
},
addTag: function () {
/* Добавить тег к ресурсу */
let vm = this;
var newtag = vm.newtag.trim();
vm.newtag = newtag;
axios.post(
'/api',
{
"jsonrpc": "2.0",
"method": 'tag.exist',
"params": {
name: vm.newtag
},
"id": 1
}
).then(
function(response) {
if ('result' in response.data) {
vm.tag_add_to_node( response.data['result'] );
} else if ('error' in response.data) {
console.log(response.data);
vm.panels.new.visible = true;
}
}
).catch(
function (error) {
console.log(error);
}
);
},
addNewTag:function () {
/* Добавление нового тега */
let vm = this;
axios.post(
'/api',
{
"jsonrpc": "2.0",
"method": 'tag.add',
"params": {
name: vm.newtag
},
"id": 1
}
).then(
function(response) {
if ('result' in response.data) {
vm.getTags();
vm.tag_add_to_node( response.data['result'] );
}
}
);
},
cancelNewTag:function () {
let vm = this;
vm.newtag = '';
vm.panels.new.visible = false;
},
// Добавление тега к ресурсу
tag_add_to_node: function(tag) {
let vm = this;
axios.post(
'/api',
{
"jsonrpc": "2.0",
"method": 'tag.addTo' + this.url,
"params": {
"id": vm.node,
"tag": tag.id
},
"id": 1
}
).then(
function(response) {
if ('result' in response.data) {
vm.tags.push(response.data['result']);
vm.newtag = '';
vm.panels.new.visible = false;
}
}
);
},
// Получить список тегов
getTags: function() {
let vm = this;
axios.post(
'/api',
{
"jsonrpc": "2.0",
"method": 'tags.groups',
"params": {},
"id": 1
}
).then(
function(response) {
if ('result' in response.data) {
vm.groups = response.data['result'];
}
}
).catch(
function (error) {
console.log(error);
}
);
},
showPanel: function(panel) {
/* Показать/скрыть панель */
panel.visible = !panel.visible;
},
},
mounted: function() {
let vm = this;
vm.getTags();
},
computed: {
tag_ids: function() {
let vm = this;
var result = [];
for (var i = 0; i < vm.tags.length; i++) {
result.push(vm.tags[i].id);
}
return result;
},
sortedTags: function() {
let vm = this;
if (vm.tags === undefined) {return [];}
vm.tags.sort(
function(a, b) {
if (a.name > b.name) {
return 1;
}
if (a.name < b.name) {
return -1;
}
return 0;
}
);
return vm.tags;
}
}
});