Reworking old js ....
This commit is contained in:
parent
3a11ecf893
commit
152a000927
@ -1,64 +0,0 @@
|
|||||||
body {
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #003636;
|
|
||||||
background-color: #F8F8F8;
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pageheader {
|
|
||||||
max-width: 960px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.curvedbottom {
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#addnewchannelform {
|
|
||||||
width: inherit;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tinytext10px{ font-size: 10px; }
|
|
||||||
.tinytext12px{ font-size: 12px; }
|
|
||||||
.tinytext14px{ font-size: 14px; }
|
|
||||||
.tinytext16px{ font-size: 16px; }
|
|
||||||
.tinytext18px{ font-size: 18px; }
|
|
||||||
|
|
||||||
[v-cloak] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter-active, .fade-leave-active {
|
|
||||||
transition: opacity 0.75s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter, .fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apistatusicon {
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-name: spinny;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-direction: alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spinny {
|
|
||||||
from {
|
|
||||||
transform: rotate(-15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate(15deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<title>YT Manager Admin</title>
|
|
||||||
|
|
||||||
<!-- 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="index.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="pageheader">
|
|
||||||
<h1>Dumb YT Manager</h1>
|
|
||||||
<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 id="apistatus-0"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<h2>Subscribed Channels</h2>
|
|
||||||
<div id="subbedchannelstable-0"></div>
|
|
||||||
<div id="addchanel-0"></div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<h2>Videos in DB</h2>
|
|
||||||
<div id="videosindbtable-0"></div>
|
|
||||||
|
|
||||||
<!-- Compressed JavaScript -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
|
|
||||||
|
|
||||||
<!-- For doing REST based API stuff. -->
|
|
||||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Some icons -->
|
|
||||||
<script src="https://use.fontawesome.com/91af8ab4ba.js"></script>
|
|
||||||
|
|
||||||
<!-- Good ole Vue :D -->
|
|
||||||
<script src="https://unpkg.com/vue"></script>
|
|
||||||
|
|
||||||
<!-- All of my custom JS. Put here so body loads before Vue based stuff loads/attempts to bind. -->
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,267 +0,0 @@
|
|||||||
$(document).foundation();
|
|
||||||
|
|
||||||
// How many chars at most for the description.
|
|
||||||
var maxcharstablefield = 200;
|
|
||||||
|
|
||||||
// Bind to the form for submitting a new channel
|
|
||||||
var addchanel0 = new Vue({
|
|
||||||
el: '#addchanel-0',
|
|
||||||
data: {
|
|
||||||
entry: {
|
|
||||||
title: "",
|
|
||||||
description: "",
|
|
||||||
yTChannelID: "",
|
|
||||||
thumbnailURL: "",
|
|
||||||
},
|
|
||||||
fail: false,
|
|
||||||
expanded: false
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="medium-11 cell"></div>
|
|
||||||
<div class="medium-1 cell">
|
|
||||||
<button type="button" class="button input-group" v-on:click='expanded = !expanded'>
|
|
||||||
<i class="fa fa-plus" aria-hidden="true"></i> Add
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<transition name="fade">
|
|
||||||
<form v-cloak v-if="expanded">
|
|
||||||
<h2>Add new Channel</h2>
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="input-group medium-6 cell">
|
|
||||||
<span class="input-group-label">Title</span>
|
|
||||||
<input class="input-group-field" type="text" placeholder="Title of Entry" v-model="entry.title">
|
|
||||||
</div>
|
|
||||||
<div class="input-group medium-1 cell"></div>
|
|
||||||
<div class="input-group medium-5 cell">
|
|
||||||
<span class="input-group-label">Channel</span>
|
|
||||||
<input class="input-group-field" v-bind:class="{ error: fail }" type="text"
|
|
||||||
@blur="newurl" placeholder="URL of Entry" v-model="entry.yTChannelID">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-label">Description</span>
|
|
||||||
<input class="input-group-field" type="text" placeholder="Description of Entry" v-model="entry.description">
|
|
||||||
</div>
|
|
||||||
<div class="grid-x">
|
|
||||||
<img class="small-4 cell" :src="entry.thumbnailURL" />
|
|
||||||
<div class="small-7"></div>
|
|
||||||
<button type="button" style="max-height:50px" class="button input-group small-1 cell" @click="submit">Submit</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
methods: {
|
|
||||||
submit: function (event) {
|
|
||||||
// Send the channel to our API and request tables be updated.
|
|
||||||
var d = this.entry;
|
|
||||||
axios.post('/api_raw/Channels/' + this.entry.yTChannelID)
|
|
||||||
.then(function (response) {
|
|
||||||
this.entry.title = "";
|
|
||||||
this.entry.description = "";
|
|
||||||
this.entry.yTChannelID = "";
|
|
||||||
this.entry.thumbnailURL = "";
|
|
||||||
this.expanded = false;
|
|
||||||
tbody0.retrieve();
|
|
||||||
setTimeout(() => videostb.retrieve(), 1000);
|
|
||||||
}.bind(this))
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// Handle when user put in a new URL (verification and thumbnail fetch)
|
|
||||||
newurl: function (event) {
|
|
||||||
// Remove any potential youtube URL from the field.
|
|
||||||
var ytchurl = "https://www.youtube.com/channel/";
|
|
||||||
if (this.entry.yTChannelID.startsWith(ytchurl)) {
|
|
||||||
this.entry.yTChannelID = this.entry.yTChannelID.replace(ytchurl, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if what remains looks like a youtube channel ID.
|
|
||||||
if (this.entry.yTChannelID.length != "UCyS4xQE6DK4_p3qXQwJQAyA".length) {
|
|
||||||
this.fail = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.fail = false;
|
|
||||||
|
|
||||||
// Get the Channel URL
|
|
||||||
var basestr = 'https://www.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics';
|
|
||||||
var apikey = '&key=AIzaSyCuIYkMc5SktlnXRXNaDf2ObX-fQvtWCnQ '
|
|
||||||
var channel = '&id=' + addchanel0.entry.yTChannelID;
|
|
||||||
axios.get(basestr + channel + apikey)
|
|
||||||
.then(function (response) {
|
|
||||||
// Only attempt to fill the UI text boxes if they are empty.
|
|
||||||
if (this.entry.description.length == 0) {
|
|
||||||
this.entry.description = response.data.items[0].snippet.description;
|
|
||||||
}
|
|
||||||
if (this.entry.title.length == 0) {
|
|
||||||
this.entry.title = response.data.items[0].snippet.title;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get client to load the thumbnail
|
|
||||||
this.entry.thumbnailURL = response.data.items[0].snippet.thumbnails.medium.url;
|
|
||||||
}.bind(this))
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Bind to our table of entries.
|
|
||||||
var tbody0 = new Vue({
|
|
||||||
el: '#subbedchannelstable-0',
|
|
||||||
data: {
|
|
||||||
entries: [""]
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>ID</th>
|
|
||||||
<th>Title</th>
|
|
||||||
<th>Description</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-cloak v-for="entry in entries">
|
|
||||||
<td class="tinytext12px">{{entry.id}}</td>
|
|
||||||
<td class="tinytext12px">{{entry.title}}</td>
|
|
||||||
<td class="tinytext12px">{{entry.description}}</td>
|
|
||||||
<td>
|
|
||||||
<a href="#"><i class="fa fa-refresh" aria-hidden="true" :id="entry.youtubeID" @click="forcerefresh"/></a>
|
|
||||||
<a href="#"><i class="fa fa-trash-o" aria-hidden="true" :id="entry.youtubeID" @click="deletechannel"/></a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`,
|
|
||||||
methods: {
|
|
||||||
retrieve: function (event) {
|
|
||||||
axios.get('/api/Channels')
|
|
||||||
.then(function (response) {
|
|
||||||
// Wipe out all old entries.
|
|
||||||
this.entries = [];
|
|
||||||
|
|
||||||
// And fill it with all the retrieved entries.
|
|
||||||
response.data.forEach(function (x) {
|
|
||||||
if (x.description.length > maxcharstablefield) {
|
|
||||||
x.description = x.description.substring(0, maxcharstablefield) + " ...";
|
|
||||||
}
|
|
||||||
this.entries.push(x);
|
|
||||||
}.bind(this));
|
|
||||||
}.bind(this))
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
forcerefresh: function (event) {
|
|
||||||
axios
|
|
||||||
.post('/api/Admin/Update/' + event.target.id)
|
|
||||||
.catch(function (error) { console.log(error); });
|
|
||||||
},
|
|
||||||
deletechannel: function (event) {
|
|
||||||
axios
|
|
||||||
.delete('/api/Channels/' + event.target.id)
|
|
||||||
.catch(function (error) { console.log(error); });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Bind to our table of entries.
|
|
||||||
var apistatus = new Vue({
|
|
||||||
el: '#apistatus-0',
|
|
||||||
data: {
|
|
||||||
apiaccessible: false,
|
|
||||||
updatingjobactive: false
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<div class="grid-x">
|
|
||||||
<div class="medium-1 cell">API Status</div>
|
|
||||||
<div class="medium-1 cell">
|
|
||||||
<i class="fa fa-thumbs-o-up apistatusicon fa-2x" aria-hidden="true" v-if="apiaccessible"></i>
|
|
||||||
<i class="fa fa-thumbs-o-down apistatusicon fa-2x" aria-hidden="true" v-else></i>
|
|
||||||
</div>
|
|
||||||
<div class="medium-7 cell"></div>
|
|
||||||
<div class="medium-2 cell">Video Fetching Status</div>
|
|
||||||
<div class="medium-1 cell">
|
|
||||||
<i class="fa fa-thumbs-o-up apistatusicon fa-2x" aria-hidden="true" v-if="updatingjobactive"></i>
|
|
||||||
<i class="fa fa-thumbs-o-down apistatusicon fa-2x" aria-hidden="true" v-else></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
methods: {
|
|
||||||
update: function (event) {
|
|
||||||
axios.get('/api/Admin/Update')
|
|
||||||
.then(function (response) {
|
|
||||||
this.apiaccessible = (response.status == 200);
|
|
||||||
this.updatingjobactive = (response.data != "false")
|
|
||||||
}.bind(this)
|
|
||||||
)
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Grid of images.
|
|
||||||
var videostb = new Vue({
|
|
||||||
el: '#videosindbtable-0',
|
|
||||||
data: {
|
|
||||||
Videos: []
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>ID</th>
|
|
||||||
<th>Title</th>
|
|
||||||
<th>Description</th>
|
|
||||||
<th>Channel</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr v-cloak v-for="video in Videos">
|
|
||||||
<td class="tinytext12px">{{video.id}}</td>
|
|
||||||
<td class="tinytext12px">{{video.title}}</td>
|
|
||||||
<td class="tinytext12px">{{video.description}}</td>
|
|
||||||
<td class="tinytext12px">{{video.channel}}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
`,
|
|
||||||
methods: {
|
|
||||||
// Get new videos from the web api.
|
|
||||||
retrieve: function (event) {
|
|
||||||
axios.get('/api/Videos')
|
|
||||||
.then(function (response) {
|
|
||||||
// And fill it with all the retrieved entries.
|
|
||||||
response.data.forEach(function (x) {
|
|
||||||
// Trim description if needed.
|
|
||||||
if (x.description.length > maxcharstablefield) {
|
|
||||||
x.description = x.description.substring(0, maxcharstablefield) + " ...";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add it to our array
|
|
||||||
this.Videos.push(x);
|
|
||||||
}.bind(this));
|
|
||||||
}.bind(this))
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('load', function () {
|
|
||||||
apistatus.update();
|
|
||||||
tbody0.retrieve();
|
|
||||||
videostb.retrieve();
|
|
||||||
});
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
@ -6,29 +6,17 @@
|
|||||||
|
|
||||||
<!-- 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="index.css">
|
<link rel="stylesheet" type="text/css" href="./dist/index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="pageheader">
|
<div class="pageheader">
|
||||||
<h1>Dumb YT Manager</h1>
|
<h1>Dumb YT Manager</h1>
|
||||||
|
<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 v-cloak id="vidholder-0"></div>
|
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
<!-- Compressed JavaScript -->
|
<script src="./dist/build.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
|
|
||||||
|
|
||||||
<!-- For doing REST based API stuff. -->
|
|
||||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
||||||
|
|
||||||
<!-- Some icons -->
|
|
||||||
<script src="https://use.fontawesome.com/91af8ab4ba.js"></script>
|
|
||||||
|
|
||||||
<!-- Good ole Vue :D -->
|
|
||||||
<script src="https://unpkg.com/vue"></script>
|
|
||||||
|
|
||||||
<!-- All of my custom JS. Put here so body loads before Vue based stuff loads/attempts to bind. -->
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
$(document).foundation();
|
|
||||||
|
|
||||||
// How many chars at most for the description.
|
|
||||||
var maxcharsdescriptionfield = 100;
|
|
||||||
|
|
||||||
// Grid if images.
|
|
||||||
var vidholder = new Vue({
|
|
||||||
el: '#vidholder-0',
|
|
||||||
data: {
|
|
||||||
Videos: []
|
|
||||||
},
|
|
||||||
// Template has wrapping div because v-for can't be in root it seems.
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<div class="grid-x large-up-6">
|
|
||||||
<div v-for="video in Videos" class="cell">
|
|
||||||
<div class="card curvedbottom" style="background-color:#ddd9d4; margin:6px;2px;6px;">
|
|
||||||
<a :href="video.url"><img :src="video.thumbnail"></a>
|
|
||||||
<div class="card-section" style="padding: 7px 5px 7px">
|
|
||||||
<div style="font-size: 14px; padding-bottom:10px;">{{ video.title }}</div>
|
|
||||||
<div style="font-size: 10px; text-align:right">{{ video.channel }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div >
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
methods: {
|
|
||||||
// Get new videos from the web api.
|
|
||||||
retrieve: function (event) {
|
|
||||||
// Wipe out all old entries.
|
|
||||||
this.Videos = [];
|
|
||||||
|
|
||||||
axios.get('/api/Videos')
|
|
||||||
.then(function (response) {
|
|
||||||
// And fill it with all the retrieved entries.
|
|
||||||
response.data.forEach(function (x) {
|
|
||||||
// Trim description if needed.
|
|
||||||
if (x.description.length > maxcharsdescriptionfield) {
|
|
||||||
x.description = x.description.substring(0, maxcharsdescriptionfield) + " ...";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate a new URL by adding the YT ID.
|
|
||||||
x.url = "https://www.youtube.com/watch?v=" + x.id;
|
|
||||||
|
|
||||||
// Add it to our array
|
|
||||||
this.Videos.push(x);
|
|
||||||
}.bind(this));
|
|
||||||
}.bind(this))
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('load', function () {
|
|
||||||
vidholder.retrieve();
|
|
||||||
});
|
|
||||||
9558
YTManager/frontend/package-lock.json
generated
Normal file
9558
YTManager/frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
YTManager/frontend/package.json
Normal file
25
YTManager/frontend/package.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "DumbYTManger",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Front end for the DumbYT Manager project",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": "https://gitea.hak8or.com/Almost_There/dumbytmanager",
|
||||||
|
"author": "hak8or",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"axios": "^0.18.0",
|
||||||
|
"css-loader": "^0.28.10",
|
||||||
|
"style-loader": "^0.20.2",
|
||||||
|
"ts-loader": "^4.0.0",
|
||||||
|
"typescript": "^2.7.2",
|
||||||
|
"vue": "^2.5.13",
|
||||||
|
"vue-loader": "^14.1.1",
|
||||||
|
"vue-template-compiler": "^2.5.13",
|
||||||
|
"webpack": "^4.0.1",
|
||||||
|
"webpack-cli": "^2.0.9"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "webpack",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
}
|
||||||
|
}
|
||||||
45
YTManager/frontend/src/components/Hello.vue
Normal file
45
YTManager/frontend/src/components/Hello.vue
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<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>
|
||||||
17
YTManager/frontend/src/index.ts
Normal file
17
YTManager/frontend/src/index.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
import HelloComponent from "./components/Hello.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" />
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
data: { name: "something" },
|
||||||
|
components: {
|
||||||
|
HelloComponent
|
||||||
|
}
|
||||||
|
});
|
||||||
4
YTManager/frontend/src/vue-shims.d.ts
vendored
Normal file
4
YTManager/frontend/src/vue-shims.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module "*.vue" {
|
||||||
|
import Vue from "vue";
|
||||||
|
export default Vue;
|
||||||
|
}
|
||||||
14
YTManager/frontend/tsconfig.json
Normal file
14
YTManager/frontend/tsconfig.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./built/",
|
||||||
|
"sourceMap": true,
|
||||||
|
"strict": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"target": "es5"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"./src/**/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
86
YTManager/frontend/webpack.config.js
Normal file
86
YTManager/frontend/webpack.config.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
var path = require('path')
|
||||||
|
var webpack = require('webpack')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/index.ts',
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, './dist'),
|
||||||
|
publicPath: '/dist/',
|
||||||
|
filename: 'build.js'
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
loader: 'vue-loader',
|
||||||
|
options: {
|
||||||
|
loaders: {
|
||||||
|
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
|
||||||
|
// the "scss" and "sass" values for the lang attribute to the right configs here.
|
||||||
|
// other preprocessors should work out of the box, no loader config like this necessary.
|
||||||
|
'scss': 'vue-style-loader!css-loader!sass-loader',
|
||||||
|
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
|
||||||
|
}
|
||||||
|
// other vue-loader options go here
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.tsx?$/,
|
||||||
|
loader: 'ts-loader',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
options: {
|
||||||
|
appendTsSuffixTo: [/\.vue$/],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpg|gif|svg)$/,
|
||||||
|
loader: 'file-loader',
|
||||||
|
options: {
|
||||||
|
name: '[name].[ext]?[hash]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
'css-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.js', '.vue', '.json'],
|
||||||
|
alias: {
|
||||||
|
'vue$': 'vue/dist/vue.esm.js'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
historyApiFallback: true,
|
||||||
|
noInfo: true
|
||||||
|
},
|
||||||
|
performance: {
|
||||||
|
hints: false
|
||||||
|
},
|
||||||
|
devtool: '#eval-source-map'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
module.exports.devtool = '#source-map'
|
||||||
|
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||||
|
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env': {
|
||||||
|
NODE_ENV: '"production"'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
|
sourceMap: true,
|
||||||
|
compress: {
|
||||||
|
warnings: false
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new webpack.LoaderOptionsPlugin({
|
||||||
|
minimize: true
|
||||||
|
})
|
||||||
|
])
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user