ztimson/weather-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

plane image fallback + seismic calibrations

Browse Source
This commit is contained in:
Zakary Timson
2026-07-03 14:21:00 -04:00
parent 5bd2e786c2
commit 7edd0ab8c4
2 changed files with 85 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/Aircraft.vue
View File

@@ -49,21 +49,28 @@ const description = computed(() => props.plane.desc || [props.plane.manufacturer
const operator = computed(() => props.plane.operator || props.plane.owner || '')
// ── Aircraft photo ────────────────────────────────────────────────────────────
const photoUrl = ref<string | null>(null)
const photoUrl = ref<string | null>(null)
const isSil = ref(false)
const photoLoading = ref(false)
async function fetchPhoto(icao: string) {
async function fetchPhoto(icao: string, type: string) {
photoUrl.value = null
isSil.value = false
if (!icao) return
photoLoading.value = true
const res = await fetch(`https://api.planespotters.net/pub/photos/hex/${icao.toLowerCase()}`)
const data = await res.json()
const photo = data?.photos?.[0]
if (photo) photoUrl.value = photo.thumbnail_large?.src ?? photo.thumbnail?.src ?? null
if (photo) {
photoUrl.value = photo.thumbnail_large?.src ?? photo.thumbnail?.src ?? null
} else {
photoUrl.value = `https://globe.adsbexchange.com/aircraft_sil/${type}.png`
isSil.value = true
}
photoLoading.value = false
}
watch(() => props.plane.icao || props.plane.hex, (icao) => fetchPhoto(icao), { immediate: true })
watch(() => props.plane, (plane) => fetchPhoto(plane.icao || plane.hex, plane.aircraft), { immediate: true })
// ── Drag ──────────────────────────────────────────────────────────────────────
const pos = ref({ ...props.position })
@@ -234,7 +241,7 @@ const navball = computed(() => {
<!-- Photo -->
<div v-if="photoUrl" class="ap-photo-wrap">
<img class="ap-photo" :src="photoUrl" :alt="callsign" />
<img class="ap-photo" :class="{ 'ap-photo--sil': isSil }" :src="photoUrl" :alt="callsign" />
</div>
<!-- Body -->
@@ -335,8 +342,8 @@ const navball = computed(() => {
/* ── Photo ── */
.ap-photo-wrap {
width: 100%;
height: 160px;
max-width: 360px;
max-height: 160px;
background: #111;
border-bottom: 1px solid rgba(200,200,220,0.15);
overflow: hidden;
@@ -344,13 +351,8 @@ const navball = computed(() => {
align-items: center;
justify-content: center;
}
.ap-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ap-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-photo--sil { object-fit: contain; box-sizing: border-box; image-rendering: auto; }
.ap-body {
display: flex;
gap: 16px;