Permalink
Browse files

Merge pull request #387 from input-output-hk/playground-ui

UI/UX improvements.
  • Loading branch information...
shmish111 committed Dec 6, 2018
2 parents 32b861a + d00f166 commit 02a3121dc838a966d8b0ae7c753fa559e35208b8
@@ -10,11 +10,13 @@ import Data.Int as Int
import Data.Lens (view)
import Data.Maybe (Maybe, fromMaybe, maybe)
import Data.Newtype (unwrap)
import Data.Tuple (Tuple(..))
import Data.Tuple.Nested ((/\))
import Halogen (HTML)
import Halogen.Component (ParentHTML)
import Halogen.ECharts (EChartsEffects)
import Halogen.HTML (ClassName(ClassName), br_, button, code_, div, div_, h2_, h3_, input, label, p_, small_, text)
import Halogen.HTML.Elements.Keyed as Keyed
import Halogen.HTML.Events (input_, onClick, onValueChange)
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties (InputType(InputText, InputNumber), class_, classes, disabled, for, placeholder, type_, value)
@@ -47,61 +49,62 @@ actionsPane actions evaluationResult =
div_
[ h2_ [ text "Actions" ]
, p_ [ text "This is your action sequence. Click 'Evaluate' to run these actions against a simulated blockchain." ]
, div
, Keyed.div
[ classes [ ClassName "actions", row ] ]
(Array.cons addWaitActionPane (mapWithIndex actionPane actions))
(Array.snoc (mapWithIndex actionPane actions) addWaitActionPane)
, br_
, row_ [ evaluateActionsPane evaluationResult actions ]
, br_
, div_ [ small_ [ text "Run this set of actions against a simulated blockchain." ] ]
]
actionPane :: forall p. Int -> Action -> HTML p Query
actionPane :: forall p. Int -> Action -> Tuple String (HTML p Query)
actionPane index action =
col4_
[ div [ class_ $ ClassName "action" ]
[ div [ class_ card ]
[ cardBody_
[ div
[ classes [ badge, badgePrimary, ClassName "badge-action" ] ]
[ text $ show (index + 1) ]
, button
[ classes [ btn, btnInfo, pullRight ]
, onClick $ input_ $ RemoveAction index
]
[ icon Close ]
, case action of
(Action {mockWallet, functionSchema}) ->
div_
[ h3_
[ walletIdPane (view (_MockWallet <<< _wallet) mockWallet)
, text ": "
, text $ unwrap $ _.functionName $ unwrap functionSchema
]
, actionArgumentForm index $ _.argumentSchema $ unwrap functionSchema
]
(Wait {blocks}) ->
div_
[ h3_ [ text "Wait" ]
, row_
[ col_ [ text "Time" ]
, col_ [
input
[ type_ InputNumber
, value $ show blocks
, placeholder "Int"
, onValueChange $ map (HQ.action <<< SetWaitTime index) <<< Int.fromString
]
Tuple (show index) $
col4_
[ div [ class_ $ ClassName "action" ]
[ div [ class_ card ]
[ cardBody_
[ div
[ classes [ badge, badgePrimary, ClassName "badge-action" ] ]
[ text $ show (index + 1) ]
, button
[ classes [ btn, btnInfo, pullRight ]
, onClick $ input_ $ RemoveAction index
]
[ icon Close ]
, case action of
(Action {mockWallet, functionSchema}) ->
div_
[ h3_
[ walletIdPane (view (_MockWallet <<< _wallet) mockWallet)
, text ": "
, text $ unwrap $ _.functionName $ unwrap functionSchema
]
]
]
, actionArgumentForm index $ _.argumentSchema $ unwrap functionSchema
]
(Wait {blocks}) ->
div_
[ h3_ [ text "Wait" ]
, row_
[ col_ [ text "Time" ]
, col_ [
input
[ type_ InputNumber
, value $ show blocks
, placeholder "Int"
, onValueChange $ map (HQ.action <<< SetWaitTime index) <<< Int.fromString
]
]
]
]
]
, cardFooter_
[ validationErrorsPane action
]
]
, cardFooter_
[ validationErrorsPane action
]
]
]
]
validationErrorsPane :: forall p i. Action -> HTML p i
validationErrorsPane action =
@@ -160,21 +163,22 @@ actionArgumentField _ Unknowable =
div_ [ text "Unsupported."
]
addWaitActionPane :: forall p. HTML p Query
addWaitActionPane :: forall p. Tuple String (HTML p Query)
addWaitActionPane =
col4_
[ div
[ class_ $ ClassName "add-wait-action" ]
[ div [ class_ card
, onClick $ input_ $ AddWaitAction 10
]
[ cardBody_
[ icon Plus
, div_ [ text "Add Wait Action" ]
Tuple "add-wait" $
col4_
[ div
[ class_ $ ClassName "add-wait-action" ]
[ div [ class_ card
, onClick $ input_ $ AddWaitAction 10
]
]
]
]
[ cardBody_
[ icon Plus
, div_ [ text "Add Wait Action" ]
]
]
]
]
evaluateActionsPane :: forall p. RemoteData AjaxError Blockchain -> Array Action -> HTML p Query
evaluateActionsPane evaluationResult actions =
@@ -15,7 +15,7 @@ import Data.Maybe (Maybe(Nothing))
import Data.Newtype (unwrap)
import Data.Tuple (Tuple, fst, snd)
import Data.Tuple.Nested ((/\))
import ECharts.Commands (formatterString, addItem, addLink, axisLine, axisType, backgroundColor, bar, buildItems, buildLinks, color, itemStyle, items, label, lineStyle, name, nameGap, nameLocationMiddle, nameRotate, normal, sankey, series, sourceName, splitLine, targetName, textStyle, tooltip, trigger, value, xAxis, yAxis) as E
import ECharts.Commands (addItem, addLink, axisLine, axisType, backgroundColor, bar, buildItems, buildLinks, color, colors, formatterString, itemStyle, items, label, lineStyle, name, nameGap, nameLocationMiddle, nameRotate, normal, sankey, series, sourceName, splitLine, targetName, textStyle, tooltip, trigger, value, xAxis, yAxis) as E
import ECharts.Extras (focusNodeAdjacencyAllEdges, orientVertical, positionBottom)
import ECharts.Monad (CommandsT,DSL) as E
import ECharts.Types (AxisType(Value, Category), TooltipTrigger(ItemTrigger), numItem, strItem) as E
@@ -114,10 +114,14 @@ mockchainChartOptions ::
forall m.
Monad m
=> FlowGraph
-> E.CommandsT (series :: I, tooltip :: I) m Unit
-> E.CommandsT (series :: I, tooltip :: I, color :: I) m Unit
mockchainChartOptions (FlowGraph {flowGraphLinks, flowGraphNodes}) = do
E.tooltip $ do
E.trigger E.ItemTrigger
E.colors [ rgb 55 68 106
, rgb 54 93 72
, rgb 94 50 62
]
E.series do
E.sankey do
focusNodeAdjacencyAllEdges
@@ -1,13 +1,15 @@
module Wallet where
import Bootstrap (btn, btnSecondary, btnSmall, card, cardBody_, cardTitle_, card_, col4_, col_, pullRight, row_)
import Bootstrap (btn, btnSecondary, btnSmall, card, cardBody_, cardTitle_, card_, col4_, col_, pullRight, row, row_)
import Data.Array (mapWithIndex)
import Data.Array as Array
import Data.Int as Int
import Data.Lens (view)
import Data.Newtype (unwrap)
import Data.Tuple (Tuple(..))
import Halogen (HTML)
import Halogen.HTML (ClassName(ClassName), button, div, div_, h2_, h3_, h4_, input, p_, span, text)
import Halogen.HTML.Elements.Keyed as Keyed
import Halogen.HTML.Events (input_, onClick, onValueChange)
import Halogen.HTML.Properties (InputType(..), class_, classes, placeholder, type_, value)
import Halogen.Query as HQ
@@ -26,61 +28,65 @@ walletsPane schemas mockWallets =
div_
[ h2_ [ text "Wallets" ]
, p_ [ text "Add some initial wallets, then click one of your function calls inside the wallet to begin a chain of actions." ]
, row_ (Array.cons addWalletPane (mapWithIndex (walletPane schemas) mockWallets))
, Keyed.div
[ class_ row ]
(Array.snoc (mapWithIndex (walletPane schemas) mockWallets) addWalletPane)
]
walletPane ::
forall p.
Array (FunctionSchema SimpleArgumentSchema)
-> Int
-> MockWallet
-> HTML p Query
-> Tuple String (HTML p Query)
walletPane schemas index mockWallet =
col4_
[ div
[class_ $ ClassName "wallet"]
[ card_
[ cardBody_
[ button
[ classes [ btn, pullRight ]
, onClick $ input_ $ RemoveWallet index
]
[ icon Close ]
, cardTitle_ [ h3_ [ walletIdPane (view (_MockWallet <<< _wallet) mockWallet) ] ]
, row_
[ col_ [ text "ADA" ]
, col_ [
input
[ type_ InputNumber
, value $ show $ view (_MockWallet <<< _balance) mockWallet
, placeholder "Int"
, onValueChange $ map (HQ.action <<< SetBalance (view (_MockWallet <<< _wallet) mockWallet)) <<< Int.fromString
]
Tuple (show index) $
col4_
[ div
[class_ $ ClassName "wallet"]
[ card_
[ cardBody_
[ button
[ classes [ btn, pullRight ]
, onClick $ input_ $ RemoveWallet index
]
]
, h4_ [ text "Available functions" ]
, div_
(actionButton mockWallet <$> schemas)
]
]
]
]
[ icon Close ]
, cardTitle_ [ h3_ [ walletIdPane (view (_MockWallet <<< _wallet) mockWallet) ] ]
, row_
[ col_ [ text "ADA" ]
, col_ [
input
[ type_ InputNumber
, value $ show $ view (_MockWallet <<< _balance) mockWallet
, placeholder "Int"
, onValueChange $ map (HQ.action <<< SetBalance (view (_MockWallet <<< _wallet) mockWallet)) <<< Int.fromString
]
]
]
, h4_ [ text "Available functions" ]
, div_
(actionButton mockWallet <$> schemas)
]
]
]
]
addWalletPane :: forall p. HTML p Query
addWalletPane :: forall p. Tuple String (HTML p Query)
addWalletPane =
col4_
[ div
[ class_ $ ClassName "add-wallet" ]
[ div [ class_ card
, onClick $ input_ AddWallet
]
[ cardBody_
[ icon Plus
, div_ [ text "Add Wallet" ]
Tuple "add-wallet" $
col4_
[ div
[ class_ $ ClassName "add-wallet" ]
[ div [ class_ card
, onClick $ input_ AddWallet
]
]
]
]
[ cardBody_
[ icon Plus
, div_ [ text "Add Wallet" ]
]
]
]
]
actionButton ::
forall p.

0 comments on commit 02a3121

Please sign in to comment.