dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Map View

Browse Source
This commit is contained in:
josh
2026-06-20 22:21:17 +10:00
parent 6fad966b7e
commit 05ca994253
52 changed files with 2038 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Admin/AdminSidebar.vue
+2 -2
View File
@@ -13,10 +13,10 @@ defineProps<{
<v-icon icon="mdi-chart-line" size="18" />
Dashboard
</Link>
<Link :href="route('admin.reconcile-missing-liveries')" class="sidebar-link">
<Link v-if="missingLiveryCount" :href="route('admin.reconcile-missing-liveries')" class="sidebar-link">
<v-icon icon="mdi-airplane-takeoff" size="18" />
Reconcile Missing Liveries
<v-chip size="x-small" color="error" class="ml-1">{{ missingLiveryCount }}</v-chip>
<v-chip size="x-small" color="error" class="ml-1">{{ missingLiveryCount }}</v-chip>
</Link>
</aside>
</template>
resources/js/Pages/Admin/Dashboard.vue
+1 -1
View File
@@ -17,7 +17,7 @@ defineProps<{
<v-row>
<v-col cols="12" sm="6">
<GrowthCard label="Total Users" :count="userCount" :weekly-growth="oneWeekUserGrowth" icon="mdi-account">
Latest User: {{ latestUser }}
<small>Latest User: {{ latestUser }}</small>
</GrowthCard>
</v-col>
<v-col cols="12" sm="6">
resources/js/Pages/Profile/UserAchievement.vue
+3 -14
View File
@@ -17,7 +17,7 @@ defineOptions({ layout: MainLayout })
const props = defineProps<{
achievement: Achievement
userAchievement: UserAchievement
userAchievement: UserAchievement | null
user: User
loggedInUser: User | null
isFollowing: boolean
@@ -28,6 +28,7 @@ const props = defineProps<{
continents: Continent[]
aircraft_families: Record<string, string[]>
achievementCount: number
canView: boolean
}>()
@@ -53,22 +54,10 @@ const unlocked = computed(() => {
return true
})
const difficultyVariant = computed(() => {
switch (props.achievement.difficulty?.internal_name) {
case 'easy': return 'easy'
case 'moderate': return 'moderate'
case 'hard': return 'hard'
case 'expensive': return 'expensive'
case 'near_impossible': return 'near-impossible'
case 'impossible': return 'impossible'
default: return 'economy'
}
})
</script>
<template>
<ProfileLayout :achievementCount="achievementCount" :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
<Head :title="`${achievement.name}`" />
<ProfileLayout :title="`${achievement.name}`" :canView="canView" :achievementCount="achievementCount" :user="user" :isFollowing="isFollowing" :loading="flightsLoading">
<div class="innerLayout">
<ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Achievements`" :href="`${route('profile.achievements', { user: user.name })}#${achievement.internal_name}`" />
resources/js/Pages/Settings/FollowerSettings.vue
+52
View File
@@ -0,0 +1,52 @@
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import type { FollowerEntry } from "@/Types/types"
import FollowerCard from "@/Components/FlightsGoneBy/Admin/FollowerCard.vue";
const followers = ref<FollowerEntry[]>([])
const loading = ref(true)
onMounted(async () => {
const { data } = await axios.get<FollowerEntry[]>('/followers')
followers.value = data
loading.value = false
})
const pendingCount = computed(() => followers.value.filter(f => !f.verified).length)
function handleApproved(userId: number) {
const entry = followers.value.find(f => f.user.id === userId)
if (entry) entry.verified = true
}
function handleRemoved(userId: number) {
followers.value = followers.value.filter(f => f.user.id !== userId)
}
</script>
<template>
<div v-if="loading" class="d-flex justify-center py-8">
<v-progress-circular indeterminate color="primary" />
</div>
<div v-else>
<p v-if="pendingCount" class="text-body-2 text-medium-emphasis mb-3">
{{ pendingCount }} pending request{{ pendingCount > 1 ? 's' : '' }}
</p>
<p v-if="!followers.length" class="text-body-2 text-medium-emphasis">
No followers yet.
</p>
<FollowerCard
v-for="entry in followers"
:key="entry.user.id"
:entry="entry"
class="mb-2"
@approved="handleApproved(entry.user.id)"
@denied="handleRemoved(entry.user.id)"
@removed="handleRemoved(entry.user.id)"
/>
</div>
</template>
resources/js/Pages/Settings/GeneralSettings.vue
+131
View File
@@ -0,0 +1,131 @@
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import axios from 'axios'
import type { SettingField } from "@/Types/types"
const props = defineProps<{
fields: SettingField[],
categories: Record<string, string>
}>()
const values = reactive(
Object.fromEntries(props.fields.map(f => [f.key, f.value]))
)
const saving = ref(false)
const saved = ref(false)
const error = ref(false)
const groupedFields = computed(() =>
props.fields.reduce((groups: Record<string, SettingField[]>, field) => {
const cat = field.category ?? 'General'
;(groups[cat] ??= []).push(field)
return groups
}, {} as Record<string, SettingField[]>)
)
async function save() {
saving.value = true
error.value = false
try {
await axios.patch('/settings', { settings: values })
saved.value = true
setTimeout(() => saved.value = false, 3000)
} catch {
error.value = true
} finally {
saving.value = false
}
}
</script>
<template>
<v-form @submit.prevent="save">
<template v-for="(groupFields, category) in groupedFields" :key="category">
<p class="text-overline text-medium-emphasis mb-1 mt-4">{{ category }}</p>
<small v-if="categories[category]" class="text-body-2 text-medium-emphasis mb-3">
{{ categories[category] }}
</small>
<v-divider class="mb-4" />
<template v-for="field in groupFields" :key="field.key">
<v-select
v-if="field.type === 'select'"
v-model="values[field.key]"
:label="field.label"
:items="field.options"
item-title="label"
item-value="value"
variant="outlined"
density="comfortable"
class="mb-2"
/>
<v-text-field
v-else-if="field.type === 'text'"
v-model="values[field.key]"
:label="field.label"
variant="outlined"
density="comfortable"
class="mb-2"
/>
<v-checkbox
v-else-if="field.type === 'checkbox'"
v-model="values[field.key]"
:label="field.label"
color="primary"
density="comfortable"
hide-details
class="mb-2"
/>
<v-select
v-else-if="field.type === 'multiselect'"
v-model="values[field.key]"
:label="field.label"
:items="field.options"
item-title="label"
item-value="value"
variant="outlined"
density="comfortable"
chips
multiple
closable-chips
clearable
class="mb-2"
/>
</template>
</template>
<v-divider class="my-4" />
<div class="d-flex align-center gap-3">
<v-btn
type="submit"
color="primary"
variant="elevated"
:loading="saving"
min-width="140"
>
Save settings
</v-btn>
<v-fade-transition>
<div v-if="saved" class="d-flex align-center gap-1 text-success">
<v-icon size="18">mdi-check-circle</v-icon>
<span class="text-body-2">Saved</span>
</div>
</v-fade-transition>
<v-fade-transition>
<div v-if="error" class="d-flex align-center gap-1 text-error">
<v-icon size="18">mdi-alert-circle</v-icon>
<span class="text-body-2">Something went wrong</span>
</div>
</v-fade-transition>
</div>
</v-form>
</template>
resources/js/Pages/UserAchievements.vue
+14 -5
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed } from "vue"
import {ref, computed, watch} from "vue"
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
import AchievementCard from "@/Components/FlightsGoneBy/AchievementCard.vue"
@@ -8,23 +8,31 @@ import {Head, usePage} from "@inertiajs/vue3";
import MainLayout from "@/Layouts/MainLayout.vue";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
import {useUpdateSetting} from "@/Composables/useUpdateSetting";
const {updateSetting} = useUpdateSetting()
defineOptions({ layout: MainLayout })
const props = defineProps<{
user: User
canEdit: boolean
isFollowing: boolean
followStatus: string
achievements: Record<string, Achievement[]>
userAchievements: Record<number, UserAchievement>
unlockedCount: number
totalAchievements: number
unlockedByCategory: Record<string, number>
canView: boolean
}>()
const page = usePage<SharedProps>().props
const hideImpossible = ref(false)
const hideImpossible = ref(page.auth?.user?.resolved_settings?.hide_impossible_achievements ?? false)
watch(hideImpossible, (value) => {
updateSetting('hide_impossible_achievements', value).catch(() => {})
})
const filteredAchievements = computed(() => {
if (!hideImpossible.value) return props.achievements
@@ -56,12 +64,13 @@ const filteredUnlockedCount = computed(() =>
</script>
<template>
<Head :title="`${user.name}'s Achievements`" />
<ProfileLayout
:user="user"
:achievementCount="unlockedCount"
:is-following="isFollowing"
:followStatus="followStatus"
:loading="false"
:canView="canView"
:title="`${user.name}'s Achievements`"
>
<ProfileViewSwitcher active-view="achievements" :user="user" />
resources/js/Pages/UserFlight.vue
+3 -3
View File
@@ -20,11 +20,13 @@ const props = defineProps<{
flightCount: number
isFollowing: boolean
canEdit: boolean
canView: boolean
}>()
</script>
<template>
<ProfileLayout
:canView="canView"
:user="user"
:is-following="isFollowing"
:flight-count="flightCount"
@@ -39,9 +41,7 @@ const props = defineProps<{
<RoutePanel :flight="flight" />
<Panel label="Flight Details">
<BoardingPass :user="user" :showToolTips="false" style="width:100%;max-width:600px; margin:0 auto" :flight="flight" :canEdit="canEdit" />
<DetailRows>
</DetailRows>
<DetailRows/>
</Panel>
<AircraftPanel :flight="flight"/>
<AirportPanel :airport="flight.departure_airport" label="Departure" />
resources/js/Pages/UserProfile.vue
+188 -39
View File
@@ -1,62 +1,115 @@
<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import {Head, router} from '@inertiajs/vue3'
import {computed, onMounted, ref, watchEffect} from 'vue'
import axios from 'axios'
import {Flight, ProfileView, User} from "@/Types/types"
import {useFlightStats} from "@/Composables/useFlightStats"
import MainLayout from "@/Layouts/MainLayout.vue"
import { Head, router } from '@inertiajs/vue3'
import { computed, ref, watchEffect } from 'vue'
import { Flight, ProfileView, RegionRange, User, FlightRange, FlightScope } from "@/Types/types"
import { useFlightStats } from "@/Composables/useFlightStats"
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue"
import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue";
import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue";
import {useFlights} from "@/Composables/useFlights";
import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue"
import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue"
import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue"
import { useFlights } from "@/Composables/useFlights"
defineOptions({ layout: MainLayout })
const props = defineProps<{
user: User
canEdit: boolean
canView: boolean
selectedFlightId?: number | null
initialView?: ProfileView
isFollowing: boolean
followStatus: string
flight_api_url: string
flightCount: number,
flightCount: number
}>()
// ── Flights state ─────────────────────────────────────────────────────────────
const { flights, flightsLoading } = useFlights(props.flight_api_url)
const localSelectedFlightId = ref(props.selectedFlightId ?? null)
// ── Filter state ──────────────────────────────────────────────────────────────
const selectedYears = ref<number[]>([])
const selectedAirlines = ref<number[]>([])
const selectedCountries = ref<string[]>([])
const selectedContinents = ref<string[]>([])
const selectedFlightClasses = ref<number[]>([])
const selectedCrewTypes = ref<number[]>([])
const filtersOpen = ref(window.innerWidth >= 1024)
const selectedYears = ref<number[]>([])
const selectedAirlines = ref<number[]>([])
const selectedAlliances = ref<number[]>([])
const selectedCountries = ref<string[]>([])
const selectedContinents = ref<string[]>([])
const selectedFlightClasses = ref<number[]>([])
const selectedCrewTypes = ref<number[]>([])
const selectedFlightScopes = ref<FlightScope[]>([])
const selectedFlightRanges = ref<FlightRange[]>([])
const selectedRegionRanges = ref<RegionRange[]>([])
const selectedFlightReasons = ref<number[]>([])
const selectedSeatTypes = ref<number[]>([])
const selectedManufacturers = ref<string[]>([])
const selectedAircraftModels = ref<number[]>([])
const selectedAirportRegions = ref<number[]>([])
const activeFilterCount = computed(() =>
selectedYears.value.length +
selectedAirlines.value.length +
selectedAlliances.value.length +
selectedCountries.value.length +
selectedContinents.value.length +
selectedFlightClasses.value.length +
selectedCrewTypes.value.length +
selectedFlightScopes.value.length +
selectedFlightRanges.value.length +
selectedRegionRanges.value.length +
selectedFlightReasons.value.length +
selectedSeatTypes.value.length +
selectedManufacturers.value.length +
selectedAircraftModels.value.length +
selectedAirportRegions.value.length
)
function onFiltersChange(filters: {
years: number[]
airlines: number[]
alliances: number[]
countries: string[]
continents: string[]
flightClasses: number[]
crewTypes: number[]
flightScopes: FlightScope[]
flightRanges: FlightRange[]
regionRanges: RegionRange[]
flightReasons: number[]
seatTypes: number[]
manufacturers: string[]
aircraftModels: number[]
airportRegions: number[]
}) {
localSelectedFlightId.value = null
selectedYears.value = filters.years
selectedAirlines.value = filters.airlines
selectedCountries.value = filters.countries
selectedContinents.value = filters.continents
selectedFlightClasses.value = filters.flightClasses
selectedCrewTypes.value = filters.crewTypes
localSelectedFlightId.value = null
selectedYears.value = filters.years
selectedAirlines.value = filters.airlines
selectedAlliances.value = filters.alliances
selectedCountries.value = filters.countries
selectedContinents.value = filters.continents
selectedFlightClasses.value = filters.flightClasses
selectedCrewTypes.value = filters.crewTypes
selectedFlightScopes.value = filters.flightScopes
selectedFlightRanges.value = filters.flightRanges
selectedRegionRanges.value = filters.regionRanges
selectedFlightReasons.value = filters.flightReasons
selectedSeatTypes.value = filters.seatTypes
selectedManufacturers.value = filters.manufacturers
selectedAircraftModels.value = filters.aircraftModels
selectedAirportRegions.value = filters.airportRegions
}
// ── Filtering ─────────────────────────────────────────────────────────────────
function matchesFilters(f: Flight): boolean {
const date = new Date(f.departure_date)
if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
if (selectedAirlines.value.length && !selectedAirlines.value.includes(f.airline?.id ?? -1)) return false
if (selectedAlliances.value.length && !selectedAlliances.value.includes(f.airline?.alliance?.id ?? -1)) return false
if (selectedCountries.value.length) {
const depCode = f.departure_airport.region?.country?.code
const arrCode = f.arrival_airport.region?.country?.code
@@ -69,14 +122,23 @@ function matchesFilters(f: Flight): boolean {
}
if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
if (selectedCrewTypes.value.length && !selectedCrewTypes.value.includes(f.crew_type?.id ?? -1)) return false
if (selectedFlightScopes.value.length && !selectedFlightScopes.value.includes(f.scope)) return false
if (selectedFlightRanges.value.length && !selectedFlightRanges.value.includes(f.range)) return false
if (selectedRegionRanges.value.length && !selectedRegionRanges.value.includes(f.region_range)) return false
if (selectedFlightReasons.value.length && !selectedFlightReasons.value.includes(f.flight_reason?.id ?? -1)) return false
if (selectedSeatTypes.value.length && !selectedSeatTypes.value.includes(f.seat_type?.id ?? -1)) return false
if (selectedManufacturers.value.length && !selectedManufacturers.value.includes(f.aircraft?.manufacturer_code ?? '')) return false
if (selectedAircraftModels.value.length && !selectedAircraftModels.value.includes(f.aircraft?.id ?? -1)) return false
if (selectedAirportRegions.value.length) {
const depRegion = f.departure_airport.region?.id
const arrRegion = f.arrival_airport.region?.id
if (!selectedAirportRegions.value.includes(depRegion ?? -1) &&
!selectedAirportRegions.value.includes(arrRegion ?? -1)) return false
}
return true
}
const filteredFlights = computed(() => {
return flights.value.filter(matchesFilters)
})
const filteredFlights = computed(() => flights.value.filter(matchesFilters))
const stats = useFlightStats(filteredFlights)
watchEffect(() => {
@@ -91,6 +153,7 @@ watchEffect(() => {
})
// ── View switching ────────────────────────────────────────────────────────────
const activeView = ref<ProfileView>(props.initialView ?? 'board')
const routeNames: Record<Exclude<ProfileView, 'achievements'>, string> = {
@@ -99,6 +162,11 @@ const routeNames: Record<Exclude<ProfileView, 'achievements'>, string> = {
passes: 'profile.boarding-passes',
} as const
function toggleFilters(e: MouseEvent) {
filtersOpen.value = !filtersOpen.value
;(e.currentTarget as HTMLButtonElement).blur()
}
function switchView(view: ProfileView) {
if (view === 'achievements') {
router.visit(route('profile.achievements', { user: props.user.name }))
@@ -120,16 +188,97 @@ function switchView(view: ProfileView) {
</script>
<template>
<Head :title="`${user.name}'s Flights`" />
<ProfileLayout :is-following="isFollowing" :flightCount="flightCount" :user="user" :loading="flightsLoading">
<ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
<DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId" :flight-stats="stats" :canEdit="canEdit" :user="user" />
<ProfileLayout :title="`${user.name}'s Flights`" :canView="canView" :followStatus="followStatus" :flightCount="flightCount" :user="user" :loading="flightsLoading">
<div class="toolbar">
<ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
<button
class="filter-toggle"
:class="{ active: filtersOpen || activeFilterCount > 0 }"
@click="toggleFilters"
>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
</svg>
Filters
<span v-if="activeFilterCount > 0" class="filter-badge">{{ activeFilterCount }}</span>
</button>
</div>
<div v-show="filtersOpen" class="filter-panel">
<FlightFilter :flights="flights" @change="onFiltersChange" />
</div>
<DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId" :flight-stats="stats" :canEdit="canEdit" :user="user" />
<BoardingPasses v-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" :user="user" />
<FlightMapAndCharts
v-if="activeView === 'map'"
:stats="stats"
:canEdit="canEdit"
@filters-change="onFiltersChange"
/>
<FlightMapAndCharts v-if="activeView === 'map'" :stats="stats" :canEdit="canEdit" />
</ProfileLayout>
</template>
<style scoped>
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.filter-toggle {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: 1px solid #334455;
border-radius: 6px;
color: #778899;
cursor: pointer;
font-size: 13px;
padding: 6px 12px;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.filter-toggle:focus {
outline: none;
}
@media (hover: hover) {
.filter-toggle:hover {
border-color: #4da6ff;
color: #4da6ff;
}
}
.filter-toggle.active {
border-color: #4da6ff;
color: #4da6ff;
}
.filter-badge {
background: #4da6ff;
color: #0a1628;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 2px 6px;
}
.filter-panel {
margin-bottom: 12px;
}
@media (max-width: 640px) {
.toolbar {
flex-direction: column;
align-items: flex-start;
}
.filter-toggle {
width: 100%;
justify-content: center;
}
}
</style>
resources/js/Pages/UserSettings.vue
+24 -120
View File
@@ -1,140 +1,44 @@
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import axios from 'axios'
import MainLayout from "@/Layouts/MainLayout.vue"
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue"
import { Head } from "@inertiajs/vue3"
import {SettingField} from "@/Types/types";
import { ref, watch } from "vue"
import type { SettingField } from "@/Types/types"
import GeneralSettings from "@/Pages/Settings/GeneralSettings.vue"
import FollowerSettings from "@/Pages/Settings/FollowerSettings.vue"
defineOptions({ layout: MainLayout })
const props = defineProps<{
fields: SettingField[],
categories: Record<string, string>
categories: Record<string, string>,
defaultTab: string
}>()
const values = reactive(
Object.fromEntries(props.fields.map(f => [f.key, f.value]))
)
const saving = ref(false)
const saved = ref(false)
const error = ref(false)
const tab = ref(props.defaultTab)
const groupedFields = computed(() =>
props.fields.reduce((groups: Record<string, SettingField[]>, field) => {
const cat = field.category ?? 'General'
;(groups[cat] ??= []).push(field)
return groups
}, {} as Record<string, SettingField[]>)
)
async function save() {
saving.value = true
error.value = false
try {
await axios.patch('/settings', { settings: values })
saved.value = true
setTimeout(() => saved.value = false, 3000)
} catch {
error.value = true
} finally {
saving.value = false
}
}
watch(tab, (value) => {
const path = value === 'general' ? '/settings' : `/settings/${value}`
window.history.replaceState(window.history.state, '', path)
})
</script>
<template>
<Head title="Settings" />
<GlassBox title="Your Settings">
<v-form @submit.prevent="save">
<template v-for="(groupFields, category) in groupedFields" :key="category">
<p class="text-overline text-medium-emphasis mb-1 mt-4">{{ category }}</p>
<small v-if="categories[category]" class="text-body-2 text-medium-emphasis mb-3">
{{ categories[category] }}
</small>
<v-divider class="mb-4" />
<v-tabs v-model="tab" class="mb-4">
<v-tab value="general">General</v-tab>
<v-tab value="followers">Followers</v-tab>
</v-tabs>
<template v-for="field in groupFields" :key="field.key">
<v-window v-model="tab">
<v-window-item value="general">
<GeneralSettings :fields="fields" :categories="categories" />
</v-window-item>
<v-select
v-if="field.type === 'select'"
v-model="values[field.key]"
:label="field.label"
:items="field.options"
item-title="label"
item-value="value"
variant="outlined"
density="comfortable"
class="mb-2"
/>
<v-text-field
v-else-if="field.type === 'text'"
v-model="values[field.key]"
:label="field.label"
variant="outlined"
density="comfortable"
class="mb-2"
/>
<v-checkbox
v-else-if="field.type === 'checkbox'"
v-model="values[field.key]"
:label="field.label"
color="primary"
density="comfortable"
hide-details
class="mb-2"
/>
<v-select
v-else-if="field.type === 'multiselect'"
v-model="values[field.key]"
:label="field.label"
:items="field.options"
item-title="label"
item-value="value"
variant="outlined"
density="comfortable"
chips
multiple
closable-chips
clearable
class="mb-2"
/>
</template>
</template>
<v-divider class="my-4" />
<div class="d-flex align-center gap-3">
<v-btn
type="submit"
color="primary"
variant="elevated"
:loading="saving"
min-width="140"
>
Save settings
</v-btn>
<v-fade-transition>
<div v-if="saved" class="d-flex align-center gap-1 text-success">
<v-icon size="18">mdi-check-circle</v-icon>
<span class="text-body-2">Saved</span>
</div>
</v-fade-transition>
<v-fade-transition>
<div v-if="error" class="d-flex align-center gap-1 text-error">
<v-icon size="18">mdi-alert-circle</v-icon>
<span class="text-body-2">Something went wrong</span>
</div>
</v-fade-transition>
</div>
</v-form>
<v-window-item value="followers">
<FollowerSettings />
</v-window-item>
</v-window>
</GlassBox>
</template>