Move static renderings and options to their own files

Impliment static svg options and rendering

frontend/src/editor.jsx

@@ -8,6 +8,8 @@ import { CardElement } from './elements/card';
 import { removeParam } from './util';
 
 import { StaticText } from './statics/text';
+import { StaticSVG } from './statics/svg';
+import { StaticImage } from './statics/image';
 
 //Manage dashboard state
 const dashboardReducer = (state, action) => {
@@ -266,6 +268,8 @@ function DashboardStatics({dashboardDispatch, selectedStaticId, statics}) {
 
 		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 <TransformableElement rect={static_.rect} updateRect={updateRect}
 			glow={selectedStaticId === index}>
@@ -284,7 +288,7 @@ function DashboardView({dashboard, dashboardDispatch, selectedCheckId, selectedS
 				body: JSON.stringify(dashboard)
 			}).then(res => res.json());
 
-			route(`/edit/${data.slug}`)
+			route(`/edit/${data.slug}${window.location.search}`)
 			//TODO show success
 		} catch (e) {
 			//TODO improve

frontend/src/static-settings.jsx

 import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
-import { svgList } from './svg-list';
 import { routeParam, removeParam } from './util';
 import { route } from 'preact-router';
 import { StaticTextOptions } from './statics/text';
+import { StaticSVGOptions } from './statics/svg';
+import { StaticImageOptions } from './statics/image';
 
 function StaticListPanel({statics, addStatic}) {
 	if(statics.length < 1) {
@@ -25,36 +26,6 @@ function StaticListPanel({statics, addStatic}) {
 	</div>
 }
 
-function SVGOptions({options, updateOptions}) {
-	const svgOptions = svgList.map(svgName => <option>{svgName}</option>)
-
-	return <Fragment>
-		<label for="svg">SVG</label>
-		<select id="svg" name="svg">
-			{svgOptions}
-		</select>
-
-		<label for="color">Color</label>
-		<div class="left spacer">
-			<input type="color" name="color" id="color" value={options.color}
-				onInput={e => updateOptions({color: e.currentTarget.value})}/>
-			<input type="text" value={options.color} disabled />
-		</div>
-
-		<label for="stroke-width">Stroke width</label>
-		<input id="stroke-width" name="stroke-width" type="number" min="0" value={options.strokeWidth}
-			onInput={e => updateOptions({strokeWidth: e.currentTarget.value})}/>
-	</Fragment>
-}
-
-function ImageOptions({options, updateOptions}) {
-	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})}/>
-	</Fragment>
-}
-
 export function StaticSettings({selectedStatic, updateStatic}) {
 	if(selectedStatic === null) {
 		return null;
@@ -67,8 +38,8 @@ export function StaticSettings({selectedStatic, updateStatic}) {
 
 	const staticTypeOptions = {
 		'text': <StaticTextOptions updateOptions={updateOptions} options={selectedStatic.options} />,
-		'svg': <SVGOptions updateOptions={updateOptions} options={selectedStatic.options} />,
-		'image': <ImageOptions updateOptions={updateOptions} options={selectedStatic.options} />,
+		'svg': <StaticSVGOptions updateOptions={updateOptions} options={selectedStatic.options} />,
+		'image': <StaticImageOptions updateOptions={updateOptions} options={selectedStatic.options} />,
 	}
 	const options = staticTypeOptions[selectedStatic.type]
 

frontend/src/statics/image.jsx

+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+export function StaticImageOptions({options, updateOptions}) {
+	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})}/>
+	</Fragment>
+}
+
+export function StaticImage({options}) {
+	return <div>image todo</div>
+}
\ No newline at end of file

frontend/src/statics/svg.jsx

+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+
+import { svgList } from '../svg-list';
+
+export function StaticSVGOptions({options, updateOptions}) {
+	const svgOptions = svgList.map(svgName => <option value={svgName}>{svgName}</option>)
+
+	return <Fragment>
+		<label for="svg">SVG</label>
+		<select id="svg" name="svg" value={options.svg}
+				onInput={e => updateOptions({svg: e.currentTarget.value})}>
+			{svgOptions}
+		</select>
+
+		<label for="stroke-color">Stroke color</label>
+		<div class="left spacer">
+			<input type="color" name="stroke-color" id="stroke-color" value={options.strokeColor}
+				onInput={e => updateOptions({strokeColor: e.currentTarget.value})}/>
+			<input type="text" value={options.strokeColor} disabled />
+		</div>
+
+		<label for="stroke-width">Stroke width</label>
+		<input id="stroke-width" name="stroke-width" type="number" min="0" step="any" value={options.strokeWidth}
+			onInput={e => updateOptions({strokeWidth: e.currentTarget.value})}/>
+	</Fragment>
+}
+
+export function StaticSVG({options}) {
+	let styles = '';
+	if(typeof options.strokeColor !== 'undefined') {
+		styles += `stroke: ${options.strokeColor}; `;
+	}
+	if(typeof options.strokeWidth !== 'undefined') {
+		styles += `stroke-width: ${options.strokeWidth}; `;
+	}
+
+	return <div class="check-content svg">
+		<svg class="feather" style={styles}>
+			<use xlinkHref={`/res/svgs/feather-sprite.svg#${options.svg}`}/>
+		</svg>
+	</div>
+}
\ No newline at end of file

frontend/style.css

@@ -507,6 +507,11 @@ div.editor {
 	display: flex;
 }
 
+.check > .svg > svg {
+	width: 100%;
+	height: 100%;
+}
+
 .check > .card {
 	padding: 6px 10px;
 	text-align: center;