Add static image handling

Render statics in normal view

frontend/src/statics/image.jsx

 import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
+import * as meerkat from '../meerkat';
+
 export function StaticImageOptions({options, updateOptions}) {
+	const handleImageUpload = async e => {
+		try {
+			const res = await meerkat.uploadFile(e.target.files[0]);
+			updateOptions({image: res.url})
+		} catch (e) {
+			//TODO improve
+			console.log('failed to upload image and set background');
+			console.log(e);
+		}
+	}
+
 	return <Fragment>
 		<label for="image">Image</label>
-		<input id="image" name="image" type="file" value={options.image} accept="image/*" 
-			onInput={e => updateOptions({image: e.currentTarget.value})}/>
+		<input id="image" name="image" type="file"
+			accept="image/*" onInput={handleImageUpload}/>
 	</Fragment>
 }
 
 export function StaticImage({options}) {
-	return <div>image todo</div>
+	return <div class="check-content image">
+		<img src={options.image} />
+	</div>
 }
\ No newline at end of file

frontend/src/viewer.jsx

@@ -5,6 +5,10 @@ import { useState, useEffect } from 'preact/hooks';
 import * as meerkat from './meerkat';
 import { CardElement } from './elements/card';
 
+import { StaticText } from './statics/text';
+import { StaticSVG } from './statics/svg';
+import { StaticImage } from './statics/image';
+
 //Read only page
 export function Viewer({slug}) {
 	const [dashboard, setDashboard] =  useState(null);
@@ -28,8 +32,25 @@ export function Viewer({slug}) {
 		</div>
 	});
 
+	const statics = dashboard.statics.map(static_ => {
+		const left = `${static_.rect.x}%`;
+		const top = `${static_.rect.y}%`;
+		const width = `${static_.rect.w}%`;
+		const height = `${static_.rect.h}%`;
+
+		let element = null;
+		if(static_.type === 'text') { element = <StaticText options={static_.options}/> }
+		if(static_.type === 'svg') { element = <StaticSVG options={static_.options}/> }
+		if(static_.type === 'image') { element = <StaticImage options={static_.options}/> }
+
+		return <div class="check" style={{left: left, top: top, width: width, height: height}}>
+			{element}
+		</div>
+	});
+
 	const backgroundImage = dashboard.background ? `url(${dashboard.background})` : 'none';
 	return <div class="dashboard view-only" style={{backgroundImage: backgroundImage}}>
+		{statics}
 		{checks}
 		<button class="view-only-button" onClick={e => route('/')}>Home</button>
 	</div>

frontend/style.css

@@ -512,6 +512,11 @@ div.editor {
 	height: 100%;
 }
 
+.check > .image > img {
+	width: 100%;
+	height: 100%;
+}
+
 .check > .card {
 	padding: 6px 10px;
 	text-align: center;