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 container = document.createElement("div");
document.body.appendChild(container);
// TimeLine.extendStyle.push(new_css)
const emptyTimeline: TimeLine = document.createElement("jc-timeline") as TimeLine;
let title = document.createElement("h2");
title.innerText = "Empty Timeline";
container.appendChild(title);
container.appendChild(emptyTimeline);
emptyTimeline.setLegendUnitFormat("d", "dddd D MMMM");

emptyTimeline.setAttribute("legendSpan", "2");
emptyTimeline.setAttribute("slotduration", "30");
emptyTimeline.setAttribute("slotWidth", "30");
emptyTimeline.end = "2021-09-12T15:59:59.999Z";
emptyTimeline.start = "2021-09-10T13:00:00.000Z";

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";
container.appendChild(title);
container.appendChild(timeline);

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

title = document.createElement("h2");
title.innerText = "Multiple level Timeline";
container.appendChild(title);
container.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, idx) => nestedTimeline.addRessource(r, idx));
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);
nestedTimeline.style.display = "flex";
nestedTimeline.style.flexDirection = "column";
nestedTimeline.style.height = "200px";

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

title = document.createElement("h2");
title.innerText = "Insertion Test Timeline";
container.appendChild(title);
container.appendChild(nestedInsertionTest);
const f = (id: string, p: Ressource, offset: Offset = "above") => {
  nestedInsertionTest.addRessource(
    new Ressource({ id: offset + " " + id, parent: p }),
    nestedInsertionTest.getRessources().findIndex((o) => o.id == id) + (offset == "above" ? 0 : 1)
  );
};
const addChild = function (p, id) {
  const child = new Ressource({ id, parent: p });
  nestedInsertionTest.addRessource(child);
  f(id, p);
  f(id, p, "below");
  return child;
};
type Offset = "above" | "below";
for (let i = 0; i < 2; i++) {
  const parentRessource = new Ressource({ id: "Parent-" + i });

  const child = addChild(parentRessource, "child " + i);
  const grandchild = addChild(child, "grand-child " + i + ".1");
  addChild(child, "grand-child " + i + ".2");
  addChild(grandchild, "gg-child " + i);
}
const p: HTMLDivElement = document.createElement("p");
p.innerHTML = nestedInsertionTest
  .getRessources()
  .map((o) => o.id)
  .join(", ");
container.appendChild(p);