<!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-lg dropdown-toggle dropdown-text" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-model="vm.selectedOption" ng-change="vm.sortBy()" ng-options="option for option in vm.options">
              <option value="" disabled="" selected="">Sort Events By</option>
            </select>
          </div>
        </div>
        <br>
        <div ng-repeat="event in vm.user.events">
          <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>


/* Styles go here */

(function() {
  
  angular
    .module('app', [])
    .controller('UsersController', [function() {
      
      var vm = this;
      vm.sortBy = sortBy;
      vm.sortDate = sortDate;
      vm.sortMeditation = sortMeditation;
      vm.sortMinutes = sortMinutes;
      
      vm.options = ["Date (Asc)", "Date (Desc)", "Meditation", "Minutes (Asc)", "Minutes (Desc)"]

      function sortBy() {
        if (vm.selectedOption === vm.options[0]) {
          vm.sortDate();
        } else if (vm.selectedOption === vm.options[1]) {
          vm.sortDate();
          vm.user.events.reverse();
        } else if (vm.selectedOption === vm.options[2]) {
          vm.sortMeditation();
        } else if (vm.selectedOption === vm.options[3]) {
          vm.sortMinutes();
        } else if (vm.selectedOption === vm.options[4]) {
          vm.sortMinutes();
          vm.user.events.reverse();
        }
      };

      function sortMinutes() {
        vm.user.events.sort((a, b) => parseInt(a.minutes) - parseInt(b.minutes))
      }

      function sortDate() {
        vm.user.events.sort((a, b) => (new Date(a.date)) - (new Date(b.date)));
      }

      function sortMeditation() {
        vm.user.events.sort((a, b) => {
          if (a.meditation.name < b.meditation.name) {
            return -1;
          } else if (a.meditation.name > b.meditation.name) {
            return 1;
          } else {
            let dateA = new Date(a.date);
            let dateB = new Date(b.date);

            if (dateA > dateB) {
              return 1;
            } else if (dateA < dateB) {
              return -1;
            } else {
              return 0;
            }
          }
        })
      }
       
       // 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)"
            }
          }]
          };
      
    }])
  
  
}());