gpb-split-time-slots.js

gpb-split-time-slots.js

  const config = {
    first_start: "07:00",
    first_end: "16:59",
    second_start: "17:00",
    second_end: "23:59",
    first_label: "Lunch Time",
    second_label: "Dinner Time"
  };

  function timeToMinutes(timeStr) {
    const [h, m] = timeStr.split(":").map(Number);
    return h * 60 + m;
  }

  function inRange(time, start, end) {
    const t = timeToMinutes(time);
    return t >= timeToMinutes(start) && t <= timeToMinutes(end);
  }

  function splitGrid(grid) {
    if (grid.dataset.splitApplied) return;
    grid.dataset.splitApplied = "true";

    const slots = Array.from(
      grid.querySelectorAll(".gpb-booking-time-picker__slot")
    );

    if (!slots.length) return;

    const firstGroup = [];
    const secondGroup = [];

    slots.forEach((slot) => {
      const time = slot.dataset.time;

      if (inRange(time, config.first_start, config.first_end)) {
        firstGroup.push(slot);
      } else if (inRange(time, config.second_start, config.second_end)) {
        secondGroup.push(slot);
      }
    });

    grid.innerHTML = "";

    function createSection(label, slots) {
      if (!slots.length) return;

      const wrapper = document.createElement("div");
      wrapper.className = "gpb-time-group";

      const heading = document.createElement("div");
      heading.className = "gpb-time-group__label";
      heading.textContent = label;

      const groupGrid = document.createElement("div");
      groupGrid.className = "gpb-time-group__grid";

      slots.forEach((slot) => groupGrid.appendChild(slot));

      wrapper.appendChild(heading);
      wrapper.appendChild(groupGrid);

      grid.appendChild(wrapper);
    }

    createSection(config.first_label, firstGroup);
    createSection(config.second_label, secondGroup);
  }

  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      mutation.addedNodes.forEach((node) => {
        if (!(node instanceof HTMLElement)) return;

        if (node.matches(".gpb-booking-time-picker__grid")) {
          splitGrid(node);
        }

        const grid = node.querySelector?.(".gpb-booking-time-picker__grid");
        if (grid) splitGrid(grid);
      });
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });


  const existing = document.querySelector(".gpb-booking-time-picker__grid");
  if (existing) splitGrid(existing);