jc-timeline/dev/index.ts

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { formats } from 'dayjs/locale/*';
import Ressource from '../src/Ressource';
import TimeLine from '../src/Timeline'
import '../src/Ressource'
import { IEvent } from '../src/Event';
import dayjs from 'dayjs'

const emptyTimeline:TimeLine = document.createElement("jc-timeline") as TimeLine;
let title = document.createElement("h2");
title.innerText = "Empty Timeline"
document.body.appendChild(title)
document.body.appendChild(emptyTimeline);

emptyTimeline.setAttribute("legendSpan","1");
emptyTimeline.setAttribute("slotWidth","40");

const timeline:TimeLine = document.createElement("jc-timeline") as TimeLine;

// timeline.defaultBackground = "maroon";

const rows:Array<Ressource> = [ 
    {id:'1',title:"Ressource 1 DarkSlate",eventBgColor:"DarkSlateBlue"},
    {id:'3',title:"Ressource 3"},
    {id:'4',title:"Ressource 4"},
    {id:'5',title:"Ressource 5"}].map(i=> new Ressource(i));
rows[2].parent = rows[1];
rows[0].parent = rows[1];
const data = dayjs().startOf("hour").hour(9);
const timeslots:Array<IEvent> = [
    {id:'1', content:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
    {id:'2', content:"Fixed time" , ressourceId:'3', start:data.toDate(), end:data.endOf("hour").add(1,"h").toDate(), editable:false,bgColor:"FireBrick"},
    {id:'3', ressourceId:'4', start:data.add(1,"h").toDate(), end:data.endOf("hour").add(2,"h").toDate()},
    {id:'4', ressourceId:'3', start:data.startOf("day").subtract(1,"h").toDate(), end:dayjs().endOf("hour").add(1,"h").toDate()}
]
for(let i = 5; i < 10; i++){
    timeslots.push({
        id : i.toFixed(0),
        content: "event " + i,
        ressourceId:'1',
        start:data.add(i,'h').toDate(),
        end:data.add(i,'h').endOf("hour").add(1,"h").toDate(),
    })
}
timeline.addRessource(rows[1]);
timeline.addRessource(rows[0]);
timeline.addRessource(rows[2]);
timeline.addRessource(rows[3]);

timeline.addEvents(timeslots)
timeline.addEventListener("item-selected",(e)=>{console.log((e as CustomEvent).detail)})
timeline.addEventListener("change-event",(e)=>{console.log((e as CustomEvent).detail)})
timeline.addEventListener("reorder-ressource",(e)=>{console.log((e as CustomEvent).detail)})

title = document.createElement("h2");
title.innerText = "Generic Timeline"
document.body.appendChild(title);
document.body.appendChild(timeline);

const nestedTimeline:TimeLine = document.createElement("jc-timeline") as TimeLine;

title = document.createElement("h2");
title.innerText = "Multiple level Timeline"
document.body.appendChild(title);
document.body.appendChild(nestedTimeline);

const ressources = Array(8).fill(0).map((_,i)=>new Ressource({id:""+i,title:"level "+i}));
for(let i = 0 ; i < ressources.length-1;i++){
    ressources[i+1].parent=ressources[i]
}
ressources.forEach(r=>nestedTimeline.addRessource(r));
ressources[0].collapseChildren = true
const nItem = 32;
const timeslots2 = Array(nItem).fill(0).map((_,i)=>{
    return {
        id:""+i,
        ressourceId:"" + (i % 8),
        title:"Item "+i,
        start:data.add(i/2 - 5, 'h').toDate(),
        end:data.add(i/2 - 4, 'h').toDate(),
        bgColor:"hsl(" + Math.round(i / (nItem-1) * 360) + ", 100%, 50%)"
    }});
nestedTimeline.addEvents(timeslots2);