+ Missing data safety in index.ts
Basically we want sane defaults in case a backend decides to implode on itself
This commit is contained in:
parent
b763329abd
commit
72ab6decfb
24
ts/index.ts
24
ts/index.ts
@ -4,17 +4,27 @@ class Category {
|
|||||||
constructor(raw: any) {
|
constructor(raw: any) {
|
||||||
this.name = raw['name']
|
this.name = raw['name']
|
||||||
this.thumbnail_b64 = raw['thumbnail']
|
this.thumbnail_b64 = raw['thumbnail']
|
||||||
|
|
||||||
|
// Setting some defaults
|
||||||
|
if(!this.name) { this.name = null }
|
||||||
|
if(!this.thumbnail_b64) { this.thumbnail_b64 = null }
|
||||||
}
|
}
|
||||||
|
|
||||||
title_link() : HTMLHeadingElement {
|
title_link() : HTMLHeadingElement {
|
||||||
let container = document.createElement('h2')
|
let container = document.createElement('h2')
|
||||||
|
|
||||||
let link = document.createElement('a')
|
let link = document.createElement('a')
|
||||||
link.href = `/collection?c=${this.name}`
|
if(this.name) {
|
||||||
link.text = this.name
|
link.href = `/category/${this.name}`
|
||||||
|
link.text = this.name
|
||||||
|
} else {
|
||||||
|
link.href = '#'
|
||||||
|
link.text = 'this nigga eatin beans'
|
||||||
|
}
|
||||||
|
|
||||||
container.appendChild(link)
|
container.appendChild(link)
|
||||||
|
|
||||||
|
|
||||||
return container
|
return container
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -22,6 +32,7 @@ class Category {
|
|||||||
let nail = document.createElement('img')
|
let nail = document.createElement('img')
|
||||||
nail.className = 'pure-img'
|
nail.className = 'pure-img'
|
||||||
|
|
||||||
|
// Modern browser's should be able to cache this request
|
||||||
if(!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
|
if(!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
|
||||||
nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`)
|
nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`)
|
||||||
} else{
|
} else{
|
||||||
@ -47,22 +58,27 @@ class Category {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function ready_handler(e?: Event) : Event {
|
function ready_handler(e?: Event) : Event {
|
||||||
// Only let this make a get request once we're ready on the page
|
// Only let this make a get request once we're ready on the page
|
||||||
if(document.readyState != 'complete') { return e }
|
if(document.readyState != 'complete') { return e }
|
||||||
|
|
||||||
// All we do here is basically make a get request to /api/categories
|
// All we do here is basically make a get request to /api/categories
|
||||||
const endpoint = 'http://localhost/api/categories'
|
const endpoint = window.location.origin + '/api/categories'
|
||||||
let xml = new XMLHttpRequest()
|
let xml = new XMLHttpRequest()
|
||||||
|
|
||||||
|
// TODO: change this to an async request
|
||||||
xml.open('GET', endpoint, false) // sync request
|
xml.open('GET', endpoint, false) // sync request
|
||||||
xml.send(null) // nothing required for stuff
|
xml.send(null) // nothing required for stuff
|
||||||
if(xml.getResponseHeader('Content-Type') == 'application/json') {
|
if(xml.getResponseHeader('Content-Type') == 'application/json') {
|
||||||
let raw = JSON.parse(xml.responseText)
|
let raw = JSON.parse(xml.responseText)
|
||||||
for(const cat_raw of raw['categories']) {
|
console.log(raw)
|
||||||
|
for(const cat_raw of raw) {
|
||||||
let cat = new Category(cat_raw)
|
let cat = new Category(cat_raw)
|
||||||
cat.as_div()
|
cat.as_div()
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
console.log(xml.getResponseHeader('Content-Type'))
|
||||||
}
|
}
|
||||||
return e
|
return e
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user