Product Availability*

0000 Statepen

View an interactive version of this gist on statepen.

SketchSystems.spec

Product Availability*
  
  # An inventory check might be triggered by a page load or refresh.
  check inventory -> Product Availability
  
  # The state while waiting for a response from the server.
  Check inventory*
    
    # Possible responses from the server.
    in stock -> In Stock
    backordered -> Backordered
    special order -> Special Order
    nil -> No Data
  
  No Data
    
  In Stock
  
  Backordered
  
  Special Order

SketchSystems_prototype.js

function availability(state){
  var urls = new Map('Check inventory', "http://www.nickivance.com/img/loading.png",
                     'No Data', "http://www.nickivance.com/img/No_Data.png"
  if (state == 'Check inventory') {
    return $('img',
           {src: "http://www.nickivance.com/img/loading.png",
           style: {width: "400px"}})
  }
  if (state == 'No Data') {
    return $('img',
           {src: "http://www.nickivance.com/img/No_Data.png",
           style: {width: "400px"}})
  }
  if (state == 'In Stock') {
    return $('img',
           {src: "http://www.nickivance.com/img/In Stock.png",
           style: {width: "400px"}})
  }
  if (state == 'Backordered') {
    return $('img',
           {src: "http://www.nickivance.com/img/Backordered.png",
           style: {width: "400px"}})
  }
  if (state == 'Special Order') {
    return $('img',
           {src: "http://www.nickivance.com/img/Special_Order.png",
           style: {width: "400px"}})
  }
}

//A function that draws all of our lights, based on the statechart
function render({active_states}){
  var active_state = active_states[0].name;
  return $('div', {style: {display: 'flex', 
                           flexDirection: 'column',
                           paddingTop: `20px`,
                           justifyContent: 'center',
                           height: `100%`}},
           $('img', {src: "http://www.nickivance.com/img/Base.png",
                     style: {width: "400px"}}),
    availability(active_state)
  )}