BackEnd/YTManager/wwwroot/admin.js

$(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/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>YT Channel ID</th>
                <th>Title</th>
                <th>Description</th>
                <th>ID</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr v-cloak v-for="entry in entries">
                <td class="tinytext12px">{{entry.youtubeID}}</td>
                <td class="tinytext12px">{{entry.title}}</td>
                <td class="tinytext12px">{{entry.description}}</td>
                <td class="tinytext12px">{{entry.primaryKey}}</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>Title</th>
                    <th>Description</th>
                    <th>Youtube Video ID</th>
                    <th>Uploaded</th>
                    <th>ID</th>
                </tr>
            </thead>
            <tbody>
                <tr v-cloak v-for="video in Videos">
                    <td class="tinytext12px">{{video.title}}</td>
                    <td class="tinytext12px">{{video.description}}</td>
                    <td class="tinytext12px">{{video.youtubeID}}</td>
                    <td class="tinytext12px">{{video.uploaded}}</td>
                    <td class="tinytext12px">{{video.primaryKey}}</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();
});