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

for (let i = 0; i < 2; i++) {
  const parentRessource = new Ressource({ id: "Parent-" + i });
  nestedInsertionTest.addRessource(new Ressource({ id: "child " + i, parent: parentRessource }));
  nestedInsertionTest.addRessource(
    new Ressource({ id: "above " + i, parent: parentRessource }),
    nestedInsertionTest.getRessources().findIndex((o) => o.id == "child " + i)
  );
  nestedInsertionTest.addRessource(
    new Ressource({ id: "below " + i, parent: parentRessource }),
    nestedInsertionTest.getRessources().findIndex((o) => o.id == "child " + i) + 2
  );
}
const p = document.createElement("p");
p.innerHTML = nestedInsertionTest
  .getRessources()
  .map((o) => o.id)
  .join(", ");
container.appendChild(p);

const BDLGRessourcesJSON = [
  {
    id: "e75a6a93-2e42-4eda-a27a-9a7656520374",
    title: "Jeudi",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c430b166-26d7-47c6-88c1-00b2576ef596",
    title: "Cuisine",
    collapseChildren: false,
    parentId: "e75a6a93-2e42-4eda-a27a-9a7656520374",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "41ac89c8-b276-4f07-a007-e49eff43d4ec",
    title: "Courses",
    collapseChildren: false,
    parentId: "e75a6a93-2e42-4eda-a27a-9a7656520374",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "e620b785-3b8c-40b1-a12e-9c81ad1d83a7",
    title: "Vendredi matin",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "aaf82af8-e5bd-4eda-ad11-11325d8bfff3",
    title: "Camion",
    collapseChildren: false,
    parentId: "e620b785-3b8c-40b1-a12e-9c81ad1d83a7",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "a8242094-ca7b-430e-bfe2-d0992ec0ec5f",
    title: "Bouffe",
    collapseChildren: false,
    parentId: "e620b785-3b8c-40b1-a12e-9c81ad1d83a7",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "392c0e7a-4212-4302-a0c7-75edddfbe70f",
    title: "Vendredi aprem",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "625615c3-c867-4e24-b42d-3a416cfa1f11",
    title: "Ailleurs",
    collapseChildren: false,
    parentId: "392c0e7a-4212-4302-a0c7-75edddfbe70f",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c078ef3d-1750-4b95-9762-383231494d19",
    title: "Durante",
    collapseChildren: false,
    parentId: "392c0e7a-4212-4302-a0c7-75edddfbe70f",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "2bb9657a-931c-419c-8d4d-7a8bb46306d5",
    title: "B&B",
    collapseChildren: false,
    parentId: "c078ef3d-1750-4b95-9762-383231494d19",
    height: 96,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c6ec3e95-0500-458d-9685-161aee41661a",
    title: "Vendredi soir",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "1f8cf338-0e0c-4208-ae6a-12fc6d55ae87",
    title: "Logistique",
    collapseChildren: false,
    parentId: "c6ec3e95-0500-458d-9685-161aee41661a",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "0294990b-a5e9-492e-a8d7-01fb957ec6d6",
    title: "Nettoyage",
    collapseChildren: false,
    parentId: "c6ec3e95-0500-458d-9685-161aee41661a",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "534f5589-89b6-45d5-bfc1-b6746aedfdb4",
    title: "Bar/Bouffe",
    collapseChildren: false,
    parentId: "c6ec3e95-0500-458d-9685-161aee41661a",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "45dc9ce5-0ba2-4812-a8f7-56f3d0d44f24",
    title: "Service et rangement",
    collapseChildren: false,
    parentId: "534f5589-89b6-45d5-bfc1-b6746aedfdb4",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "03e22851-16f4-4628-a836-802ab4b1900e",
    title: "Bar",
    collapseChildren: false,
    parentId: "534f5589-89b6-45d5-bfc1-b6746aedfdb4",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "37b2875c-206b-462b-87d8-df4fc79e6b7b",
    title: "Autowash",
    collapseChildren: false,
    parentId: "534f5589-89b6-45d5-bfc1-b6746aedfdb4",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "999ff318-e777-4632-908e-4085c53b166e",
    title: "Samedi - matin et aprem",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "e612d448-9b49-4e2e-8821-0d97d63346b6",
    title: "Bénévolant",
    collapseChildren: false,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "f76b3e55-3515-45e4-8f59-c2d5238ffc2a",
    title: "Bouffe midi",
    collapseChildren: false,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "cd8e781e-0ef0-4b93-89dd-4d161065c006",
    title: "Bouffe soir",
    collapseChildren: false,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "98136594-1181-4b2b-8e43-b94393ee720a",
    title: "Anim pour enfants",
    collapseChildren: false,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "a4cf3f1d-331b-4db8-bd53-8c101dc3a5fa",
    title: "Camions",
    collapseChildren: false,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "db450e53-1b10-41f7-8fe1-a9551491af1d",
    title: "Durante",
    collapseChildren: false,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "12aad644-7629-4042-84c6-2553b11ac31c",
    title: "Jouages",
    collapseChildren: false,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c9cdd3ca-ddb4-4b35-9258-135b761f8ad2",
    title: "Install JdP",
    collapseChildren: true,
    parentId: "999ff318-e777-4632-908e-4085c53b166e",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "00c17d2f-b501-4c14-b640-fecc368aeee8",
    title: "Déco",
    collapseChildren: false,
    parentId: "c9cdd3ca-ddb4-4b35-9258-135b761f8ad2",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "364e07ab-324c-4f8e-94b2-ecb055e20dcc",
    title: "Tout sauf déco",
    collapseChildren: false,
    parentId: "c9cdd3ca-ddb4-4b35-9258-135b761f8ad2",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "20448469-9e4e-4f47-9cae-b97399322ce9",
    title: "Samedi - Bar",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    title: "Créneaux",
    collapseChildren: false,
    parentId: "20448469-9e4e-4f47-9cae-b97399322ce9",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "16b9d771-b992-4a3a-ad56-a664088c5b81",
    title: "Respo",
    collapseChildren: false,
    parentId: "20448469-9e4e-4f47-9cae-b97399322ce9",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "4555a9a2-6474-4777-ba34-cef75392a72f",
    title: "Equipe 2 - Trous",
    collapseChildren: false,
    parentId: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "791c6e07-abf7-44c8-9cd2-4c8169ee72ad",
    title: "Equipe 3 - MC",
    collapseChildren: false,
    parentId: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "ab1b6704-4860-4edf-812b-7fd46764d523",
    title: "Equipe 4 - MC",
    collapseChildren: false,
    parentId: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "976d059e-0b05-4966-9191-7c5ab88d3cc9",
    title: "Equipe 5",
    collapseChildren: false,
    parentId: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "b153bb3d-94c7-4663-b26c-f8ca5881f933",
    title: "Equipe 6",
    collapseChildren: false,
    parentId: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "6133f048-f22e-469c-a2f9-77fa3b7a9ef6",
    title: "Equipe 7 - DP",
    collapseChildren: false,
    parentId: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "b8e7c9ae-904d-4b46-8258-053494581cc5",
    title: "Equipe 1 - Trous",
    collapseChildren: false,
    parentId: "a3fad595-141a-42a4-9dcc-a4c10c092862",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    title: "Samedi soirée",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "6d0201b2-cf07-4127-9c8b-c3caf668bf43",
    title: "Animation du concert",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "b11414b8-da91-461f-b0f6-6de7c13191b8",
    title: "Contrôle/sécu",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "65503723-42e5-4786-abc2-03169dd05861",
    title: "Bénévolant",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "3404db13-a3bb-48b7-9e52-3aeeca1cd683",
    title: "Chiottes",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c38f5666-009e-44ce-9827-eb2ed8350cda",
    title: "Bouffe/Catering",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c626d516-128e-4321-a842-6bd6311b228a",
    title: "Stands",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "78d6cdba-379b-4d87-8a48-764f05124eb4",
    title: "Animation Battle",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "db2358d2-9064-4c03-9410-a3be72930850",
    title: "Rangement",
    collapseChildren: false,
    parentId: "95453fcb-adf5-479c-9216-6eb92fe7890f",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "e5a524a5-3a2e-4b8a-91cc-2903ff5bf813",
    title: "Retour camions",
    collapseChildren: false,
    parentId: "db2358d2-9064-4c03-9410-a3be72930850",
    height: 128,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c3558135-73ec-421b-b258-e0fafdeda5ca",
    title: "Rangement jardin",
    collapseChildren: false,
    parentId: "db2358d2-9064-4c03-9410-a3be72930850",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "91a3a408-3c11-4d88-a19f-6f4db4f7b4fd",
    title: "Déco",
    collapseChildren: false,
    parentId: "db2358d2-9064-4c03-9410-a3be72930850",
    height: 96,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "2d5a42e6-c8ba-4f92-851c-99b8c6a2569f",
    title: "Catering",
    collapseChildren: false,
    parentId: "db2358d2-9064-4c03-9410-a3be72930850",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "490be86c-af6e-496c-bb88-eaa391ba9c41",
    title: "Bon appétit",
    collapseChildren: false,
    parentId: "c38f5666-009e-44ce-9827-eb2ed8350cda",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c190615f-7876-4076-8d92-cbfb429bc300",
    title: "Service",
    collapseChildren: false,
    parentId: "c38f5666-009e-44ce-9827-eb2ed8350cda",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "cf9a242e-3c7e-465d-912a-2f9621a813b5",
    title: "Auto wash",
    collapseChildren: false,
    parentId: "c38f5666-009e-44ce-9827-eb2ed8350cda",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "cfc7c988-9053-4180-9926-aaa1f7619593",
    title: "Entrée",
    collapseChildren: false,
    parentId: "b11414b8-da91-461f-b0f6-6de7c13191b8",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "e0a7e95f-14b3-404c-9ebf-01771078a86c",
    title: "Catering",
    collapseChildren: false,
    parentId: "b11414b8-da91-461f-b0f6-6de7c13191b8",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "38473bdf-ae41-4f12-b1ab-104923641aa3",
    title: "Ronde jardin",
    collapseChildren: false,
    parentId: "b11414b8-da91-461f-b0f6-6de7c13191b8",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "af780520-2c1c-411c-b56b-76490bd25640",
    title: "Dimanche",
    collapseChildren: true,
    parentId: "",
    height: 37,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "17ec3478-dfba-48a7-ae39-1c5b36ffa350",
    title: "Rangement final",
    collapseChildren: false,
    parentId: "af780520-2c1c-411c-b56b-76490bd25640",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "b0c6994f-2228-4e7d-9726-bdf16ce4d233",
    title: "Camions",
    collapseChildren: false,
    parentId: "af780520-2c1c-411c-b56b-76490bd25640",
    height: 96,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "75da5b10-96a9-4e50-b030-e10bc66142e1",
    title: "Catering",
    collapseChildren: false,
    parentId: "af780520-2c1c-411c-b56b-76490bd25640",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "1f193a0d-54ef-4dea-8c1c-2866bb1a9274",
    title: "Bar",
    collapseChildren: false,
    parentId: "af780520-2c1c-411c-b56b-76490bd25640",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "3d1226fd-5d43-487b-a263-28d052e9fe6e",
    title: "Réinstall JdP",
    collapseChildren: false,
    parentId: "af780520-2c1c-411c-b56b-76490bd25640",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "8ddf2165-01a6-4c85-b678-05ef616f7163",
    title: "Respo",
    collapseChildren: false,
    parentId: "1f193a0d-54ef-4dea-8c1c-2866bb1a9274",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c7f7b41a-b517-450f-8a28-c3a4af63e5b5",
    title: "Créneaux",
    collapseChildren: false,
    parentId: "1f193a0d-54ef-4dea-8c1c-2866bb1a9274",
    height: 64,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "42a69ade-8395-4004-a183-5b98afa468b5",
    title: "Rangement",
    collapseChildren: false,
    parentId: "75da5b10-96a9-4e50-b030-e10bc66142e1",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "c1f2ce10-420a-4a66-b58e-8aba22b9981c",
    title: "Service",
    collapseChildren: false,
    parentId: "75da5b10-96a9-4e50-b030-e10bc66142e1",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "6462acc0-26e9-419c-ba25-67417e4de4f4",
    title: "Autowash",
    collapseChildren: false,
    parentId: "75da5b10-96a9-4e50-b030-e10bc66142e1",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "88a81bea-aaf7-4bca-8cab-7067e7621e7b",
    title: "Catering",
    collapseChildren: false,
    parentId: "17ec3478-dfba-48a7-ae39-1c5b36ffa350",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "76688bef-6cd3-46c0-bc36-668d69398c95",
    title: "Bar / jardin",
    collapseChildren: false,
    parentId: "17ec3478-dfba-48a7-ae39-1c5b36ffa350",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
  {
    id: "d6910dcd-44cf-42ea-a7d2-fa274d68092a",
    title: "Durante",
    collapseChildren: false,
    parentId: "17ec3478-dfba-48a7-ae39-1c5b36ffa350",
    height: 32,
    eventEditable: true,
    eventRessourceEditable: true,
  },
];
const BDLGRessources = BDLGRessourcesJSON.map((o) => new Ressource(o));

BDLGRessourcesJSON.forEach((r, idx) => {
  if (r.parentId) {
    BDLGRessources[idx].parent = BDLGRessources.find((o) => o.id == r.parentId);
  }
});

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

title = document.createElement("h2");
title.innerText = "Bdlg Test Timeline";
container.appendChild(title);
container.appendChild(bdlgTimeline);
bdlgTimeline.addRessources(BDLGRessources);