Base index page fleshed out but now requires polish

frontend/ts/index.ts

@@ -0,0 +1,51 @@
+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)

frontend/ts/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "ts",
+  "version": "1.0.0",
+  "description": "Frontend scripts built out for clippable's frontend",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+	"build": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "gitlab.com/shockrah/clippable.git"
+  },
+  "author": "shockrah",
+  "license": "GPL-3.0"
+}

frontend/ts/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "outDir": "../themes/clippable/static/js/",
+    "importHelpers": true,
+    /* Strict Type-Checking Options */
+    "strict": true,
+    "strictNullChecks": false,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+
+    /* Additional Checks */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    /*"noUncheckedIndexedAccess": true, */
+    /*"noPropertyAccessFromIndexSignature": true, */
+
+    /* Module Resolution Options */
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+  }
+}