Last active
November 1, 2019 06:08
-
-
Save bodhi/f2a7aa07a7ebed977aa272e1ea10b618 to your computer and use it in GitHub Desktop.
App&
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
App& | |
Content | |
Stores | |
pick store -> Categories | |
Categories | |
pick category -> Product List | |
back to store list -> Stores | |
Product List | |
choose product -> Product | |
back to categories -> Categories | |
Product | |
customise -> Customise | |
back to product list -> Product List | |
Customise | |
add to cart -> Product | |
cancel customise -> Product | |
Cart | |
Empty | |
# technically `add to cart` can only be triggered from `Product`, not here. The event here is to cause the transition when `add to cart` is triggered from `Product` | |
add to cart -> Item In Cart | |
Item In Cart | |
clear cart -> Empty | |
back to store list -> Empty | |
checkout -> Item In Cart | |
Checkout | |
Closed | |
checkout -> Open | |
Open | |
cancel checkout -> Closed | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function render(model){ | |
let current_state_name = model.active_states[0].name; | |
console.log("MODEL", model) | |
if (model.root.children[0].children[2].children[1].is_active) { | |
// in Checkout | |
return $("div", $("h1", "Check Out"), $("button", { onClick: () => model.emit("cancel checkout") }, "cancel")); | |
} | |
let cart = $("div"); | |
if (model.root.children[0].children[1].children[1].is_active) { | |
cart = $("div", $("h1", "Cart"), $("button", {onClick: () => model.emit("checkout")}, "checkout"), $("button", {onClick: () => model.emit("clear cart")}, "empty cart")); | |
} | |
let content = model.root.children[0].children[0].children.find(s => s.is_active).name; | |
let picker = (label, event = label) => $("li", { onClick: () => model.emit(event), style: {"text-decoration": "underline", "color": "blue", "cursor": "pointer"}}, label); | |
let contentViews = { | |
Stores: $("ul", picker("store 1", "pick store"), picker("store 2", "pick store")), | |
Categories: $("ul", picker("food", "pick category"), picker("drink", "pick category"), picker("back to store list")), | |
"Product List": $("ul", picker("product 1", "choose product"), picker("product 2", "choose product"), picker("back to categories")), | |
Product: $("ul", picker("customise", "customise"), picker("back to products", "back to product list")), | |
Customise: $("ul", picker("add to cart", "add to cart"), picker("back", "cancel customise")), | |
} | |
return $("div", $("h1", | |
content), contentViews[content], cart); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment