Arrivals Board
This commit is contained in:
255
.copilot-instructions.md
Normal file
255
.copilot-instructions.md
Normal file
@@ -0,0 +1,255 @@
|
||||
# PPR API Documentation for Copilot
|
||||
|
||||
General Information
|
||||
|
||||
As you perform more tests, document in this file the steps you are taking to avoid repetition.
|
||||
|
||||
## API Base URL
|
||||
- Development: `http://localhost:8001/api/v1`
|
||||
- Authentication: Bearer token required for most endpoints
|
||||
|
||||
## Authentication
|
||||
|
||||
### Get Access Token
|
||||
```bash
|
||||
curl -X POST "http://localhost:8001/api/v1/auth/login" \
|
||||
-H "Content-Type: application/x-www-form-urlencoded" \
|
||||
-d "username=admin&password=admin123"
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
||||
"token_type": "bearer"
|
||||
}
|
||||
```
|
||||
|
||||
## PPR Management Endpoints
|
||||
|
||||
### Create New PPR Entry
|
||||
|
||||
**Endpoint:** `POST /api/v1/pprs/`
|
||||
|
||||
**Headers:**
|
||||
- `Content-Type: application/json`
|
||||
- `Authorization: Bearer {access_token}`
|
||||
|
||||
**Required Fields:**
|
||||
- `ac_reg` (string): Aircraft registration (e.g., "G-TEST")
|
||||
- `ac_type` (string): Aircraft type (e.g., "C172")
|
||||
- `captain` (string): Captain's name
|
||||
- `in_from` (string): Origin airport ICAO code (e.g., "EGKB")
|
||||
- `eta` (datetime): Estimated time of arrival (ISO format: "2025-10-21T14:30:00")
|
||||
- `pob_in` (integer): Persons on board inbound
|
||||
|
||||
**Optional Fields:**
|
||||
- `ac_call` (string): Aircraft callsign
|
||||
- `fuel` (string): Fuel requirements
|
||||
- `out_to` (string): Destination airport ICAO code
|
||||
- `etd` (datetime): Estimated time of departure
|
||||
- `pob_out` (integer): Persons on board outbound
|
||||
- `email` (string): Contact email
|
||||
- `phone` (string): Contact phone
|
||||
- `notes` (string): Additional notes
|
||||
|
||||
**Example Request:**
|
||||
```bash
|
||||
curl -X POST "http://localhost:8001/api/v1/pprs/" \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d '{
|
||||
"ac_reg": "G-TEST",
|
||||
"ac_type": "C172",
|
||||
"ac_call": "TEST01",
|
||||
"captain": "John Smith",
|
||||
"fuel": "FULL",
|
||||
"in_from": "EGKB",
|
||||
"eta": "2025-10-21T14:30:00",
|
||||
"pob_in": 2,
|
||||
"out_to": "EGGW",
|
||||
"etd": "2025-10-21T16:00:00",
|
||||
"pob_out": 2,
|
||||
"email": "john.smith@example.com",
|
||||
"phone": "+44123456789",
|
||||
"notes": "Test PPR entry created via API"
|
||||
}'
|
||||
```
|
||||
|
||||
**Success Response (201):**
|
||||
```json
|
||||
{
|
||||
"ac_reg": "G-TEST",
|
||||
"ac_type": "C172",
|
||||
"ac_call": "TEST01",
|
||||
"captain": "John Smith",
|
||||
"fuel": "FULL",
|
||||
"in_from": "EGKB",
|
||||
"eta": "2025-10-21T14:30:00",
|
||||
"pob_in": 2,
|
||||
"out_to": "EGGW",
|
||||
"etd": "2025-10-21T16:00:00",
|
||||
"pob_out": 2,
|
||||
"email": "john.smith@example.com",
|
||||
"phone": "+44123456789",
|
||||
"notes": "Test PPR entry created via API",
|
||||
"id": 2,
|
||||
"status": "NEW",
|
||||
"landed_dt": null,
|
||||
"departed_dt": null,
|
||||
"created_by": "admin",
|
||||
"submitted_dt": "2025-10-21T19:45:46"
|
||||
}
|
||||
```
|
||||
|
||||
### Get All PPRs
|
||||
|
||||
**Endpoint:** `GET /api/v1/pprs/`
|
||||
|
||||
**Query Parameters:**
|
||||
- `skip` (int): Number of records to skip (default: 0)
|
||||
- `limit` (int): Maximum records to return (default: 100)
|
||||
- `status` (string): Filter by status (NEW, CONFIRMED, CANCELED, LANDED, DELETED, DEPARTED)
|
||||
- `date_from` (date): Filter from date (YYYY-MM-DD)
|
||||
- `date_to` (date): Filter to date (YYYY-MM-DD)
|
||||
|
||||
### Get Specific PPR
|
||||
|
||||
**Endpoint:** `GET /api/v1/pprs/{ppr_id}`
|
||||
|
||||
### Update PPR
|
||||
|
||||
**Endpoint:** `PUT /api/v1/pprs/{ppr_id}` (full update)
|
||||
**Endpoint:** `PATCH /api/v1/pprs/{ppr_id}` (partial update)
|
||||
|
||||
### Update PPR Status
|
||||
|
||||
**Endpoint:** `PATCH /api/v1/pprs/{ppr_id}/status`
|
||||
|
||||
**Request Body:**
|
||||
```json
|
||||
{
|
||||
"status": "LANDED"
|
||||
}
|
||||
```
|
||||
|
||||
**Available Statuses:**
|
||||
- `NEW`: Newly submitted PPR
|
||||
- `CONFIRMED`: PPR confirmed by tower
|
||||
- `CANCELED`: PPR canceled
|
||||
- `LANDED`: Aircraft has landed
|
||||
- `DEPARTED`: Aircraft has departed
|
||||
- `DELETED`: PPR deleted (soft delete)
|
||||
|
||||
### Delete PPR
|
||||
|
||||
**Endpoint:** `DELETE /api/v1/pprs/{ppr_id}` (soft delete - sets status to DELETED)
|
||||
|
||||
## Public Endpoints (No Authentication Required)
|
||||
|
||||
### Get Today's Arrivals
|
||||
|
||||
**Endpoint:** `GET /api/v1/public/arrivals`
|
||||
|
||||
Returns all PPRs with status "NEW" and ETA for today.
|
||||
|
||||
### Get Today's Departures
|
||||
|
||||
**Endpoint:** `GET /api/v1/public/departures`
|
||||
|
||||
Returns all PPRs with status "LANDED" and ETD for today.
|
||||
|
||||
## Data Models
|
||||
|
||||
### PPR Status Enum
|
||||
```
|
||||
NEW -> CONFIRMED -> LANDED -> DEPARTED
|
||||
-> CANCELED
|
||||
-> DELETED
|
||||
```
|
||||
|
||||
### Datetime Format
|
||||
All datetime fields use ISO 8601 format: `YYYY-MM-DDTHH:MM:SS`
|
||||
|
||||
### Airport Codes
|
||||
Use ICAO 4-letter codes (e.g., EGKB, EGGW, EGLL) for airport identifiers.
|
||||
|
||||
## Error Responses
|
||||
|
||||
**401 Unauthorized:**
|
||||
```json
|
||||
{
|
||||
"detail": "Could not validate credentials"
|
||||
}
|
||||
```
|
||||
|
||||
**404 Not Found:**
|
||||
```json
|
||||
{
|
||||
"detail": "PPR record not found"
|
||||
}
|
||||
```
|
||||
|
||||
**422 Validation Error:**
|
||||
```json
|
||||
{
|
||||
"detail": [
|
||||
{
|
||||
"loc": ["body", "ac_reg"],
|
||||
"msg": "Aircraft registration is required",
|
||||
"type": "value_error"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## WebSocket Real-time Updates
|
||||
|
||||
The API sends real-time updates via WebSocket for:
|
||||
- `ppr_created`: New PPR created
|
||||
- `ppr_updated`: PPR updated
|
||||
- `status_update`: PPR status changed
|
||||
- `ppr_deleted`: PPR deleted
|
||||
|
||||
## Default Users
|
||||
|
||||
- **Username:** `admin`
|
||||
- **Password:** `admin123`
|
||||
|
||||
## Development URLs
|
||||
|
||||
- API Base: http://localhost:8001/api/v1
|
||||
- Public Web Interface: http://localhost:8082
|
||||
- API Documentation: http://localhost:8001/docs
|
||||
- Database: localhost:3307 (MySQL)
|
||||
|
||||
## Example Workflow
|
||||
|
||||
1. Get access token
|
||||
2. Create PPR entry (status: NEW) → Shows on arrivals board
|
||||
3. Update status to LANDED → Shows on departures board
|
||||
4. Update status to DEPARTED → Removes from departures board
|
||||
|
||||
## Testing Commands
|
||||
|
||||
```bash
|
||||
# Store token
|
||||
TOKEN=$(curl -s -X POST "http://localhost:8001/api/v1/auth/login" \
|
||||
-H "Content-Type: application/x-www-form-urlencoded" \
|
||||
-d "username=admin&password=admin123" | jq -r '.access_token')
|
||||
|
||||
# Create PPR
|
||||
curl -X POST "http://localhost:8001/api/v1/pprs/" \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
-d '{"ac_reg":"G-TEST","ac_type":"C172","captain":"Test Pilot","in_from":"EGKB","eta":"2025-10-21T14:30:00","pob_in":2}'
|
||||
|
||||
# Check arrivals
|
||||
curl -s "http://localhost:8001/api/v1/public/arrivals" | jq .
|
||||
|
||||
# Update status to LANDED
|
||||
curl -X PATCH "http://localhost:8001/api/v1/pprs/1/status" \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer $TOKEN" \
|
||||
-d '{"status":"LANDED"}'
|
||||
```
|
||||
@@ -57,6 +57,21 @@ services:
|
||||
networks:
|
||||
- ppr_network
|
||||
|
||||
# Nginx web server for public frontend
|
||||
web:
|
||||
image: nginx:alpine
|
||||
container_name: ppr_nextgen_web
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "8082:80" # Public web interface
|
||||
volumes:
|
||||
- ./web:/usr/share/nginx/html
|
||||
- ./nginx.conf:/etc/nginx/nginx.conf
|
||||
depends_on:
|
||||
- api
|
||||
networks:
|
||||
- ppr_network
|
||||
|
||||
volumes:
|
||||
mysql_data:
|
||||
|
||||
|
||||
65
nginx.conf
Normal file
65
nginx.conf
Normal file
@@ -0,0 +1,65 @@
|
||||
events {
|
||||
worker_connections 1024;
|
||||
}
|
||||
|
||||
http {
|
||||
include /etc/nginx/mime.types;
|
||||
default_type application/octet-stream;
|
||||
|
||||
# Logging
|
||||
access_log /var/log/nginx/access.log;
|
||||
error_log /var/log/nginx/error.log;
|
||||
|
||||
# Basic settings
|
||||
sendfile on;
|
||||
tcp_nopush on;
|
||||
tcp_nodelay on;
|
||||
keepalive_timeout 65;
|
||||
types_hash_max_size 2048;
|
||||
|
||||
# Gzip compression
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Serve static files
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Proxy API requests to FastAPI backend
|
||||
location /api/ {
|
||||
proxy_pass http://api:8000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# WebSocket support for real-time updates
|
||||
location /ws/ {
|
||||
proxy_pass http://api:8000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header Referrer-Policy "no-referrer-when-downgrade" always;
|
||||
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
|
||||
}
|
||||
}
|
||||
388
web/index.html
Normal file
388
web/index.html
Normal file
@@ -0,0 +1,388 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Airfield PPR - Arrivals & Departures</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.boards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.boards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.board {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.board-header {
|
||||
background: linear-gradient(45deg, #28a745, #20c997);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.board-header.departures {
|
||||
background: linear-gradient(45deg, #dc3545, #fd7e14);
|
||||
}
|
||||
|
||||
.board-header h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.board-content {
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #667eea;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.ppr-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ppr-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 15px;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ppr-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ppr-item:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.ppr-field {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ppr-field strong {
|
||||
display: block;
|
||||
color: #495057;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 2px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ppr-field span {
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status.new { background: #e3f2fd; color: #1565c0; }
|
||||
.status.confirmed { background: #e8f5e8; color: #2e7d32; }
|
||||
.status.landed { background: #fff3e0; color: #ef6c00; }
|
||||
.status.departed { background: #fce4ec; color: #c2185b; }
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.no-data i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
text-align: center;
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.auto-refresh {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>✈️ Airfield PPR System</h1>
|
||||
<p>Real-time Arrivals & Departures Board</p>
|
||||
</div>
|
||||
|
||||
<div class="boards">
|
||||
<!-- Arrivals Board -->
|
||||
<div class="board">
|
||||
<div class="board-header">
|
||||
<h2>🛬 Today's Arrivals</h2>
|
||||
<div id="arrivals-count">Loading...</div>
|
||||
</div>
|
||||
<div class="board-content">
|
||||
<div id="arrivals-loading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
Loading arrivals...
|
||||
</div>
|
||||
<div id="arrivals-list" class="ppr-list" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Departures Board -->
|
||||
<div class="board">
|
||||
<div class="board-header departures">
|
||||
<h2>🛫 Today's Departures</h2>
|
||||
<div id="departures-count">Loading...</div>
|
||||
</div>
|
||||
<div class="board-content">
|
||||
<div id="departures-loading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
Loading departures...
|
||||
</div>
|
||||
<div id="departures-list" class="ppr-list" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="last-updated">
|
||||
<div>Last updated: <span id="last-updated">Never</span></div>
|
||||
<div class="auto-refresh">🔄 Auto-refresh every 30 seconds</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let refreshInterval;
|
||||
|
||||
// Format datetime for display
|
||||
function formatDateTime(dateStr) {
|
||||
if (!dateStr) return 'N/A';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleTimeString('en-GB', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
// Format status for display
|
||||
function formatStatus(status) {
|
||||
return `<span class="status ${status.toLowerCase()}">${status}</span>`;
|
||||
}
|
||||
|
||||
// Create PPR item HTML
|
||||
function createPPRItem(ppr) {
|
||||
return `
|
||||
<div class="ppr-item">
|
||||
<div class="ppr-field">
|
||||
<strong>Aircraft</strong>
|
||||
<span>${ppr.ac_reg}</span>
|
||||
</div>
|
||||
<div class="ppr-field">
|
||||
<strong>Type</strong>
|
||||
<span>${ppr.ac_type}</span>
|
||||
</div>
|
||||
<div class="ppr-field">
|
||||
<strong>Time</strong>
|
||||
<span>${formatDateTime(ppr.eta || ppr.etd)}</span>
|
||||
</div>
|
||||
<div class="ppr-field">
|
||||
<strong>Status</strong>
|
||||
<span>${formatStatus(ppr.status)}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Create no data message
|
||||
function createNoDataMessage(type) {
|
||||
return `
|
||||
<div class="no-data">
|
||||
<div style="font-size: 3rem; margin-bottom: 15px; opacity: 0.3;">
|
||||
${type === 'arrivals' ? '🛬' : '🛫'}
|
||||
</div>
|
||||
<div>No ${type} scheduled for today</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Fetch and display arrivals
|
||||
async function loadArrivals() {
|
||||
try {
|
||||
const response = await fetch('/api/v1/public/arrivals');
|
||||
const arrivals = await response.json();
|
||||
|
||||
const loadingEl = document.getElementById('arrivals-loading');
|
||||
const listEl = document.getElementById('arrivals-list');
|
||||
const countEl = document.getElementById('arrivals-count');
|
||||
|
||||
loadingEl.style.display = 'none';
|
||||
listEl.style.display = 'block';
|
||||
|
||||
if (arrivals.length === 0) {
|
||||
listEl.innerHTML = createNoDataMessage('arrivals');
|
||||
countEl.textContent = '0 flights';
|
||||
} else {
|
||||
listEl.innerHTML = arrivals.map(createPPRItem).join('');
|
||||
countEl.textContent = `${arrivals.length} flight${arrivals.length !== 1 ? 's' : ''}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading arrivals:', error);
|
||||
document.getElementById('arrivals-list').innerHTML = `
|
||||
<div class="no-data">
|
||||
<div style="color: #dc3545;">❌ Error loading arrivals</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('arrivals-loading').style.display = 'none';
|
||||
document.getElementById('arrivals-list').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch and display departures
|
||||
async function loadDepartures() {
|
||||
try {
|
||||
const response = await fetch('/api/v1/public/departures');
|
||||
const departures = await response.json();
|
||||
|
||||
const loadingEl = document.getElementById('departures-loading');
|
||||
const listEl = document.getElementById('departures-list');
|
||||
const countEl = document.getElementById('departures-count');
|
||||
|
||||
loadingEl.style.display = 'none';
|
||||
listEl.style.display = 'block';
|
||||
|
||||
if (departures.length === 0) {
|
||||
listEl.innerHTML = createNoDataMessage('departures');
|
||||
countEl.textContent = '0 flights';
|
||||
} else {
|
||||
listEl.innerHTML = departures.map(createPPRItem).join('');
|
||||
countEl.textContent = `${departures.length} flight${departures.length !== 1 ? 's' : ''}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading departures:', error);
|
||||
document.getElementById('departures-list').innerHTML = `
|
||||
<div class="no-data">
|
||||
<div style="color: #dc3545;">❌ Error loading departures</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('departures-loading').style.display = 'none';
|
||||
document.getElementById('departures-list').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Load both arrivals and departures
|
||||
async function loadData() {
|
||||
await Promise.all([loadArrivals(), loadDepartures()]);
|
||||
document.getElementById('last-updated').textContent = new Date().toLocaleTimeString('en-GB');
|
||||
}
|
||||
|
||||
// Initialize the page
|
||||
async function init() {
|
||||
await loadData();
|
||||
|
||||
// Set up auto-refresh every 30 seconds
|
||||
refreshInterval = setInterval(loadData, 30000);
|
||||
}
|
||||
|
||||
// Start the application
|
||||
init();
|
||||
|
||||
// Handle page visibility change to pause/resume refresh
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (document.visibilityState === 'visible') {
|
||||
if (!refreshInterval) {
|
||||
loadData();
|
||||
refreshInterval = setInterval(loadData, 30000);
|
||||
}
|
||||
} else {
|
||||
if (refreshInterval) {
|
||||
clearInterval(refreshInterval);
|
||||
refreshInterval = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user