Commit 77a5b318 authored by StreatCodes's avatar StreatCodes
Browse files

Move save/home controls to editor panel

parent ca5486f1
......@@ -128,7 +128,7 @@ export function SidePanelChecks({dashboard, dashboardDispatch}) {
return <Fragment>
<div class="lefty-righty">
<h3>Checks</h3>
<button class="small" onClick={addCheck}>New</button>
<button class="small hollow" onClick={addCheck}>New</button>
</div>
<CheckListPanel checks={dashboard.checks} addCheck={addCheck} />
</Fragment>
......
......@@ -106,19 +106,27 @@ export function Editor({slug, selectedCheckId, selectedStaticId}) {
});
}
const saveDashboard = async e => {
console.log(dashboard);
try {
const data = await meerkat.saveDashboard(slug, dashboard);
route(`/edit/${data.slug}${window.location.search}`)
//TODO show success
} catch (e) {
//TODO improve
console.log('error saving dashboard:');
console.log(e);
}
}
return <Fragment>
<DashboardView slug={slug} dashboard={dashboard} dashboardDispatch={dashboardDispatch}
<DashboardView dashboard={dashboard} dashboardDispatch={dashboardDispatch}
selectedCheckId={selectedCheckId ? Number(selectedCheckId) : null}
selectedStaticId={selectedStaticId ? Number(selectedStaticId) : null} />
<div class="editor">
<div class="options">
<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>
<h3>{dashboard.title}</h3>
<SidePanelSettings dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
<hr />
<SidePanelChecks dashboard={dashboard} dashboardDispatch={dashboardDispatch} />
......@@ -129,6 +137,10 @@ export function Editor({slug, selectedCheckId, selectedStaticId}) {
<StaticSettings selectedStatic={selectedStatic} updateStatic={updateStatic}/>
</div>
</div>
<div class="side-bar-footer lefty-righty">
<button class="hollow" onClick={e => route('/')}>Home</button>
<button onClick={saveDashboard}>Save Dashboard</button>
</div>
</Fragment>
}
......@@ -276,26 +288,10 @@ function DashboardStatics({dashboardDispatch, selectedStaticId, statics}) {
}
//The actual dashboard being rendered
function DashboardView({dashboard, dashboardDispatch, selectedCheckId, selectedStaticId, slug}) {
const saveDashboard = async e => {
console.log(dashboard);
try {
const data = await meerkat.saveDashboard(slug, dashboard);
route(`/edit/${data.slug}${window.location.search}`)
//TODO show success
} catch (e) {
//TODO improve
console.log('error saving dashboard:');
console.log(e);
}
}
function DashboardView({dashboard, dashboardDispatch, selectedCheckId, selectedStaticId}) {
const backgroundImage = dashboard.background ? `url(${dashboard.background})` : 'none';
return <div class="dashboard-wrap">
<div class="right spacer">
<button onClick={saveDashboard}>Save Dashboard</button>
</div>
<div class="dashboard" style={{backgroundImage: backgroundImage}}>
<DashboardStatics statics={dashboard.statics} selectedStaticId={selectedStaticId}
dashboardDispatch={dashboardDispatch} />
......
......@@ -80,7 +80,7 @@ export function SidePanelStatics({dashboard, dashboardDispatch}) {
return <Fragment>
<div class="lefty-righty">
<h3>Static Content</h3>
<button class="small" onClick={addStatic}>New</button>
<button class="small hollow" onClick={addStatic}>New</button>
</div>
<StaticListPanel statics={dashboard.statics} addStatic={addStatic} />
</Fragment>
......
......@@ -212,11 +212,22 @@ button.loading::before, div.loading::before {
}
button.small {
padding: 6px 12px;
padding: 4px 8px;
font-size: 12px;
text-transform: uppercase;
}
button.hollow {
border: solid 1px var(--color-dark-orange);
color: var(--color-orange);
background-color: transparent;
}
button.hollow:hover, button.hollow:focus {
color: var(--color-orange);
border-color: var(--color-orange);
}
div.small {
font-size: 14px;
}
......@@ -452,12 +463,10 @@ div.editor {
position: fixed;
left: 0;
top: 0;
bottom: 0;
bottom: 80px;
max-width: 200px;
background-color: var(--color-light-gray);
min-width: 380px;
display: flex;
justify-content: space-between;
overflow-y: auto;
}
......@@ -474,6 +483,15 @@ div.editor {
animation-duration: 100ms;
}
div.side-bar-footer {
position: fixed;
bottom: 0;
left: 0;
padding: 20px;
background-color: var(--color-light-gray);
min-width: 380px;
}
/* DASHBOARD ELEMENTS */
.check {
cursor: move;
......
Markdown is supported
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