78 lines
1.9 KiB
Vue
78 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<div>{{Videos}}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from "vue";
|
|
import Axios from "axios";
|
|
|
|
class Video {
|
|
public Title: string;
|
|
public Description: string;
|
|
public ID: string;
|
|
public Thumbnail: string;
|
|
public Channel: string;
|
|
public Seconds: number;
|
|
public Tags: Array<string>;
|
|
public URL: string;
|
|
|
|
constructor(v: any){
|
|
this.Title = v.title;
|
|
this.Description = v.description;
|
|
this.ID = v.id;
|
|
this.Thumbnail = v.thumbnail;
|
|
this.Channel = v.channel;
|
|
this.Seconds = v.seconds;
|
|
this.Tags = v.tags;
|
|
this.URL = "https://www.youtube.com/watch?v=" + v.id;
|
|
}
|
|
}
|
|
|
|
async function get_videos(): Promise<Array<Video>> {
|
|
// How many chars at most for the description.
|
|
const maxcharsdescriptionfield = 100;
|
|
|
|
// Temporary holder for videos.
|
|
let Videos : Array<Video> = [];
|
|
|
|
// Ask server for videos.
|
|
let resp = await Axios.get('http://localhost:62214/api/Videos').catch(e => console.log(e));
|
|
console.log("Got reply!");
|
|
|
|
// Handle all our nulls.
|
|
if (resp == null || resp.data == null)
|
|
console.log("server /api/videos return is null");
|
|
else {
|
|
// Parse our videos.
|
|
resp.data.forEach((v: any) => {
|
|
// Trim description if needed.
|
|
if (v.description.length > maxcharsdescriptionfield) {
|
|
v.description = v.description.substring(0, maxcharsdescriptionfield) + " ...";
|
|
}
|
|
|
|
// Add it to our array
|
|
Videos.push(new Video(v));
|
|
});
|
|
}
|
|
|
|
// Send back the resulting videos.
|
|
return Promise.resolve(Videos);
|
|
}
|
|
|
|
export default Vue.extend({
|
|
data() {
|
|
return {
|
|
Videos: Array<Video>()
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
|
|
// Ugh, vue doesn't have async support for computed, wow ...
|
|
mounted() { get_videos().then(e => this.Videos = e ) }
|
|
});
|
|
</script>
|