Baby CCP

SketchSystems.spec

Baby CCP
  Non-Routable
    Logged Out
      log in -> Offline
    Offline
      become available -> Available
      log out -> Logged Out
    On A Call
      terminate call -> After Call Work
      go offline -> Offline
    After Call Work
      become available -> Available
      go offline -> Offline
      log out -> Logged Out
  Routable
    Available
      go offline -> Offline
      log out -> Logged Out
      inbound_call -> Ringing
    Ringing
      pick up -> On A Call
      reject -> Offline
  

SketchSystems_prototype.js

function emit_and_log(model, transition) {
  // console.log(`Event ${transition}`)
  model.emit(transition)
}

function button(model, name, transition, style={}) {
  const transitions = model.active_states[0].transitions.map(t=>t.event_name);
  
  button_disabled = ! transitions.includes(transition);
  
  object_params = {
     disabled: button_disabled,
     onClick: function() {emit_and_log(model, transition)}
  }
  
  const all_object_params = Object.assign(object_params, {style:style})
  
  return $("button", all_object_params, name)
}


function status_indicator(model) {
  let object_params = {}
  return $("div", {}, 
     $("span", object_params, model.active_states[0].parent.name),
     $("span", {}, " / "),
     $("span", object_params, model.active_states[0].name),
   )  
}

function render(model){
  let current_state_name = model.active_states[0].name;
  //console.log(model);
  return $("div",
           {style: {color: "darkBlue"}},
           
           status_indicator(model),
           button(model, "Log In", "log in"),
           button(model, "Log Out", "log out"),
           
           button(model, "Go Available", "become available"),
           
           button(model, "Pick Up", "pick up", {backgroundColor:"#c3ffba"}),
           button(model, "Reject and go unavailable", "reject", {backgroundColor:"#ffbaba"}),
           
           button(model, "End Call, and follow-up", "terminate call", {backgroundColor:"#ffbaba"}),
           
           
           
           

          );
}