BackEnd/YTManager/frontend/index.js

$(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();
});