Vue

by Erik

HTML

<script src="https://unpkg.com/vuex"></script>
<div id="app">
  
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

.day-selector {
  margin: 1em;
}

.columns {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  padding: 0.5em;
  border: 1px solid #ccc;
  width: 8em;
}

.column-header {
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0.5em;
}

.timeslot {
  margin: .5em 0;
}

Vue

const columns = [
  {
		nr: 'c01',
    day: 'd01',
    instructor: 'Mike',
    timeslots: [
      {
        time: '09:00',
        position: 'c01t09:00'
      },
      {
        time: '12:00',
        position: 'c01t12:00'
      }
    ]
  },
  {
		nr: 'c02',
    day: 'd01',
    instructor: 'Suzy',
    timeslots: [
      {
        time: '09:00',
        position: 'c02t09:00'
      },
      {
        time: '12:00',
        position: 'c02t12:00'
      }
    ]
  },
  {
		nr: 'c01',
    day: 'd02',
    instructor: 'Mike',
    timeslots: [
      {
        time: '09:00',
        position: 'c01t09:00'
      },
      {
        time: '12:00',
        position: 'c01t12:00'
      }
    ]
  },
  {
		nr: 'c02',
    day: 'd02',
    instructor: 'Carol',
    timeslots: [
      {
        time: '09:00',
        position: 'c02t09:00'
      },
      {
        time: '12:00',
        position: 'c01t12:00'
      }
    ]
  }
]

const appointments = [
  {
    id: '001',
    day: 'd01',
    position: 'c01t09:00',
    name: 'Jim'
  },
  {
    id: '002',
    day: 'd02',
    position: 'c01t12:00',
    name: 'Cathy'
  },
  {
    id: '003',
    day: 'd01',
    position: 'c01t12:00',
    name: 'Flint'
  },
  {
    id: '004',
    day: 'd02',
    position: 'c02t09:00',
    name: 'Annie'
  },
  {
    id: '005',
    day: 'd02',
    position: 'c01t09:00',
    name: 'Steve'
  },
  {
    id: '006',
    day: 'd01',
    position: 'c02t12:00',
    name: 'Jeanette'
  },
  {
    id: '007',
    day: 'd01',
    position: 'c02t09:00',
    name: 'Bill'
  },
  {
    id: '008',
    day: 'd02',
    position: 'c02t12:00',
    name: 'Trix'
  }

]

const store = new Vuex.Store({
  state: {
    day: 'd01',
    columns: [],
    appointments: []
  },
  getters: {
    appointment: function(state, getters) {
      return function (position) {
      console.log('getter', state.appointments)
        let appointment = state.appointments.find(appointment => appointment.position === position )
        // && appointment.day ===...