Angular Material Layout

by defuseer

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
    <form name="myForm">
      <md-datepicker ng-model="myDate" md-placeholder="Enter date" ng-change="sumByDate(myDate)"></md-datepicker>
      {{myDate}}
      <tt>model = {{data.model}}</tt>
      <br/>
      <hr/>
    </form>
    <form name="myForm2">
      <md-datepicker ng-model="myDateUser" md-placeholder="Enter date"></md-datepicker>
      {{myDate}}
      <md-input-container flex="50">
        <label for="repeatSelect"> Select user: </label>
        <md-select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-change="sum(data.model)">
          <md-option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.name}}</md-option>
        </md-select>
      </md-input-container>
      <tt>model = {{data.model}}</tt>
      <br/>
      <hr/>
    </form>
    <form name="myForm3">
      <md-input-container flex="50">
        <label for="repeatSelect"> Select user: </label>
        <md-select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-change="sumUser(data.model)">
          <md-option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.name}}</md-option>
        </md-select>
      </md-input-container>
      <tt>model = {{data.model}}</tt>
      <br />
      <hr />
    </form>
    <md-table-container>
      <table md-table>
        <thead md-head>
          <tr md-row>
            <th md-column>Dept</th>
            <th md-column>Total...

JavaScript

angular.module('ngrepeatSelect', ['ngMaterial'])
  .controller('ExampleController', function($scope, $filter) {
    var data = [{
      id: "1",
      user: "John Doe",
      dept: "test",
      date: "2017-03-02",
      task_time: "83"
    }, {
      id: "2",
      user: "Mark Doe",
      dept: "test",
      date: "2017-02-02",
      task_time: "41"
    }, {
      id: "3",
      user: "Zac Doe",
      dept: "other",
      date: "2017-02-04",
      task_time: "12"
    }, {
      id: "4",
      user: "Zac Doe",
      dept: "test",
      date: "2017-03-02",
      task_time: "41"
    }, {
      id: "5",
      user: "Zac Doe",
      dept: "test",
      date: "2017-03-02",
      task_time: "41"
    }, {
      id: "6",
      user: "Zac Doe",
      dept: "test2",
      date: "2017-03-02",
      task_time: "41"
    }, {
      id: "7",
      user: "John Doe",
      dept: "test",
      date: "2017-01-02",
      task_time: "41"
    }, {
      id: "8",
      user: "Zac Doe",
      dept: "test",
      date: "2017-01-01",
      task_time: "41"
    }, {
      id: "9",
      user: "John Doe",
      dept: "tests",
      date: "2017-02-12",
      task_time: "41"
    }, {
      id: "10",
      user: "Zac Doe",
      dept: "test2",
      date: "2017-02-13",
      task_time: "53"
    }];

    var totalPerDept = [];

    angular.forEach(data, function(item) {
      var index = findWithAttr(totalPerDept, 'dept', item.dept);

      if (index < 0) {
        totalPerDept.push({
          dept: item.dept,
          total: checkDate(item) ? parseFloat(item.task_time) : 0
        });
      } else {
        if (checkDate(item)) {
          totalPerDept[index].total += parseFloat(item.task_time);
        }
      }
    });
    $scope.tests = totalPerDept;

    function checkDate(item) {
      var date = new Date(item.date);
      var currDate = new Date();
      return (currDate.getMonth() === date.getMonth() && currDate.getYear() === date.getYear());
    }

    function findWithAttr(array,...