268 lines
9.9 KiB
JavaScript
268 lines
9.9 KiB
JavaScript
$(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();
|
|
});
|