derkonzert community

SketchSystems.spec

derkonzert community

  View Concerts
    add-new -> Add Concert
  Add Concert
    Enter Name
      enter-name -> Enhance Concert Data
      enter-existing-name -> Concert might already be present
    Enhance Concert Data
      enhance-concert-data -> Enhance Concert Data
      submit-concert -> Concert Added
    Concert Added
      go-to-list -> View Concerts
    Concert might already be present
      is-duplicate -> View Concerts
      is-not-present -> Enhance Concert Data

SketchSystems_prototype.js

function render(model){
  return $("div",
           {style: {display: "flex", alignItems: 'center', justifyContent: 'center'}},
           renderState(model));
}
           
function renderState(model) {
  let stateName = model.active_states[0].name;  
  switch (stateName) {
    case 'View Concerts':
        return $('ul', 
          $('li', 'Concert no1'),
          $('li', 'Concert no2'),
          $('li', 'Concert no3'),
          $('li', $('button', { onClick: () => model.emit('add-new') },'Add missing concert')))
    case 'Enter Name':
      return $('div',
               $('input', {placeholder: 'Concert name'}),
               $('button', {onClick: () => model.emit('enter-existing-name')}, 'Enter (existing)'),
              $('button', {onClick: () => model.emit('enter-name')}, 'Enter (non-existing)'))
    case 'Enhance Concert Data':
      return $('div',
         $('p', 'Add some more info, if you like'),
         $('input', { type: 'text', placeholder: 'Location' }),
         $('input', { type: 'date', placeholder: 'Date' }),
         $('button', { type: 'button', onClick: () => model.emit('submit-concert')}, 'Save Concert'))
    case 'Concert might already be present':
      return $('div',
         $('h2', 'We think, this concert already exists in our database:'),
         $('pre', '{Name, location and date of existing concert}'),
         $('button', { type: 'button', onClick: () => model.emit('is-duplicate')}, 'Abort, It\'s a duplicate'),
         $('button', { type: 'button', onClick: () => model.emit('is-not-present')}, 'Nope, I meant a different event'))
    case 'Concert Added':
      return $('div',
         $('h1', 'Yeah, thanks for your submission!'),
              $('button', { onClick: () => model.emit('go-to-list')}, 'Back to the list'))
  }
}