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

Put in a rough attempt at web api using typescript vue

Browse Source
This commit is contained in:
hak8or 2018-02-28 23:48:00 -05:00
parent ac749b1300
commit 2ead7115e8
5 changed files with 83 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
YTManager/frontend/index.html
View File

@ -6,7 +6,6 @@
<!-- Compressed CSS --> <!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
<link rel="stylesheet" type="text/css" href="./dist/index.css">
</head> </head>
<body> <body>
<div class="pageheader"> <div class="pageheader">
@ -14,7 +13,6 @@
<p>Youtube banned my account and refuses to say why, taking all my subscribed channels with it. This is a simple scrubscribed channel manager, showing recent releases from each channel and finally proper sub-catagory functionality!</p> <p>Youtube banned my account and refuses to say why, taking all my subscribed channels with it. This is a simple scrubscribed channel manager, showing recent releases from each channel and finally proper sub-catagory functionality!</p>
</div> </div>
<div id="app"></div> <div id="app"></div>
<script src="./dist/build.js"></script> <script src="./dist/build.js"></script>

45
YTManager/frontend/src/components/Hello.vue
View File

@ -1,45 +0,0 @@
<template>
<div>
<div class="greeting">Hello {{name}}{{exclamationMarks}} :D</div>
<button @click="decrement">-</button>
<button @click="increment">+</button>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import Axios from "axios";
export default Vue.extend({
props: ['name', 'initialEnthusiasm'],
data() {
return {
enthusiasm: this.initialEnthusiasm,
}
},
methods: {
increment() { this.enthusiasm++; },
decrement() {
if (this.enthusiasm > 1) {
this.enthusiasm--;
}
Axios.get("https://jsonplaceholder.typicode.com/posts/1").then(resp => {
if (resp == null) {} else {
console.log(resp.data);
}}).catch(() => console.log("Uh ohhh"));
},
},
computed: {
exclamationMarks(): string {
return Array(this.enthusiasm + 1).join('!');
}
}
});
</script>
<style>
.greeting {
font-size: 20px;
}
</style>

77
YTManager/frontend/src/components/Video_Grid.vue Normal file
View File

@ -0,0 +1,77 @@
<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>

7
YTManager/frontend/src/index.ts
View File

@ -1,17 +1,16 @@
import Vue from "vue"; import Vue from "vue";
import HelloComponent from "./components/Hello.vue"; import VGC from "./components/Video_Grid.vue";
import './index.css'; import './index.css';
let v = new Vue({ let v = new Vue({
el: "#app", el: "#app",
template: ` template: `
<div> <div>
Name: <input v-model="name" type="text"> <VGC/>
<hello-component :name="name" :initialEnthusiasm="5" />
</div> </div>
`, `,
data: { name: "something" }, data: { name: "something" },
components: { components: {
HelloComponent VGC
} }
}); });

5
YTManager/frontend/tsconfig.json
View File

@ -4,9 +4,10 @@
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"module": "es2015", "module": "commonjs",
"moduleResolution": "node", "moduleResolution": "node",
"target": "es5" "target": "es6",
"noImplicitAny": true
}, },
"include": [ "include": [
"./src/**/*" "./src/**/*"