Commit 4a1b3d52 authored by StreatCodes's avatar StreatCodes
Browse files

Initial work adding statics

Fix up headings, spacing and routing
parent 51e0b5ca
...@@ -91,11 +91,11 @@ export function CheckSettings({selectedCheck, updateCheck}) { ...@@ -91,11 +91,11 @@ export function CheckSettings({selectedCheck, updateCheck}) {
return <div class="editor settings-overlay"> return <div class="editor settings-overlay">
<div class="options"> <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')}> <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> </svg>
<h3 class="no-margin">{selectedCheck.title}</h3>
</div> </div>
<div class="asd"> <div class="asd">
<label for="name">Name</label> <label for="name">Name</label>
...@@ -129,7 +129,7 @@ export function SidePanelChecks({dashboard, dashboardDispatch}) { ...@@ -129,7 +129,7 @@ export function SidePanelChecks({dashboard, dashboardDispatch}) {
} }
return <Fragment> return <Fragment>
<div class="lefty-righty" style="margin-bottom: 20px;"> <div class="lefty-righty">
<h3>Checks</h3> <h3>Checks</h3>
<button class="small" onClick={addCheck}>New</button> <button class="small" onClick={addCheck}>New</button>
</div> </div>
......
...@@ -3,6 +3,7 @@ import { route } from 'preact-router'; ...@@ -3,6 +3,7 @@ import { route } from 'preact-router';
import { useEffect, useReducer } from 'preact/hooks'; import { useEffect, useReducer } from 'preact/hooks';
import { SidePanelChecks, CheckSettings } from './check-settings'; import { SidePanelChecks, CheckSettings } from './check-settings';
import { SidePanelStatics, StaticSettings } from './static-settings';
import { CardElement } from './elements/card'; import { CardElement } from './elements/card';
//Manage dashboard state //Manage dashboard state
...@@ -49,7 +50,7 @@ const dashboardReducer = (state, action) => { ...@@ -49,7 +50,7 @@ const dashboardReducer = (state, action) => {
}; };
return { return {
...state, ...state,
statics: state.statics.concat(newCheck) statics: state.statics.concat(newStatic)
}; };
case 'updateStatic': case 'updateStatic':
console.log('Updating static') console.log('Updating static')
...@@ -61,7 +62,7 @@ const dashboardReducer = (state, action) => { ...@@ -61,7 +62,7 @@ const dashboardReducer = (state, action) => {
}; };
//Edit page //Edit page
export function Editor({slug, selectedCheckId}) { export function Editor({slug, selectedCheckId, selectedStaticId}) {
const [dashboard, dashboardDispatch] = useReducer(dashboardReducer, null); const [dashboard, dashboardDispatch] = useReducer(dashboardReducer, null);
useEffect(() => { useEffect(() => {
...@@ -86,17 +87,35 @@ export function Editor({slug, selectedCheckId}) { ...@@ -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> return <Fragment>
<DashboardView slug={slug} dashboard={dashboard} dashboardDispatch={dashboardDispatch} <DashboardView slug={slug} dashboard={dashboard} dashboardDispatch={dashboardDispatch}
selectedCheckId={selectedCheckId ? Number(selectedCheckId) : null} /> selectedCheckId={selectedCheckId ? Number(selectedCheckId) : null} />
<div class="editor"> <div class="editor">
<div class="options"> <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} /> <SidePanelSettings dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
<hr />
<SidePanelChecks dashboard={dashboard} dashboardDispatch={dashboardDispatch} /> <SidePanelChecks dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
<hr />
<SidePanelStatics dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
<CheckSettings selectedCheck={selectedCheck} updateCheck={updateCheck}/> <CheckSettings selectedCheck={selectedCheck} updateCheck={updateCheck}/>
<StaticSettings selectedStatic={selectedStatic} updateStatic={updateStatic}/>
</div> </div>
</div> </div>
</Fragment> </Fragment>
...@@ -240,8 +259,7 @@ function DashboardView({dashboard, dashboardDispatch, selectedCheckId, slug}) { ...@@ -240,8 +259,7 @@ function DashboardView({dashboard, dashboardDispatch, selectedCheckId, slug}) {
const backgroundImage = dashboard.background ? `url(${dashboard.background})` : 'none'; const backgroundImage = dashboard.background ? `url(${dashboard.background})` : 'none';
return <div class="dashboard-wrap"> return <div class="dashboard-wrap">
<div class="right" style="margin-bottom: 20px;"> <div class="right spacer">
<button onClick={e => route('/')}>Home</button>
<button onClick={saveDashboard}>Save Dashboard</button> <button onClick={saveDashboard}>Save Dashboard</button>
</div> </div>
<div class="dashboard" style={{backgroundImage: backgroundImage}}> <div class="dashboard" style={{backgroundImage: backgroundImage}}>
......
...@@ -12,9 +12,9 @@ function StaticListPanel({statics, addStatic}) { ...@@ -12,9 +12,9 @@ function StaticListPanel({statics, addStatic}) {
</div> </div>
} }
const staticList = statics.map((static, index) => ( const staticList = statics.map((s, index) => (
<div class="static-item" onClick={ e => routeParam('selectedStaticId', index.toString()) }> <div class="static-item" onClick={ e => routeParam('selectedStaticId', index.toString()) }>
<div>{static.title}</div> <div>{s.title}</div>
</div> </div>
)); ));
...@@ -23,52 +23,37 @@ function StaticListPanel({statics, addStatic}) { ...@@ -23,52 +23,37 @@ function StaticListPanel({statics, addStatic}) {
</div> </div>
} }
// export function CheckSettings({selectedCheck, updateCheck}) { export function StaticSettings({selectedStatic, updateStatic}) {
// if(selectedCheck === null) { if(selectedStatic === null) {
// return 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})} />
// <label>Visual Type</label> const updateStaticOptions = (options) => {
// <select name="item-type" value={selectedCheck.type} const newOptions = Object.assign(selectedStatic.options, options)
// onInput={e => updateCheck({...selectedCheck, type: e.currentTarget.value})}> updateStatic({...selectedStatic, options: newOptions})
// <option value="card">Card</option> }
// <option value="svg">SVG</option>
// <option value="image">Image</option>
// </select>
// <label>Icinga Host or Service</label> const staticTypeOptions = {
// <IcingaCheckList check={selectedCheck} 'text': <div>text options</div>,
// updateCheckID={checkID => updateCheck({...selectedCheck, checkID: checkID})} /> 'svg': <div>svg options</div>,
'image': <div>image options</div>
}
const options = staticTypeOptions[selectedStatic.type]
// {checkTypeOptions[selectedCheck.type]} return <div class="editor settings-overlay">
// </div> <div class="options">
// </div> <div class="lefty-righty spacer">
// </div> <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 //Statics view for the sidebar
export function SidePanelStatics({dashboard, dashboardDispatch}) { export function SidePanelStatics({dashboard, dashboardDispatch}) {
...@@ -79,7 +64,7 @@ export function SidePanelStatics({dashboard, dashboardDispatch}) { ...@@ -79,7 +64,7 @@ export function SidePanelStatics({dashboard, dashboardDispatch}) {
} }
return <Fragment> return <Fragment>
<div class="lefty-righty" style="margin-bottom: 20px;"> <div class="lefty-righty">
<h3>Static Content</h3> <h3>Static Content</h3>
<button class="small" onClick={addStatic}>New</button> <button class="small" onClick={addStatic}>New</button>
</div> </div>
......
...@@ -86,13 +86,14 @@ body { ...@@ -86,13 +86,14 @@ body {
h1, h2, h3, h4, h5, h6, p { h1, h2, h3, h4, h5, h6, p {
margin-top: 0; margin-top: 0;
margin-bottom: 20px; margin-bottom: 15px;
} }
hr { hr {
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid var(--color-light-gray); margin-top: 0;
border-bottom: solid 1px #aaa;
} }
a { a {
...@@ -131,6 +132,10 @@ a:hover, a:focus { ...@@ -131,6 +132,10 @@ a:hover, a:focus {
align-items: center; align-items: center;
} }
.spacer {
margin-bottom: 15px;
}
.no-margin { .no-margin {
margin: 0; margin: 0;
} }
...@@ -165,7 +170,7 @@ label { ...@@ -165,7 +170,7 @@ label {
} }
label~input, label~select { label~input, label~select {
margin-bottom: 20px; margin-bottom: 15px;
} }
button { button {
...@@ -476,7 +481,7 @@ div.editor { ...@@ -476,7 +481,7 @@ div.editor {
font-size: 60px; font-size: 60px;
} }
.check-list > .check-item { .check-list > .check-item, .static-list > .static-item {
padding: 6px 10px; padding: 6px 10px;
border-radius: 4px; border-radius: 4px;
font-size: 18px; font-size: 18px;
...@@ -489,7 +494,9 @@ div.editor { ...@@ -489,7 +494,9 @@ div.editor {
animation-duration: 500ms; 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 */ /* animation messing with this, so apply !important */
background-color: #ffffff73!important; background-color: #ffffff73!important;
} }
\ No newline at end of file
/* STATICS */
\ No newline at end of file
Supports Markdown
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