source: src/main/resources/static/MyReservations.html@ 3a74959

Last change on this file since 3a74959 was 57e58a3, checked in by ste08 <sjovanoska@…>, 4 months ago

Initial commit
  • Property mode set to 100644
File size: 3.6 KB
RevLine 
[57e58a3]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>My Reservations</title>
7 <link rel="stylesheet" href="/css/main.css">
8 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
9</head>
10<body>
11
12<div id="app" class="my-reservations-container">
13 <h1>My Reservations</h1>
14
15 <!-- Future Reservations -->
16 <h2>Future Reservations</h2>
17 <div class="reservation-list">
18 <div v-for="reservation in futureReservations" :key="reservation.id" class="reservation-item">
19 <div class="reservation-info">
20 <p><strong>Reservation ID:</strong> {{ reservation.id }}</p>
21 <p><strong>Flight:</strong> {{ reservation.flight }}</p>
22 <p><strong>Reservation Date:</strong> {{ reservation.date }}</p>
23 </div>
24 </div>
25 </div>
26
27 <!-- Past Reservations -->
28 <h2>Past Reservations</h2>
29 <div class="reservation-list">
30 <div v-for="reservation in pastReservations" :key="reservation.id" class="reservation-item">
31 <div class="reservation-info">
32 <p><strong>Reservation ID:</strong> {{ reservation.id }}</p>
33 <p><strong>Flight:</strong> {{ reservation.flight }}</p>
34 <p><strong>Reservation Date:</strong> {{ reservation.date }}</p>
35 </div>
36 <div v-if="!reservation.reviewed" class="review-section">
37 <button @click="openReviewModal(reservation.id)">Leave a Review</button>
38 </div>
39 <div v-if="reservation.reviewed" class="review-section">
40 <p><strong>Review:</strong> {{ reservation.review }}</p>
41 </div>
42 </div>
43 </div>
44
45 <!-- Review Modal -->
46 <div v-if="showReviewModal" class="review-modal">
47 <div class="modal-content">
48 <h3>Leave a Review</h3>
49 <textarea v-model="reviewText" placeholder="Write your review here..."></textarea>
50 <button @click="submitReview">Submit Review</button>
51 <button @click="closeReviewModal">Cancel</button>
52 </div>
53 </div>
54</div>
55
56<script>
57 new Vue({
58 el: '#app',
59 data: {
60 reservations: [
61 { id: 1, flight: 'NYC to LA', date: '2025-02-10', reviewed: false },
62 { id: 2, flight: 'LA to NYC', date: '2025-01-15', reviewed: true, review: 'Great flight, on time!' },
63 { id: 3, flight: 'Paris to NYC', date: '2024-12-10', reviewed: false },
64 ],
65 showReviewModal: false,
66 reviewText: '',
67 selectedReservationId: null
68 },
69 computed: {
70 futureReservations() {
71 return this.reservations.filter(reservation => new Date(reservation.date) > new Date());
72 },
73 pastReservations() {
74 return this.reservations.filter(reservation => new Date(reservation.date) < new Date());
75 }
76 },
77 methods: {
78 openReviewModal(id) {
79 this.selectedReservationId = id;
80 this.showReviewModal = true;
81 },
82 closeReviewModal() {
83 this.showReviewModal = false;
84 this.reviewText = '';
85 },
86 submitReview() {
87 const reservation = this.pastReservations.find(res => res.id === this.selectedReservationId);
88 if (reservation) {
89 reservation.review = this.reviewText;
90 reservation.reviewed = true;
91 }
92 this.closeReviewModal();
93 }
94 }
95 });
96</script>
97
98</body>
99</html>
Note: See TracBrowser for help on using the repository browser.