poprawki dla bazy pilotów web, modul zaproszen w apce mobile
This commit is contained in:
oskarn
@@ -0,0 +1,588 @@
|
||||
<?php
|
||||
$enablePrototypeComments = true;
|
||||
$pageTitle = 'TravelLeader - Wycieczki i Zlecenia';
|
||||
|
||||
$isAccepted = isset($_GET['accepted']) && $_GET['accepted'] == '15';
|
||||
$isRejected = isset($_GET['rejected']) && $_GET['rejected'] == '15';
|
||||
$activeTab = $_GET['tab'] ?? ($isAccepted ? 'current' : 'current');
|
||||
|
||||
$currentCount = $isAccepted ? 2 : 1;
|
||||
$invitationsCount = ($isAccepted || $isRejected) ? 0 : 1;
|
||||
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
<!-- SYSTEMOWY STACK WSTĄŻEK (Pasy pod nagłówkiem na pełną szerokość - oddzielone kolorami i subtelnym borderem) -->
|
||||
<div class="system-ribbons-stack">
|
||||
|
||||
<!-- 1. WSTĄŻKA ZAPROSZENIA (Ciepły koral/bursztyn, 24h timer, priorytet biznesowy) -->
|
||||
<?php if (!$isAccepted && !$isRejected): ?>
|
||||
<div class="system-ribbon-bar ribbon-invitation" id="ribbonInvitationBar">
|
||||
<div class="d-flex align-items-center gap-2" style="min-width: 0;">
|
||||
<span class="ribbon-badge ribbon-badge-urgent">⏳ 18h</span>
|
||||
<div class="ribbon-text">
|
||||
<span class="fw-bold">Zaproszenie</span>
|
||||
<span class="ribbon-sub"> • Włochy (05–12.10) • 4 400 zł</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2 flex-shrink-0">
|
||||
<a href="invitation-details.php?id=15" class="btn-ribbon-action btn-ribbon-invitation">
|
||||
Sprawdź >
|
||||
</a>
|
||||
<button type="button" class="btn-ribbon-close" onclick="this.closest('.ribbon-invitation').style.display='none';" title="Zamknij powiadomienie">
|
||||
<i class='bx bx-x'></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- 2. WSTĄŻKA PROFILU (Chabrowa, uzupełnienie danych) -->
|
||||
<div class="system-ribbon-bar ribbon-profile" id="ribbonProfileBar">
|
||||
<div class="d-flex align-items-center gap-2" style="min-width: 0;">
|
||||
<span class="ribbon-badge">45%</span>
|
||||
<div class="ribbon-text">
|
||||
<span class="fw-bold">Profil w bazie</span>
|
||||
<span class="ribbon-sub"> • Uzupełnij dane dla biur</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2 flex-shrink-0">
|
||||
<a href="profile.php" class="btn-ribbon-action">
|
||||
Dokończ >
|
||||
</a>
|
||||
<button type="button" class="btn-ribbon-close" onclick="this.closest('.ribbon-profile').style.display='none';" title="Zamknij powiadomienie">
|
||||
<i class='bx bx-x'></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="app-content">
|
||||
|
||||
<?php if ($isAccepted): ?>
|
||||
<!-- Zwięzły alert sukcesu po akceptacji wycieczki -->
|
||||
<div class="p-2 px-3 rounded-2 mb-2 d-flex align-items-center justify-content-between" style="background: #ecfdf5; border: 1px solid #a7f3d0; font-size: 0.78rem;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class='bx bx-check-circle fs-5 text-success'></i>
|
||||
<span class="text-success fw-semibold">Wycieczka #15 została zaakceptowana i dodana do Twojego grafiku!</span>
|
||||
</div>
|
||||
<a href="index.php" class="btn-close" style="font-size: 0.65rem;" aria-label="Zamknij"></a>
|
||||
</div>
|
||||
<?php elseif ($isRejected): ?>
|
||||
<!-- Zwięzły alert informacyjny po odrzuceniu -->
|
||||
<div class="p-2 px-3 rounded-2 mb-2 d-flex align-items-center justify-content-between" style="background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.78rem;">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class='bx bx-info-circle fs-5 text-muted'></i>
|
||||
<span class="text-muted">Zaproszenie #15 zostało odrzucone. Biuro podróży otrzymało powiadomienie.</span>
|
||||
</div>
|
||||
<a href="index.php" class="btn-close" style="font-size: 0.65rem;" aria-label="Zamknij"></a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Wyszukiwarka i filtr zakresu dat -->
|
||||
<div class="search-filter-card">
|
||||
<div class="search-filter-icon">
|
||||
<i class='bx bx-search'></i>
|
||||
</div>
|
||||
<div class="search-filter-text flex-grow-1">
|
||||
<h6>Wycieczki</h6>
|
||||
<small>
|
||||
<i class='bx bx-calendar'></i> 18 wrz 2026 → 18 wrz 2027
|
||||
</small>
|
||||
</div>
|
||||
<i class='bx bx-chevron-down text-muted fs-4'></i>
|
||||
</div>
|
||||
|
||||
<!-- Pasek zakładek i przełącznik widoku (Bieżące vs Zaproszenia vs Historia) -->
|
||||
<div class="trips-tabs-bar">
|
||||
<div class="nav-pills-custom">
|
||||
<a href="javascript:void(0);" class="nav-pill-item <?= $activeTab === 'current' ? 'active' : '' ?>" id="tabBtnCurrent" onclick="switchTripsTab('current');">
|
||||
<i class='bx bx-home-alt-2'></i>
|
||||
<span>Bieżące</span>
|
||||
<span class="badge-count" id="badgeCurrentCount"><?= $currentCount ?></span>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="nav-pill-item <?= $activeTab === 'invitations' ? 'active' : '' ?>" id="tabBtnInvitations" onclick="switchTripsTab('invitations');">
|
||||
<i class='bx bx-envelope'></i>
|
||||
<span>Zaproszenia</span>
|
||||
<span class="badge-count <?= $invitationsCount > 0 ? 'badge-alert' : '' ?>" id="badgeInvitationsCount"><?= $invitationsCount ?></span>
|
||||
</a>
|
||||
<a href="javascript:void(0);" class="nav-pill-item <?= $activeTab === 'history' ? 'active' : '' ?>" id="tabBtnHistory" onclick="switchTripsTab('history');">
|
||||
<i class='bx bx-history'></i>
|
||||
<span>Historia</span>
|
||||
<span class="badge-count">0</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Przełącznik Lista / Kalendarz w obrębie wycieczek -->
|
||||
<div class="view-toggle-group" id="tripsViewToggleGroup" style="<?= $activeTab === 'invitations' ? 'display: none !important;' : '' ?>">
|
||||
<button type="button" id="btnListView" class="view-toggle-btn active" title="Widok listy" onclick="switchTripsView('list');">
|
||||
<i class='bx bx-list-ul'></i>
|
||||
</button>
|
||||
<button type="button" id="btnCalendarView" class="view-toggle-btn" title="Widok kalendarza" onclick="switchTripsView('calendar');">
|
||||
<i class='bx bx-calendar'></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== WIDOK 1: BIEŻĄCE WYCIECZKI (LISTA) ==================== -->
|
||||
<div id="tripsListView" class="<?= $activeTab !== 'current' ? 'd-none' : '' ?>">
|
||||
|
||||
<?php if ($isAccepted): ?>
|
||||
<!-- Nowo zaakceptowana wycieczka #15 -->
|
||||
<div class="trip-card border-success" style="border-left: 4px solid #10b981 !important;">
|
||||
<div class="trip-card-header">
|
||||
<div class="d-flex align-items-center flex-grow-1">
|
||||
<div class="trip-id-badge" style="background: linear-gradient(135deg, #10b981, #059669); color: white;">15</div>
|
||||
<div class="trip-title-area">
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<span class="badge bg-success-subtle text-success py-0 px-1" style="font-size: 0.65rem;">Nowo przyjęta</span>
|
||||
<span class="text-muted small" style="font-size: 0.72rem;">Almatur</span>
|
||||
</div>
|
||||
<h5 class="trip-title mb-0">Magia Toskanii i Rzym</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trip-status-pill">
|
||||
<span class="badge-status bg-success-subtle text-success">Zaakceptowana</span>
|
||||
<div class="status-subtext">za 382 dni</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dane wycieczki -->
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-calendar text-primary'></i>
|
||||
<span>05-12.10.2027 (8 dni)</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-group text-primary'></i>
|
||||
<span>38 osób • Autokar</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-map text-primary'></i>
|
||||
<span>🇮🇹 Włochy (Florencja, Rzym)</span>
|
||||
</div>
|
||||
|
||||
<!-- Stopka karty -->
|
||||
<div class="trip-card-footer">
|
||||
<div class="trip-code">
|
||||
<i class='bx bx-wallet'></i>
|
||||
<strong class="text-success">4 400 PLN netto</strong>
|
||||
</div>
|
||||
|
||||
<a href="invitation-details.php?id=15" class="btn-details">
|
||||
Szczegóły >
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Istniejąca wycieczka #12 -->
|
||||
<div class="trip-card">
|
||||
<div class="trip-card-header">
|
||||
<div class="d-flex align-items-center flex-grow-1">
|
||||
<div class="trip-id-badge">12</div>
|
||||
<div class="trip-title-area">
|
||||
<h5 class="trip-title">oskar prod</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trip-status-pill">
|
||||
<span class="badge-status">Planowana</span>
|
||||
<div class="status-subtext">za 363 dni</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dane wycieczki -->
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-calendar'></i>
|
||||
<span>16-24.09.2027</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-group'></i>
|
||||
<span>24 / 0</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-map'></i>
|
||||
<span class="text-muted">Brak danych</span>
|
||||
</div>
|
||||
|
||||
<!-- Stopka karty -->
|
||||
<div class="trip-card-footer">
|
||||
<div class="trip-code">
|
||||
<i class='bx bx-briefcase-alt'></i>
|
||||
<span>123osk123</span>
|
||||
</div>
|
||||
|
||||
<a href="#" class="btn-details" onclick="openTripBottomSheet('16 WRZEŚNIA 2027'); return false;">
|
||||
Szczegóły >
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== WIDOK 2: KALENDARZ WYCIECZEK ==================== -->
|
||||
<div id="tripsCalendarView" class="d-none">
|
||||
<div class="trips-calendar-container">
|
||||
|
||||
<!-- Nagłówek miesiąca -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 px-1">
|
||||
<button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Sierpnia 2027');"><i class='bx bx-chevron-left fs-5'></i></button>
|
||||
<div class="month-title-header mb-0">WRZESIEŃ 2027</div>
|
||||
<button type="button" class="btn btn-sm btn-light rounded-circle p-1" onclick="alert('Przejdź do Października 2027');"><i class='bx bx-chevron-right fs-5'></i></button>
|
||||
</div>
|
||||
|
||||
<table class="calendar-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pn</th>
|
||||
<th>Wt</th>
|
||||
<th>Śr</th>
|
||||
<th>Cz</th>
|
||||
<th>Pt</th>
|
||||
<th>So</th>
|
||||
<th>Nd</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Tydzień 1 -->
|
||||
<tr>
|
||||
<td class="other-month"><span class="day-number">30</span></td>
|
||||
<td class="other-month"><span class="day-number">31</span></td>
|
||||
<td><span class="day-number">1</span></td>
|
||||
<td><span class="day-number">2</span></td>
|
||||
<td><span class="day-number">3</span></td>
|
||||
<td><span class="day-number">4</span></td>
|
||||
<td><span class="day-number">5</span></td>
|
||||
</tr>
|
||||
<!-- Tydzień 2 -->
|
||||
<tr>
|
||||
<td><span class="day-number">6</span></td>
|
||||
<td><span class="day-number">7</span></td>
|
||||
<td><span class="day-number">8</span></td>
|
||||
<td><span class="day-number">9</span></td>
|
||||
<td><span class="day-number">10</span></td>
|
||||
<td><span class="day-number">11</span></td>
|
||||
<td><span class="day-number">12</span></td>
|
||||
</tr>
|
||||
<!-- Tydzień 3: Początek wycieczki 16-19 września -->
|
||||
<tr>
|
||||
<td><span class="day-number">13</span></td>
|
||||
<td><span class="day-number">14</span></td>
|
||||
<td><span class="day-number">15</span></td>
|
||||
<td onclick="openTripBottomSheet('16 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">16</span>
|
||||
<span class="trip-ribbon-bar trip-ribbon-start">oskar prod</span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('17 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">17</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('18 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">18</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('19 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">19</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Tydzień 4: Ciąg dalszy wycieczki 20-24 września -->
|
||||
<tr>
|
||||
<td onclick="openTripBottomSheet('20 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">20</span>
|
||||
<span class="trip-ribbon-bar">oskar prod</span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('21 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">21</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('22 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">22</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('23 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">23</span>
|
||||
<span class="trip-ribbon-bar"> </span>
|
||||
</td>
|
||||
<td onclick="openTripBottomSheet('24 WRZEŚNIA 2027');">
|
||||
<span class="day-number fw-bold text-primary">24</span>
|
||||
<span class="trip-ribbon-bar trip-ribbon-end"> </span>
|
||||
</td>
|
||||
<td><span class="day-number">25</span></td>
|
||||
<td><span class="day-number">26</span></td>
|
||||
</tr>
|
||||
<!-- Tydzień 5 -->
|
||||
<tr>
|
||||
<td><span class="day-number">27</span></td>
|
||||
<td><span class="day-number">28</span></td>
|
||||
<td><span class="day-number">29</span></td>
|
||||
<td><span class="day-number">30</span></td>
|
||||
<td class="other-month"><span class="day-number">1</span></td>
|
||||
<td class="other-month"><span class="day-number">2</span></td>
|
||||
<td class="other-month"><span class="day-number">3</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="mt-3 pt-2 border-top d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted" style="font-size: 0.72rem;">
|
||||
<i class='bx bxs-circle text-primary' style="font-size: 0.6rem;"></i> Zaznaczony termin wycieczki (16-24 Wrz)
|
||||
</small>
|
||||
<a href="availability.php" class="text-primary fw-bold text-decoration-none" style="font-size: 0.72rem;">
|
||||
Kalendarz dostępności →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== WIDOK 3: ZAPROSZENIA I OFERTY BIUR (MINIMALISTYCZNA LISTA) ==================== -->
|
||||
<div id="tripsInvitationsView" class="<?= $activeTab !== 'invitations' ? 'd-none' : '' ?>">
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="fw-bold mb-0 text-dark" style="font-size: 0.92rem;">Otrzymane zaproszenia na wycieczki</h6>
|
||||
<span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1" style="font-size: 0.72rem;">
|
||||
<?= $invitationsCount ?> aktywne
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<?php if (!$isAccepted && !$isRejected): ?>
|
||||
<!-- Minimalistyczny wiersz zaproszenia #15 (Single-tap) -->
|
||||
<a href="invitation-details.php?id=15" class="invitation-compact-item is-pending" title="Kliknij, aby przejść do szczegółów i decyzji">
|
||||
<div class="inv-item-icon">
|
||||
<i class='bx bx-envelope'></i>
|
||||
<span class="inv-item-status-dot"></span>
|
||||
</div>
|
||||
<div class="inv-item-content">
|
||||
<div class="inv-item-top">
|
||||
<span class="inv-item-agency fw-bold" style="color: #ea580c;">Nowe zaproszenie</span>
|
||||
<span class="inv-item-timer">⏳ 18h na decyzję</span>
|
||||
</div>
|
||||
<div class="inv-item-title">#15: Magia Toskanii i Rzym</div>
|
||||
<div class="inv-item-meta">
|
||||
<span>05–12.10.2027 (8 dni)</span>
|
||||
<span>•</span>
|
||||
<span class="text-success fw-bold">4 400 PLN netto</span>
|
||||
<span>•</span>
|
||||
<span>Almatur</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inv-item-arrow">
|
||||
<i class='bx bx-chevron-right fs-4 text-muted'></i>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($isAccepted): ?>
|
||||
<!-- Kompaktowy kafelek zaakceptowanego zlecenia -->
|
||||
<a href="invitation-details.php?id=15" class="invitation-compact-item is-accepted">
|
||||
<div class="inv-item-icon" style="background: #ecfdf5; color: #10b981;">
|
||||
<i class='bx bx-check'></i>
|
||||
</div>
|
||||
<div class="inv-item-content">
|
||||
<div class="inv-item-top">
|
||||
<span class="inv-item-agency">Almatur Warszawa</span>
|
||||
<span class="badge bg-success-subtle text-success py-0 px-1" style="font-size: 0.68rem;">Zaakceptowane</span>
|
||||
</div>
|
||||
<div class="inv-item-title">Wycieczka #15: Magia Toskanii i Rzym</div>
|
||||
<div class="inv-item-meta">
|
||||
<span>05–12.10.2027</span>
|
||||
<span>•</span>
|
||||
<span class="text-success fw-semibold">4 400 PLN</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inv-item-arrow">
|
||||
<i class='bx bx-chevron-right fs-4 text-muted'></i>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($isRejected): ?>
|
||||
<!-- Kompaktowy kafelek odrzuconego zlecenia -->
|
||||
<div class="invitation-compact-item is-rejected">
|
||||
<div class="inv-item-icon" style="background: #fef2f2; color: #ef4444;">
|
||||
<i class='bx bx-x'></i>
|
||||
</div>
|
||||
<div class="inv-item-content">
|
||||
<div class="inv-item-top">
|
||||
<span class="inv-item-agency">Almatur Warszawa</span>
|
||||
<span class="badge bg-danger-subtle text-danger py-0 px-1" style="font-size: 0.68rem;">Odrzucone</span>
|
||||
</div>
|
||||
<div class="inv-item-title">Wycieczka #15: Magia Toskanii i Rzym</div>
|
||||
<div class="inv-item-meta">
|
||||
<span>05–12.10.2027</span>
|
||||
<span>•</span>
|
||||
<span>Kolizja terminów</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Zaproszenie zrealizowane z przeszłości -->
|
||||
<div class="invitation-compact-item opacity-75">
|
||||
<div class="inv-item-icon" style="background: #f1f5f9; color: #64748b;">
|
||||
<span>R</span>
|
||||
</div>
|
||||
<div class="inv-item-content">
|
||||
<div class="inv-item-top">
|
||||
<span class="inv-item-agency">Rainbow Tours</span>
|
||||
<span class="badge bg-light text-muted border py-0 px-1" style="font-size: 0.68rem;">Zrealizowana</span>
|
||||
</div>
|
||||
<div class="inv-item-title">Wycieczka #9: Klasyczna Grecja</div>
|
||||
<div class="inv-item-meta">
|
||||
<span>Czerwiec 2026</span>
|
||||
<span>•</span>
|
||||
<span>Ocena: ★ 5.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ==================== WIDOK 4: HISTORIA WYCIECZEK ==================== -->
|
||||
<div id="tripsHistoryView" class="d-none">
|
||||
<div class="text-center py-5">
|
||||
<i class='bx bx-history text-muted' style="font-size: 3rem;"></i>
|
||||
<h6 class="fw-bold mt-2 text-dark">Brak zrealizowanych wycieczek w tym sezonie</h6>
|
||||
<p class="text-muted small">Wycieczki z poprzednich lat są archiwizowane w bazie zleceń.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.app-content -->
|
||||
|
||||
<!-- BOTTOM SHEET DLA WYCIECZKI Z KALENDARZA -->
|
||||
<div id="tripSheetBackdrop" class="bottom-sheet-backdrop" onclick="closeTripBottomSheet();"></div>
|
||||
<div id="tripBottomSheet" class="bottom-sheet-content">
|
||||
<div class="sheet-drag-handle"></div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<div class="text-uppercase fw-bold text-muted" style="font-size: 0.68rem; letter-spacing: 0.5px;">WYBRANY DZIEŃ</div>
|
||||
<h5 class="fw-bold mb-0" id="sheetSelectedDate" style="color: var(--dark-navy); font-size: 1.15rem;">16 WRZEŚNIA 2027</h5>
|
||||
</div>
|
||||
<button type="button" class="btn-close" style="font-size: 0.75rem;" onclick="closeTripBottomSheet();" aria-label="Zamknij"></button>
|
||||
</div>
|
||||
|
||||
<!-- Karta wycieczki wewnątrz Bottom Sheet -->
|
||||
<div class="trip-card mb-0 shadow-none border mt-3">
|
||||
<div class="trip-card-header">
|
||||
<div class="d-flex align-items-center flex-grow-1">
|
||||
<div class="trip-id-badge">12</div>
|
||||
<div class="trip-title-area">
|
||||
<h5 class="trip-title">oskar prod</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trip-status-pill">
|
||||
<span class="badge-status">Planowana</span>
|
||||
<div class="status-subtext">za 363 dni</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-calendar'></i>
|
||||
<span>16-24.09.2027</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-group'></i>
|
||||
<span>24 / 0</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-info-row">
|
||||
<i class='bx bx-map'></i>
|
||||
<span class="text-muted">Brak danych</span>
|
||||
</div>
|
||||
|
||||
<div class="trip-card-footer">
|
||||
<div class="trip-code">
|
||||
<i class='bx bx-briefcase-alt'></i>
|
||||
<span>123osk123</span>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-details" onclick="alert('Otwieranie pełnych szczegółów wycieczki 12 oskar prod');">
|
||||
Szczegóły >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTripsTab(tab) {
|
||||
const tabCurrent = document.getElementById('tabBtnCurrent');
|
||||
const tabInvitations = document.getElementById('tabBtnInvitations');
|
||||
const tabHistory = document.getElementById('tabBtnHistory');
|
||||
|
||||
const listView = document.getElementById('tripsListView');
|
||||
const calView = document.getElementById('tripsCalendarView');
|
||||
const invView = document.getElementById('tripsInvitationsView');
|
||||
const histView = document.getElementById('tripsHistoryView');
|
||||
const toggleGroup = document.getElementById('tripsViewToggleGroup');
|
||||
|
||||
// Reset tabs
|
||||
[tabCurrent, tabInvitations, tabHistory].forEach(t => t.classList.remove('active'));
|
||||
[listView, calView, invView, histView].forEach(v => v.classList.add('d-none'));
|
||||
|
||||
if (tab === 'invitations') {
|
||||
tabInvitations.classList.add('active');
|
||||
invView.classList.remove('d-none');
|
||||
if (toggleGroup) toggleGroup.style.setProperty('display', 'none', 'important');
|
||||
} else if (tab === 'history') {
|
||||
tabHistory.classList.add('active');
|
||||
histView.classList.remove('d-none');
|
||||
if (toggleGroup) toggleGroup.style.setProperty('display', 'none', 'important');
|
||||
} else {
|
||||
tabCurrent.classList.add('active');
|
||||
listView.classList.remove('d-none');
|
||||
if (toggleGroup) toggleGroup.style.display = 'flex';
|
||||
// Reset sub toggle to list
|
||||
document.getElementById('btnListView').classList.add('active');
|
||||
document.getElementById('btnCalendarView').classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
function switchTripsView(view) {
|
||||
const listView = document.getElementById('tripsListView');
|
||||
const calView = document.getElementById('tripsCalendarView');
|
||||
const btnList = document.getElementById('btnListView');
|
||||
const btnCal = document.getElementById('btnCalendarView');
|
||||
|
||||
if (view === 'calendar') {
|
||||
listView.classList.add('d-none');
|
||||
calView.classList.remove('d-none');
|
||||
btnCal.classList.add('active');
|
||||
btnList.classList.remove('active');
|
||||
} else {
|
||||
listView.classList.remove('d-none');
|
||||
calView.classList.add('d-none');
|
||||
btnList.classList.add('active');
|
||||
btnCal.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
function openTripBottomSheet(dateTitle) {
|
||||
document.getElementById('sheetSelectedDate').innerText = dateTitle;
|
||||
document.getElementById('tripSheetBackdrop').classList.add('active');
|
||||
document.getElementById('tripBottomSheet').classList.add('active');
|
||||
}
|
||||
|
||||
function closeTripBottomSheet() {
|
||||
document.getElementById('tripSheetBackdrop').classList.remove('active');
|
||||
document.getElementById('tripBottomSheet').classList.remove('active');
|
||||
}
|
||||
|
||||
// Obsługa parametru URL przy starcie (np. kliknięcie dzwonka w headerze)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const tabParam = urlParams.get('tab');
|
||||
if (tabParam === 'invitations') {
|
||||
switchTripsTab('invitations');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php include 'footer.php'; ?>
|
||||
Reference in New Issue
Block a user