Add material design and infinite scroll.

app.js

@@ -5,13 +5,13 @@ var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
 
-var routes = require('./routes/index');
-var users = require('./routes/users');
+var routes = require('./server/routes/index');
+var users = require('./server/routes/users');
 
 var app = express();
 
 // view engine setup
-app.set('views', path.join(__dirname, 'views'));
+app.set('views', path.join(__dirname, './client/public/views'));
 app.set('view engine', 'jade');
 
 // uncomment after placing your favicon in /public
@@ -20,7 +20,7 @@ app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, './client','public')));
 
 app.use('/', routes);
 app.use('/users', users);

client/public/javascripts/angular-date-picker.js

@@ -0,0 +1,157 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([ 'module', 'angular' ], function (module, angular) {
+            module.exports = factory(angular);
+        });
+    } else if (typeof module === 'object') {
+        module.exports = factory(require('angular'));
+    } else {
+        if (!root.mp) {
+            root.mp = {};
+        }
+
+        root.mp.datePicker = factory(root.angular);
+    }
+}(this, function (angular) {
+    'use strict';
+
+    return angular.module('mp.datePicker', []).directive('datePicker', [ '$window', '$locale', function ($window, $locale) {
+        // Introduce custom elements for IE8
+        $window.document.createElement('date-picker');
+
+        var tmpl = ''
++ '<div class="angular-date-picker">'
++ '    <div class="_month">'
++ '        <button type="button" class="_previous" ng-click="changeMonthBy(-1)">&laquo;</button>'
++ '        <span title="{{ months[month].fullName }}">{{ months[month].shortName }}</span> {{ year }}'
++ '        <button type="button" class="_next" ng-click="changeMonthBy(1)">&raquo;</button>'
++ '    </div>'
++ '    <div class="_days" ng-click="pickDay($event)">'
++ '        <div class="_day-of-week" ng-repeat="dayOfWeek in daysOfWeek" title="{{ dayOfWeek.fullName }}">{{ dayOfWeek.firstLetter }}</div>'
++ '        <div class="_day -padding" ng-repeat="day in leadingDays">{{ day }}</div>'
++ '        <div class="_day -selectable" ng-repeat="day in days" ng-class="{ \'-selected\': (day === selectedDay), \'-today\': (day === today) }">{{ day }}</div>'
++ '        <div class="_day -padding" ng-repeat="day in trailingDays">{{ day }}</div>'
++ '    </div>'
++ '</div>'
+        ;
+
+        return {
+            restrict: 'AE',
+            template: tmpl,
+            replace: true,
+            require: '?ngModel',
+            scope: {
+                onDateSelected: '&',
+                formatDate: '=', // @todo breaking change: change to & to allow use of date filter directly
+                parseDate: '=' // @todo change to &
+            },
+
+            link: function ($scope, $element, $attributes, ngModel) {
+                var selectedDate = null,
+                    days = [], // Slices of this are used for ngRepeat
+                    months = [],
+                    daysOfWeek = [],
+                    firstDayOfWeek = $locale.DATETIME_FORMATS.FIRSTDAYOFWEEK || 0;
+
+                for (var i = 1; i <= 31; i++) {
+                    days.push(i);
+                }
+
+                for (var i = 0; i < 12; i++) {
+                    months.push({
+                        fullName: $locale.DATETIME_FORMATS.MONTH[i],
+                        shortName: $locale.DATETIME_FORMATS.SHORTMONTH[i]
+                    });
+                }
+
+                for (var i = 0; i < 7; i++) {
+                    var day = $locale.DATETIME_FORMATS.DAY[(i + firstDayOfWeek) % 7];
+
+                    daysOfWeek.push({
+                        fullName: day,
+                        firstLetter: day.substr(0, 1)
+                    });
+                }
+
+                $scope.months = months;
+                $scope.daysOfWeek = daysOfWeek;
+
+                function setYearAndMonth(date) {
+                    $scope.year = date.getFullYear();
+                    $scope.month = date.getMonth();
+
+                    var now = new Date();
+
+                    $scope.today = now.getFullYear() === $scope.year && now.getMonth() === $scope.month
+                        ? now.getDate()
+                        : null;
+
+                    $scope.selectedDay = selectedDate
+                            && selectedDate.getFullYear() === $scope.year
+                            && selectedDate.getMonth() === $scope.month
+                        ? selectedDate.getDate()
+                        : null;
+
+                    var firstDayOfMonth = new Date($scope.year, $scope.month, 1),
+                        lastDayOfMonth = new Date($scope.year, $scope.month + 1, 0),
+                        lastDayOfPreviousMonth = new Date($scope.year, $scope.month, 0),
+                        daysInMonth = lastDayOfMonth.getDate(),
+                        daysInLastMonth = lastDayOfPreviousMonth.getDate(),
+                        dayOfWeek = firstDayOfMonth.getDay(),
+                        leadingDays = (dayOfWeek - firstDayOfWeek + 7) % 7 || 7; // Ensure there are always leading days to give context
+
+                    $scope.leadingDays = days.slice(- leadingDays - (31 - daysInLastMonth), daysInLastMonth);
+                    $scope.days = days.slice(0, daysInMonth);
+                    // Ensure a total of 6 rows to maintain height consistency
+                    $scope.trailingDays = days.slice(0, 6 * 7 - (leadingDays + daysInMonth));
+                }
+
+                // Default to current year and month
+                setYearAndMonth(new Date());
+
+                if (ngModel) {
+                    ngModel.$render = function () {
+                        selectedDate = ngModel.$viewValue
+                            ? $scope.parseDate
+                                ? $scope.parseDate(ngModel.$viewValue)
+                                : new Date(ngModel.$viewValue)
+                            : null;
+
+                        if (selectedDate && !isNaN(selectedDate)) {
+                            setYearAndMonth(selectedDate);
+                        } else {
+                            // Bad input, stay on current year and month, but reset selected date
+                            $scope.selectedDay = null;
+                        }
+                    };
+                }
+
+                $scope.changeMonthBy = function (amount) {
+                    var date = new Date($scope.year, $scope.month + amount, 1);
+                    setYearAndMonth(date);
+                };
+
+                $scope.pickDay = function (evt) {
+                    var target = angular.element(evt.target);
+
+                    if (target.hasClass('-selectable')) {
+                        var day = parseInt(target.text(), 10);
+
+                        $scope.selectedDay = day;
+                        selectedDate = new Date($scope.year, $scope.month, day);
+
+                        if (ngModel) {
+                            ngModel.$setViewValue(
+                                $scope.formatDate
+                                    ? $scope.formatDate(selectedDate)
+                                    : selectedDate.toLocaleDateString()
+                            );
+                        }
+
+                        $scope.onDateSelected();
+                    }
+                };
+            }
+        };
+    }]);
+}));

client/public/javascripts/app.js

@@ -0,0 +1,78 @@
+angular.module('nodeTodo', ['ngMaterial', 'datePicker', 'infinite-scroll'])
+
+    .controller('mainController', function ($scope, $http) {
+        $scope.formData = {};
+        $scope.todoAll = [];
+
+        function fillTodoData(data) {
+            data.forEach(function(item) {
+                    $scope.todoAll.push(item);
+            });
+        }
+
+        $http.get('/api/v1/todos')
+            .success(function (data) {
+               fillTodoData(data);
+            })
+            .error(function (error) {
+            });
+
+
+        $scope.deleteTodo = function (idx, todoID) {
+            console.log(idx);
+            $scope.todoAll.splice(idx,1);
+            $http.delete('/api/v1/todos/' + todoID)
+                .success(function (data) {
+                })
+                .error(function (data) {
+                })
+        };
+
+
+        $scope.createTodo = function () {
+            $scope.formData.complete = false;
+            $http.post('/api/v1/todos/',$scope.formData)
+                .success(function (data) {
+                    fillTodoData(data);
+                })
+                .error(function (error) {
+                })
+        };
+
+        $scope.completeTask = function (todoID, complete){
+
+            complete = complete ? false : true;
+
+
+
+            $http.post('/api/v1/todos/complete/', { id: todoID, new_value: complete } )
+                .success(function (data) {
+                })
+                .error(function () {
+                })
+        };
+
+        $scope.loadMoreAll = function() {
+            var offset = $scope.todoAll.length;
+            if (offset) {
+                offset--;
+            }
+            else {
+                return;
+            }
+            $http.post('/api/v1/todos/infinit', { offset: offset } )
+                .success(function (data) {
+                    data.forEach(function (item) {
+                        $scope.todoAll.push(item);
+                    })
+                })
+                .error(function () {
+                })
+        };
+
+        $scope.isCompleted = function( criteria ) {
+            return function( item ) {
+                return item.complete === criteria;
+            };
+        };
+    });