193 lines
8.1 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>航班搜索结果</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/search.css') }}">
<script>
window.onload = function() {
{% with messages = get_flashed_messages() %}
{% if messages %}
var message = "";
{% for msg in messages %}
message += "{{ msg }}\n";
{% endfor %}
alert(message);
{% endif %}
{% endwith %}
};
</script>
</head>
<body>
<header>
<div class="header-content">
<div class="logo">KJF航班订票</div>
<div class="nav-buttons">
<a href="{{ url_for('index') }}">首页</a>
<a href="{{ url_for('order_list') }}">我的订单</a>
</div>
<div class="user-menu">
<span>{{ username }}</span>
<div class="dropdown">
<button class="dropbtn"></button>
<div class="dropdown-content">
<a href="{{ url_for('modify') }}">修改账户信息</a>
<a href="{{ url_for('logout') }}">退出登录</a>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="content">
<div id="ticket" class="tabcontent" style="display: block;">
<form action="{{ url_for('search') }}" method="get" class="search-form" onsubmit="return validateForm()">
<div class="form-row">
<label for="departure">出发地:</label>
<select id="departure" name="departure">
{% for city in cities %}
<option value="{{ city }}" {% if city == request.args.get('departure') %}selected{% endif %}>{{ city }}</option>
{% endfor %}
</select>
</div>
<div class="form-row">
<label for="destination">目的地:</label>
<select id="destination" name="destination">
{% for city in cities %}
<option value="{{ city }}" {% if city == request.args.get('destination') %}selected{% endif %}>{{ city }}</option>
{% endfor %}
</select>
<div id="destination-warning" class="error-message"></div>
</div>
<div class="form-row">
<label for="departure-date">出发日期:</label>
<input type="date" id="departure-date" name="departure-date" value="{{ request.args.get('departure-date', '') }}" required>
<div id="date-warning" class="error-message"></div>
</div>
<div class="form-row">
<label for="passengers">乘客人数:</label>
<div class="passenger-input">
<button type="button" onclick="decrement()">-</button>
<input type="number" id="passengers" name="passengers" value="{{ request.args.get('passengers', 1) }}" min="1" max="50">
<button type="button" onclick="increment()">+</button>
</div>
</div>
<div class="form-row form-row-center">
<button type="submit" class="btn">立即查询</button>
</div>
</form>
</div>
</div>
<h2>航班搜索结果</h2>
{% if flights %}
<table>
<thead>
<tr>
<th>航班号</th>
<th>航空公司</th>
<th>出发机场</th>
<th>到达机场</th>
<th>出发时间</th>
<th>到达时间</th>
<th>头等舱剩余座位</th>
<th>商务舱剩余座位</th>
<th>经济舱剩余座位</th>
<th>头等舱价格</th>
<th>商务舱价格</th>
<th>经济舱价格</th>
<th>状态</th>
</tr>
</thead>
<tbody>
{% for flight in flights %}
<tr class="flight-row" onclick="window.location.href='{{ url_for('book', flight_id=flight.ID) }}'">
<td>{{ flight.ID }}</td>
<td>{{ flight.Airline }}</td>
<td>{{ flight.Departure_airport_name }}</td>
<td>{{ flight.Arrival_airport_name }}</td>
<td>{{ flight.Departure_time }}</td>
<td>{{ flight.Arrival_time }}</td>
<td>{{ flight.First_class_seats_remaining }}</td>
<td>{{ flight.Business_class_seats_remaining }}</td>
<td>{{ flight.Economy_class_seats_remaining }}</td>
<td>{{ flight.First_class_price }}</td>
<td>{{ flight.Business_class_price }}</td>
<td>{{ flight.Economy_class_price }}</td>
<td>{{ flight.Status }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-results">没有找到符合条件的航班。</p>
{% endif %}
</main>
<footer>
<p>&copy; 2024 KJF航班订票. 保留所有权利。</p>
</footer>
<script src="{{ url_for('static', filename='js/search.js') }}"></script>
<script>
function validateForm() {
var departure = document.getElementById('departure').value;
var destination = document.getElementById('destination').value;
var warning = document.getElementById('destination-warning');
var dateWarning = document.getElementById('date-warning');
var departureDate = document.getElementById('departure-date').value;
var today = new Date();
var selectedDate = new Date(departureDate);
today.setHours(0, 0, 0, 0); // Ensure time comparison is not affected
if (departure === destination) {
warning.textContent = '出发地和目的地不能相同';
return false;
} else {
warning.textContent = '';
}
if (selectedDate < today) {
dateWarning.textContent = '出发日期不能早于今天';
return false;
} else {
dateWarning.textContent = '';
}
return true;
}
function increment() {
var passengers = document.getElementById("passengers");
var value = parseInt(passengers.value, 10);
if (value < 50) {
passengers.value = value + 1;
}
}
function decrement() {
var passengers = document.getElementById("passengers");
var value = parseInt(passengers.value, 10);
if (value > 1) {
passengers.value = value - 1;
}
}
document.addEventListener('DOMContentLoaded', function() {
// Set default date to tomorrow
var departureDate = document.getElementById('departure-date');
if (!departureDate.value) {
var today = new Date();
var tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
var month = ('0' + (tomorrow.getMonth() + 1)).slice(-2);
var day = ('0' + tomorrow.getDate()).slice(-2);
var year = tomorrow.getFullYear();
departureDate.value = `${year}-${month}-${day}`;
departureDate.setAttribute('min', `${year}-${month}-${day}`);
}
});
</script>
</body>
</html>