<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

  </head>

  <body ng-app="app">
    <div ng-controller="UsersController as vm">
      <div class="container">
        <div class="col-md-3 col-md-offset-9 dropdown-meditation">
          <div class="button-group">
            <select class="btn btn-default btn-md dropdown-toggle dropdown-text" ng-model="vm.option">
              <option value="" disabled selected>Sort Events By</option>
              <option value="date">By Date (Asc)</option>
              <option value="-date">By Date (Desc)</option>
              <option value="meditation.name">By Meditation</option>
              <option value="minutes">By Minutes</option>
            </select>
          </div>
        </div>
        <br>
        <div ng-repeat="event in vm.user.events | filter: query | orderBy: vm.option">
          <p style="text-decoration: none">{{event.date | date: medium}} for {{event.minutes}} minutes &mdash;
        {{event.meditation.name}}</p>
        </div>
      </div>
    </div>
    
    
    <script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="script.js"></script>
  </body>

</html>
// Code goes here

/* Styles go here */

(function() {
  
  angular
    .module('app', [])
    .controller('UsersController', [function() {
      
      var vm = this;
      
      vm.option = "date";
      
      
       // This is a snippet of serialized JSON with nested associations
       // events is a joins table.  I originally used Rails as an API on the backend 
       // with Active Model Serializer to create the JSON and associations
      vm.user = {
        id: 1,
        username: "foobar",
        events: [
          {
            id: 38,
            user_id: 1,
            meditation_id: 3,
            minutes: 12,
            date: "2017-03-07T03:40:07.324Z",
            meditation: {
              id: 3,
              name: "Zen Meditation"
            }
          },
          {
            id: 40,
            user_id: 1,
            meditation_id: 1,
            minutes: 25,
            date: "2017-03-07T03:43:36.126Z",
            meditation: {
              id: 1,
              name: "Mindfulness"
            }
          },
          {
            id: 41,
            user_id: 1,
            meditation_id: 1,
            minutes: 10,
            date: "2017-03-07T22:37:05.614Z",
            meditation: {
              id: 1,
              name: "Mindfulness"
            }
          },
          {
            id: 42,
            user_id: 1,
            meditation_id: 6,
            minutes: 26,
            date: "2017-03-15T21:41:32.213Z",
            meditation: {
              id: 6,
              name: "Transcendental Meditation (TM)"
            }
          },
            {
            id: 44,
            user_id: 1,
            meditation_id: 2,
            minutes: 24,
            date: "2017-03-24T21:54:18.976Z",
            meditation: {
              id: 2,
              name: "Metta (Loving-Kindness)"
            }
          },
          {
            id: 45,
            user_id: 1,
            meditation_id: 4,
            minutes: 55,
            date: "2017-03-07T23:19:19.244Z",
            meditation: {
              id: 4,
              name: "Qigong (Chi Gong)"
            }
          },
          {
            id: 46,
            user_id: 1,
            meditation_id: 2,
            minutes: 34,
            date: "2017-03-08T00:18:44.205Z",
            meditation: {
              id: 2,
              name: "Metta (Loving-Kindness)"
            }
          },
          {
            id: 47,
            user_id: 1,
            meditation_id: 2,
            minutes: 2,
            date: "2017-03-02T00:19:51.818Z",
            meditation: {
              id: 2,
              name: "Metta (Loving-Kindness)"
            }
          },
          {
            id: 53,
            user_id: 1,
            meditation_id: 1,
            minutes: 13,
            date: "2017-03-08T01:26:52.618Z",
            meditation: {
              id: 1,
              name: "Mindfulness"
            }
          },
          {
            id: 54,
            user_id: 1,
            meditation_id: 1,
            minutes: 15,
            date: "2017-03-15T00:27:42.885Z",
            meditation: {
              id: 1,
              name: "Mindfulness"
            }
          },
          {
            id: 55,
            user_id: 1,
            meditation_id: 4,
            minutes: 28,
            date: "2017-03-08T01:29:40.013Z",
            meditation: {
              id: 4,
              name: "Qigong (Chi Gong)"
            }
          },
          {
            id: 56,
            user_id: 1,
            meditation_id: 2,
            minutes: 2,
            date: "2017-04-08T00:37:57.805Z",
            meditation: {
              id: 2,
              name: "Metta (Loving-Kindness)"
            }
          }]
          };
      
    }])
  
  
}());