diff --git a/ts/admin.ts b/ts/admin.ts index 54d487e..300cd83 100644 --- a/ts/admin.ts +++ b/ts/admin.ts @@ -1,6 +1,8 @@ // This module serves as convenience for admin users to upload/remove videos // from their clippable instance. There are no fancy tricks as this is meant // purely to be a UX thing. +//import { fetch_category_videos } from './category' +//import { fetch_categories } from './index' let UID: null|string = null @@ -10,62 +12,67 @@ let KEY: null|string = null * Requests to admin endpoints require the uid and api key be in the headers * rather than the query string */ -function setHeaders(xhr: XMLHttpRequest, uid?: string, key?: string) { +function setHeaders(uid?: string, key?: string) : Headers { UID = (uid) ? uid : UID KEY = (key) ? key : KEY - xhr.setRequestHeader('ADMIN-API-UID', uid ? uid : UID) - xhr.setRequestHeader('ADMIN-API-KEY', key ? key : KEY) + return new Headers({ + 'ADMIN-API-UID': UID, + 'ADMIN-API-KEY': KEY + }) } -function ok_response(xhr: XMLHttpRequest) { - return xhr.getResponseHeader('Content-Type') == 'application/json' && xhr.status == 200 +function ok(resp: Response) { + return resp.headers.get('Content-Type') == 'application/json' && resp.status == 200 } -function confirm_auth() { - let uid = document.getElementById('uid') - let key = document.getElementById('apikey') +function fetch_creds() :[string, string] { + let uid = (document.getElementById('uid') as HTMLTextAreaElement).value + let key = (document.getElementById('apikey') as HTMLTextAreaElement).value + return [uid, key] - let xhr = new XMLHttpRequest() +} +async function confirm_auth() { + const [uid, key] = fetch_creds() - xhr.onload = function() { - if(ok_response(this)) { - document.getElementById('login-display').hidden = true - document.getElementById('dashboard').hidden = false - document.getElementById('error').hidden = true - } else if(this.status == 403) { - document.getElementById('error').hidden = false - document.getElementById('error').textContent = 'Invalid credenentials' - } else { - document.getElementById('error').hidden = false - document.getElementById('error').textContent = `${this.statusText}` - } + const url = window.location.origin + '/admin/dashboard' + const response = await fetch(url, { + method: 'POST', + headers: setHeaders(uid, key) + }) + + if(ok(response)) { + document.getElementById('login-display').hidden = true + document.getElementById('dashboard').hidden = false + document.getElementById('error').hidden = true + } else if(response.status == 403) { + document.getElementById('error').hidden = false + document.getElementById('error').textContent = 'Invalid credenentials' + } else { + document.getElementById('error').hidden = false + document.getElementById('error').textContent = `${response.statusText}` } - - xhr.open('post', window.location.origin + '/admin/dashboard') - setHeaders(xhr, (uid as HTMLTextAreaElement).value, (key as HTMLTextAreaElement).value) - - xhr.send() } -function upload_video() { +async function upload_video() { const video_file = document.getElementById('video-file') as HTMLInputElement const filename = video_file.files[0].name const category_el = document.getElementById('category') as HTMLInputElement const cat = category_el.value - let xhr = new XMLHttpRequest() - xhr.onload = function() { - if(ok_response(this)) { - video_file.value = '' - document.getElementById('video-meta').hidden = true - document.getElementById('upload-response').textContent = `${filename} uploaded` - } - // TODO Error hanlding + const url = window.location.origin + `/admin/upload-video/${cat}/${filename}` + const [uid, key] = fetch_creds() + const response = await fetch(url , { + method: 'POST', + headers: setHeaders(uid, key), + body: video_file.files[0] + }) + + if(ok(response)) { + video_file.value = '' + document.getElementById('video-meta').hidden = true + document.getElementById('upload-response').textContent = `${filename} uploaded` } - xhr.open('post', window.location.origin + `/admin/upload-video/${cat}/${filename}`) - setHeaders(xhr) - xhr.send(video_file.files[0]) } export function populate_meta_form() { @@ -87,6 +94,9 @@ export function populate_meta_form() { } document.addEventListener('DOMContentLoaded', () => { + /* + * Setting up hooks required for functionality + */ document.getElementById('video-file').onchange = populate_meta_form document.getElementById('verify-login-btn').onclick = confirm_auth document.getElementById('confirm-upload-btn').onclick = upload_video diff --git a/ts/index.ts b/ts/index.ts index 31794a4..0b01480 100644 --- a/ts/index.ts +++ b/ts/index.ts @@ -1,4 +1,4 @@ -export class Category { +class Category { name: string thumbnail: string|null constructor(raw: any) { @@ -70,3 +70,18 @@ export class Category { } +export async function fetch_categories() : Promise> { + const endpoint = window.location.origin + '/api/categories' + + let cats: Array = [] + const response = await fetch(endpoint) + if(response.headers.get('Content-Type') == 'application/json') { + const raw = JSON.parse(await response.text()) + for(const cat_raw of raw) { + cats.push(new Category(cat_raw)) + } + } + + return cats +} + diff --git a/ts/ready.ts b/ts/ready.ts index 9269e44..522f6cd 100644 --- a/ts/ready.ts +++ b/ts/ready.ts @@ -3,8 +3,8 @@ * to initialize a page's JS environment * when the document.readystate is changed * */ -import { Category } from './index' -import { VideoMeta } from './category' +import {fetch_categories } from './index' +import { fetch_category_videos } from './category' import { populate_meta_form } from './admin' export function category_ready_handler(e?: Event) : Event { @@ -15,22 +15,16 @@ export function category_ready_handler(e?: Event) : Event { */ if(document.readyState != 'complete') { return e } - let xml = new XMLHttpRequest() - - xml.onload = function() { - if(this.getResponseHeader('Content-Type') == 'application/json') { - let raw = JSON.parse(this.responseText) - for(const cat_raw of raw) { - let cat = new VideoMeta(cat_raw) - cat.as_div() - } + fetch_category_videos() + .then(videos => { + for(const vid of videos) { + vid.as_div() } - } - - const endpoint = window.location.origin + '/api' + window.location.pathname - xml.open('GET', endpoint, true) - xml.send() - + }) + .catch(reason => { + // TODO: actual error handling + console.log(reason) + }) return e } @@ -39,23 +33,16 @@ export function index_ready_handler(e?: Event) : Event { if(document.readyState != 'complete') { return e } // All we do here is basically make a get request to /api/categories - const endpoint = window.location.origin + '/api/categories' - let xml = new XMLHttpRequest() - - xml.onload = function() { - if(this.getResponseHeader('Content-Type') == 'application/json') { - let raw = JSON.parse(this.responseText) - for(const cat_raw of raw) { - let cat = new Category(cat_raw) - cat.as_div() - } + fetch_categories() + .then(categories => { + for(const cat of categories) { + cat.as_div() } - } - - // Fire request - xml.open('GET', endpoint, true) // sync request - xml.send(null) // nothing required for stuff - + }) + .catch(reason => { + // TODO: actual error hanlding + console.log('index_ready_handler::fetch_categories rejection', reason) + }) return e }