DumbYT/BackEnd
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Added tag searching

Browse Source
This commit is contained in:
hak8or 2018-03-03 16:46:30 -05:00
parent 76ae5a6f8f
commit 96a26ce30d
3 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
YTManager/frontend/package-lock.json generated
View File

@ -4,6 +4,12 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@types/lodash": {
"version": "4.14.104",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.104.tgz",
"integrity": "sha512-ufQcVg4daO8xQ5kopxRHanqFdL4AI7ondQkV+2f+7mz3gvp0LkBx2zBRC6hfs3T87mzQFmf5Fck7Fi145Ul6NQ==",
"dev": true
},
"accepts": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",

1
YTManager/frontend/package.json
View File

@ -7,6 +7,7 @@
"author": "hak8or",
"license": "MIT",
"devDependencies": {
"@types/lodash": "^4.14.104",
"axios": "^0.18.0",
"css-loader": "^0.28.10",
"style-loader": "^0.20.2",

78
YTManager/frontend/src/components/Video_Grid.vue
View File

@ -1,20 +1,24 @@
<template>
<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>
<input id="searchbox0" class="searchbox" type="text" v-model="searchbox_str" placeholder="Search String goes here, for example: >5m,c++"/>
<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 >
</div >
</div>
</template>
<script lang="ts">
import Vue from "vue";
import Axios from "axios";
import * as _ from "lodash";
// Wrapper for videos returned from our server.
class Video {
@ -55,6 +59,36 @@ class Video {
}
}
async function search_videos(searchstr : string): 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/search/' + searchstr).catch(e => console.log(e));
// Handle all our nulls.
if (resp == null || resp.data == null)
console.log("server /api/videos/search 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);
}
async function get_videos(): Promise<Array<Video>> {
// How many chars at most for the description.
const maxcharsdescriptionfield = 100;
@ -89,12 +123,28 @@ async function get_videos(): Promise<Array<Video>> {
export default Vue.extend({
data() {
return {
searchbox_str: "",
Videos: Array<Video>()
}
},
// Manually attaching functions to watchers of data.
watch: {
// Searchbox updater.
searchbox_str (s: string) {
if (s.trim().length > 0){
var v = _.debounce((s) => {
search_videos(s).then(e => this.Videos = e);
})
v(s);
} else {
get_videos().then(e => this.Videos = e );
}
}
},
// Ugh, vue doesn't have async support for computed, wow ...
mounted() { get_videos().then(e => this.Videos = e ) }
mounted() { get_videos().then(e => this.Videos = e ); }
});
</script>
@ -119,4 +169,12 @@ export default Vue.extend({
font-size: 10px;
text-align: right;
}
.searchbox {
font-size: 1.2em;
max-width: 70em;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
}
</style>