100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
import Vue from "vue";
|
|
import VGC from "./components/Video_Grid.vue";
|
|
import SCH from "./components/Search.vue";
|
|
import VTBL from "./components/Video_Table.vue";
|
|
import CTBL from "./components/Channel_Table.vue";
|
|
import CADD from "./components/Channel_Add.vue";
|
|
import VFAVS from "./components/Favorite_Channels.vue";
|
|
import './index.css';
|
|
import * as DumbYT from "./dumbyt";
|
|
|
|
let MainApp = new Vue({
|
|
el: "#app",
|
|
template: `
|
|
<div>
|
|
<VFAVS v-if="VFAVS_Show" v-bind:Videos="Favorite_Videos"/>
|
|
<div style="padding-top: 5rem;">
|
|
<SCH v-on:search_complete="search_completed"/>
|
|
<VGC v-bind:Videos="Videos"/>
|
|
</div>
|
|
</div>
|
|
`,
|
|
components: {
|
|
VFAVS,
|
|
SCH,
|
|
VGC
|
|
},
|
|
data() {
|
|
return {
|
|
Favorite_Videos: Array<DumbYT.Video>(),
|
|
Videos: Array<DumbYT.Video>(),
|
|
VFAVS_Show: Boolean()
|
|
}
|
|
},
|
|
methods: {
|
|
// Callback for when the search component got results back.
|
|
search_completed(searchstring: string, videos : Array<DumbYT.Video>) : void {
|
|
this.VFAVS_Show = searchstring.length == 0;
|
|
this.Videos = videos;
|
|
}
|
|
},
|
|
mounted(){
|
|
let v: DumbYT.Video = new DumbYT.Video(null);
|
|
v.Title = "Test title";
|
|
v.Description = "Test description";
|
|
v.Thumbnail = "https://i.ytimg.com/vi/LPxqHXyZhNY/mqdefault.jpg";
|
|
v.Channel = "Cool Channel"
|
|
this.Favorite_Videos.push(v);
|
|
this.Favorite_Videos.push(v);
|
|
this.Favorite_Videos.push(v);
|
|
this.Favorite_Videos.push(v);
|
|
this.Favorite_Videos.push(v);
|
|
this.Favorite_Videos.push(v);
|
|
this.VFAVS_Show = true;
|
|
|
|
// Populate some Videos immediatly on start up.
|
|
DumbYT.API.search_videos("").then(videos => {
|
|
// Copy the videos over.
|
|
this.Videos = videos;
|
|
});
|
|
}
|
|
});
|
|
|
|
let AdminApp = new Vue({
|
|
el: "#admin_app",
|
|
template: `
|
|
<div>
|
|
<CADD/>
|
|
<SCH v-on:search_complete="search_completed"/>
|
|
|
|
<h3 style="padding-top: 3 rem; padding-left: 3rem;">Channels</h3>
|
|
<CTBL ID="Channels_All" v-bind:Channels="Channels"/>
|
|
|
|
<h3 style="padding-top: 3 rem; padding-left: 3rem;">Videos</h3>
|
|
<VTBL v-bind:Videos="Videos"/>
|
|
</div>
|
|
`,
|
|
components: {
|
|
SCH,
|
|
CADD,
|
|
CTBL,
|
|
VTBL
|
|
},
|
|
data() {
|
|
return {
|
|
Videos: Array<DumbYT.Video>(),
|
|
Channels: Array<DumbYT.Channel>()
|
|
}
|
|
},
|
|
methods: {
|
|
// Callback for when the search component got results back.
|
|
search_completed(videos : Array<DumbYT.Video>) : void {
|
|
this.Videos = videos;
|
|
}
|
|
},
|
|
mounted(){
|
|
// Populate the channels field immediatly on start up.
|
|
DumbYT.API.search_channels("").then(channels => this.Channels = channels);
|
|
}
|
|
});
|