I am currently developing an Angular application that integrates a cell modifier within a custom cell template in Angular Bootstrap Calendar. Instead of traditional event displays within each cell, I am incorporating sets of tables used for shift sign-ups at specific stations for the day. These tables are categorized into AM and PM groups, each containing multiple station-specific tables with three rows in each.
AM
| 1 |Position|Name |
| |Pos 1 |Name 1|
| |Pos 2 |Name 2|
| |Pos 3 |Name 3|
| 2 |Position|Name |
| |Pos 1 |Name 1|
| |Pos 2 |Name 2|
| |Pos 3 |Name 3|
PM
| 1 |Position|Name |
| |Pos 1 |Name 1|
| |Pos 2 |Name 2|
| |Pos 3 |Name 3|
| 2 |Position|Name |
| |Pos 1 |Name 1|
| |Pos 2 |Name 2|
| |Pos 3 |Name 3|
Within my cell modifier function, I receive an array of shift objects for the day, where each object contains the ampm value and station value:
{
"_id": "57776537ac0a88010063b9b9",
"modified": "2016-07-02T06:54:47.518Z",
"data": {
"station": "1",
"date": "2016-07-01T07:00:00.000Z",
"ampm": "pm",
"slots": [
// Shifts data here
]
},
The challenge lies in organizing these objects into the two mentioned groupings so they can be easily looped through with ngRepeat in the template. Currently, my approach involves:
vm.cellModifier = function(cell) {
cell.text = 'Test Text';
var shifts = vm.events;
this.cellDate = moment(cell.date).format('YYYY-MM-DD');
// Iterating over shifts to get those for the specific date.
this.cell = cell;
this.todayShifts = {};
shifts.forEach(function(shift, index, allShifts) {
var shiftDate = moment(shift.data.date).format('YYYY-MM-DD');
if (moment(vm.cellDate).isSame(moment(shiftDate))) {
if (typeof vm.todayShifts[shift.data.ampm] == 'undefined') {
vm.todayShifts[shift.data.ampm] = shift;
} else {
vm.todayShifts[shift.data.ampm].push(shift);
}
}
});
cell.todayShifts = vm.todayShifts;
};
This method generates vm.todayShifts[am] and vm.todayShifts[pm], but I am also looking to implement a secondary level like vm.todayShifts[am][1], vm.todayShifts[am][2], etc. Is there a more efficient way to accomplish this rather than adding more statements? Perhaps utilizing a custom directive or component could offer a cleaner solution, enabling easy data-passing to the controller while ensuring correct arrangement for display.
I hope this explanation clarifies the scenario. Thank you.