Finish SVG type

frontend/src/check-settings.jsx

@@ -2,6 +2,7 @@ import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
 import { CheckCardOptions } from './elements/card';
+import { CheckSVGOptions } from './elements/svg';
 import { CheckImageOptions } from './elements/image';
 import { routeParam, removeParam } from './util';
 import { route } from 'preact-router';
@@ -83,8 +84,8 @@ export function CheckSettings({selectedCheck, updateCheck}) {
 
 	let checkOptions = null;
 	if(selectedCheck.type === 'card') { checkOptions = <CheckCardOptions updateOptions={updateCheckOptions} check={selectedCheck} /> }
-	// if(selectedCheck.type === 'svg') { checkOptions = <CheckSVGOptions updateOptions={updateCheckOptions} options={check.options}/> }
-	if(selectedCheck.type === 'image') { checkOptions = <CheckImageOptions updateOptions={updateCheckOptions} options={selectedCheck}/> }
+	if(selectedCheck.type === 'svg') { checkOptions = <CheckSVGOptions updateOptions={updateCheckOptions} options={selectedCheck.options}/> }
+	if(selectedCheck.type === 'image') { checkOptions = <CheckImageOptions updateOptions={updateCheckOptions} options={selectedCheck.options}/> }
 
 	return <div class="editor settings-overlay">
 		<div class="options">

frontend/src/editor.jsx

@@ -6,6 +6,7 @@ import * as meerkat from './meerkat'
 import { SidePanelChecks, CheckSettings } from './check-settings';
 import { SidePanelStatics, StaticSettings } from './static-settings';
 import { CheckCard } from './elements/card';
+import { CheckSVG } from './elements/svg';
 import { CheckImage } from './elements/image';
 import { removeParam } from './util';
 import { StaticText } from './statics/text';

frontend/src/elements/svg.jsx

-import { h, Fragment } from 'preact';
+import { h, Fragment, options } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
 import * as meerkat from '../meerkat';
 import { icingaResultCodeToCheckState, icingaCheckTypeFromId } from '../util'
 
+import { svgList } from '../svg-list'
+
 export function CheckSVGOptions({options, updateOptions}) {
-	return <div>todo</div>
+	const svgOptions = svgList.map(svgName => <option value={svgName}>{svgName}</option>)
+
+	return <div class="card-options">
+		<label for="okSvg">OK SVG</label>
+		<select id="okSvg" name="okSvg" value={options.okSvg}
+				onInput={e => updateOptions({okSvg: e.currentTarget.value})}>
+			{svgOptions}
+		</select>
+		<label for="ok-stroke-color">OK Stroke color</label>
+		<div class="left spacer">
+			<input type="color" name="ok-stroke-color" id="ok-stroke-color" value={options.okStrokeColor}
+				onInput={e => updateOptions({okStrokeColor: e.currentTarget.value})}/>
+			<input type="text" value={options.okStrokeColor} disabled />
+		</div>
+		<hr />
+
+		<label for="warningSvg">Warning SVG</label>
+		<select id="warningSvg" name="warningSvg" value={options.warningSvg}
+				onInput={e => updateOptions({warningSvg: e.currentTarget.value})}>
+			{svgOptions}
+		</select>
+		<label for="warning-stroke-color">Warning Stroke color</label>
+		<div class="left spacer">
+			<input type="color" name="warning-stroke-color" id="warning-stroke-color" value={options.warningStrokeColor}
+				onInput={e => updateOptions({warningStrokeColor: e.currentTarget.value})}/>
+			<input type="text" value={options.warningStrokeColor} disabled />
+		</div>
+		<hr />
+
+		<label for="unknownSvg">Unknown SVG</label>
+		<select id="unknownSvg" name="unknownSvg" value={options.unknownSvg}
+				onInput={e => updateOptions({unknownSvg: e.currentTarget.value})}>
+			{svgOptions}
+		</select>
+		<label for="unknown-stroke-color">Unknown Stroke color</label>
+		<div class="left spacer">
+			<input type="color" name="unknown-stroke-color" id="unknown-stroke-color" value={options.unknownStrokeColor}
+				onInput={e => updateOptions({unknownStrokeColor: e.currentTarget.value})}/>
+			<input type="text" value={options.unknownStrokeColor} disabled />
+		</div>
+		<hr />
+
+		<label for="criticalSvg">Critical SVG</label>
+		<select id="criticalSvg" name="criticalSvg" value={options.criticalSvg}
+				onInput={e => updateOptions({criticalSvg: e.currentTarget.value})}>
+			{svgOptions}
+		</select>
+		<label for="critical-stroke-color">Critical Stroke color</label>
+		<div class="left spacer">
+			<input type="color" name="critical-stroke-color" id="critical-stroke-color" value={options.criticalStrokeColor}
+				onInput={e => updateOptions({criticalStrokeColor: e.currentTarget.value})}/>
+			<input type="text" value={options.criticalStrokeColor} disabled />
+		</div>
+	</div>
 }
 
 //The rendered view (in the actual dashboard) of the Check SVG
@@ -29,11 +84,30 @@ export function CheckSVG({check}) {
 		}
 	}, [check.checkID]);
 
-	// let source = null;
-	// if(checkState === 'ok' || checkState === 'up') {source = check.options.okImage}
-	// if(checkState === 'warning') {source = check.options.warningImage}
-	// if(checkState === 'unknown') {source = check.options.unknownImage}
-	// if(checkState === 'critical' || checkState === 'down') {source = check.options.criticalImage}
+	//SVG stroke color and icons to the correct version based 
+	//on the current check state
+	let styles = '';
+	let svgName = '';
+	if(checkState === 'ok' || checkState === 'up') {
+		styles = check.options.okStrokeColor ? `stroke: ${check.options.okStrokeColor}` : '';
+		svgName = check.options.okSvg;
+	}
+	if(checkState === 'warning') {
+		styles = check.options.warningStrokeColor ? `stroke: ${check.options.warningStrokeColor}` : '';
+		svgName = check.options.warningSvg;
+	}
+	if(checkState === 'unknown') {
+		styles = check.options.unknownStrokeColor ? `stroke: ${check.options.unknownStrokeColor}` : '';
+		svgName = check.options.unknownSvg;
+	}
+	if(checkState === 'critical' || checkState === 'down') {
+		styles = check.options.criticalStrokeColor ? `stroke: ${check.options.criticalStrokeColor}` : '';
+		svgName = check.options.criticalSvg;
+	}
 
-	return <div class="check-content svg">TODO</div>
+	return <div class="check-content svg">
+		<svg class="feather" style={styles}>
+			<use xlinkHref={`/res/svgs/feather-sprite.svg#${svgName}`}/>
+		</svg>
+	</div>
 }
\ No newline at end of file