Skip to content

Instantly share code, notes, and snippets.

@des1roer
Last active August 9, 2017 12:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save des1roer/87202da82304895e8656254ec23b30a1 to your computer and use it in GitHub Desktop.
Save des1roer/87202da82304895e8656254ec23b30a1 to your computer and use it in GitHub Desktop.
<!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>&nbsp;|&nbsp;
<a href="/vid">vid</a>
&nbsp;|&nbsp;<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>
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