angular js spring boot and adding one of value of associative array

Question

Im new to using angularjs, javascript and Spring boot. Please help me for this.

I'm trying to show work report rows in attendance page. When you click a row on one of the staff on a certain date, it shows the work report rows which shows the reports on what a staff did on a day.

Im trying to add the total workreport hours but I cant't add them and showing it on the browser.

This is how the webpage looks like(There are FROM & TO calendar to select the attendance data).

Attendance Page
-----------------
FROM   TO 

Date        |   Staff  |  Clock In   |  Clock Out  | Working Hours 
---------------------------------------------------------------
2016-09-01  |   Gwen   |    9:00     |    17:00    |  8

2016-09-01  |   Tom    |    9:00     |    18:00    |  8

2016-09-01  |   Mike   |    9:00     |    17:00    |  7

2016-09-02  |   Gwen   |    9:00     |    17:00    |  7

2016-09-02  |   Tom    |    9:00     |    18:00    |  8

2016-09-02  |   Mike   |    9:00     |    17:00    |  7

When you click a row above, it looks like this.

Date        |   Staff  |  Clock In   |  Clock Out  | Working Hours 
---------------------------------------------------------------
2016-09-01  |   Gwen   |    9:00     |    17:00    |  8
--------------------------------------------------------------

Title       |  Customer | Project |   Progress Rate | Hours
--------------------------------------------------------------

Sales       |    MAC    | iwatch2 |   50            | 5

HM          |  our firm |    SE   |   70            | 2

Consultant  |  our firm |    SE   |   70            | 1

And I would want to add hours. total work report Hours 8

This is the html file and I'm stuck on how to show total work hours for each attendance data's work reports like below.

---------------------------
total work hours  | 8

And this is the part of HTML.

<table st-table="attendanceList" st-safe-src="attendanceList" class="table">
<thead>
<tr class="header">
<th st-sort="date">DATE</th>
<th st-sort="staffData.name">STAFF</th>
<th st-sort="clockIn">IN</th>
<th st-sort="clockOut">OUT</th>
<th st-sort="workinghours">WORKHOURS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="attendance in attendanceList"  class="selectable"
      ng-click="showDetail(attendance.id)" ng-class="attendance.id == selectedAttendanceId ? 'selected' : ''">
<td>{{attendance.date | date: "yyyy-MM-dd"}}</td>
<td>{{attendance.staffData.name}}</td>
<td>{{attendance.clockIn | date: "HH:mm:ss"}}</td>
<td>{{attendance.clockOut | date: "HH:mm:ss"}}</td>
<td>{{attendance.workinghours | date: "HH:mm:ss"}}</td>
</tr>
<tr ng-repeat-end ng-show="attendance.id == selectedAttendanceId">
<td colspan="11">
<h5>WORKREPORT</h5>
<table class="table">
<thead>
<tr>
<th>TITLE</th>
<th>CUSTOMER</th>
<th>PROJECT</th>
<th>PROGRESS RATE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="workreport in workreportMap[attendance.staffDto.id][attendance.date]">
<td>{{workreport.title}}</td>
<td>{{workreport.customer}}</td>
<td>{{workreport.project}}</td>
<td>{{workreport.progress}}</td>
</tr>
<tr>
<td>TOTAL HOURS</td> <td>{{hours}}</td>
</tr>            
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

This is the controller. And I'm stuck on adding.

app.controller('attendanceCtl') -----

workbenchApp.controller('attendanceCtrl', ['$scope', '$modal', 'MessagesService', 'attendanceFactory','staffFactory', '・・・otherFatories',
    function($scope, $modal, MessagesService, attendanceFactory, staffFactory, otherFactories) {

    $scope.from = new Date($scope.today.getFullYear(), $scope.today.getMonth()-1, $scope.today.getDate());
    $scope.to = new Date($scope.today.getFullYear(), $scope.today.getMonth(), $scope.today.getDate(), 23, 59, 59);

    $scope.isLoading = true;
    $scope.borderDate = editLockFactory.getBorderDate($scope.today);


    getAttendance();

    function getAttendance() {
        $scope.isLoading = true;
        usSpinnerService.spin('attendanceSpinner');
        attendanceFactory.getfromto($scope.from, $scope.to)
        .success(function(attendanceList) {
            $scope.attendanceList = attendanceList;
            $scope.displayedAttendanceList = angular.copy($scope.attendanceList);

            workreportFactory.get($scope.from, $scope.to)
            .success(function(workreportList) {

                $scope.workreportList = workreportList;

                $scope.workreportMap = {};

                for (var i = 0; i < workreportList.length; i++) {

                    var report = workreportList[i];
                    var keydate = report.date;
                    var totalWorktime = 0;

                    if ($scope.workreportMap[report.staffData.id] == null) {
                        $scope.workreportMap[report.staffData.id] = [];
                    }

                    if (($scope.workreportMap[report.staffData.id][keydate] == null) ) {
                        $scope.workreportMap[report.staffData.id][keydate] = [];

                        $scope.workreportMap[report.staffData.id][keydate].push({
                            title: report.title,
                            customer: report.customer,
                            projects: report.projects,
                            progress: report.progress,
                            hours: hours

                        });

                        totalWorktime += report.hours;


                    }else if($scope.workreportMap[report.staffData.id][keydate].length != 0 ){
                        $scope.workreportMap[report.staffData.id][keydate].length+1;
                        //second push for if there are few data(rows for workreport for a person on a day)
                        $scope.workreportMap[report.staffData.id][keydate].push({
                            title: report.title,
                            customer: report.customer,
                            projects: report.projects,
                            progress: report.progress,
                            hours: hours

                        });

                        totalWorktime += report.hours;
                    }
                }//for END

                stopSpinner();

            })
            .error(function(data, status) {
                MessagesService.messages.push({
                    type: 'danger',
                    content: 'ERROR: Status code ' + status
                });
                MessagesService.display = true;
                stopSpinner();
            });

            stopSpinner();
        })
        .error(function(data, status) {
            MessagesService.messages.push({
                type: 'danger',
                content: 'ERROR: Status code ' + status
            });
            MessagesService.display = true;
            stopSpinner();
        });
    }

Answer 1

A variable that sums up the hours like "$scope.totalhours" in the following code could be the solution. Then at the end of ng-repeat you can print that value out.

$scope.totalhours = 0;
for(var i = 0; i<workreportList.length; i++){

    var workreportList = workreportList; $scope.workreportMap = {};    

    if(workreportMap[attendance.staffData.id] == null){
        workreportMap[staffData.id]= [];
    }
    if(workreportMap[staffData.id][attendance.date] == null){
        workreportMap[staffData.id][attendance.date] = [];
    } else if(workreportMap[staffData.id][attendance.date].length != 0){
        workreportMap[staffData.id][attendance.date].length+1;
    }
    $scope.workreportMap[staffData.id][attendance.date].push({
        title: report.title,
        customer: report.customer,
        projects: report.projects,
        progress: report.progress,
        hours: hours
        });
    $scope.totalhours = $scope.totalhours + hours;
}

Note: I also cleared up the two central if statements as they held the same push method twice.