Last active
August 9, 2017 12:06
-
-
Save des1roer/87202da82304895e8656254ec23b30a1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Serials</title> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> | |
<link rel="icon" href="http://faviconka.ru/ico/faviconka_ru_30.ico" type="image/x-icon" /> | |
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>--> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
<link rel="stylesheet" type="text/css" href="./../../css/style.css" media="screen"/> | |
<link rel="stylesheet" type="text/css" href="css/css.css" media="screen"/> | |
</head> | |
<body> | |
<script type="text/x-template" href="js/modal-template.js" id="modal-template"> | |
<transition name="modal"> | |
<div class="modal-mask"> | |
<div class="modal-wrapper"> | |
<div class="modal-container"> | |
<div class="modal-header"> | |
<slot name="header"> | |
<h3>SIGN IN</h3> | |
</slot> | |
</div> | |
<div class="modal-body"> | |
<slot name="body"> | |
</slot> | |
</div> | |
<div class="modal-footer"> | |
<slot name="footer"> | |
</slot> | |
</div> | |
</div> | |
</div> | |
</div> | |
</transition> | |
</script> | |
<div class="container wrapper" style="margin-top: 10px; width: 99%"> | |
<div v-if="loader" class="modal-mask"> | |
<div class="modal-wrapper"> | |
<center> | |
<div class="loader"></div> | |
</center> | |
</div> | |
</div> | |
<modal v-show="showModal" @close="showModal = false"> | |
<div slot="body"> | |
Auth with Google | |
</div> | |
<div slot="footer"> | |
<button class="btn btn-success" @click="pass()"> | |
Sign In | |
</button> | |
</div> | |
</modal> | |
<table class='table table-bordered'> | |
<thead> | |
<tr> | |
<th v-for="name,i in cols"> | |
{{name.cn}} | |
<span v-if='name.cn=="url"'> | |
<a href="/" style="margin-left: 20px;">origin</a> | | |
<a href="/vid">vid</a> | |
| <a href="https://my.mail.ru/mail/des1roer/video/" target="_blank">MyVideo</a> | |
</span> | |
<span v-if='name.cn=="serial"'> | |
<a href="self#" @click.prevent='self()'>self</a> | |
</span> | |
</th> | |
</tr> | |
</thead> | |
<tr> | |
<th v-for="name, i in cols"> | |
<input v-if="name.dt=='int'" type="number" min="1" step="1" class="form-control check" v-model="add_row[name.cn]" v-on:keyup.enter="add()"></input> | |
<div class="input-group" v-else-if='name.cn=="url"'> | |
<input class="form-control check" v-model="add_row[name.cn]" v-on:focus="inValid()" v-on:keyup.enter="add()"></input> | |
<span class="input-group-btn"> | |
<a class="btn" @click="add()"> | |
<span class="glyphicon glyphicon-plus"></span> | |
</a> | |
</span> | |
</div> | |
<input v-else class="form-control check" v-model="add_row[name.cn]" v-on:focus="inValid()" v-on:keyup.enter="add()"></input> | |
</th> | |
</tr> | |
<!--ПОИСК--> | |
<tr class="bg-primary"> | |
<td v-for="name, i in cols"> | |
<div v-if="options[name.cn]"> | |
<select v-if='name.cn!="url"' class="form-control" v-model="search_row[name.cn]" @change="search([name.cn, $event.target.value])"> | |
<option value="">Все</option> | |
<option v-for="option in options[name.cn]"> | |
{{option[name.cn]}} | |
</option> | |
</select> | |
</div> | |
</td> | |
</tr> | |
<!--ПОИСК--> | |
<tbody> | |
<tr v-for="row in rows"> | |
<td v-for="name, i in cols"> | |
<div class="input-group" v-if='name.cn=="url"'> | |
<input class="form-control" v-model="row[name.cn]" @change="edit(row)"></input> | |
<span class="input-group-btn"> | |
<a :href='kinozal(row)' class="btn" target="_blank"> | |
<span class="glyphicon glyphicon-share-alt"></span> | |
</a> | |
<button type="button" class="btn" @click="del(row)"> | |
<span class="glyphicon glyphicon-trash"></span> | |
</button> | |
</span> | |
</div> | |
<input v-else-if="name.dt=='int'" type="number" min="1" step="1" class="form-control" v-model="row[name.cn]" @change="edit(row)"></input> | |
<input v-else class="form-control" v-model="row[name.cn]" @change="edit(row)"></input> | |
</td> | |
</tr> | |
</tbody> | |
<tfoot v-if="pages > 1"> | |
<tr> | |
<td colspan="4"> | |
<div class="pagination"> | |
<div class="pagination__left"> | |
<a href="#" @click="prev" v-if="page!=1">Предыдущая</a> | |
</div> | |
<div class="pagination__mid"> | |
<ul> | |
<li v-for="page in pages"> | |
<a href="#" @click.prevent="changePage(page)" :class="{ current: current == page }"> | |
{{ page }} | |
</a> | |
</li> | |
<li v-if="pages > 10">...</li> | |
<li v-if="pages > 10"><a href="#" @click.prevent="changePage(page)">{{ pages }}</a></li> | |
</ul> | |
</div> | |
<div class="pagination__right"> | |
<a href="#" @click="next" v-if="page != pages">Следующая</a> | |
</div> | |
</div> | |
</td> | |
</tr> | |
</tfoot> | |
</table> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script> | |
<script src="js/admin.js?1.0"></script> | |
<script src="js/gapi.js?1.0"></script> | |
<script async defer src="https://apis.google.com/js/api.js" | |
onload="this.onload=function(){};handleClientLoad()" | |
onreadystatechange="if (this.readyState === 'complete') this.onload()"> | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
c = function () { | |
return console.log.apply(console, arguments); | |
}; | |
Object.size = function (obj) { | |
//https://stackoverflow.com/questions/5223/length-of-a-javascript-object | |
var size = 0, key; | |
for (key in obj) { | |
if (obj.hasOwnProperty(key)) | |
size++; | |
} | |
return size; | |
}; | |
Array.prototype.clean = function (deleteValue) { | |
for (var i = 0; i < this.length; i++) { | |
if (this[i] == deleteValue) { | |
this.splice(i, 1); | |
i--; | |
} | |
} | |
return this; | |
}; | |
Vue.component('modal', { | |
template: '#modal-template' | |
}) | |
const default_row = { | |
series: 1, | |
season: 1 | |
}; | |
var vm = new Vue({ | |
el: '.wrapper', | |
data: { | |
cols: {}, | |
id: window.location.href.split('#')[1] || 0, | |
loader: true, | |
showModal: false, | |
add_row: default_row, | |
rows: {}, | |
col_names: [], | |
cols_count: 0, | |
options: [], | |
search_row: {}, | |
all: 0, | |
page: 1, | |
limit:10, | |
current: 1, | |
pages: 1 | |
}, | |
mounted: function () { | |
}, | |
methods: { | |
refresh: function () { | |
var self = this; | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'load', user: self.user_id}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
self.loader = false; | |
self.cols = data; | |
self.cols_count = self.cols.length; | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
} | |
}); | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'load_cnt', user: self.user_id, ext : JSON.stringify(self.search_row)}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
self.all = data; | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'load_data', user: self.user_id, ext : JSON.stringify(self.search_row), | |
pagination: {page:self.page, limit:self.limit}}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
self.rows = data; | |
self.pages = Math.ceil(self.all / self.limit) | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
} | |
}); | |
if (Object.size(self.search_row) == 0 && self.page == 1) { | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'load_data', user: self.user_id, ext : JSON.stringify(self.search_row), | |
pagination: {page:self.page, limit:self.all}}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
self.options['serial'] = _.uniq(data, function(item, key, a) { | |
return item.serial; | |
}); | |
self.options['season'] = _.uniq(data, function(item, key, a) { | |
return item.season; | |
}); | |
self.options['series'] = _.uniq(data, function(item, key, a) { | |
return item.series; | |
}); | |
c(self.options) | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
} | |
}); | |
} | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
} | |
}); | |
vm.showModal = false; | |
vm.loader = false; | |
c('refreshed at', moment().format("YYYY-MM-DD HH:mm:ss")); | |
}, | |
pass: function (data) { | |
handleAuthClick(); | |
}, | |
add: function (data) { | |
var self = this; | |
if (Object.size(self.add_row) != self.cols_count) { | |
alert('НЕ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ'); | |
c('НЕ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ', moment().format("YYYY-MM-DD HH:mm:ss")); | |
validInput(); | |
return false; | |
} | |
inValid(); | |
self.loader = true; | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'add', data: self.add_row, user: self.user_id}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
if (typeof data.error == 'undefined') { | |
self.add_row = { | |
series: 1, | |
season: 1 | |
}; | |
c(default_row) | |
vm.refresh(); | |
} else { | |
alert(data.error.errorInfo); | |
vm.refresh(); | |
} | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
vm.refresh(); | |
} | |
}); | |
}, | |
edit: function (data) { | |
c(data) | |
this.loader = true; | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'edit', user: self.user_id, data: data}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
if (typeof data.error == 'undefined') { | |
vm.refresh(); | |
} else { | |
alert(data.error.errorInfo); | |
} | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
vm.refresh(); | |
} | |
}); | |
}, | |
del: function (data) { | |
if (!confirm("Точно удалить?")) | |
return false; | |
this.loader = true; | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'del', data: data}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
if (typeof data.error == 'undefined') { | |
vm.refresh(); | |
} else { | |
alert(data.error.errorInfo); | |
} | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
} | |
}); | |
}, | |
kinozal: function (data) { | |
return 'http://j96177ni.beget.tech/vid/?s=' + data.serial + '&i=' + data.id + '#' + data.id; | |
}, | |
search: function (data) { | |
var self = this, | |
ext = JSON.stringify(self.search_row); | |
self.page = 1; | |
self.current = self.page; | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'load_cnt', user: self.user_id, ext : JSON.stringify(self.search_row)}, | |
success: function (data) { | |
//<--start | |
var data = JSON.parse(data); | |
self.all = data; | |
$.ajax({ | |
url: "php/data.php", | |
type: 'POST', | |
data: {act: 'load_data', user: self.user_id, ext: ext, | |
pagination: {page:self.page, limit:self.limit}}, | |
success: function (data) { | |
var data = JSON.parse(data); | |
self.rows = data; | |
self.add_row.serial = (self.search_row.serial != '') ? self.search_row.serial : ''; | |
self.pages = Math.ceil(self.all / self.limit) | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
} | |
}); | |
//<--end | |
}, | |
error: function (jqXHR, textStatus, errorThrown) { | |
alert(errorThrown); | |
} | |
}); | |
}, | |
self: function (data) { | |
this.add_row.serial = this.search_row.serial; | |
}, | |
next: function (data) { | |
this.page += 1; | |
this.current = this.page; | |
this.refresh(); | |
}, | |
prev: function (data) { | |
this.page -= 1; | |
this.current = this.page; | |
this.refresh(); | |
}, | |
changePage: function (data) { | |
this.page = data; | |
this.current = this.page; | |
this.refresh(); | |
}, | |
} | |
}) | |
function inValid() { | |
$(".check:visible").removeClass("warning"); | |
} | |
function validInput() { | |
var bad = 0; | |
$(".check:visible").each(function () { | |
if ($(this).val().trim() == '') { | |
$(this).addClass('warning'); | |
bad++; | |
} | |
}) | |
return (bad > 0) ? false : true; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment