9898 text-decoration : underline;
9999 }
100100
101- .clock -icon {
101+ .edit -icon {
102102 cursor : pointer;
103103 font-size : 1.2rem ;
104104 margin-left : 10px ;
105105 display : inline-block;
106106 transition : transform 0.2s ease;
107107 }
108108
109- .clock -icon: hover {
109+ .edit -icon: hover {
110110 transform : scale (1.2 );
111111 }
112112
123123
124124 .modal-content {
125125 background-color : white;
126- margin : 10 % auto;
126+ margin : 5 % auto;
127127 padding : 30px ;
128128 border-radius : 10px ;
129129 box-shadow : 0 4px 8px rgba (0 , 0 , 0 , 0.2 );
130130 width : 90% ;
131- max-width : 400px ;
131+ max-width : 500px ;
132+ max-height : 80vh ;
133+ overflow-y : auto;
132134 }
133135
134136 .close {
@@ -221,37 +223,59 @@ <h1>Available Flights</h1>
221223 {% for flight in flights %}
222224 < div class ="card ">
223225 < h2 > {{ flight.flight_number }}
224- < span class ="clock -icon " onclick ="openEditModal({{ loop.index0 }}) " title ="Edit times " > 🕒 </ span >
226+ < span class ="edit -icon " onclick ="openEditModal({{ loop.index0 }}) " title ="Edit flight details " > ✏️ </ span >
225227 </ h2 >
226- < p > Airline: {{ flight.airline_name }}</ p >
228+ < p > Airline: < span id =" airline- {{ loop.index0 }} " > {{ flight.airline_name }}</ span > </ p >
227229 < p > Departure: < span id ="departure-{{ loop.index0 }} "> {{ flight.nice_departure_date }}</ span > </ p >
228230 < p > Arrival: < span id ="arrival-{{ loop.index0 }} "> {{ flight.nice_arrival_date }}</ span > </ p >
229- < p > From: {{ flight.origin_airport_code }}</ p >
230- < p > To: {{ flight.destination_airport_code }}</ p >
231+ < p > From: < span id =" from- {{ loop.index0 }} " > {{ flight.origin_airport_code }}</ span > </ p >
232+ < p > To: < span id =" to- {{ loop.index0 }} " > {{ flight.destination_airport_code }}</ span > </ p >
231233 < form action ="/create_event/{{ loop.index0 }} " method ="post " id ="form-{{ loop.index0 }} ">
232- < input type ="hidden " name ="flight_number " value ="{{ flight.flight_number }} ">
233- < input type ="hidden " name ="flight_date " value ="{{ flight.scheduled_departure }} ">
234- < input type ="hidden " name ="custom_departure " id ="custom-departure-{{ loop.index0 }} " value ="">
235- < input type ="hidden " name ="custom_arrival " id ="custom-arrival-{{ loop.index0 }} " value ="">
234+ < input type ="hidden " name ="flight_number " id ="hidden-flight-number-{{ loop.index0 }} " value ="{{ flight.flight_number }} ">
235+ < input type ="hidden " name ="airline_name " id ="hidden-airline-{{ loop.index0 }} " value ="{{ flight.airline_name }} ">
236+ < input type ="hidden " name ="origin_airport " id ="hidden-origin-airport-{{ loop.index0 }} " value ="{{ flight.origin_airport }} ">
237+ < input type ="hidden " name ="origin_airport_code " id ="hidden-origin-code-{{ loop.index0 }} " value ="{{ flight.origin_airport_code }} ">
238+ < input type ="hidden " name ="destination_airport " id ="hidden-destination-airport-{{ loop.index0 }} " value ="{{ flight.destination_airport }} ">
239+ < input type ="hidden " name ="destination_airport_code " id ="hidden-destination-code-{{ loop.index0 }} " value ="{{ flight.destination_airport_code }} ">
240+ < input type ="hidden " name ="scheduled_departure " id ="hidden-scheduled-departure-{{ loop.index0 }} " value ="{{ flight.scheduled_departure }} ">
241+ < input type ="hidden " name ="scheduled_arrival " id ="hidden-scheduled-arrival-{{ loop.index0 }} " value ="{{ flight.scheduled_arrival }} ">
242+ < input type ="hidden " name ="origin_timezone " id ="hidden-origin-tz-{{ loop.index0 }} " value ="{{ flight.origin_timezone }} ">
243+ < input type ="hidden " name ="destination_timezone " id ="hidden-destination-tz-{{ loop.index0 }} " value ="{{ flight.destination_timezone }} ">
236244 < input type ="submit " value ="Create Event ">
237245 </ form >
238246 </ div >
239247 {% endfor %}
240248 </ div >
241249 < button class ="restart-button " onclick ="window.location.href='/' "> Restart</ button >
242250
243- <!-- Time Edit Modal -->
251+ <!-- Edit Flight Details Modal -->
244252 < div id ="editModal " class ="modal ">
245253 < div class ="modal-content ">
246254 < span class ="close " onclick ="closeEditModal() "> ×</ span >
247- < h2 > Edit Flight Times</ h2 >
255+ < h2 > Edit Flight Details</ h2 >
256+ < label for ="modal-flight-number "> Flight Number:</ label >
257+ < input type ="text " id ="modal-flight-number " placeholder ="e.g., BA929 ">
258+ < label for ="modal-airline "> Airline Name:</ label >
259+ < input type ="text " id ="modal-airline " placeholder ="e.g., British Airways ">
260+ < label for ="modal-origin-airport "> Origin Airport:</ label >
261+ < input type ="text " id ="modal-origin-airport " placeholder ="e.g., Hannover Langenhagen Airport ">
262+ < label for ="modal-origin-code "> Origin Airport Code:</ label >
263+ < input type ="text " id ="modal-origin-code " placeholder ="e.g., HAJ ">
264+ < label for ="modal-destination-airport "> Destination Airport:</ label >
265+ < input type ="text " id ="modal-destination-airport " placeholder ="e.g., London Heathrow Airport ">
266+ < label for ="modal-destination-code "> Destination Airport Code:</ label >
267+ < input type ="text " id ="modal-destination-code " placeholder ="e.g., LHR ">
248268 < label for ="modal-departure "> Departure Time:</ label >
249269 < input type ="text " id ="modal-departure " placeholder ="yyyy-mm-dd hh:mm " pattern ="\d{4}-\d{2}-\d{2} \d{2}:\d{2} " title ="Format: yyyy-mm-dd hh:mm (24-hour) ">
250270 < label for ="modal-arrival "> Arrival Time:</ label >
251271 < input type ="text " id ="modal-arrival " placeholder ="yyyy-mm-dd hh:mm " pattern ="\d{4}-\d{2}-\d{2} \d{2}:\d{2} " title ="Format: yyyy-mm-dd hh:mm (24-hour) ">
272+ < label for ="modal-origin-timezone "> Origin Timezone:</ label >
273+ < input type ="text " id ="modal-origin-timezone " placeholder ="e.g., Europe/Berlin ">
274+ < label for ="modal-destination-timezone "> Destination Timezone:</ label >
275+ < input type ="text " id ="modal-destination-timezone " placeholder ="e.g., Europe/London ">
252276 < div class ="button-group ">
253277 < button class ="cancel-button " onclick ="closeEditModal() "> Cancel</ button >
254- < button class ="save-button " onclick ="saveEditedTimes () "> Save</ button >
278+ < button class ="save-button " onclick ="saveEditedDetails () "> Save</ button >
255279 </ div >
256280 </ div >
257281 </ div >
@@ -272,10 +296,11 @@ <h2>Edit Flight Times</h2>
272296 function openEditModal ( index ) {
273297 currentEditingIndex = index ;
274298 const modal = document . getElementById ( 'editModal' ) ;
299+ const flight = flights [ index ] ;
275300
276301 // Parse the current times
277- const departure = flights [ index ] . scheduled_departure ;
278- const arrival = flights [ index ] . scheduled_arrival ;
302+ const departure = flight . scheduled_departure ;
303+ const arrival = flight . scheduled_arrival ;
279304
280305 // Convert from "YYYYMMDD HHMM" to "YYYY-MM-DD HH:MM" format
281306 const depDateTime = departure . substring ( 0 , 4 ) + '-' + departure . substring ( 4 , 6 ) + '-' +
@@ -285,8 +310,17 @@ <h2>Edit Flight Times</h2>
285310 arrival . substring ( 6 , 8 ) + ' ' + arrival . substring ( 9 , 11 ) + ':' +
286311 arrival . substring ( 11 , 13 ) ;
287312
313+ // Populate modal fields with current flight data
314+ document . getElementById ( 'modal-flight-number' ) . value = flight . flight_number ;
315+ document . getElementById ( 'modal-airline' ) . value = flight . airline_name ;
316+ document . getElementById ( 'modal-origin-airport' ) . value = flight . origin_airport ;
317+ document . getElementById ( 'modal-origin-code' ) . value = flight . origin_airport_code ;
318+ document . getElementById ( 'modal-destination-airport' ) . value = flight . destination_airport ;
319+ document . getElementById ( 'modal-destination-code' ) . value = flight . destination_airport_code ;
288320 document . getElementById ( 'modal-departure' ) . value = depDateTime ;
289321 document . getElementById ( 'modal-arrival' ) . value = arrDateTime ;
322+ document . getElementById ( 'modal-origin-timezone' ) . value = flight . origin_timezone ;
323+ document . getElementById ( 'modal-destination-timezone' ) . value = flight . destination_timezone ;
290324
291325 modal . style . display = 'block' ;
292326 }
@@ -296,14 +330,24 @@ <h2>Edit Flight Times</h2>
296330 currentEditingIndex = null ;
297331 }
298332
299- function saveEditedTimes ( ) {
333+ function saveEditedDetails ( ) {
300334 if ( currentEditingIndex === null ) return ;
301335
336+ const index = currentEditingIndex ;
337+ const flightNumber = document . getElementById ( 'modal-flight-number' ) . value ;
338+ const airline = document . getElementById ( 'modal-airline' ) . value ;
339+ const originAirport = document . getElementById ( 'modal-origin-airport' ) . value ;
340+ const originCode = document . getElementById ( 'modal-origin-code' ) . value ;
341+ const destinationAirport = document . getElementById ( 'modal-destination-airport' ) . value ;
342+ const destinationCode = document . getElementById ( 'modal-destination-code' ) . value ;
302343 const depValue = document . getElementById ( 'modal-departure' ) . value ;
303344 const arrValue = document . getElementById ( 'modal-arrival' ) . value ;
345+ const originTimezone = document . getElementById ( 'modal-origin-timezone' ) . value ;
346+ const destinationTimezone = document . getElementById ( 'modal-destination-timezone' ) . value ;
304347
305- if ( ! depValue || ! arrValue ) {
306- alert ( 'Please fill in both departure and arrival times.' ) ;
348+ // Validate required fields
349+ if ( ! flightNumber || ! airline || ! depValue || ! arrValue || ! originTimezone || ! destinationTimezone ) {
350+ alert ( 'Please fill in all required fields.' ) ;
307351 return ;
308352 }
309353
@@ -331,13 +375,24 @@ <h2>Edit Flight Times</h2>
331375 const arrTime = arrParts [ 1 ] . replace ( / : / g, '' ) ;
332376 const arrFormatted = arrDate + ' ' + arrTime ;
333377
334- // Update hidden form fields
335- document . getElementById ( 'custom-departure-' + currentEditingIndex ) . value = depFormatted ;
336- document . getElementById ( 'custom-arrival-' + currentEditingIndex ) . value = arrFormatted ;
378+ // Update all hidden form fields with edited data
379+ document . getElementById ( 'hidden-flight-number-' + index ) . value = flightNumber ;
380+ document . getElementById ( 'hidden-airline-' + index ) . value = airline ;
381+ document . getElementById ( 'hidden-origin-airport-' + index ) . value = originAirport ;
382+ document . getElementById ( 'hidden-origin-code-' + index ) . value = originCode ;
383+ document . getElementById ( 'hidden-destination-airport-' + index ) . value = destinationAirport ;
384+ document . getElementById ( 'hidden-destination-code-' + index ) . value = destinationCode ;
385+ document . getElementById ( 'hidden-scheduled-departure-' + index ) . value = depFormatted ;
386+ document . getElementById ( 'hidden-scheduled-arrival-' + index ) . value = arrFormatted ;
387+ document . getElementById ( 'hidden-origin-tz-' + index ) . value = originTimezone ;
388+ document . getElementById ( 'hidden-destination-tz-' + index ) . value = destinationTimezone ;
337389
338- // Update display (keep the yyyy-mm-dd hh:mm format)
339- document . getElementById ( 'departure-' + currentEditingIndex ) . textContent = depValue ;
340- document . getElementById ( 'arrival-' + currentEditingIndex ) . textContent = arrValue ;
390+ // Update display
391+ document . getElementById ( 'airline-' + index ) . textContent = airline ;
392+ document . getElementById ( 'departure-' + index ) . textContent = depValue ;
393+ document . getElementById ( 'arrival-' + index ) . textContent = arrValue ;
394+ document . getElementById ( 'from-' + index ) . textContent = originCode ;
395+ document . getElementById ( 'to-' + index ) . textContent = destinationCode ;
341396
342397 closeEditModal ( ) ;
343398 }
0 commit comments