84 lines
3.3 KiB
Plaintext
84 lines
3.3 KiB
Plaintext
|
|
@using TIAMWebApp.Shared.Application.Models
|
|
@using TIAMWebApp.Shared.Application.Services
|
|
@inject TourService TourService
|
|
@inject IJSRuntime JSRuntime
|
|
@inject NavigationManager NavigationManager
|
|
|
|
<div class="container">
|
|
<section class="game-section" style="max-width: 100%; overflow-x:hidden">
|
|
<div class="text-center">
|
|
<h1>Tours</h1>
|
|
<h2>Please select!</h2>
|
|
</div>
|
|
<div class="owl-carousel custom-carousel owl-theme">
|
|
@if (Tours != null && Tours.Any()) // Only render the loop if Tours has data
|
|
{
|
|
foreach (var item in Tours)
|
|
{
|
|
<div class="item" style="background-image: url(@item.CoverImageUrl);">
|
|
<div class="item-desc" style="height: 100%; background-color: rgba(0,0,0,0.3);">
|
|
<p style="padding-top:70px">@item.Created</p>
|
|
<p>@item.FancyDescription</p>
|
|
@* <p>@item.TransferDestinationId</p> *@
|
|
<div>
|
|
<button class="btn btn-primary mt-auto" @onclick="@( ()=> Book(item.TransferDestinationId, 1))">1-3 passengers</button>
|
|
<button class="btn btn-primary mt-auto" @onclick="@( ()=> Book(item.TransferDestinationId, 2))">4-6 passengers</button>
|
|
<button class="btn btn-primary mt-auto" @onclick="@( ()=> Book(item.TransferDestinationId, 3))">7-8 passengers</button>
|
|
</div>
|
|
<div class="glass" style="position: absolute; top:0px; left:0px; padding:10px; width:100%">
|
|
<h4>@item.Title</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<p>Loading tours...</p>
|
|
}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
function initializeOwlCarousel() {
|
|
console.log("Initializing Owl Carousel..."); // For debugging
|
|
$(".custom-carousel").owlCarousel({
|
|
autoWidth: true,
|
|
loop: true
|
|
});
|
|
// Ensure this runs only once per initialization
|
|
$(document).ready(function () { // This ready might not be needed if called after DOM update
|
|
$(".custom-carousel .item").off("click").on("click", function () { // Use .off().on() to prevent multiple handlers
|
|
$(".custom-carousel .item").not($(this)).removeClass("active");
|
|
$(this).toggleClass("active");
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
|
|
@code {
|
|
public List<TourInfo> Tours = new List<TourInfo>();
|
|
private bool _owlCarouselInitialized = false;
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
Tours = (await TourService.GetAllAsync()).ToList();
|
|
}
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
// Only initialize Owl Carousel once, after data is loaded and rendered
|
|
if (Tours != null && Tours.Any() && !_owlCarouselInitialized)
|
|
{
|
|
await JSRuntime.InvokeVoidAsync("initializeOwlCarousel");
|
|
_owlCarouselInitialized = true; // Set flag to true after successful initialization
|
|
}
|
|
}
|
|
|
|
private void Book(Guid id, int category)
|
|
{
|
|
NavigationManager.NavigateTo($"/book-a-tour/{id.ToString()}/{category}");
|
|
}
|
|
} |