From 1ed77283ec766ebce5d6d7490a33b046229ab69c Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Sun, 23 May 2021 09:18:00 -0400 Subject: [PATCH 1/2] components started --- components.js | 209 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 15 ++-- 2 files changed, 217 insertions(+), 7 deletions(-) create mode 100644 components.js diff --git a/components.js b/components.js new file mode 100644 index 0000000..ec6b4f4 --- /dev/null +++ b/components.js @@ -0,0 +1,209 @@ +import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact'; +import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks'; +import { css, cx } from 'https://cdn.skypack.dev/@emotion/css'; +import htm from 'https://unpkg.com/htm?module'; +const html = htm.bind(h); + +let FormPivot = props => +{ + let pivotColumns = N.Step(Pivot.Schema, "label")||[]; + let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[]; + + let sumColumns = N.Step(Pivot.Schema, "sum")||[]; + let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[]; + + let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index); + let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index); + + var action; + if(indiciesPivot.length) + { + action = h("p", null, [ + h("span", null, "Build"), + h("button", {onClick:e=> + { + N.Disconnect(Pivot.Proto, null, "used-pivot"); + N.Disconnect(Pivot.Proto, null, "used-sum"); + Pivot.Create(indiciesPivot, indiciesSum); + Render(); + } + }, "Create Pivot") + ]); + } + else + { + action = h("p", null, "(select columns)") + } + + return h("div", {}, [ + h("p", null, [ + + h("span", null, "Pivot Columns"), + ...pivotColumns.map( columnLabel => + { + let attributes = {}; + if(N.Step(columnLabel, "used-pivot", false)) + { + attributes.disabled = true; + } + else + { + attributes.onClick = e=> + { + N.Connect(Pivot.Proto, columnLabel, "used-pivot"); + Render(); + } + } + return h("button", attributes, columnLabel.Meta.Label); + }), + + h("span", null, "Summation Columns"), + ...sumColumns.map( columnSum => + { + let attributes = {}; + if(N.Step(columnSum, "used-sum", false)) + { + attributes.disabled = true; + } + else + { + attributes.onClick = e=> + { + N.Connect(Pivot.Proto, columnSum, "used-sum"); + Render(); + } + } + return h("button", attributes, columnSum.Meta.Label); + }) + ]), + h("p", null, [ + h("span", null, "Current Pivot"), + ...pivotColumnsUsed.map( columnLabel => + { + return h("button", {onClick:e=> + { + N.Disconnect(Pivot.Proto, columnLabel, "used-pivot"); + Render(); + } + }, columnLabel.Meta.Label); + }), + h("span", null, "Current Summation"), + ...sumColumnsUsed.map( columnSum => + { + return h("button", {onClick:e=> + { + N.Disconnect(Pivot.Proto, columnSum, "used-sum"); + Render(); + } + }, columnSum.Meta.Label); + }), + ]), + action + ]); +} + +let Section = props => +{ + let styles = css` + border-top:1px solid #aaa; + .Heading + { + padding:6px 0 6px 0; + color:#666; + font-weight:900; + font-size:12px; + text-transform:uppercase; + cursor:pointer; + + span + { + display:inline-block; + width:20px; + height:20px; + margin-right:10px; + border-radius:20px; + background:black; + color:white; + text-align:center; + } + } + .Heading:hover + { + color:black; + } + .Body + { + margin:10px 0 10px 0; + } + `; + + let [openGet, openSet] = useState(false); + return html` +
+
openSet(!openGet)}> + ${openGet ? `−` : `+`} + ${props.label} +
+ ${ openGet ? html`
${props.children}
` : null } +
+ `; +} + +let Modifier = props => +{ + let refNode = N.Step(props.modifier, "ModifyAt")[0]; + + let handlerClick = () => + { + Pivot.Unmodify(props.modifier); + Render(); + }; + + return html` +
+
${refNode.Meta.Label}
+ +
+ `; +} + +let PivotRoot = ({pivot, children}) => +{ + + let stylesRoot = css` + display:block; + box-sizing:border-box; + padding:15px; + font-family:sans-serif; + `; + let stylesHeading = css` + margin: 0 0 15px 0; + font-weight:0; + font-size:24px; + `; + + let modifiers = N.Step(pivot, "Modifier") || []; + + let handleDelete = ()=> + { + Pivot.Delete(pivot); + Render(); + }; + + return html` +
+
${pivot.Meta.Label}
+ <${Section} key="settings" label=${`Settings`}> + + + <${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}> + ${ !modifiers.length ? html`No modifiers` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)} + + <${Section} key="tree" label=${"Tree"}> + ${children} + +
+ `; +}; + +export {Section, PivotRoot}; \ No newline at end of file diff --git a/index.html b/index.html index 4f3e5bc..2c24d3f 100755 --- a/index.html +++ b/index.html @@ -366,12 +366,18 @@ var Pivot = }; + + From eb3eb03112c6f11b831c3b90dd226402887603d6 Mon Sep 17 00:00:00 2001 From: TreetopFlyer Date: Sun, 23 May 2021 14:05:02 -0400 Subject: [PATCH 2/2] new form layout --- components.js | 176 +++++++++++++++++++++++++++----------------------- index.html | 130 ++----------------------------------- 2 files changed, 101 insertions(+), 205 deletions(-) diff --git a/components.js b/components.js index ec6b4f4..d9d1135 100644 --- a/components.js +++ b/components.js @@ -4,102 +4,114 @@ import { css, cx } from 'https://cdn.skypack.dev/@emotion/css'; import htm from 'https://unpkg.com/htm?module'; const html = htm.bind(h); -let FormPivot = props => +let Styles = { + Form:css` + position:realtive; + box-sizing: border-box; + padding: 10px; + color:black; + font-family:sans-serif; + + .Title + { + font-size:24px; + font-weight:100; + } + + .Section + { + padding:10px 0 10px 0; + + .Heading + { + display:inline-block; + color:#666; + font-family:sans-serif; + font-size:12px; + font-weight:900; + text-transform:uppercase; + } + .Group + { + display:inline-block; + padding:5px; + border-radius:5px; + margin:3px; + background:rgba(0, 0, 0, 0.3) + } + } + ` +}; + +let PivotForm = props => { + let pivotColumns = N.Step(Pivot.Schema, "label")||[]; let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[]; let sumColumns = N.Step(Pivot.Schema, "sum")||[]; - let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[]; + //let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[]; let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index); - let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index); + let indiciesSum = sumColumns.map(node=>node.Meta.Index); + //let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index); - var action; - if(indiciesPivot.length) - { - action = h("p", null, [ - h("span", null, "Build"), - h("button", {onClick:e=> + let displayPivotsAll = html` +
+
Available Columns
+
+ ${pivotColumns.map( columnPivot => + { + let attributes = {}; + if(N.Step(columnPivot, "used-pivot", false)) { + attributes.disabled = true; + } + else + { + attributes.onClick = e=> + { + N.Connect(Pivot.Proto, columnPivot, "used-pivot"); + Render(); + } + } + return html``; + })} +
+
+ `; + + let displayPivotsPending = null; + if(pivotColumnsUsed.length) + { + displayPivotsPending = html` +
+
Pending Pivot
+
+ ${pivotColumnsUsed.map(columnPivot=>html` + + `)} +
+ + +
+ `; } - return h("div", {}, [ - h("p", null, [ - - h("span", null, "Pivot Columns"), - ...pivotColumns.map( columnLabel => - { - let attributes = {}; - if(N.Step(columnLabel, "used-pivot", false)) - { - attributes.disabled = true; - } - else - { - attributes.onClick = e=> - { - N.Connect(Pivot.Proto, columnLabel, "used-pivot"); - Render(); - } - } - return h("button", attributes, columnLabel.Meta.Label); - }), - - h("span", null, "Summation Columns"), - ...sumColumns.map( columnSum => - { - let attributes = {}; - if(N.Step(columnSum, "used-sum", false)) - { - attributes.disabled = true; - } - else - { - attributes.onClick = e=> - { - N.Connect(Pivot.Proto, columnSum, "used-sum"); - Render(); - } - } - return h("button", attributes, columnSum.Meta.Label); - }) - ]), - h("p", null, [ - h("span", null, "Current Pivot"), - ...pivotColumnsUsed.map( columnLabel => - { - return h("button", {onClick:e=> - { - N.Disconnect(Pivot.Proto, columnLabel, "used-pivot"); - Render(); - } - }, columnLabel.Meta.Label); - }), - h("span", null, "Current Summation"), - ...sumColumnsUsed.map( columnSum => - { - return h("button", {onClick:e=> - { - N.Disconnect(Pivot.Proto, columnSum, "used-sum"); - Render(); - } - }, columnSum.Meta.Label); - }), - ]), - action - ]); + return html` +
+
Create New Pivot
+ ${displayPivotsAll} + ${displayPivotsPending} +
+ `; } let Section = props => @@ -206,4 +218,4 @@ let PivotRoot = ({pivot, children}) => `; }; -export {Section, PivotRoot}; \ No newline at end of file +export {Section, PivotRoot, PivotForm}; \ No newline at end of file diff --git a/index.html b/index.html index 2c24d3f..4879633 100755 --- a/index.html +++ b/index.html @@ -283,10 +283,10 @@ var Pivot = { N.ID.Walk++; - let names = N.Step(Pivot.Schema, "label"); + let columns = N.Step(Pivot.Schema, "all"); let label = inPivotIndicies.map( inPivotIndex => { - return names[inPivotIndex].Meta.Label; + return columns[inPivotIndex].Meta.Label; }); let pivotRoot = N.Create({Label:label.join("|"), Leaves:Pivot.Leaves}); @@ -376,11 +376,11 @@ import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/prea import { useReducer } from 'https://cdn.skypack.dev/preact/hooks'; import { css, cx } from 'https://cdn.skypack.dev/@emotion/css'; -import {PivotRoot as PR} from './components.js'; +import {PivotRoot, PivotForm} from './components.js'; Pivot.Init( - ["number", "type-a", "type-b", "count", "extra"], - ["label", "label", "label", "sum", "sum"], + ["id", "type-a", "type-b", "count", "extra"], + ["", "label", "label", "sum", "sum"], [ ["#1", "a", "long", 1, 4], ["#2", "b", "long", 2, 4], @@ -392,103 +392,6 @@ Pivot.Init( ] ); -let ElForm = props => -{ - let pivotColumns = N.Step(Pivot.Schema, "label")||[]; - let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[]; - - let sumColumns = N.Step(Pivot.Schema, "sum")||[]; - let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[]; - - let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index); - let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index); - - var action; - if(indiciesPivot.length) - { - action = h("p", null, [ - h("span", null, "Build"), - h("button", {onClick:e=> - { - N.Disconnect(Pivot.Proto, null, "used-pivot"); - N.Disconnect(Pivot.Proto, null, "used-sum"); - Pivot.Create(indiciesPivot, indiciesSum); - Render(); - } - }, "Create Pivot") - ]); - } - else - { - action = h("p", null, "(select columns)") - } - - return h("div", {}, [ - h("p", null, [ - - h("span", null, "Pivot Columns"), - ...pivotColumns.map( columnLabel => - { - let attributes = {}; - if(N.Step(columnLabel, "used-pivot", false)) - { - attributes.disabled = true; - } - else - { - attributes.onClick = e=> - { - N.Connect(Pivot.Proto, columnLabel, "used-pivot"); - Render(); - } - } - return h("button", attributes, columnLabel.Meta.Label); - }), - - h("span", null, "Summation Columns"), - ...sumColumns.map( columnSum => - { - let attributes = {}; - if(N.Step(columnSum, "used-sum", false)) - { - attributes.disabled = true; - } - else - { - attributes.onClick = e=> - { - N.Connect(Pivot.Proto, columnSum, "used-sum"); - Render(); - } - } - return h("button", attributes, columnSum.Meta.Label); - }) - ]), - h("p", null, [ - h("span", null, "Current Pivot"), - ...pivotColumnsUsed.map( columnLabel => - { - return h("button", {onClick:e=> - { - N.Disconnect(Pivot.Proto, columnLabel, "used-pivot"); - Render(); - } - }, columnLabel.Meta.Label); - }), - h("span", null, "Current Summation"), - ...sumColumnsUsed.map( columnSum => - { - return h("button", {onClick:e=> - { - N.Disconnect(Pivot.Proto, columnSum, "used-sum"); - Render(); - } - }, columnSum.Meta.Label); - }), - ]), - action - ]) -}; let ElNode = ({node, depth}) => { let nodeBase = css` @@ -570,32 +473,13 @@ let ElNode = ({node, depth}) => h("div", {className:"Nodes"}, N.Step(node, "Hierarchy").map(child=>h(ElNode, {node:child, depth:depth+1})) ) ]); }; -let ElPivot = ({pivot}) => -{ - return h(PR, {key:pivot.Meta.Label, pivot}, h(ElNode, {node:pivot, depth:0})); -}; -let ElModifiers = ({node}) => -{ - let modifiers = N.Step(node, "Modifier") || []; - return h("div", null, [ - h("strong", null, "modifiers"), - ...modifiers.map( m => h("span", {onClick:e=> - { - Pivot.Unmodify(m); - Render(); - } - }, "modifier")) - ]); -}; let ElRoot = props => { let pivots = N.Step(Pivot.Root, "Pivot")||[]; return h("div", null, [ - h("h3", null, "tree view"), - h(ElForm), - h(ElModifiers, {node:Pivot.Root}), - pivots.map(pivot=>h(ElPivot, {pivot})) + h(PivotForm), + pivots.map(pivot=>h(PivotRoot, {key:pivot.Meta.Label, pivot}, h(ElNode, {node:pivot, depth:0}))) ]) }; Render = () => render(h(ElRoot), document.querySelector("#app"));