Commit ca5486f1 authored by StreatCodes's avatar StreatCodes
Browse files

Add static image handling

Render statics in normal view
parent 94b88a74
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
......@@ -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>
......
......@@ -512,6 +512,11 @@ div.editor {
height: 100%;
}
.check > .image > img {
width: 100%;
height: 100%;
}
.check > .card {
padding: 6px 10px;
text-align: center;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment