After pressing the save button, I am aiming to achieve the following effect:
"timeTable":{
"0": [{"from":"08:00","to":"12:00"}, {"from":"14:00","to":"18:20"}],
"1": [{"from":"08:00","to":"16:00"}]
.....
}
I'm having trouble achieving this. Could someone assist me in getting the desired result as shown below:
{"0":{
"0":{"from":"00:00","to":"23:00"}},
"1":{"0":{"from":"08:00","to":"16:00"}}}
}
I'm unsure of how to modify the getTimeline function... Check here for reference.
import { Component, OnInit, VERSION } from '@angular/core';
interface Row {
name: string;
items: number[];
active: boolean;
day: number;
}
interface HourScheduleDefinitionModel {
from: string;
to: string;
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
arr: Row[] = [
{ name: 'Monday', day: 0, items: new Array(24).fill(1), active: true },
{ name: 'Tuesday', day: 1, items: new Array(24).fill(0), active: false },
{
name: 'Wednesday',
day: 2,
items: new Array(24).fill(0),
active: false,
},
{ name: 'Thursday', day: 3, items: new Array(24).fill(0), active: false },
{ name: 'Friday', day: 4, items: new Array(24).fill(0), active: false },
{ name: 'Saturday', day: 5, items: new Array(24).fill(0), active: false },
{ name: 'Sunday', day: 6, items: new Array(24).fill(0), active: false },
];
timeTable2: Map<number, Array<HourScheduleDefinitionModel>>;
timeTable: HourScheduleDefinitionModel[][];
// example mentioned above
ngOnInit() {
this.arr.forEach((row: Row, index: number) => {
if (this.arr[index].items.every((col) => col === 1)) {
row.active = true;
}
});
}
click(day: number, range: number) {
this.arr[day].items[range] = this.arr[day].items[range] === 1 ? 0 : 1;
this.arr[day].active = this.arr[day].items.every((col) => col === 1);
}
toggleRow(day: number): void {
this.arr[day].items.fill(this.arr[day].active ? 0 : 1);
this.arr[day].active = !this.arr[day].active;
}
getTimeline = () => {
const result = [];
console.log(this.arr);
for (const item of this.arr) {
let start = -1,
timeTable = [];
for (let i = 0; i < item.items.length; i++) {
if (item.items[i] === 1) {
if (start === -1) {
start = i;
}
} else {
if (start !== -1) {
timeTable.push({
from: start < 10 ? '0' + start + ':00' : start + ':00',
to: i < 10 ? '0' + (i - 1) + ':00' : i - 1 + ':00',
});
start = -1;
}
}
if (start !== -1 && i === item.items.length - 1) {
timeTable.push({
from: start < 10 ? '0' + start + ':00' : start + ':00',
to: '23:00',
});
}
}
result.push({
...timeTable,
});
}
return result;
};
save() {
this.timeTable = this.getTimeline();
console.log(this.timeTable);
let val = { ...this.timeTable };
console.log(JSON.stringify(val));
}
}