Put in a rough attempt at web api using typescript vue
This commit is contained in:
parent
ac749b1300
commit
2ead7115e8
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
<!-- Compressed 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>
|
||||
<body>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="app"></div>
|
||||
|
||||
<script src="./dist/build.js"></script>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
import Vue from "vue";
|
||||
import HelloComponent from "./components/Hello.vue";
|
||||
import VGC from "./components/Video_Grid.vue";
|
||||
import './index.css';
|
||||
|
||||
let v = new Vue({
|
||||
el: "#app",
|
||||
template: `
|
||||
<div>
|
||||
Name: <input v-model="name" type="text">
|
||||
<hello-component :name="name" :initialEnthusiasm="5" />
|
||||
<VGC/>
|
||||
</div>
|
||||
`,
|
||||
data: { name: "something" },
|
||||
components: {
|
||||
HelloComponent
|
||||
VGC
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"noImplicitReturns": true,
|
||||
"module": "es2015",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"target": "es5"
|
||||
"target": "es6",
|
||||
"noImplicitAny": true
|
||||
},
|
||||
"include": [
|
||||
"./src/**/*"
|
||||
|
|
|
|||
Loading…
Reference in New Issue