109 lines
4.3 KiB
HTML
109 lines
4.3 KiB
HTML
<!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>
|
|
<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>
|
|
|
|
<hr />
|
|
<h2>Subscribed Channels</h2>
|
|
<table id="tbody-0">
|
|
<thead>
|
|
<tr>
|
|
<th>YT Channel ID</th>
|
|
<th>Title</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-cloak v-for="entry in entries">
|
|
<td class="tinytext12px">{{entry.ytChannelID}}</td>
|
|
<td class="tinytext12px">{{entry.title}}</td>
|
|
<td class="tinytext12px">{{entry.description}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div id="addchanel-0">
|
|
<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>
|
|
|
|
<hr />
|
|
<h2>Videos in DB</h2>
|
|
<table id="videostb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Description</th>
|
|
<th>Youtube Video ID</th>
|
|
<th>ID</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-cloak v-for="video in Videos">
|
|
<td class="tinytext12px">{{video.title}}</td>
|
|
<td class="tinytext12px">{{video.description}}</td>
|
|
<td class="tinytext12px">{{video.ytVideoID}}</td>
|
|
<td class="tinytext12px">{{video.videoId}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- 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="admin.js"></script>
|
|
</body>
|
|
</html> |