52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
class Category {
|
|
name: string
|
|
thumbnail_b64: string|null
|
|
constructor(raw: any) {
|
|
this.name = raw['name']
|
|
this.thumbnail_b64 = raw['thumbnail']
|
|
}
|
|
|
|
public as_div_str() {
|
|
let container = document.createElement('div')
|
|
container.className = 'video-block'
|
|
|
|
let title = document.createElement('h2')
|
|
title.innerText = this.name
|
|
|
|
let nail = document.createElement('img')
|
|
nail.className = 'pure-img'
|
|
if(!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
|
|
nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`)
|
|
}
|
|
|
|
container.appendChild(title)
|
|
container.appendChild(nail)
|
|
|
|
document.getElementById('main-container').appendChild(container)
|
|
|
|
return container
|
|
}
|
|
}
|
|
|
|
function ready_handler(e?: Event) : Event {
|
|
// Only let this make a get request once we're ready on the page
|
|
if(document.readyState != 'complete') { return e }
|
|
|
|
// All we do here is basically make a get request to /api/categories
|
|
const endpoint = 'http://localhost/api/categories'
|
|
let xml = new XMLHttpRequest()
|
|
|
|
xml.open('GET', endpoint, false) // sync request
|
|
xml.send(null) // nothing required for stuff
|
|
if(xml.getResponseHeader('Content-Type') == 'application/json') {
|
|
let raw = JSON.parse(xml.responseText)
|
|
for(const cat_raw of raw['categories']) {
|
|
let cat = new Category(cat_raw)
|
|
cat.as_div_str()
|
|
}
|
|
}
|
|
return e
|
|
}
|
|
|
|
document.addEventListener('readystatechange', ready_handler)
|