Skip to content

Commit

Permalink
fix : ticket | create ticket
Browse files Browse the repository at this point in the history
  • Loading branch information
@MRoyhanF
MRoyhanF committed Dec 21, 2024
1 parent c2fe66b commit 18279d6
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 119 deletions.
4 changes: 4 additions & 0 deletions public/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1077,6 +1077,10 @@ video {
border-inline-start-width: 1px;
}

.border-t-2 {
border-top-width: 2px;
}

.border-none {
border-style: none;
}
Expand Down
216 changes: 97 additions & 119 deletions src/resources/views/pages/ticket/create.edge
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,102 +52,119 @@
</div>
</div>

{{-- Selected Flights Display --}}
<div id="selectedFlights" class="flex flex-col gap-2 w-full justify-center items-center hidden">
<h2 class="font-bold">Selected Flights:</h2>
<div class="flex flex-row gap-x-2 w-full justify-center items-center">
<div id="firstFlightDisplay" class="flex flex-col gap-y-2 w-full justify-center items-center"></div>
<div id="secondFlightDisplay" class="flex flex-col gap-y-2 w-full justify-center items-center"></div>
<div class="w-full hidden" id="discountDropdown">
<select id="discountId" name="discountId" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3">
<option value="">No Discount</option>
@each(data in discounts)
<option value="{{ data.id }}">{{ data.percentage }} %</option>
@end
</select>
{{-- Selected Flights Display --}}
<div id="selectedFlights" class="flex flex-col gap-2 w-full justify-center items-center hidden rounded-lg border-2 border-gray-300 px-4 py-2 shadow-md">
<h2 class="font-bold">Selected Flights:</h2>
<div class="flex flex-row gap-x-2 w-full justify-center items-center">
<div id="firstFlightDisplay" class="flex flex-col gap-y-2 w-full justify-center items-center font-bold"></div>
<div id="secondFlightDisplay" class="flex flex-col gap-y-2 w-full justify-center items-center font-bold"></div>
<div class="w-full hidden" id="discountDropdown">
<select id="discountId" name="discountId" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3">
<option value="">No Discount</option>
@each(data in discounts)
<option value="{{ data.id }}">{{ data.percentage }} %</option>
@end
</select>
</div>
<button id="createButton" class="rounded-lg hidden py-2 px-4 bg-green-500 text-white" onclick="createTicket()">Create</button>
</div>
<button id="createButton" class="rounded-lg hidden py-2 px-4 bg-green-500 text-white" onclick="createTicket()">Create</button>
</div>
</div>

{{-- Submit Button --}}
<button onclick="lockSelection()" class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-lg">Lock Selection</button>


{{-- List Flight --}}
<div class="flex flex-col gap-y-2 w-full justify-center items-center">
<h1 class="text-xl font-bold">List Flight</h1>
@if(flightDepartureData.length || flightArrivalData.length > 0)
<div class="flex w-full justify-between flex-row gap-4">
{{-- Departure --}}
@if(flightDepartureData.length > 0)
<div class="w-full flex flex-col gap-y-2">
@each(data in flightDepartureData)
<div class="hs-accordion border-2 rounded-lg" id="hs-basic-always-open-heading-{{ data.id }}">
<div class="flex flex-row gap-x-2 w-full justify-center items-center pr-4">
<div class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none px-4">
<img src="{{ data.airline.imageUrl }}" alt="{{ data.airline.name }}" class="h-10">
<div class="flex flex-col">
<div>
{{ data.airline.name }} ( {{ data.departure.city.name }} - {{ data.arrival.city.name }} )
</div>
<div>
{{ new Date(data.departure.time).toISOString().split('T')[1].slice(0, 8) }} - {{ new Date(data.arrival.time).toISOString().split('T')[1].slice(0, 8) }}
</div>
</div>
</div>
<div class="flex flex-col gap-y-2 justify-center items-center">
<h1>{{ data.id }}</h1>
<div class="flex">
<input type="radio" name="firstFlight" id="firstFlight{{ data.id }}" value="{{ data.id }}" onclick="updateSelection('first', '{{ data.id }}')">
</div>
</div>
</div>
</div>
@endeach

</div>
@else
<div class="flex flex-col gap-y-2 w-full justify-center items-center">
<h1 class="text-xl font-bold">No Flight Departure At this Date</h1>
</div>
@endif

{{-- Arrival --}}
@if(flightArrivalData.length > 0)
<div class="hs-accordion-group w-full flex flex-col gap-y-2" data-hs-accordion-always-open="">
@each(data in flightArrivalData)
<div class="hs-accordion border-2 rounded-lg">
<div class="flex flex-row gap-x-2 w-full justify-center items-center pr-4">
<div class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none px-4">
<button onclick="lockSelection()" class="py-2 px-4 bg-blue-500 text-white rounded-lg">Lock Selection</button>
<div class="flex w-full justify-between flex-row gap-4">
{{-- Departure --}}
@if(flightDepartureData.length > 0)
<div class="w-full flex flex-col gap-y-2">
@each(data in flightDepartureData)
<div class="hs-accordion border-2 rounded-lg" id="hs-basic-always-open-heading-{{ data.id }}">
<div class="flex flex-row gap-x-2 w-full justify-center items-center pr-4">
<div class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none px-4">
<img src="{{ data.airline.imageUrl }}" alt="{{ data.airline.name }}" class="h-10">
<div class="flex flex-col">
<div>
{{ data.airline.name }} ( {{ data.departure.city.name }} - {{ data.arrival.city.name }} )
</div>
<div>
{{ new Date(data.departure.time).toISOString().split('T')[1].slice(0, 8) }} - {{ new Date(data.arrival.time).toISOString().split('T')[1].slice(0, 8) }}
{{ new Date(data.departure.time).toISOString().split('T')[1].slice(0, 8) }} - {{ new Date(data.arrival.time).toISOString().split('T')[1].slice(0, 8) }}

@if(data.class == 'Economy')
<span class="bg-green-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@elseif(data.class == 'Premium_Economy')
<span class="bg-blue-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@elseif(data.class == 'Business')
<span class="bg-red-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@elseif(data.class == 'First Class')
<span class="bg-purple-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@endif
</div>
</div>
</div>
<div class="flex flex-col gap-y-2 justify-center items-center">
<h1>{{ data.id }}</h1>
<div class="flex">
<input type="radio" name="firstFlight" id="firstFlight{{ data.id }}" value="{{ data.id }}" onclick="updateSelection('first', '{{ data.id }}')">
</div>
</div>
</div>
<div class="flex flex-col gap-y-2 justify-center items-center">
<h1>{{ data.id }}</h1>
<div class="flex">
<input type="radio" name="secondFlight" id="secondFlight{{ data.id }}" value="{{ data.id }}" onclick="updateSelection('second', '{{ data.id }}')">
</div>
@endeach

</div>
@else
<div class="flex flex-col gap-y-2 w-full justify-center items-center">
<h1 class="text-xl font-bold">No Flight Departure At this Date</h1>
</div>
@endif

{{-- Arrival --}}
@if(flightArrivalData.length > 0)
<div class="hs-accordion-group w-full flex flex-col gap-y-2" data-hs-accordion-always-open="">
@each(data in flightArrivalData)
<div class="hs-accordion border-2 rounded-lg">
<div class="flex flex-row gap-x-2 w-full justify-center items-center pr-4">
<div class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none px-4">
<img src="{{ data.airline.imageUrl }}" alt="{{ data.airline.name }}" class="h-10">
<div class="flex flex-col">
<div>
{{ data.airline.name }} ( {{ data.departure.city.name }} - {{ data.arrival.city.name }} )
</div>
<div>
{{ new Date(data.departure.time).toISOString().split('T')[1].slice(0, 8) }} - {{ new Date(data.arrival.time).toISOString().split('T')[1].slice(0, 8) }}

@if(data.class == 'Economy')
<span class="bg-green-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@elseif(data.class == 'Premium_Economy')
<span class="bg-blue-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@elseif(data.class == 'Business')
<span class="bg-red-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@elseif(data.class == 'First Class')
<span class="bg-purple-300 rounded-full text-sm px-2 py-1 shadow-md">{{ data.class }}</span>
@endif
</div>
</div>
</div>
<div class="flex flex-col gap-y-2 justify-center items-center">
<h1>{{ data.id }}</h1>
<div class="flex">
<input type="radio" name="secondFlight" id="secondFlight{{ data.id }}" value="{{ data.id }}" onclick="updateSelection('second', '{{ data.id }}')">
</div>
</div>
</div>
</div>
</div>
@endeach

</div>
@else
<div class="flex flex-col gap-y-2 w-full justify-center items-center">
<h1 class="text-xl font-bold">No Flight Arrival At this Date</h1>
</div>
@endif
@endeach

</div>
@else
<div class="flex flex-col gap-y-2 w-full justify-center items-center">
<h1 class="text-xl font-bold">No Flight Arrival At this Date</h1>
</div>
@endif

</div>
</div>
@else
<div class="flex flex-col gap-y-2">
<h1 class="text-xl font-bold">Search Date First</h1>
Expand Down Expand Up @@ -226,9 +243,9 @@
success: function (response) {
if (response.success) {
showToast("success", "Success", response.message || "Ticket created successfully!");
// setTimeout(() => {
// window.location.reload();
// }, 1000);
setTimeout(() => {
window.location.reload();
}, 1000);
} else {
let errorMessages = response.message || "An unexpected error occurred.";
if (response.errors) {
Expand Down Expand Up @@ -263,46 +280,7 @@
window.location.reload();
}
}
// function lockSelection() {
// const firstFlightId = document.querySelector('input[name="firstFlight"]:checked')?.value;
// const secondFlightId = document.querySelector('input[name="secondFlight"]:checked')?.value;
// if (!firstFlightId || !secondFlightId) {
// alert('Please select one flight for both First and Second.');
// return;
// }
// // Display selected flights
// document.getElementById('firstFlightDisplay').innerText = `First Flight ID: ${firstFlightId}`;
// document.getElementById('secondFlightDisplay').innerText = `Second Flight ID: ${secondFlightId}`;
// // Prepare data for POST request
// const data = {
// routeId: 10, // Replace with your actual routeId
// flightIds: [firstFlightId, secondFlightId]
// // Optional: discountId if needed
// };
// Send data via POST (you can replace with your actual endpoint)
// fetch('/your-endpoint', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify(data),
// })
// .then(response => response.json())
// .then(data => {
// console.log('Success:', data);
// alert('Ticket created successfully!');
// })
// .catch((error) => {
// console.error('Error:', error);
// alert('An error occurred.');
// });
// }
</script>
</script>
@endslot
@end

0 comments on commit 18279d6

Please sign in to comment.