fix: update waiting logic

This commit is contained in:
2025-08-18 18:50:34 +02:00
parent c67b6dfb6a
commit 6c553bea8a

View File

@ -1,66 +1,96 @@
<template> <template>
<div class="page-wrapper"> <div class="page-wrapper">
<div class="waiting-container"> <div class="waiting-container">
<h2>Container Status: {{ status }}</h2> <h2>Container Status: {{ status }}</h2>
<p v-if="status === 'ready'"> <p v-if="status === 'ready'">
Your container is ready! <a :href="`http://${ip}`" target="_blank">Open it</a> Your container is ready! <a :href="`http://${ip}`" target="_blank">Open it</a>
</p> </p>
<p v-else-if="status === 'running'">Waiting for services to be ready...</p> <p v-else-if="status === 'running'">Waiting for services to be ready...</p>
<p v-else-if="status === 'starting'">Starting container...</p> <p v-else-if="status === 'starting'">Starting container...</p>
<p v-else-if="status === 'error'" class="error-text">{{ errorMessage }}</p> <p v-else-if="status === 'error'" class="error-text">{{ errorMessage }}</p>
</div> </div>
<Spinner :loading="loading" /> <Spinner :loading="loading" />
</div> </div>
</template> </template>
<script setup> <script setup>
import { useRoute, useRouter } from 'vue-router'; import { ref, onMounted, onUnmounted } from 'vue' // <— sicher importieren
import { useRoute, useRouter } from 'vue-router'
const route = useRoute(); const route = useRoute()
const router = useRouter(); const router = useRouter()
const name = route.query.name; const name = route.query.name
const redirect = route.query.redirect; const redirect = route.query.redirect
const loading = ref(true);
const status = ref('starting'); const loading = ref(true)
const ip = ref(null); const status = ref('starting')
const interval = ref(null); const ip = ref(null)
const errorMessage = ref(null); const interval = ref(null)
const errorMessage = ref(null)
const POLL_MS = 3000
const checkStatus = async () => { const checkStatus = async () => {
try { try {
const res = await $fetch(`${window.location.origin}/api/status?name=${name}`); const res = await $fetch(`${window.location.origin}/api/status?name=${name}`, {
status.value = res.status; method: 'GET',
if (interval.value) { cache: 'no-store' // Browser-Cache umgehen
clearInterval(interval.value); })
}
status.value = res.status
ip.value = res.ip ?? ip.value
// Optional: wenn der Container "aus" ist, hier Start triggern (API abhängig)
// if (res.status === 'stopped' || res.status === 'not_found') {
// await $fetch(`${window.location.origin}/api/start?name=${name}`, { method: 'POST' })
// status.value = 'starting'
// }
if (res.status === 'ready') { if (res.status === 'ready') {
ip.value = res.ip; // Polling nur bei success beenden
// Redirect or show login link if (interval.value) clearInterval(interval.value)
window.location.href= 'http://'+ window.location.host;
loading.value = false
ip.value = res.ip
// Redirect-Logik: wenn redirect gesetzt -> dahin; sonst zur Root oder zur IP
if (redirect) {
window.location.href = redirect.toString();
} else {
// Entweder auf die IP oder auf die Host-Root
// window.location.href = `http://${ip.value}`
window.location.href = `http://${window.location.host}`
}
} else {
// solange nicht ready: weiterladen anzeigen
loading.value = true
} }
} catch (error) { } catch (error) {
loading.value = false; loading.value = false
status.value = 'error'; status.value = 'error'
errorMessage.value = error?.data?.message || 'Internal server error!'; errorMessage.value = error?.data?.message || 'Internal server error!'
clearInterval(interval.value);
setTimeout( () => {
router.replace(`/app/?auth=ok&redirect=${redirect}`);
}, 5000);
if (interval.value) clearInterval(interval.value)
// nach kurzer Pause zurück zur App (Redirect-Param übernehmen)
setTimeout(() => {
router.replace(`/app/?auth=ok&redirect=${redirect ?? ''}`)
}, 5000)
} }
}; }
onMounted(() => { onMounted(() => {
checkStatus(); checkStatus()
interval.value = setInterval(checkStatus, 3000); // Poll every 3s // WICHTIG: Intervall NICHT im checkStatus selbst löschen,
}); // sondern nur bei ready/error oder beim Unmount.
interval.value = setInterval(checkStatus, POLL_MS)
})
onUnmounted(() => { onUnmounted(() => {
if (interval.value) { if (interval.value) clearInterval(interval.value)
clearInterval(interval.value); })
}
});
</script> </script>
<style scoped> <style scoped>
.waiting-container { .waiting-container {
max-width: 100%; max-width: 100%;
@ -71,6 +101,5 @@ onUnmounted(() => {
background: #f9fafb; background: #f9fafb;
box-shadow: 0 4px 10px rgb(0 0 0 / 0.1); box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
} }
.error-text { color: #b91c1c; }
</style> </style>