jc-timeline/lib-esm/index.js

import Ressource from './Ressource';
import './Ressource';
import dayjs from 'dayjs';
var emptyTimeline = document.createElement("jc-timeline");
var title = document.createElement("h2");
title.innerText = "Empty Timeline";
document.body.appendChild(title);
document.body.appendChild(emptyTimeline);
emptyTimeline.setAttribute("legendSpan", "1");
emptyTimeline.setAttribute("slotWidth", "40");
var timeline = document.createElement("jc-timeline");
var rows = [
    { id: '1', title: "Ressource 1 DarkSlate", eventBgColor: "DarkSlateBlue" },
    { id: '3', title: "Ressource 3" },
    { id: '4', title: "Ressource 4" },
    { id: '5', title: "Ressource 5" }
].map(function (i) { return new Ressource(i); });
rows[2].parent = rows[1];
rows[0].parent = rows[1];
var data = dayjs().startOf("hour").hour(9);
var timeslots = [
    { 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() },
    { id: '4', ressourceId: '3', start: data.startOf("day").subtract(1, "h").toDate(), end: dayjs().endOf("hour").add(1, "h").toDate() }
];
for (var 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]);
timeslots.map(function (o) { return timeline.addTimeSlot(o); });
timeline.addEventListener("item-selected", function (e) { console.log(e.detail); });
title = document.createElement("h2");
title.innerText = "Generic Timeline";
document.body.appendChild(title);
document.body.appendChild(timeline);
var nestedTimeline = document.createElement("jc-timeline");
title = document.createElement("h2");
title.innerText = "Multiple level Timeline";
document.body.appendChild(title);
document.body.appendChild(nestedTimeline);
var ressources = Array(8).fill(0).map(function (_, i) { return new Ressource({ id: "" + i, title: "level " + i }); });
for (var i = 0; i < ressources.length - 1; i++) {
    ressources[i + 1].parent = ressources[i];
}
ressources.forEach(function (r) { return nestedTimeline.addRessource(r); });
ressources[0].collapseChildren = true;
var nItem = 32;
var timeslots2 = Array(nItem).fill(0).map(function (_, i) {
    return {
        id: "" + i,
        ressourceId: "" + (i % 8),
        title: "I " + 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%)"
    };
});
timeslots2.forEach(function (r) { return nestedTimeline.addTimeSlot(r); });
//# sourceMappingURL=index.js.map