Initial work adding statics

Fix up headings, spacing and routing

frontend/src/check-settings.jsx

@@ -91,11 +91,11 @@ export function CheckSettings({selectedCheck, updateCheck}) {
 
 	return <div class="editor settings-overlay">
 		<div class="options">
-			<div class="left">
+			<div class="lefty-righty spacer">
+				<h3 class="no-margin">{selectedCheck.title}</h3>
 				<svg class="feather" onClick={e => removeParam('selectedCheckId')}>
-					<use xlinkHref={`/res/svgs/feather-sprite.svg#chevron-left`}/>
+					<use xlinkHref={`/res/svgs/feather-sprite.svg#x`}/>
 				</svg>
-				<h3 class="no-margin">{selectedCheck.title}</h3>
 			</div>
 			<div class="asd">
 				<label for="name">Name</label>
@@ -129,7 +129,7 @@ export function SidePanelChecks({dashboard, dashboardDispatch}) {
 	}
 
 	return <Fragment>
-		<div class="lefty-righty" style="margin-bottom: 20px;">
+		<div class="lefty-righty">
 			<h3>Checks</h3>
 			<button class="small" onClick={addCheck}>New</button>
 		</div>

frontend/src/editor.jsx

@@ -3,6 +3,7 @@ import { route } from 'preact-router';
 import { useEffect, useReducer } from 'preact/hooks';
 
 import { SidePanelChecks, CheckSettings } from './check-settings';
+import { SidePanelStatics, StaticSettings } from './static-settings';
 import { CardElement } from './elements/card';
 
 //Manage dashboard state
@@ -49,7 +50,7 @@ const dashboardReducer = (state, action) => {
 			};
 			return {
 				...state,
-				statics: state.statics.concat(newCheck)
+				statics: state.statics.concat(newStatic)
 			};
 		case 'updateStatic':
 			console.log('Updating static')
@@ -61,7 +62,7 @@ const dashboardReducer = (state, action) => {
 };
 
 //Edit page
-export function Editor({slug, selectedCheckId}) {
+export function Editor({slug, selectedCheckId, selectedStaticId}) {
 	const [dashboard, dashboardDispatch] =  useReducer(dashboardReducer, null);
 
 	useEffect(() => {
@@ -86,17 +87,35 @@ export function Editor({slug, selectedCheckId}) {
 		});
 	}
 
+	const selectedStatic = selectedStaticId ? dashboard.statics[selectedStaticId] : null;
+	const updateStatic = s => {
+		dashboardDispatch({
+			type: 'updateStatic',
+			staticIndex: selectedStaticId,
+			static: s
+		});
+	}
+
 	return <Fragment>
 		<DashboardView slug={slug} dashboard={dashboard} dashboardDispatch={dashboardDispatch}
 			selectedCheckId={selectedCheckId ? Number(selectedCheckId) : null} />
 
 		<div class="editor">
 			<div class="options">
-				<h3>{dashboard.title}</h3>
+				<div class="lefty-righty spacer">
+					<h3 class="no-margin">{dashboard.title}</h3>
+					<svg class="feather" onClick={e => route('/')}>
+						<use xlinkHref={`/res/svgs/feather-sprite.svg#home`}/>
+					</svg>
+				</div>
 				<SidePanelSettings dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
+				<hr />
 				<SidePanelChecks dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
+				<hr />
+				<SidePanelStatics dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
 
 				<CheckSettings selectedCheck={selectedCheck} updateCheck={updateCheck}/>
+				<StaticSettings selectedStatic={selectedStatic} updateStatic={updateStatic}/>
 			</div>
 		</div>
 	</Fragment>
@@ -240,8 +259,7 @@ function DashboardView({dashboard, dashboardDispatch, selectedCheckId, slug}) {
 	const backgroundImage = dashboard.background ? `url(${dashboard.background})` : 'none';
 
 	return <div class="dashboard-wrap">
-		<div class="right" style="margin-bottom: 20px;">
-			<button onClick={e => route('/')}>Home</button>
+		<div class="right spacer">
 			<button onClick={saveDashboard}>Save Dashboard</button>
 		</div>
 		<div class="dashboard" style={{backgroundImage: backgroundImage}}>

frontend/src/static-settings.jsx

@@ -12,9 +12,9 @@ function StaticListPanel({statics, addStatic}) {
 		</div>
 	}
 
-	const staticList = statics.map((static, index) => (
+	const staticList = statics.map((s, index) => (
 		<div class="static-item" onClick={ e => routeParam('selectedStaticId', index.toString()) }>
-			<div>{static.title}</div>
+			<div>{s.title}</div>
 		</div>
 	));
 
@@ -23,52 +23,37 @@ function StaticListPanel({statics, addStatic}) {
 	</div>
 }
 
-// export function CheckSettings({selectedCheck, updateCheck}) {
-// 	if(selectedCheck === null) {
-// 		return null;
-// 	}
-
-// 	const updateCheckOptions = (options) => {
-// 		const newOptions = Object.assign(selectedCheck.options, options)
-// 		updateCheck({...selectedCheck, options: newOptions})
-// 	}
-
-// 	const checkTypeOptions = {
-// 		'card': <CardOptionFields updateOptions={updateCheckOptions} check={selectedCheck} />,
-// 		'svg': <div>svg options</div>,
-// 		'image': <div>image options</div>
-// 	}
-
-// 	return <div class="editor settings-overlay">
-// 		<div class="options">
-// 			<div class="left">
-// 				<svg class="feather" onClick={e => removeParam('selectedCheckId')}>
-// 					<use xlinkHref={`/res/svgs/feather-sprite.svg#chevron-left`}/>
-// 				</svg>
-// 				<h3 class="no-margin">{selectedCheck.title}</h3>
-// 			</div>
-// 			<div class="asd">
-// 				<label for="name">Name</label>
-// 				<input id="name" type="text" placeholder="Cool check" value={selectedCheck.title}
-// 					onInput={e => updateCheck({...selectedCheck, title: e.currentTarget.value})} />
+export function StaticSettings({selectedStatic, updateStatic}) {
+	if(selectedStatic === null) {
+		return null;
+	}
 
-// 				<label>Visual Type</label>
-// 				<select name="item-type" value={selectedCheck.type}
-// 					onInput={e => updateCheck({...selectedCheck, type: e.currentTarget.value})}>
-// 					<option value="card">Card</option>
-// 					<option value="svg">SVG</option>
-// 					<option value="image">Image</option>
-// 				</select>
+	const updateStaticOptions = (options) => {
+		const newOptions = Object.assign(selectedStatic.options, options)
+		updateStatic({...selectedStatic, options: newOptions})
+	}
 
-// 				<label>Icinga Host or Service</label>
-// 				<IcingaCheckList check={selectedCheck}
-// 					updateCheckID={checkID => updateCheck({...selectedCheck, checkID: checkID})} />
+	const staticTypeOptions = {
+		'text': <div>text options</div>,
+		'svg': <div>svg options</div>,
+		'image': <div>image options</div>
+	}
+	const options = staticTypeOptions[selectedStatic.type]
 
-// 				{checkTypeOptions[selectedCheck.type]}
-// 			</div>
-// 		</div>
-// 	</div>
-// }
+	return <div class="editor settings-overlay">
+		<div class="options">
+			<div class="lefty-righty spacer">
+				<h3 class="no-margin">{selectedStatic.title}</h3>
+				<svg class="feather" onClick={e => removeParam('selectedStaticId')}>
+					<use xlinkHref={`/res/svgs/feather-sprite.svg#x`}/>
+				</svg>
+			</div>
+			<div class="asd">
+				{options}
+			</div>
+		</div>
+	</div>
+}
 
 //Statics view for the sidebar
 export function SidePanelStatics({dashboard, dashboardDispatch}) {
@@ -79,7 +64,7 @@ export function SidePanelStatics({dashboard, dashboardDispatch}) {
 	}
 
 	return <Fragment>
-		<div class="lefty-righty" style="margin-bottom: 20px;">
+		<div class="lefty-righty">
 			<h3>Static Content</h3>
 			<button class="small" onClick={addStatic}>New</button>
 		</div>

frontend/style.css

@@ -86,13 +86,14 @@ body {
 
 h1, h2, h3, h4, h5, h6, p {
 	margin-top: 0;
-	margin-bottom: 20px;
+	margin-bottom: 15px;
 }
 
 hr {
 	height: 0;
 	border: 0;
-	border-bottom: 1px solid var(--color-light-gray);
+	margin-top: 0;
+	border-bottom: solid 1px #aaa;
 }
 
 a {
@@ -131,6 +132,10 @@ a:hover, a:focus {
 	align-items: center;
 }
 
+.spacer {
+	margin-bottom: 15px;
+}
+
 .no-margin {
 	margin: 0;
 }
@@ -165,7 +170,7 @@ label {
 }
 
 label~input, label~select {
-	margin-bottom: 20px;
+	margin-bottom: 15px;
 }
 
 button {
@@ -476,7 +481,7 @@ div.editor {
 	font-size: 60px;
 }
 
-.check-list > .check-item {
+.check-list > .check-item, .static-list > .static-item {
 	padding: 6px 10px;
 	border-radius: 4px;
 	font-size: 18px;
@@ -489,7 +494,9 @@ div.editor {
 	animation-duration: 500ms;
 }
 
-.check-list > .check-item:hover {
+.check-list > .check-item:hover, .static-list > .static-item:hover {
 	/* animation messing with this, so apply !important */
 	background-color: #ffffff73!important;
-}
\ No newline at end of file
+}
+
+/* STATICS */ 
\ No newline at end of file