assets/booking.js

Repository

wynajem_motorowek

Original path

assets/booking.js

Role

SOURCE

Size

27384 bytes

Lines

753

SHA-256

9c00ffb64ca7ba3e32b047f1225612a4742f8e376c8cc028d4ce8c49344b7df4

Displayed range

1–500

(function () {
  const API_BASE = window.BOOKING_API_BASE || window.location.origin;
  const DAY_START_MIN = 8 * 60;
  const DAY_END_MIN = 20 * 60;
  const DAY_DURATION_MIN = DAY_END_MIN - DAY_START_MIN;

  let state = {
    mountedEl: null,
    date: todayKey(),
    resources: [],
    resourceMeta: {},
    selectedResource: "",
    peopleCount: 1,
    startMin: 10 * 60,
    endMin: 12 * 60,
    blocks: [],
    holdId: null,
    expiresAt: null,
    wantInvoice: false,
    paymentMethod: "ONLINE",
    countdownTimer: null,
    step: "select",
    message: "",
    messageType: "",
    customerEmail: "",
  };

  function todayKey() {
    const d = new Date();
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
  }

  function roundUpToQuarter(min) {
    return Math.ceil(min / 15) * 15;
  }

  function isPastDateKey(dateKey) {
    return String(dateKey || "") < todayKey();
  }

  function minSelectableStartMin() {
    if (isPastDateKey(state.date)) return DAY_END_MIN;
    if (state.date !== todayKey()) return DAY_START_MIN;
    const now = new Date();
    const currentMin = now.getHours() * 60 + now.getMinutes();
    return Math.max(DAY_START_MIN, Math.min(DAY_END_MIN, roundUpToQuarter(currentMin)));
  }

  function normalizeSelectionToAllowedWindow() {
    const minStart = minSelectableStartMin();
    if (minStart >= DAY_END_MIN) {
      state.startMin = DAY_END_MIN - 15;
      state.endMin = DAY_END_MIN;
      return;
    }

    if (state.startMin < minStart) {
      const duration = Math.max(15, selectionDuration());
      state.startMin = minStart;
      state.endMin = Math.min(DAY_END_MIN, state.startMin + duration);
    }

    if (state.endMin <= state.startMin) {
      state.endMin = Math.min(DAY_END_MIN, state.startMin + 15);
    }
  }

  function qs(sel, root = document) {
    return root.querySelector(sel);
  }

  function minsToText(min) {
    const h = String(Math.floor(min / 60)).padStart(2, "0");
    const m = String(min % 60).padStart(2, "0");
    return `${h}:${m}`;
  }

  function timeTextToMin(value) {
    if (!/^\d{2}:\d{2}$/.test(value || "")) return null;
    const [h, m] = value.split(":").map(Number);
    if (!Number.isInteger(h) || !Number.isInteger(m)) return null;
    return h * 60 + m;
  }

  function normalizeNip(value) {
    return String(value || "").replace(/\D/g, "");
  }

  function minToY(min, height) {
    return ((min - DAY_START_MIN) / DAY_DURATION_MIN) * height;
  }

  function yToMin(y, height) {
    const ratio = Math.max(0, Math.min(1, y / height));
    const raw = DAY_START_MIN + ratio * DAY_DURATION_MIN;
    return Math.round(raw / 15) * 15;
  }

  async function api(path, method = "GET", body) {
    const res = await fetch(`${API_BASE}${path}`, {
      method,
      headers: { "Content-Type": "application/json" },
      body: body ? JSON.stringify(body) : undefined,
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      const err = new Error(data.reason || "API_ERROR");
      err.payload = data;
      throw err;
    }
    return data;
  }

  async function loadResources() {
    const data = await api("/api/resources");
    const items = Array.isArray(data.items) ? data.items : [];
    state.resources = Array.isArray(data.resources) ? data.resources : items.map((item) => item.name);
    state.resourceMeta = Object.fromEntries(
      items.map((item) => [String(item.name), { capacity: Number(item.capacity || 6) }])
    );
    if (!state.selectedResource && state.resources.length) {
      state.selectedResource = state.resources[0];
    }

    const capacity = resourceCapacity();
    if (!Number.isInteger(state.peopleCount) || state.peopleCount <= 0) state.peopleCount = 1;
    if (state.peopleCount > capacity) state.peopleCount = capacity;
  }

  async function loadAvailability() {
    if (!state.date) return;
    const data = await api(`/api/availability?date=${encodeURIComponent(state.date)}`);
    state.blocks = Array.isArray(data.blocks) ? data.blocks : [];
    normalizeSelectionToAllowedWindow();
  }

  function blocksForCurrentResource() {
    return state.blocks
      .filter((b) => b.resourceName === state.selectedResource)
      .map((b) => ({
        startMin: new Date(b.start).getHours() * 60 + new Date(b.start).getMinutes(),
        endMin: new Date(b.end).getHours() * 60 + new Date(b.end).getMinutes(),
        type: b.type || "BUSY",
      }));
  }

  function resourceCapacity() {
    return Number(state.resourceMeta?.[state.selectedResource]?.capacity || 6);
  }

  function selectionDuration() {
    return Math.max(15, Math.min(DAY_END_MIN, state.endMin) - Math.max(DAY_START_MIN, state.startMin));
  }

  function selectionOverlapsBlocked(startMin, endMin, blocks) {
    return blocks.some((block) => startMin < block.endMin && endMin > block.startMin);
  }

  function findNextFreeRange(startMin, endMin, blocks) {
    const duration = Math.max(15, endMin - startMin);
    const normalized = blocks
      .filter((item) => item.endMin > DAY_START_MIN && item.startMin < DAY_END_MIN)
      .map((item) => ({
        startMin: Math.max(DAY_START_MIN, item.startMin),
        endMin: Math.min(DAY_END_MIN, item.endMin),
      }))
      .sort((a, b) => a.startMin - b.startMin);

    let candidate = Math.max(DAY_START_MIN, startMin);
    for (const block of normalized) {
      if (candidate + duration <= block.startMin) {
        return { startMin: candidate, endMin: candidate + duration };
      }
      if (candidate < block.endMin) {
        candidate = block.endMin;
      }
    }

    if (candidate + duration <= DAY_END_MIN) {
      return { startMin: candidate, endMin: candidate + duration };
    }

    return null;
  }

  function snapSelectionToFree() {
    const from = Math.max(DAY_START_MIN, Math.min(state.startMin, state.endMin));
    const to = Math.min(DAY_END_MIN, Math.max(state.startMin, state.endMin));
    if (to <= from) return;

    const blocks = blocksForCurrentResource();
    if (!selectionOverlapsBlocked(from, to, blocks)) return;

    const range = findNextFreeRange(from, to, blocks);
    if (range) {
      state.startMin = range.startMin;
      state.endMin = range.endMin;
    }
  }

  function setMessage(text, type = "") {
    state.message = text || "";
    state.messageType = type;
    rerender();
  }

  function clearCountdown() {
    if (state.countdownTimer) {
      clearInterval(state.countdownTimer);
      state.countdownTimer = null;
    }
  }

  function startCountdown() {
    clearCountdown();
    state.countdownTimer = setInterval(() => {
      if (!state.expiresAt) return;
      if (new Date(state.expiresAt).getTime() <= Date.now()) {
        clearCountdown();
        state.step = "select";
        state.holdId = null;
        state.expiresAt = null;
        setMessage("Za długo – rezerwacja wygasła", "error");
        loadAvailability().then(() => rerender()).catch(() => rerender());
        return;
      }
      const countdownEl = qs(".booking-countdown", state.mountedEl);
      if (countdownEl) countdownEl.textContent = countdownText();
    }, 1000);
  }

  function countdownText() {
    if (!state.expiresAt) return "";
    const diff = Math.max(0, new Date(state.expiresAt).getTime() - Date.now());
    const totalSec = Math.floor(diff / 1000);
    const mm = String(Math.floor(totalSec / 60)).padStart(2, "0");
    const ss = String(totalSec % 60).padStart(2, "0");
    return `Masz ${mm}:${ss} na dokończenie płatności`;
  }

  function renderTimelineBlocks(host, height) {
    const blocks = blocksForCurrentResource();
    blocks.forEach((block) => {
      const el = document.createElement("div");
      el.className = block.type === "SERVICE" ? "booking-service" : "booking-busy";
      const top = minToY(block.startMin, height);
      const bottom = minToY(block.endMin, height);
      el.style.top = `${top}px`;
      el.style.height = `${Math.max(8, bottom - top)}px`;
      host.appendChild(el);
    });

    const sel = document.createElement("div");
    sel.className = "booking-selection";
    const from = Math.min(state.startMin, state.endMin);
    const to = Math.max(state.startMin, state.endMin);
    sel.style.top = `${minToY(from, height)}px`;
    sel.style.height = `${Math.max(8, minToY(to, height) - minToY(from, height))}px`;
    host.appendChild(sel);
  }

  function buildSelectStepHtml() {
    const dateMin = todayKey();
    const startMinAllowed = minSelectableStartMin();
    const startMinText = minsToText(Math.min(DAY_END_MIN - 15, Math.max(DAY_START_MIN, startMinAllowed)));
    return `
      <div class="booking-top booking-top-controls">
        <div class="booking-nav">
          <button class="booking-btn" data-action="prev-day">◀</button>
          <strong>${state.date}</strong>
          <button class="booking-btn" data-action="next-day">▶</button>
        </div>

        <label class="booking-inline-field">
          <span>Kalendarz</span>
          <input id="bookingDate" type="date" value="${state.date}" min="${dateMin}" />
        </label>

        <label class="booking-inline-field">
          <span>Od</span>
          <input id="bookingStart" type="time" value="${minsToText(state.startMin)}" min="${startMinText}" max="20:00" step="900" />
        </label>

        <label class="booking-inline-field">
          <span>Do</span>
          <input id="bookingEnd" type="time" value="${minsToText(state.endMin)}" min="08:00" max="20:00" step="900" />
        </label>

        <label class="booking-inline-field">
          <span>Liczba osób</span>
          <input id="bookingPeople" type="number" value="${state.peopleCount}" min="1" max="${resourceCapacity()}" />
        </label>

        <div class="booking-inline-note">maksymalnie ${resourceCapacity()} osób</div>

        <label class="booking-inline-field">
          <span>Płatność</span>
          <select id="bookingPaymentMethod">
            <option value="ONLINE" ${state.paymentMethod === "ONLINE" ? "selected" : ""}>Online</option>
            <option value="CASH" ${state.paymentMethod === "CASH" ? "selected" : ""}>Gotówka</option>
          </select>
        </label>

        <button class="booking-btn booking-btn-primary" data-action="check">Rezerwuje</button>
      </div>

      <div class="booking-tabs">
        ${state.resources
          .map(
            (name) =>
              `<button class="booking-tab ${name === state.selectedResource ? "active" : ""}" data-resource="${name}">${name}</button>`
          )
          .join("")}
      </div>

      <div class="booking-timeline" id="bookingTimeline"></div>
    `;
  }

  function buildDetailsStepHtml() {
    return `
      <div class="booking-countdown">${countdownText()}</div>
      <div class="booking-form-row">
        <label class="booking-field"><span>Imię i nazwisko</span><input id="dName" type="text" /></label>
        <label class="booking-field"><span>Email</span><input id="dEmail" type="email" /></label>
        <label class="booking-field"><span>Telefon</span><input id="dPhone" type="text" /></label>
        <label class="booking-field"><span>Liczba osób</span><input id="dPeople" type="number" min="1" max="${resourceCapacity()}" value="${state.peopleCount}" /></label>
      </div>
      <div class="booking-actions">
        <label class="booking-inline-check"><input type="checkbox" id="wantInvoice" ${state.wantInvoice ? "checked" : ""} /> Chcę fakturę</label>
      </div>
      <div class="booking-msg">maksymalnie ${resourceCapacity()} osób</div>

      <div id="invoiceFields" class="${state.wantInvoice ? "" : "hide"}">
        <div class="booking-form-row">
          <label class="booking-field"><span>Nazwa firmy</span><input id="iCompany" type="text" /></label>
          <label class="booking-field"><span>NIP</span><input id="iNip" type="text" /></label>
          <label class="booking-field full"><span>Adres</span><input id="iAddress" type="text" /></label>
          <label class="booking-field full"><span>Email</span><input id="iEmail" type="email" /></label>
        </div>
      </div>

      <div class="booking-actions">
        <button class="booking-btn" data-action="send-details">Przejdź do płatności (test)</button>
        <button class="booking-btn" data-action="cancel-process">Anuluj i wróć do kalendarza</button>
      </div>
    `;
  }

  function buildPaymentStepHtml() {
    const methodLabel = state.paymentMethod === "CASH" ? "gotówka" : "online";
    return `
      <div class="booking-countdown">${countdownText()}</div>
      <div class="booking-msg">Płatność (${methodLabel}): wybierz wynik symulacji.</div>
      <div class="booking-actions">
        <button class="booking-btn" data-action="pay-confirm">Potwierdź</button>
        <button class="booking-btn" data-action="pay-fail">Anuluj</button>
        <button class="booking-btn" data-action="pay-cash-confirm">Potwierdź gotówkę</button>
        <button class="booking-btn" data-action="cancel-process">Wróć do kalendarza</button>
      </div>
    `;
  }

  function rerender(rebind = true) {
    const root = state.mountedEl;
    if (!root) return;

    let stepHtml = "";
    if (state.step === "select") stepHtml = buildSelectStepHtml();
    if (state.step === "details") stepHtml = buildDetailsStepHtml();
    if (state.step === "payment") stepHtml = buildPaymentStepHtml();

    root.innerHTML = `
      <div class="booking-widget">
        <h3>Rezerwacje</h3>
        ${stepHtml}
        ${state.message ? `<div class="booking-msg ${state.messageType}">${state.message}</div>` : ""}
      </div>
    `;

    if (state.step === "select") {
      const timeline = qs("#bookingTimeline", root);
      const height = timeline.clientHeight || 420;

      for (let h = 8; h <= 20; h += 1) {
        const min = h * 60;
        const y = minToY(min, height);
        const line = document.createElement("div");
        line.className = "booking-grid-line";
        line.style.top = `${y}px`;
        const label = document.createElement("div");
        label.className = "booking-grid-label";
        label.textContent = `${String(h).padStart(2, "0")}:00`;
        line.appendChild(label);
        timeline.appendChild(line);
      }

      renderTimelineBlocks(timeline, height);

      let dragStart = null;
      timeline.onmousedown = (evt) => {
        dragStart = Math.max(minSelectableStartMin(), yToMin(evt.offsetY, height));
        state.startMin = dragStart;
        state.endMin = dragStart + 60;
        normalizeSelectionToAllowedWindow();
        rerender();
      };
      timeline.onmousemove = (evt) => {
        if (dragStart === null) return;
        const current = Math.max(minSelectableStartMin(), yToMin(evt.offsetY, height));
        state.startMin = Math.max(DAY_START_MIN, Math.min(dragStart, current));
        state.endMin = Math.min(DAY_END_MIN, Math.max(dragStart, current));
        if (state.endMin <= state.startMin) state.endMin = state.startMin + 15;
        normalizeSelectionToAllowedWindow();
        rerender();
      };
      window.onmouseup = () => {
        if (dragStart !== null) {
          snapSelectionToFree();
          rerender();
        }
        dragStart = null;
      };
    }

    if (rebind) bindEvents();
  }

  async function handleCheckAvailability() {
    try {
      if (isPastDateKey(state.date)) {
        setMessage("Nie można rezerwować w przeszłości.", "error");
        return;
      }
      if (state.date === todayKey() && state.startMin < minSelectableStartMin()) {
        normalizeSelectionToAllowedWindow();
        setMessage("Nie można rezerwować w przeszłości.", "error");
        rerender();
        return;
      }

      const payload = {
        resourceName: state.selectedResource,
        date: state.date,
        start: minsToText(state.startMin),
        end: minsToText(state.endMin),
        peopleCount: state.peopleCount,
        wantInvoice: state.wantInvoice,
        paymentMethod: state.paymentMethod,
      };
      const data = await api("/api/holds", "POST", payload);
      if (!data.ok && data.reason === "BUSY") {
        state.step = "select";
        state.holdId = null;
        state.expiresAt = null;
        let msg = "Termin zajęty";
        if (data.suggestion) {
          const s = timeTextToMin(data.suggestion.start);
          const e = timeTextToMin(data.suggestion.end);
          if (s !== null && e !== null) {
            state.startMin = s;
            state.endMin = e;
            msg = `Termin zajęty. Ustawiono sugerowany termin: ${data.suggestion.start}-${data.suggestion.end}`;
          }
        }
        setMessage(msg, "error");
        return;
      }

      state.holdId = data.holdId;
      state.expiresAt = data.expiresAt;
      state.step = "details";
      startCountdown();
      setMessage("Termin dostępny. Uzupełnij dane.", "ok");
    } catch (err) {
      const reason = err.payload?.reason || err.message;
      if (reason === "CAPACITY_EXCEEDED") {
        const max = Number(err.payload?.maxCapacity || resourceCapacity());
        if (state.peopleCount > max) state.peopleCount = max;
        setMessage(`Za dużo osób. Maksymalnie ${max} osób dla tej łódki.`, "error");
        rerender();
        return;
      }
      setMessage(`Błąd: ${reason}`, "error");
    }
  }

  async function handleSendDetails() {
    try {
      const customerEmail = (qs("#dEmail", state.mountedEl)?.value || "").trim();
      const invoiceNipRaw = qs("#iNip", state.mountedEl)?.value || "";
      const invoiceNip = normalizeNip(invoiceNipRaw);

      if (state.wantInvoice && invoiceNip.length !== 10) {
        setMessage("NIP musi mieć dokładnie 10 cyfr.", "error");
        return;
      }