<!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 —
{{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)"
}
}]
};
}])
}());