table layout started

This commit is contained in:
TreetopFlyer 2021-05-24 17:03:44 -04:00
parent 6e1c170ff6
commit 858cb8cd45
2 changed files with 71 additions and 10 deletions

View File

@ -196,18 +196,74 @@ let Modifier = props =>
`;
}
let PivotBranch = ({node, widths}) =>
let PivotBranch = props =>
{
let sumCells = node.Meta.Row.map(column=>h("td", null, column));
let row = props.node.Meta.Row;
let displayCells = row.map(column=>h("td", null, column));
let displayCellsModify = row.map(column=>false);
props.node.Meta.IndexSum.forEach(i=>
{
displayCellsModify[i] = html`<td><input type="number" value=${row[i]}/></td>`;
});
displayCellsModify.forEach((cell, i)=>
{
if(!cell)
{
displayCellsModify[i] = html`<td>${row[i]}</td>`
}
});
return html`
<tr>
<td></td>
${sumCells}
</tr>
<tbody>
<tr>
<td colspan=${displayCells.length+1}><hr/></td>
</tr>
<tr>
<td>
<strong>${props.node.Meta.Label}</strong>
</td>
${displayCells}
</tr>
<tr>
<td colspan=${displayCells.length+1}>Modifications</td>
</tr>
<tr>
<td>At</td>
${displayCellsModify}
</tr>
<tr>
<td>Below</td>
${displayCells}
</tr>
<tr>
<td>Above</td>
${displayCells}
</tr>
<tr>
<td>Outside</td>
${displayCells}
</tr>
<tr>
<td>Computed</td>
${displayCells}
</tr>
<tr>
<td colspan=${displayCells.length+1}>Goals</td>
</tr>
<tr>
<td>Max</td>
${displayCells}
</tr>
<tr>
<td>Min</td>
${displayCells}
</tr>
</tbody>
`;
};
let PivotRoot = ({pivot, children}) =>
let PivotRoot = ({pivot}) =>
{
let stylesRoot = css`
@ -223,13 +279,16 @@ let PivotRoot = ({pivot, children}) =>
`;
let modifiers = N.Step(pivot, "ModifyUp", false) || [];
let handleDelete = ()=>
{
Pivot.Delete(pivot);
Render();
};
let rows = [];
N.ID.Walk++;
N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
return html`
<div class=${stylesRoot}>
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
@ -240,7 +299,9 @@ let PivotRoot = ({pivot, children}) =>
${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
<//>
<${Section} key="tree" label=${"Tree"}>
${children}
<table>
${rows}
</table>
<//>
</div>
`;

View File

@ -366,7 +366,7 @@ import {PivotRoot, PivotForm} from './components.js';
Pivot.Init(
["id", "type-a", "type-b", "count", "extra"],
["", "label", "label", "sum", "sum"],
["label", "label", "label", "sum", "sum"],
[
["#1", "a", "long", 1, 4],
["#2", "b", "long", 2, 4],