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';


 // TimeLine.extendStyle.push(new_css)
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.customStyle = `.bubble{
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    background: green;
}
bubble.red{
    background: red;
}
bubble.orange{
    background: orange;
}`
// 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', title:"Fixed ressource" ,ressourceId:'3', start:data.subtract(3,"h").toDate(), end:data.toDate(), ressourceEditable:false,bgColor:"darkgreen"},
    {id:'2', title:"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(),content:'<div class="bubble">0</div>'},
    {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),
        title: "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);