Add or Edit an Area

SketchSystems.spec

Add or Edit an Area
  Start - blank fields - Return & button are disabled
    user types a character -> checkInput running
    Start*
  No error shown - Return & button are enabled
    user types a character or presses Return or button -> checkInput running
    checkInput running
      number is blank -> Number is blank
      number is a duplicate -> Number is a duplicate
      number is badly formatted -> Number is badly formatted
      title is blank -> Title is blank
      everything is OK -> Input OK - Return & button are enabled - fields are green
    User is looking at valid input fields
      user presses Return or clicks button -> Submit & close
    Number is blank
      user presses return -> Error - Number is blank
    Number is a duplicate
      user presses return -> Error - Number is a duplicate
    Number is badly formatted
      user presses return -> Error - Number is badly formatted
    Title is blank
      user presses return -> Error - Title is blank
      
  Number error shown - Return & button are disabled
    user types a character -> checkInput running with Number error - user can not edit Title
    checkInput running with Number error - user can not edit Title
      number is blank -> Error - Number is blank
      number is a duplicate -> Error - Number is a duplicate
      number is badly formatted -> Error - Number is badly formatted
      number is OK -> No error shown - Return & button are enabled
      everything is OK -> Input OK - Return & button are enabled - fields are green
    Error - Number is blank
    Error - Number is a duplicate
    Error - Number is badly formatted
    
  Title error shown - Return & button are disabled
    user types a character -> checkInput running with Title error - user can not edit Number
    checkInput running with Title error - user can not edit Number
      title is blank -> Error - Title is blank
      title is OK -> No error shown - Return & button are enabled
      everything is OK -> Input OK - Return & button are enabled - fields are green
    Error - Title is blank
  
  Input OK - Return & button are enabled - fields are green
    user presses return -> Submit & close

  Submit & close

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}