mirror of https://github.com/lissy93/dashy
190 lines
5.7 KiB
Vue
190 lines
5.7 KiB
Vue
<template>
|
|
<div class="flight-wrapper">
|
|
<!-- Info -->
|
|
<p class="flight-intro">
|
|
Live {{ direction !== 'both' ? direction: 'flight' }} data from {{ airport }}
|
|
</p>
|
|
<!-- Departures -->
|
|
<div v-if="departures.length > 0" class="flight-group">
|
|
<h3 class="flight-type-subtitle" v-if="direction === 'both'">
|
|
{{ $t('widgets.flight-data.departures') }}
|
|
</h3>
|
|
<div v-for="flight in departures" :key="flight.number" class="flight" v-tooltip="tip(flight)">
|
|
<p class="info flight-time">{{ flight.time | formatDate }}</p>
|
|
<p class="info flight-number">{{ flight.number }}</p>
|
|
<p class="info flight-airport">{{ flight.airport }}</p>
|
|
</div>
|
|
</div>
|
|
<!-- Arrivals -->
|
|
<div v-if="arrivals.length > 0" class="flight-group">
|
|
<h3 class="flight-type-subtitle" v-if="direction === 'both'">
|
|
{{ $t('widgets.flight-data.arrivals') }}
|
|
</h3>
|
|
<div v-for="flight in arrivals" :key="flight.number" class="flight" v-tooltip="tip(flight)">
|
|
<p class="info flight-time">{{ flight.time | formatDate }}</p>
|
|
<p class="info flight-number">{{ flight.number }}</p>
|
|
<p class="info flight-airport">{{ flight.airport }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import WidgetMixin from '@/mixins/WidgetMixin';
|
|
import { widgetApiEndpoints } from '@/utils/defaults';
|
|
|
|
export default {
|
|
mixins: [WidgetMixin],
|
|
components: {},
|
|
data() {
|
|
return {
|
|
departures: [],
|
|
arrivals: [],
|
|
};
|
|
},
|
|
filters: {
|
|
formatDate(date) {
|
|
const d = new Date(date);
|
|
if (Number.isNaN(d.getHours())) return '[UNKNOWN]';
|
|
return `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
|
|
},
|
|
},
|
|
computed: {
|
|
/* The users desired airport, specified as a 4-digit ICAO-code */
|
|
airport() {
|
|
const usersChoice = this.options.airport;
|
|
if (!usersChoice) {
|
|
this.error('A valid airport must be specified');
|
|
return '';
|
|
}
|
|
const formattedAirport = usersChoice.toUpperCase().trim();
|
|
if (!(/[A-Z]{4}/).test(formattedAirport)) {
|
|
this.error('Incorrect airport format, must be a valid 4-digit ICAO-code');
|
|
return '';
|
|
}
|
|
return formattedAirport;
|
|
},
|
|
apiKey() {
|
|
const usersChoice = this.options.apiKey;
|
|
if (!usersChoice) {
|
|
this.error('An API key must be supplied');
|
|
return '';
|
|
}
|
|
return this.parseAsEnvVar(usersChoice);
|
|
},
|
|
/* The direction of flights: Arrival, Departure or Both */
|
|
direction() {
|
|
const usersChoice = this.options.direction;
|
|
if (!usersChoice || typeof usersChoice !== 'string') return 'both';
|
|
const options = ['arrival', 'departure', 'both'];
|
|
if (options.includes(usersChoice.toLowerCase())) return usersChoice;
|
|
return 'both';
|
|
},
|
|
limit() {
|
|
const usersChoice = this.options.limit;
|
|
if (usersChoice) return usersChoice;
|
|
return 8;
|
|
},
|
|
/* The starting date, right now, in ISO String format */
|
|
fromDate() {
|
|
const now = new Date();
|
|
return new Date(`${now.toString().split('GMT')[0]} UTC`).toISOString().split('.')[0];
|
|
},
|
|
/* The ending date, 12 hours from now, in ISO string format */
|
|
toDate() {
|
|
const now = new Date(new Date().setSeconds(0));
|
|
const tomorrow = new Date(new Date(now).setHours(now.getHours() + 12));
|
|
return new Date(`${tomorrow.toString().split('GMT')[0]} UTC`).toISOString().split('.')[0];
|
|
},
|
|
endpoint() {
|
|
return `${widgetApiEndpoints.flights}${this.airport}/${this.fromDate}/${this.toDate}`;
|
|
},
|
|
},
|
|
methods: {
|
|
/* Make GET request to CoinGecko API endpoint */
|
|
fetchData() {
|
|
const requestConfig = {
|
|
method: 'GET',
|
|
url: this.endpoint,
|
|
params: {
|
|
withCargo: 'true',
|
|
withPrivate: 'true',
|
|
withLocation: 'false',
|
|
},
|
|
headers: {
|
|
'x-rapidapi-host': 'aerodatabox.p.rapidapi.com',
|
|
'x-rapidapi-key': this.apiKey,
|
|
},
|
|
};
|
|
axios.request(requestConfig)
|
|
.then((response) => {
|
|
this.processData(response.data);
|
|
}).catch((error) => {
|
|
this.error('Unable to fetch flight data', error);
|
|
}).finally(() => {
|
|
this.finishLoading();
|
|
});
|
|
},
|
|
/* Assign data variables to the returned data */
|
|
processData(data) {
|
|
this.arrivals = this.makeFlightList(data.arrivals).slice(0, this.limit);
|
|
this.departures = this.makeFlightList(data.departures).slice(0, this.limit);
|
|
},
|
|
/* Gets the useful flight info out of departures or arrivals */
|
|
makeFlightList(flights) {
|
|
const results = [];
|
|
flights.forEach((flight) => {
|
|
results.push({
|
|
number: flight.number,
|
|
airline: flight.airline.name,
|
|
aircraft: flight.aircraft.model,
|
|
airport: flight.movement.airport.name,
|
|
time: flight.movement.actualTimeUtc,
|
|
});
|
|
});
|
|
return results;
|
|
},
|
|
tip(flight) {
|
|
const content = `${flight.aircraft} | ${flight.airline}`;
|
|
return {
|
|
content, trigger: 'hover focus', delay: 250, classes: 'in-modal-tt',
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.flight-wrapper {
|
|
p.flight-intro {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1rem;
|
|
color: var(--widget-text-color);
|
|
opacity: var(--dimming-factor);
|
|
}
|
|
h3.flight-type-subtitle {
|
|
margin: 0.25rem 0;
|
|
font-size: 1.2rem;
|
|
color: var(--widget-text-color);
|
|
}
|
|
.flight-group {
|
|
.flight {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0.25rem 0;
|
|
p.info {
|
|
margin: 0;
|
|
min-width: 33%;
|
|
color: var(--widget-text-color);
|
|
}
|
|
&:not(:last-child) {
|
|
border-bottom: 1px dashed var(--widget-text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|