creating an object with hours through the user interface

Issue

I am having trouble creating the right object. I have a calendar that stores the hours. He wants timeTable to hold such an object, for example

"timeTable":{
    "0": [{"from":"08:00","to":"12:00"}, {"from":"14:00","to":"18:00"}],
    "1": [{"from":"08:00","to":"16:00"}]
  }

How, after clicking the save button, send such an object to:

 timeTable: Map<number, Array<HourScheduleDefinitionModel>>;

interface:

interface HourScheduleDefinitionModel {
  from: string;
  to: string;
}

https://stackblitz.com/edit/angular-ivy-e92ezv?file=src%2Fapp%2Fapp.component.ts

Solution

const getTimeline = () => {
  result = []
  for(item of data){
    var start = -1, timeline = [];
    for(var i = 0; i < item.items.length; i++){
      if(item.items[i] === 1){
        if(start === -1) {
          start = i;
        }
      }else{
        if(start !== -1){
          timeline.push({"from": start < 10 ? "0" + start + ":00" : start + ":00" , "to": i < 10 ? "0" + i + ":00" : i + ":00"});
          start = -1;
        }
      }
  
      if(start !== -1 && i === item.items.length - 1){
        timeline.push({"from": start < 10 ? "0" + start + ":00" : start + ":00" , "to": "00:00"});
      }
    }
  
    result.push({ 
      day: item.name,
      timeline : timeline
    })
  }
  return result;  
}

example data :-

data = [
  {
    name: 'Monday',
    items: [0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1],
    active: true
  },
  {
    name: 'Tuesday',
    items: [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
    active: true
  }
]

result :-

console.log(getTimeline(data));

[
  {
  day: 'Monday',
  timeline: [
      { from: '01:00', to: '02:00' },
      { from: '03:00', to: '04:00' },
      { from: '20:00', to: '00:00' }
    ]
  },

  {
    day: 'Tuesday',
    timeline: [ { from: '01:00', to: '04:00' }, { from: '20:00', to: '21:00' } ]
  }
]

Answered By - Shashikamal R C