Peek Frontend Coding Challenge

application.controller\.js

import Controller from '@ember/controller';

export default Controller.extend({
  dates: ['2021-06-04'], // '2021-06-05', '2021-06-06']
});

application.route\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

application.template\.hbs

<h1>Peek Calendar</h1>
<br>
{{#each this.dates as |date|}}
  <div>
    {{#link-to 'date' date}}
      {{date}}
    {{/link-to}}
  </div>
{{/each}}
<br>
<br>
{{outlet}}

date.controller\.js

import Controller from '@ember/controller';

export default Controller.extend({
});

date.route\.js

import Route from '@ember/routing/route';

export default Route.extend({
  model({ iso_date }) {
    return this.store.query('timeslot', { date: iso_date });
  }
});

date.template\.hbs

<!-- Replace this with your date view -->
<div>Number of timeslots: {{this.model.length}}</div>

mirage.config\.js

import { Response } from 'ember-cli-mirage';

export default function() {
  window.server = this;

  this.get('/timeslots', function (schema, request) {
    const { date } = request.queryParams;
    
    return schema.timeslots.where({ date: date });
  });
};

mirage.models.timeslot\.js

import { Model } from 'ember-cli-mirage'

export default Model.extend({
})

mirage.scenarios.default\.js

export default function(server) {
  
  // Day 1 timeslots
  server.create('timeslot',{
    date: '2021-06-04',
    startTime: '10:00',
    endTime: '11:00',
    activityName: 'Activity 1',
    availableSpots: 10,
    bookedCount: 0,
    maxGuests: 10
  });
  server.create('timeslot',{
    date: '2021-06-04',
    startTime: '11:00',
    endTime: '12:00',
    activityName: 'Activity 1',
    availableSpots: 7,
    bookedCount: 3,
    maxGuests: 10
  });
  server.create('timeslot',{
    date: '2021-06-04',
    startTime: '12:30',
    endTime: '14:00',
    activityName: 'Activity 2',
    availableSpots: 14,
    bookedCount: 1,
    maxGuests: 15
  });
  
  
  // Day 2 timeslots
  server.create('timeslot',{
    date: '2021-06-05',
    startTime: '10:00',
    endTime: '11:00',
    activityName: 'Activity 1',
    availableSpots: 9,
    bookedCount: 1,
    maxGuests: 10
  });
  server.create('timeslot',{
    date: '2021-06-05',
    startTime: '10:00',
    endTime: '12:00',
    activityName: 'Activity 2',
    availableSpots: 0,
    bookedCount: 15,
    maxGuests: 15
  });
  server.create('timeslot',{
    date: '2021-06-05',
    startTime: '11:30',
    endTime: '13:00',
    activityName: 'Activity 2',
    availableSpots: 10,
    bookedCount: 5,
    maxGuests: 15
  });
  server.create('timeslot',{
    date: '2021-06-05',
    startTime: '12:30',
    endTime: '14:00',
    activityName: 'Activity 1',
    availableSpots: 0,
    bookedCount: 10,
    maxGuests: 10
  });
  server.create('timeslot',{
    date: '2021-06-05',
    startTime: '15:00',
    endTime: '16:30',
    activityName: 'Activity 1',
    availableSpots: 8,
    bookedCount: 2,
    maxGuests: 10
  });
  
  
  // Day 3 timeslots
  server.create('timeslot',{
    date: '2021-06-06',
    startTime: '09:00',
    endTime: '12:00',
    activityName: 'Activity 1',
    availableSpots: 0,
    bookedCount: 10,
    maxGuests: 10
  });
  server.create('timeslot',{
    date: '2021-06-06',
    startTime: '10:00',
    endTime: '14:00',
    activityName: 'Activity 3',
    availableSpots: 5,
    bookedCount: 0,
    maxGuests: 5
  });
  server.create('timeslot',{
    date: '2021-06-06',
    startTime: '11:00',
    endTime: '12:00',
    activityName: 'Activity 2',
    availableSpots: 13,
    bookedCount: 2,
    maxGuests: 15
  });
  server.create('timeslot',{
    date: '2021-06-06',
    startTime: '13:00',
    endTime: '16:30',
    activityName: 'Activity 2',
    availableSpots: 15,
    bookedCount: 0,
    maxGuests: 15
  });
  server.create('timeslot', {
    date: '2021-06-06',
    startTime: '13:00',
    endTime: '16:00',
    activityName: 'Activity 1',
    availableSpots: 4,
    bookedCount: 6,
    maxGuests: 10
  });
  server.create('timeslot',{
    date: '2021-06-06',
    startTime: '16:30',
    endTime: '18:00',
    activityName: 'Activity 3',
    availableSpots: 3,
    bookedCount: 2,
    maxGuests: 5
  });
}

models.timeslot\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
/*
import { belongsTo, hasMany } from 'ember-data/relationships';
*/

export default class extends Model {
  // date the activity timeslot takes place
  @attr('string') date;
  
  // hh:mm formatted timeslot start time
  @attr('string') startTime;
  
  // hh:mm formatted timeslot end time
  @attr('string') endTime;
  
  // name of the activity the timeslot is for
  @attr('string') activityName;
  
  // number of spots booked for the activity timeslot
  @attr('number') bookedCount; 
  
  // number of spots available for the timeslot
  @attr('number') availableSpots;
  
  // max number of guests allowed on this timeslot
  @attr('number') maxGuests; 
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
   this.route('date', { path: '/date/:iso_date' });
});

export default Router;

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

twiddle\.json

{
  "version": "0.10.7",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0",
    "ember-cli-mirage": "1.1.8",
    "ember-bootstrap": "3.1.4"
   }
}