DumbYT/BackEnd
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Moved everything over

Browse Source
This commit is contained in:
hak8or
2018-02-28 18:37:16 -05:00
parent ccef5fee0c
commit 3a11ecf893
6 changed files with 0 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
YTManager/frontend/Admin/index.css Normal file
View File

@ -0,0 +1,64 @@
body {
margin-left: 5%;
margin-right: 5%;
line-height: 1.6;
font-size: 18px;
color: #003636;
background-color: #F8F8F8;
max-width: 1280px;
margin: auto;
}
.pageheader {
max-width: 960px;
margin: auto;
}
.error {
background-color: red;
}
.curvedbottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#addnewchannelform {
width: inherit;
margin: auto;
}
.tinytext10px{ font-size: 10px; }
.tinytext12px{ font-size: 12px; }
.tinytext14px{ font-size: 14px; }
.tinytext16px{ font-size: 16px; }
.tinytext18px{ font-size: 18px; }
[v-cloak] {
display: none;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.75s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.apistatusicon {
animation-duration: 1s;
animation-name: spinny;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes spinny {
from {
transform: rotate(-15deg);
}
to {
transform: rotate(15deg);
}
}

44
YTManager/frontend/Admin/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />
<title>YT Manager Admin</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="pageheader">
<h1>Dumb YT Manager</h1>
<p>Youtube banned my account and refuses to say why, taking all my subscribed channels with it. This is a simple scrubscribed channel manager, showing recent releases from each channel and finally proper sub-catagory functionality!</p>
<div id="apistatus-0"></div>
</div>
<hr />
<h2>Subscribed Channels</h2>
<div id="subbedchannelstable-0"></div>
<div id="addchanel-0"></div>
<hr />
<h2>Videos in DB</h2>
<div id="videosindbtable-0"></div>
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<!-- For doing REST based API stuff. -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Some icons -->
<script src="https://use.fontawesome.com/91af8ab4ba.js"></script>
<!-- Good ole Vue :D -->
<script src="https://unpkg.com/vue"></script>
<!-- All of my custom JS. Put here so body loads before Vue based stuff loads/attempts to bind. -->
<script src="index.js"></script>
</body>
</html>

267
YTManager/frontend/Admin/index.js Normal file
View File

@ -0,0 +1,267 @@
$(document).foundation();
// How many chars at most for the description.
var maxcharstablefield = 200;
// Bind to the form for submitting a new channel
var addchanel0 = new Vue({
el: '#addchanel-0',
data: {
entry: {
title: "",
description: "",
yTChannelID: "",
thumbnailURL: "",
},
fail: false,
expanded: false
},
template: `
<div>
<div class="grid-x">
<div class="medium-11 cell"></div>
<div class="medium-1 cell">
<button type="button" class="button input-group" v-on:click='expanded = !expanded'>
<i class="fa fa-plus" aria-hidden="true"></i> Add
</button>
</div>
</div>
<transition name="fade">
<form v-cloak v-if="expanded">
<h2>Add new Channel</h2>
<div class="grid-x">
<div class="input-group medium-6 cell">
<span class="input-group-label">Title</span>
<input class="input-group-field" type="text" placeholder="Title of Entry" v-model="entry.title">
</div>
<div class="input-group medium-1 cell"></div>
<div class="input-group medium-5 cell">
<span class="input-group-label">Channel</span>
<input class="input-group-field" v-bind:class="{ error: fail }" type="text"
@blur="newurl" placeholder="URL of Entry" v-model="entry.yTChannelID">
</div>
</div>
<div class="input-group">
<span class="input-group-label">Description</span>
<input class="input-group-field" type="text" placeholder="Description of Entry" v-model="entry.description">
</div>
<div class="grid-x">
<img class="small-4 cell" :src="entry.thumbnailURL" />
<div class="small-7"></div>
<button type="button" style="max-height:50px" class="button input-group small-1 cell" @click="submit">Submit</button>
</div>
</form>
</transition>
</div>
`,
methods: {
submit: function (event) {
// Send the channel to our API and request tables be updated.
var d = this.entry;
axios.post('/api_raw/Channels/' + this.entry.yTChannelID)
.then(function (response) {
this.entry.title = "";
this.entry.description = "";
this.entry.yTChannelID = "";
this.entry.thumbnailURL = "";
this.expanded = false;
tbody0.retrieve();
setTimeout(() => videostb.retrieve(), 1000);
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
// Handle when user put in a new URL (verification and thumbnail fetch)
newurl: function (event) {
// Remove any potential youtube URL from the field.
var ytchurl = "https://www.youtube.com/channel/";
if (this.entry.yTChannelID.startsWith(ytchurl)) {
this.entry.yTChannelID = this.entry.yTChannelID.replace(ytchurl, "");
}
// Check if what remains looks like a youtube channel ID.
if (this.entry.yTChannelID.length != "UCyS4xQE6DK4_p3qXQwJQAyA".length) {
this.fail = true;
return;
}
this.fail = false;
// Get the Channel URL
var basestr = 'https://www.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics';
var apikey = '&key=AIzaSyCuIYkMc5SktlnXRXNaDf2ObX-fQvtWCnQ '
var channel = '&id=' + addchanel0.entry.yTChannelID;
axios.get(basestr + channel + apikey)
.then(function (response) {
// Only attempt to fill the UI text boxes if they are empty.
if (this.entry.description.length == 0) {
this.entry.description = response.data.items[0].snippet.description;
}
if (this.entry.title.length == 0) {
this.entry.title = response.data.items[0].snippet.title;
}
// Get client to load the thumbnail
this.entry.thumbnailURL = response.data.items[0].snippet.thumbnails.medium.url;
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
}
});
// Bind to our table of entries.
var tbody0 = new Vue({
el: '#subbedchannelstable-0',
data: {
entries: [""]
},
template: `
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-cloak v-for="entry in entries">
<td class="tinytext12px">{{entry.id}}</td>
<td class="tinytext12px">{{entry.title}}</td>
<td class="tinytext12px">{{entry.description}}</td>
<td>
<a href="#"><i class="fa fa-refresh" aria-hidden="true" :id="entry.youtubeID" @click="forcerefresh"/></a>
<a href="#"><i class="fa fa-trash-o" aria-hidden="true" :id="entry.youtubeID" @click="deletechannel"/></a>
</td>
</tr>
</tbody>
</table>
`,
methods: {
retrieve: function (event) {
axios.get('/api/Channels')
.then(function (response) {
// Wipe out all old entries.
this.entries = [];
// And fill it with all the retrieved entries.
response.data.forEach(function (x) {
if (x.description.length > maxcharstablefield) {
x.description = x.description.substring(0, maxcharstablefield) + " ...";
}
this.entries.push(x);
}.bind(this));
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
forcerefresh: function (event) {
axios
.post('/api/Admin/Update/' + event.target.id)
.catch(function (error) { console.log(error); });
},
deletechannel: function (event) {
axios
.delete('/api/Channels/' + event.target.id)
.catch(function (error) { console.log(error); });
}
}
});
// Bind to our table of entries.
var apistatus = new Vue({
el: '#apistatus-0',
data: {
apiaccessible: false,
updatingjobactive: false
},
template: `
<div class="grid-x">
<div class="medium-1 cell">API Status</div>
<div class="medium-1 cell">
<i class="fa fa-thumbs-o-up apistatusicon fa-2x" aria-hidden="true" v-if="apiaccessible"></i>
<i class="fa fa-thumbs-o-down apistatusicon fa-2x" aria-hidden="true" v-else></i>
</div>
<div class="medium-7 cell"></div>
<div class="medium-2 cell">Video Fetching Status</div>
<div class="medium-1 cell">
<i class="fa fa-thumbs-o-up apistatusicon fa-2x" aria-hidden="true" v-if="updatingjobactive"></i>
<i class="fa fa-thumbs-o-down apistatusicon fa-2x" aria-hidden="true" v-else></i>
</div>
</div>
`,
methods: {
update: function (event) {
axios.get('/api/Admin/Update')
.then(function (response) {
this.apiaccessible = (response.status == 200);
this.updatingjobactive = (response.data != "false")
}.bind(this)
)
.catch(function (error) {
console.log(error);
});
}
}
});
// Grid of images.
var videostb = new Vue({
el: '#videosindbtable-0',
data: {
Videos: []
},
template: `
<table>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Channel</th>
</tr>
</thead>
<tbody>
<tr v-cloak v-for="video in Videos">
<td class="tinytext12px">{{video.id}}</td>
<td class="tinytext12px">{{video.title}}</td>
<td class="tinytext12px">{{video.description}}</td>
<td class="tinytext12px">{{video.channel}}</td>
</tr>
</tbody>
</table>
`,
methods: {
// Get new videos from the web api.
retrieve: function (event) {
axios.get('/api/Videos')
.then(function (response) {
// And fill it with all the retrieved entries.
response.data.forEach(function (x) {
// Trim description if needed.
if (x.description.length > maxcharstablefield) {
x.description = x.description.substring(0, maxcharstablefield) + " ...";
}
// Add it to our array
this.Videos.push(x);
}.bind(this));
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
}
});
window.addEventListener('load', function () {
apistatus.update();
tbody0.retrieve();
videostb.retrieve();
});

38
YTManager/frontend/index.css Normal file
View File

@ -0,0 +1,38 @@
body {
margin-left: 5%;
margin-right: 5%;
line-height: 1.6;
font-size: 18px;
color: #003636;
background-color: #F8F8F8;
max-width: 1280px;
margin: auto;
}
.pageheader {
max-width: 960px;
margin: auto;
}
.curvedbottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.tinytext10px{ font-size: 10px; }
.tinytext12px{ font-size: 12px; }
.tinytext14px{ font-size: 14px; }
.tinytext16px{ font-size: 16px; }
.tinytext18px{ font-size: 18px; }
[v-cloak] {
display: none;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.75s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}

34
YTManager/frontend/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
<title>YT Manager</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="pageheader">
<h1>Dumb YT Manager</h1>
</div>
<div v-cloak id="vidholder-0"></div>
<!-- Compressed JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<!-- For doing REST based API stuff. -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Some icons -->
<script src="https://use.fontawesome.com/91af8ab4ba.js"></script>
<!-- Good ole Vue :D -->
<script src="https://unpkg.com/vue"></script>
<!-- All of my custom JS. Put here so body loads before Vue based stuff loads/attempts to bind. -->
<script src="index.js"></script>
</body>
</html>

59
YTManager/frontend/index.js Normal file
View File

@ -0,0 +1,59 @@
$(document).foundation();
// How many chars at most for the description.
var maxcharsdescriptionfield = 100;
// Grid if images.
var vidholder = new Vue({
el: '#vidholder-0',
data: {
Videos: []
},
// Template has wrapping div because v-for can't be in root it seems.
template: `
<div>
<div class="grid-x large-up-6">
<div v-for="video in Videos" class="cell">
<div class="card curvedbottom" style="background-color:#ddd9d4; margin:6px;2px;6px;">
<a :href="video.url"><img :src="video.thumbnail"></a>
<div class="card-section" style="padding: 7px 5px 7px">
<div style="font-size: 14px; padding-bottom:10px;">{{ video.title }}</div>
<div style="font-size: 10px; text-align:right">{{ video.channel }}</div>
</div>
</div>
</div>
</div >
</div>
`,
methods: {
// Get new videos from the web api.
retrieve: function (event) {
// Wipe out all old entries.
this.Videos = [];
axios.get('/api/Videos')
.then(function (response) {
// And fill it with all the retrieved entries.
response.data.forEach(function (x) {
// Trim description if needed.
if (x.description.length > maxcharsdescriptionfield) {
x.description = x.description.substring(0, maxcharsdescriptionfield) + " ...";
}
// Generate a new URL by adding the YT ID.
x.url = "https://www.youtube.com/watch?v=" + x.id;
// Add it to our array
this.Videos.push(x);
}.bind(this));
}.bind(this))
.catch(function (error) {
console.log(error);
});
}
}
});
window.addEventListener('load', function () {
vidholder.retrieve();
});