resourcenest 1.2.0

package/dist/resourcenest.js

@@ -0,0 +1,586 @@
+function M(s) {
+  const t = s.getHours().toString().padStart(2, "0"), e = s.getMinutes().toString().padStart(2, "0");
+  return `${t}:${e}`;
+}
+function x(s, t = "DD.MM.YYYY") {
+  const e = s.getDate().toString().padStart(2, "0"), o = (s.getMonth() + 1).toString().padStart(2, "0"), r = s.getFullYear();
+  return t.replace("DD", e).replace("MM", o).replace("YYYY", r);
+}
+function k(s) {
+  return new Date(s.getFullYear(), s.getMonth(), s.getDate(), 0, 0, 0, 0);
+}
+function C(s, t) {
+  const e = new Date(s);
+  return e.setDate(e.getDate() + t), e;
+}
+function y(s, t) {
+  return s.getFullYear() === t.getFullYear() && s.getMonth() === t.getMonth() && s.getDate() === t.getDate();
+}
+function T(s, t = 5) {
+  const e = 6e4 * t;
+  return new Date(Math.round(s.getTime() / e) * e);
+}
+const L = {
+  startHour: 8,
+  endHour: 22,
+  events: [],
+  resources: [],
+  locale: "de-DE",
+  dateFormat: "DD.MM.YYYY",
+  todayLabel: "Today",
+  loadingLabel: "Loading...",
+  showNavigation: !0,
+  showNowIndicator: !0,
+  showViewSwitcher: !0,
+  eventClickable: !0,
+  timeClickable: !0,
+  // View modes: 'day', '3days', 'week'
+  view: "day",
+  viewLabels: {
+    day: "Day",
+    "3days": "3 Days",
+    week: "Week"
+  },
+  // Callbacks
+  onEventClick: null,
+  onTimeClick: null,
+  onDateChange: null,
+  onViewChange: null
+}, I = `
+.rn-timeline-calendar {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+.rn-timeline-calendar *, .rn-timeline-calendar *::before, .rn-timeline-calendar *::after {
+  box-sizing: border-box;
+}
+.rn-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.rn-date-display {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+}
+.rn-nav-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.rn-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #374151;
+  transition: background 0.15s, border-color 0.15s;
+}
+.rn-btn:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+.rn-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rn-btn-icon {
+  padding: 8px;
+  min-width: 36px;
+}
+.rn-calendar-body {
+  display: flex;
+  position: relative;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  min-height: 200px;
+  overflow: hidden;
+}
+.rn-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255,255,255,0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  font-weight: 600;
+  color: #6b7280;
+}
+.rn-resource-sidebar {
+  width: 140px;
+  flex-shrink: 0;
+  background: #f9fafb;
+  border-right: 1px solid #e5e7eb;
+  margin-top: 40px;
+}
+.rn-resource-row {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  padding: 0 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rn-chart {
+  flex: 1;
+  overflow-x: auto;
+}
+.rn-hour-labels {
+  display: flex;
+  height: 40px;
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+}
+.rn-hour-cell {
+  flex: 1;
+  min-width: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: #4b5563;
+  border-right: 1px solid #e5e7eb;
+}
+.rn-hour-cell.is-current {
+  background: #dbeafe;
+  font-weight: 600;
+  color: #1d4ed8;
+}
+.rn-timeline {
+  position: relative;
+}
+.rn-timeline-row {
+  display: flex;
+  height: 60px;
+  position: relative;
+}
+.rn-timeline-cell {
+  flex: 1;
+  min-width: 80px;
+  border-right: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+}
+.rn-timeline-cell.is-current {
+  background: #eff6ff;
+}
+.rn-event {
+  position: absolute;
+  top: 6px;
+  height: calc(100% - 12px);
+  background: #3b82f6;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 10;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
+  transition: transform 0.1s;
+}
+.rn-event:hover {
+  transform: scale(1.02);
+  z-index: 20;
+}
+.rn-event.status-cancelled {
+  background: #ef4444;
+}
+.rn-event.status-confirmed {
+  background: #10b981;
+}
+.rn-event-time {
+  font-weight: 700;
+}
+.rn-event-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rn-event-guests {
+  font-size: 0.7rem;
+  opacity: 0.9;
+}
+.rn-now-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #ef4444;
+  z-index: 30;
+  pointer-events: none;
+}
+.rn-now-indicator::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -4px;
+  width: 10px;
+  height: 10px;
+  background: #ef4444;
+  border-radius: 50%;
+}
+.rn-view-switcher {
+  display: flex;
+  gap: 0;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.rn-view-btn {
+  padding: 6px 12px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  background: #fff;
+  color: #374151;
+  transition: background 0.15s;
+  border-right: 1px solid #d1d5db;
+}
+.rn-view-btn:last-child {
+  border-right: none;
+}
+.rn-view-btn:hover {
+  background: #f3f4f6;
+}
+.rn-view-btn.is-active {
+  background: #3b82f6;
+  color: #fff;
+}
+.rn-day-header {
+  display: flex;
+  background: #f3f4f6;
+  border-bottom: 1px solid #e5e7eb;
+}
+.rn-day-column-header {
+  flex: 1;
+  text-align: center;
+  padding: 8px 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #374151;
+  border-right: 1px solid #e5e7eb;
+}
+.rn-day-column-header:last-child {
+  border-right: none;
+}
+.rn-day-column-header.is-today {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+.rn-multi-day-timeline {
+  display: flex;
+}
+.rn-day-column {
+  flex: 1;
+  border-right: 1px solid #e5e7eb;
+}
+.rn-day-column:last-child {
+  border-right: none;
+}
+`;
+function V() {
+  if (document.getElementById("rn-timeline-calendar-styles")) return;
+  const s = document.createElement("style");
+  s.id = "rn-timeline-calendar-styles", s.textContent = I, document.head.appendChild(s);
+}
+class Y {
+  constructor(t, e = {}) {
+    if (this.root = typeof t == "string" ? document.querySelector(t) : t, !this.root)
+      throw new Error(`ResourceNest: Element "${t}" not found`);
+    this.options = { ...L, ...e }, this.currentDate = k(/* @__PURE__ */ new Date()), this.events = this._normalizeEvents(this.options.events), this.resources = this.options.resources || [], this.loading = !1, this.view = this.options.view || "day", V(), this._render();
+  }
+  // ============ PUBLIC API ============
+  /** Set events and re-render */
+  setEvents(t) {
+    return this.events = this._normalizeEvents(t), this._renderTimeline(), this;
+  }
+  /** Set resources and re-render */
+  setResources(t) {
+    return this.resources = t || [], this._render(), this;
+  }
+  /** Navigate to a specific date */
+  setDate(t) {
+    return this.currentDate = k(new Date(t)), this._render(), this._emitDateChange(), this;
+  }
+  /** Navigate to today */
+  goToToday() {
+    return this.currentDate = k(/* @__PURE__ */ new Date()), this._render(), this._emitDateChange(), this;
+  }
+  /** Navigate to next day */
+  nextDay() {
+    const t = this._getViewDays();
+    return this.currentDate = C(this.currentDate, t), this._render(), this._emitDateChange(), this;
+  }
+  /** Navigate to previous day */
+  prevDay() {
+    const t = this._getViewDays();
+    return this.currentDate = C(this.currentDate, -t), this._render(), this._emitDateChange(), this;
+  }
+  /** Set view mode: 'day', '3days', 'week' */
+  setView(t) {
+    return ["day", "3days", "week"].includes(t) && (this.view = t, this._render(), this._emitViewChange()), this;
+  }
+  /** Get current view mode */
+  getView() {
+    return this.view;
+  }
+  /** Show loading overlay */
+  setLoading(t) {
+    this.loading = t;
+    const e = this.root.querySelector(".rn-loading-overlay");
+    return e && (e.style.display = t ? "flex" : "none"), this;
+  }
+  /** Refresh the calendar */
+  refresh() {
+    return this._render(), this;
+  }
+  /** Scroll to current hour (if today is visible) */
+  scrollToNow() {
+    const t = this.root.querySelector(".rn-chart"), e = /* @__PURE__ */ new Date();
+    if (!t) return this;
+    const o = this._getVisibleDates(), r = o.findIndex((n) => y(n, e));
+    if (r === -1) return this;
+    const { startHour: i, endHour: c } = this.options, l = c - i, a = l * o.length, d = e.getHours() - i, g = (r * l + d) / a;
+    return t.scrollLeft = t.scrollWidth * Math.max(0, Math.min(1, g)) - t.clientWidth / 2, this;
+  }
+  /** Get current date */
+  getDate() {
+    return new Date(this.currentDate);
+  }
+  /** Destroy the calendar */
+  destroy() {
+    this.root.innerHTML = "", this.root.classList.remove("rn-timeline-calendar");
+  }
+  /** Set callback for event click */
+  onEventClick(t) {
+    return this.options.onEventClick = t, this;
+  }
+  /** Set callback for time slot click */
+  onTimeClick(t) {
+    return this.options.onTimeClick = t, this;
+  }
+  /** Set callback for date change */
+  onDateChange(t) {
+    return this.options.onDateChange = t, this;
+  }
+  /** Set callback for view change */
+  onViewChange(t) {
+    return this.options.onViewChange = t, this;
+  }
+  // ============ INTERNAL ============
+  _getViewDays() {
+    switch (this.view) {
+      case "3days":
+        return 3;
+      case "week":
+        return 7;
+      default:
+        return 1;
+    }
+  }
+  _getVisibleDates() {
+    const t = this._getViewDays(), e = [];
+    for (let o = 0; o < t; o++)
+      e.push(C(this.currentDate, o));
+    return e;
+  }
+  _normalizeEvents(t) {
+    return (t || []).map((e) => ({
+      id: e.id,
+      resourceId: e.resourceId || e.serviceResourceId,
+      from: new Date(e.from),
+      to: new Date(e.to),
+      label: e.label || e.title || e.code || "",
+      guestCount: e.guestCount || e.guests || 0,
+      status: e.status || null,
+      data: e
+      // Original data
+    }));
+  }
+  _getHours() {
+    const { startHour: t, endHour: e } = this.options, o = [], r = /* @__PURE__ */ new Date();
+    for (let i = t; i < e; i++)
+      o.push({
+        hour: i,
+        label: `${i.toString().padStart(2, "0")}:00`,
+        isCurrent: y(r, this.currentDate) && r.getHours() === i
+      });
+    return o;
+  }
+  _getDayRange() {
+    const { startHour: t, endHour: e } = this.options, o = this._getViewDays(), r = new Date(this.currentDate);
+    r.setHours(t, 0, 0, 0);
+    const i = new Date(this.currentDate);
+    return i.setDate(i.getDate() + o - 1), i.setHours(e, 0, 0, 0), { from: r, to: i, rangeMs: i - r };
+  }
+  _getEventsForResource(t) {
+    const { from: e, to: o } = this._getDayRange();
+    return this.events.filter((r) => r.resourceId !== t ? !1 : !(r.to <= e || r.from >= o));
+  }
+  _render() {
+    const { showNavigation: t, showViewSwitcher: e, todayLabel: o, loadingLabel: r, dateFormat: i, viewLabels: c } = this.options, l = this._getHours(), a = this._getVisibleDates(), d = a.length > 1;
+    let f;
+    if (d) {
+      const n = a[0], h = a[a.length - 1];
+      f = `${x(n, i)} - ${x(h, i)}`;
+    } else
+      f = x(this.currentDate, i);
+    const g = a.flatMap(
+      (n, h) => l.map((b) => ({
+        ...b,
+        dayIndex: h,
+        date: n,
+        isCurrent: y(n, /* @__PURE__ */ new Date()) && (/* @__PURE__ */ new Date()).getHours() === b.hour
+      }))
+    );
+    this.root.classList.add("rn-timeline-calendar"), this.root.innerHTML = `
+      <div class="rn-calendar-header">
+        <div class="rn-date-display">${f}</div>
+        <div class="rn-nav-controls">
+          ${e ? `
+            <div class="rn-view-switcher">
+              <button class="rn-view-btn ${this.view === "day" ? "is-active" : ""}" data-view="day">${c.day}</button>
+              <button class="rn-view-btn ${this.view === "3days" ? "is-active" : ""}" data-view="3days">${c["3days"]}</button>
+              <button class="rn-view-btn ${this.view === "week" ? "is-active" : ""}" data-view="week">${c.week}</button>
+            </div>
+          ` : ""}
+          ${t ? `
+            <button class="rn-btn" data-action="today">${o}</button>
+            <button class="rn-btn rn-btn-icon" data-action="prev">&#8249;</button>
+            <button class="rn-btn rn-btn-icon" data-action="next">&#8250;</button>
+          ` : ""}
+        </div>
+      </div>
+      <div class="rn-calendar-body">
+        <div class="rn-loading-overlay" style="display:${this.loading ? "flex" : "none"}">${r}</div>
+        <div class="rn-resource-sidebar">
+          ${d ? '<div class="rn-resource-row" style="height:40px;"></div>' : ""}
+          ${this.resources.map((n) => `
+            <div class="rn-resource-row" data-resource-id="${n.id || n.Id}">${n.name || n.Name || n.title || "—"}</div>
+          `).join("")}
+        </div>
+        <div class="rn-chart">
+          ${d ? this._renderMultiDayHeader(a, l.length) : ""}
+          <div class="rn-hour-labels">
+            ${g.map((n) => `
+              <div class="rn-hour-cell ${n.isCurrent ? "is-current" : ""}">${n.label}</div>
+            `).join("")}
+          </div>
+          <div class="rn-timeline" data-days="${a.length}" data-hours="${l.length}">
+            ${this.resources.map((n) => `
+              <div class="rn-timeline-row" data-resource-id="${n.id || n.Id}">
+                ${g.map((h) => `
+                  <div class="rn-timeline-cell ${h.isCurrent ? "is-current" : ""}" data-day="${h.dayIndex}"></div>
+                `).join("")}
+              </div>
+            `).join("")}
+          </div>
+        </div>
+      </div>
+    `, this._bindEvents(), this._renderTimeline(), this.scrollToNow();
+  }
+  _renderMultiDayHeader(t, e) {
+    const o = /* @__PURE__ */ new Date(), r = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
+    return `
+      <div class="rn-day-header">
+        ${t.map((i) => {
+      const c = y(i, o), l = r[i.getDay()], a = i.getDate();
+      return `<div class="rn-day-column-header ${c ? "is-today" : ""}" style="flex: ${e};">${l} ${a}</div>`;
+    }).join("")}
+      </div>
+    `;
+  }
+  _renderTimeline() {
+    const t = this.root.querySelector(".rn-timeline");
+    if (!t) return;
+    t.querySelectorAll(".rn-event, .rn-now-indicator").forEach((a) => a.remove());
+    const e = this._getVisibleDates(), { startHour: o, endHour: r } = this.options, i = r - o, c = i * e.length, l = t.scrollWidth;
+    if (this.resources.forEach((a) => {
+      const d = a.id || a.Id, f = t.querySelector(`.rn-timeline-row[data-resource-id="${d}"]`);
+      if (!f) return;
+      this._getEventsForResource(d).forEach((n) => {
+        e.forEach((h, b) => {
+          const m = new Date(h);
+          m.setHours(o, 0, 0, 0);
+          const u = new Date(h);
+          if (u.setHours(r, 0, 0, 0), n.to <= m || n.from >= u) return;
+          const w = n.from < m ? m : n.from, D = n.to > u ? u : n.to, v = w.getHours() - o + w.getMinutes() / 60, H = b * i + v, $ = (D - w) / (1e3 * 60 * 60), _ = l / c * H, S = Math.max(40, l / c * $), p = document.createElement("div");
+          p.className = "rn-event", (n.status === "Cancelled" || n.status === "cancelled") && p.classList.add("status-cancelled"), (n.status === "Confirmed" || n.status === "confirmed") && p.classList.add("status-confirmed"), p.style.left = `${_}px`, p.style.width = `${S}px`, p.title = n.label, p.dataset.eventId = n.id, p.innerHTML = `
+            <div class="rn-event-time">${M(n.from)}</div>
+            <div class="rn-event-label">${n.label}</div>
+            ${n.guestCount ? `<div class="rn-event-guests">${n.guestCount} people</div>` : ""}
+          `, this.options.eventClickable && p.addEventListener("click", (E) => {
+            E.stopPropagation(), typeof this.options.onEventClick == "function" && this.options.onEventClick(n.data, n);
+          }), f.appendChild(p);
+        });
+      });
+    }), this.options.showNowIndicator) {
+      const a = /* @__PURE__ */ new Date(), d = this._getVisibleDates(), f = d.findIndex((g) => y(g, a));
+      if (f !== -1 && a.getHours() >= this.options.startHour && a.getHours() < this.options.endHour) {
+        const g = this.options.endHour - this.options.startHour, n = g * d.length, h = a.getHours() - this.options.startHour + a.getMinutes() / 60, b = f * g + h, m = l / n * b, u = document.createElement("div");
+        u.className = "rn-now-indicator", u.style.left = `${m}px`, t.appendChild(u);
+      }
+    }
+  }
+  _bindEvents() {
+    const t = this.root.querySelector('[data-action="today"]'), e = this.root.querySelector('[data-action="prev"]'), o = this.root.querySelector('[data-action="next"]');
+    if (t && t.addEventListener("click", () => this.goToToday()), e && e.addEventListener("click", () => this.prevDay()), o && o.addEventListener("click", () => this.nextDay()), this.root.querySelectorAll("[data-view]").forEach((r) => {
+      r.addEventListener("click", () => {
+        const i = r.dataset.view;
+        this.setView(i);
+      });
+    }), this.options.timeClickable) {
+      const r = this.root.querySelector(".rn-timeline");
+      r && r.addEventListener("click", (i) => this._handleTimelineClick(i));
+    }
+  }
+  _handleTimelineClick(t) {
+    if (t.target.closest(".rn-event")) return;
+    const e = t.currentTarget, o = e.getBoundingClientRect(), r = t.clientX - o.left + e.scrollLeft, i = t.clientY - o.top, c = this._getVisibleDates(), { startHour: l, endHour: a } = this.options, d = a - l, f = d * c.length, g = e.scrollWidth, n = r / g * f, h = Math.floor(n / d), b = n % d, m = c[h] || c[0];
+    let u = new Date(m);
+    u.setHours(l + Math.floor(b), b % 1 * 60, 0, 0), u = T(u, 5);
+    const D = Math.floor(i / 60), v = this.resources[D];
+    v && typeof this.options.onTimeClick == "function" && this.options.onTimeClick({
+      time: u.toISOString(),
+      date: u,
+      resource: v
+    });
+  }
+  _emitDateChange() {
+    if (typeof this.options.onDateChange == "function") {
+      const t = this.currentDate.getFullYear(), e = String(this.currentDate.getMonth() + 1).padStart(2, "0"), o = String(this.currentDate.getDate()).padStart(2, "0"), r = `${t}-${e}-${o}`;
+      this.options.onDateChange(r, this.currentDate);
+    }
+  }
+  _emitViewChange() {
+    typeof this.options.onViewChange == "function" && this.options.onViewChange(this.view);
+  }
+}
+function z(s, t = {}) {
+  return new Y(s, t);
+}
+export {
+  Y as ResourceNest,
+  z as createResourceNest,
+  z as default
+};