Compare commits
1 Commits
6e0733ab22
...
developmen
Author | SHA1 | Date | |
---|---|---|---|
4564ca83c1 |
@ -8,7 +8,7 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h2>Admin Page</h2>
|
||||
<h2><a href="/">DumbYT</a> Admin</h2>
|
||||
<div id="admin_app"></div>
|
||||
<script src="./../dist/build.js"></script>
|
||||
</body>
|
||||
|
@ -6,6 +6,7 @@
|
||||
<th>Title</th>
|
||||
<th>Description</th>
|
||||
<th>Tags</th>
|
||||
<th>Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -14,6 +15,7 @@
|
||||
<td>{{channel.Title}}</td>
|
||||
<td>{{channel.Description}}</td>
|
||||
<td>{{channel.User_Tags}}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
60
src/components/Favorite_Channels.vue
Normal file
60
src/components/Favorite_Channels.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="favtable">
|
||||
<h3>High Priority Videos</h3>
|
||||
<div class="grid-x large-up-6">
|
||||
<div v-for="video in Videos" :key="video.ID" class="cell">
|
||||
<div class="card ytcard">
|
||||
<a :href="video.URL"><img :src="video.Thumbnail"></a>
|
||||
<div class="card-section description">
|
||||
<div class="descriptiontitle">{{ video.Title }}</div>
|
||||
<div class="descriptionchannel">{{ video.Channel }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue, {PropOptions} from "vue";
|
||||
import * as Dyt from "../dumbyt";
|
||||
|
||||
// Vue class for keeping state of the videos.
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
Videos: {
|
||||
type: Array,
|
||||
} as PropOptions<Dyt.Video[]>,
|
||||
},
|
||||
|
||||
mounted() {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ytcard {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color:#ddd9d4;
|
||||
margin: 6px 2px 6px;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 7px 5px 7px;
|
||||
}
|
||||
|
||||
.descriptiontitle {
|
||||
font-size: 14px;
|
||||
padding-bottom:10px;
|
||||
}
|
||||
|
||||
.descriptionchannel {
|
||||
font-size: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.favtable h3 {
|
||||
margin-left: 5rem;
|
||||
}
|
||||
</style>
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<input id="searchbox0" class="searchbox" type="text" v-model="searchbox_str"
|
||||
<input class="searchbox" type="text" v-model="searchbox_str"
|
||||
placeholder="Search String goes here, for example: >5m,c++"
|
||||
/>
|
||||
</div>
|
||||
@ -25,7 +25,7 @@ export default Vue.extend({
|
||||
searchbox_str (s: string) {
|
||||
var v = _.debounce((s) => {
|
||||
DumbYT.API.search_videos(s).then(videos => {
|
||||
this.$emit('search_complete', videos)
|
||||
this.$emit('search_complete', s, videos)
|
||||
});
|
||||
}, 400)
|
||||
v(s);
|
||||
@ -40,6 +40,5 @@ export default Vue.extend({
|
||||
max-width: 40em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 2em;
|
||||
}
|
||||
</style>
|
||||
|
@ -58,12 +58,14 @@ export namespace API {
|
||||
}
|
||||
|
||||
// Search for channels based on a search string.
|
||||
export async function search_channels(searchstr : string): Promise<Array<Channel>> {
|
||||
export async function search_channels(searchstr : string, highpriority?: boolean): Promise<Array<Channel>> {
|
||||
// Temporary holder for data.
|
||||
let Channels : Array<Channel> = [];
|
||||
|
||||
// Ask server for data.
|
||||
let resp = await Axios.get(API.Base_URL + '/Channels/' + searchstr).catch(e => console.log(e));
|
||||
let resp = await Axios
|
||||
.get(API.Base_URL + '/Channels/' + searchstr, {params: {High_Priority: highpriority}})
|
||||
.catch(e => console.log(e));
|
||||
|
||||
// Handle all our nulls.
|
||||
if (resp == null || resp.data == null)
|
||||
@ -78,12 +80,14 @@ export namespace API {
|
||||
}
|
||||
|
||||
// Search for videos based on a search string.
|
||||
export async function search_videos(searchstr : string): Promise<Array<Video>> {
|
||||
export async function search_videos(searchstr : string, highpriority?: boolean): Promise<Array<Video>> {
|
||||
// Temporary holder for videos.
|
||||
let Videos : Array<Video> = [];
|
||||
|
||||
// Ask server for videos.
|
||||
let resp = await Axios.get(API.Base_URL + '/Videos/' + searchstr).catch(e => console.log(e));
|
||||
let resp = await Axios
|
||||
.get(API.Base_URL + '/Videos/' + searchstr, {params: {High_Priority: highpriority}})
|
||||
.catch(e => console.log(e));
|
||||
|
||||
// Handle all our nulls.
|
||||
if (resp == null || resp.data == null)
|
||||
|
37
src/index.ts
37
src/index.ts
@ -4,6 +4,7 @@ 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";
|
||||
|
||||
@ -11,26 +12,46 @@ let MainApp = new Vue({
|
||||
el: "#app",
|
||||
template: `
|
||||
<div>
|
||||
<SCH v-on:search_complete="search_completed"/>
|
||||
<VGC v-bind:Videos="Videos"/>
|
||||
<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 {
|
||||
Videos: Array<DumbYT.Video>()
|
||||
Favorite_Videos: Array<DumbYT.Video>(),
|
||||
Videos: Array<DumbYT.Video>(),
|
||||
VFAVS_Show: Boolean()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// Callback for when the search component got results back.
|
||||
search_completed(videos : Array<DumbYT.Video>) : void {
|
||||
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.
|
||||
@ -43,9 +64,13 @@ let AdminApp = new Vue({
|
||||
el: "#admin_app",
|
||||
template: `
|
||||
<div>
|
||||
<SCH v-on:search_complete="search_completed"/>
|
||||
<CADD/>
|
||||
<CTBL v-bind:Channels="Channels"/>
|
||||
<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>
|
||||
`,
|
||||
|
@ -66,9 +66,13 @@ module.exports = {
|
||||
historyApiFallback: true,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "https://dumbyt.hak8or.com",
|
||||
target: "http://localhost:62214",
|
||||
changeOrigin: true
|
||||
}
|
||||
},
|
||||
"/hangfire": {
|
||||
target: "http://localhost:62214",
|
||||
changeOrigin: true
|
||||
},
|
||||
}
|
||||
},
|
||||
performance: {
|
||||
|
Reference in New Issue
Block a user