76 lines
2.7 KiB
Vue
76 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import {Achievement, Flight, Region, User} from "@/Types/types";
|
|
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
|
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
|
|
import Australia from "@/Components/Maps/Australia.vue";
|
|
import {computed} from "vue";
|
|
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
|
|
|
|
import FlightRegionTable from "@/Components/FlightsGoneBy/FlightRegionTable.vue";
|
|
import {useRegionFlights} from "@/Composables/useRegionFlights";
|
|
import RegionLegend from "@/Components/FlightsGoneBy/Panels/RegionLegend.vue";
|
|
import Canada from "@/Components/Maps/Canada.vue";
|
|
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
const props = defineProps<{
|
|
achievement: Achievement
|
|
user: User
|
|
isFollowing: boolean
|
|
flights: Flight[]
|
|
regions: Region[]
|
|
}>()
|
|
|
|
const countryCode = 'CA'
|
|
const stateLocalCodes = [
|
|
'AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'NT', 'NU', 'ON', 'PE',
|
|
'QC', 'SK', 'YT'
|
|
];
|
|
|
|
const { flightsByRegion, visitedRegions, regionNames } = useRegionFlights(
|
|
computed(() => props.flights),
|
|
stateLocalCodes,
|
|
countryCode,
|
|
computed(() => props.regions)
|
|
)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Panel>
|
|
<PanelHeader centered>The Challenge</PanelHeader>
|
|
<p>
|
|
Either take off or land from an airport in each Canadian Province and Territory.
|
|
</p>
|
|
</Panel>
|
|
<Panel style="display:flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
<PanelHeader centered>Progress</PanelHeader>
|
|
<Canada :visitedStates="visitedRegions" :flights="flightsByRegion" style="width: 100%;"/>
|
|
<RegionLegend :regionNames="regionNames" :visitedRegions="visitedRegions" :stateLocalCodes="stateLocalCodes"/>
|
|
<br/>
|
|
<PanelHeader centered>Flights By Province</PanelHeader>
|
|
<FlightRegionTable
|
|
:regionCodes="stateLocalCodes"
|
|
:regionNames="regionNames"
|
|
:flightsByRegion="flightsByRegion"
|
|
/>
|
|
</Panel>
|
|
<Panel>
|
|
<PanelHeader centered>Difficulty</PanelHeader>
|
|
<p>
|
|
This challenge is not extremely difficult but Canada's geography does complicate it and it could get expensive!
|
|
</p>
|
|
<p>
|
|
Canada's population is all in the South, so visiting the Northwest Territories, Yukon and Nanavut will likely require doubling back south to get connecting flights.
|
|
</p>
|
|
<p>
|
|
At least the capital of Ottawa is in Ontario - so there's no need to be chasing a special capital district like in Brazil, the US or Australia.
|
|
</p>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|