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}) {
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>
......
......@@ -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}}>
......
......@@ -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>
......
......@@ -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;
}
/* 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