337 lines
11 KiB
Vue
337 lines
11 KiB
Vue
<script setup>
|
|
const toast = useToast()
|
|
const { $api } = useNuxtApp()
|
|
|
|
const loading = ref(false)
|
|
const statusLoading = ref(false)
|
|
const websocketTesting = ref(false)
|
|
const config = ref(null)
|
|
const status = ref(null)
|
|
const websocketResult = ref(null)
|
|
const lastUpdated = ref(null)
|
|
|
|
const statusColor = computed(() => {
|
|
if (status.value?.reachable) return "success"
|
|
if (!status.value?.enabled) return "warning"
|
|
return "error"
|
|
})
|
|
|
|
const statusIcon = computed(() => {
|
|
if (status.value?.reachable) return "i-heroicons-signal"
|
|
if (!status.value?.enabled) return "i-heroicons-pause-circle"
|
|
return "i-heroicons-signal-slash"
|
|
})
|
|
|
|
const websocketColor = computed(() => {
|
|
if (!websocketResult.value) return "neutral"
|
|
return websocketResult.value.ok ? "success" : "error"
|
|
})
|
|
|
|
const loadTelephony = async () => {
|
|
loading.value = true
|
|
try {
|
|
const [configRes, statusRes] = await Promise.all([
|
|
$api("/api/telephony/config"),
|
|
$api("/api/telephony/status")
|
|
])
|
|
|
|
config.value = configRes
|
|
status.value = statusRes
|
|
lastUpdated.value = new Date()
|
|
} catch (error) {
|
|
toast.add({
|
|
title: "Telefonie-Status konnte nicht geladen werden",
|
|
color: "error"
|
|
})
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const refreshStatus = async () => {
|
|
statusLoading.value = true
|
|
try {
|
|
status.value = await $api("/api/telephony/status")
|
|
lastUpdated.value = new Date()
|
|
} catch (error) {
|
|
toast.add({
|
|
title: "Asterisk-Status konnte nicht geprüft werden",
|
|
color: "error"
|
|
})
|
|
} finally {
|
|
statusLoading.value = false
|
|
}
|
|
}
|
|
|
|
const testWebSocket = async () => {
|
|
if (!config.value?.sipWebSocketUrl || websocketTesting.value) return
|
|
|
|
websocketTesting.value = true
|
|
websocketResult.value = null
|
|
|
|
await new Promise((resolve) => {
|
|
let settled = false
|
|
const socket = new WebSocket(config.value.sipWebSocketUrl, "sip")
|
|
const timer = window.setTimeout(() => {
|
|
if (settled) return
|
|
settled = true
|
|
socket.close()
|
|
websocketResult.value = {
|
|
ok: false,
|
|
message: "WebSocket-Verbindung ist abgelaufen."
|
|
}
|
|
resolve()
|
|
}, 3000)
|
|
|
|
socket.onopen = () => {
|
|
if (settled) return
|
|
settled = true
|
|
window.clearTimeout(timer)
|
|
websocketResult.value = {
|
|
ok: true,
|
|
message: "SIP-WebSocket ist aus dem Browser erreichbar."
|
|
}
|
|
socket.close()
|
|
resolve()
|
|
}
|
|
|
|
socket.onerror = () => {
|
|
if (settled) return
|
|
settled = true
|
|
window.clearTimeout(timer)
|
|
websocketResult.value = {
|
|
ok: false,
|
|
message: "SIP-WebSocket konnte nicht geöffnet werden."
|
|
}
|
|
resolve()
|
|
}
|
|
})
|
|
|
|
websocketTesting.value = false
|
|
}
|
|
|
|
onMounted(loadTelephony)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
|
|
<div class="mx-auto flex max-w-7xl flex-col gap-6">
|
|
<div class="flex flex-col gap-4 border-b border-gray-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-primary-600">
|
|
Kommunikation
|
|
</p>
|
|
<h1 class="mt-1 text-2xl font-semibold text-gray-950">
|
|
Telefonie
|
|
</h1>
|
|
<p class="mt-2 max-w-3xl text-sm text-gray-600">
|
|
Lokaler Asterisk-Test für SIP, WebRTC und spätere Voice-Integration in FEDEO.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<UButton
|
|
icon="i-heroicons-arrow-path"
|
|
variant="soft"
|
|
:loading="loading"
|
|
@click="loadTelephony"
|
|
>
|
|
Aktualisieren
|
|
</UButton>
|
|
<UButton
|
|
to="/communication/chat"
|
|
icon="i-heroicons-chat-bubble-left-right"
|
|
variant="outline"
|
|
>
|
|
Zum Chat
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-base font-semibold text-gray-950">
|
|
Asterisk-Status
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Backend-Abfrage gegen den lokalen Telefonie-Stack.
|
|
</p>
|
|
</div>
|
|
<UButton
|
|
icon="i-heroicons-signal"
|
|
variant="ghost"
|
|
:loading="statusLoading"
|
|
@click="refreshStatus"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-3">
|
|
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon :name="statusIcon" :class="status?.reachable ? 'text-green-600' : 'text-amber-600'" />
|
|
<span class="text-sm font-medium text-gray-700">Status</span>
|
|
</div>
|
|
<p class="mt-3 text-lg font-semibold text-gray-950">
|
|
{{ status?.reachable ? "Erreichbar" : (status?.enabled ? "Nicht erreichbar" : "Deaktiviert") }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-server-stack" class="text-gray-500" />
|
|
<span class="text-sm font-medium text-gray-700">Provider</span>
|
|
</div>
|
|
<p class="mt-3 text-lg font-semibold text-gray-950">
|
|
{{ config?.provider || "asterisk" }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-phone-arrow-up-right" class="text-gray-500" />
|
|
<span class="text-sm font-medium text-gray-700">Echo-Test</span>
|
|
</div>
|
|
<p class="mt-3 text-lg font-semibold text-gray-950">
|
|
{{ config?.echoExtension || "600" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<UAlert
|
|
class="mt-4"
|
|
:color="statusColor"
|
|
:icon="statusIcon"
|
|
:title="status?.message || 'Telefonie wird geladen'"
|
|
:description="status?.statusUrl || 'Noch keine Status-URL geladen.'"
|
|
/>
|
|
|
|
<div v-if="status?.attempts?.length" class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3">
|
|
<p class="text-xs font-medium uppercase tracking-wide text-gray-500">
|
|
Geprüfte Status-Ziele
|
|
</p>
|
|
<div class="mt-2 grid gap-2">
|
|
<div
|
|
v-for="attempt in status.attempts"
|
|
:key="attempt.url"
|
|
class="flex items-center justify-between gap-3 text-sm"
|
|
>
|
|
<span class="break-all font-mono text-gray-700">{{ attempt.url }}</span>
|
|
<UBadge :color="attempt.reachable ? 'success' : 'neutral'" variant="soft">
|
|
{{ attempt.reachable ? `HTTP ${attempt.statusCode}` : "offline" }}
|
|
</UBadge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<div>
|
|
<h2 class="text-base font-semibold text-gray-950">
|
|
Lokalen Stack starten
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Asterisk läuft getrennt vom normalen Stack im Compose-Profil.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-100">
|
|
docker compose --profile telephony-dev up -d asterisk-dev
|
|
</div>
|
|
|
|
<div class="mt-4 grid gap-3 text-sm text-gray-600">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span>SIP-Domain</span>
|
|
<span class="font-mono text-gray-950">{{ config?.sipDomain || "localhost" }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span>WebSocket</span>
|
|
<span class="break-all text-right font-mono text-gray-950">{{ config?.sipWebSocketUrl || "-" }}</span>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
|
|
<UCard>
|
|
<template #header>
|
|
<div>
|
|
<h2 class="text-base font-semibold text-gray-950">
|
|
Browser-Test
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Prüft, ob FEDEO den SIP-WebSocket im Browser öffnen kann.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<UButton
|
|
icon="i-heroicons-bolt"
|
|
:loading="websocketTesting"
|
|
:disabled="!config?.sipWebSocketUrl"
|
|
@click="testWebSocket"
|
|
>
|
|
WebSocket prüfen
|
|
</UButton>
|
|
|
|
<UAlert
|
|
v-if="websocketResult"
|
|
:color="websocketColor"
|
|
:icon="websocketResult.ok ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
|
|
:title="websocketResult.message"
|
|
/>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<div>
|
|
<h2 class="text-base font-semibold text-gray-950">
|
|
Test-Nebenstellen
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Für den ersten lokalen Call-Test zwischen zwei Browser-Sessions.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<div
|
|
v-for="account in config?.testAccounts || []"
|
|
:key="account.extension"
|
|
class="rounded-lg border border-gray-200 bg-white p-4"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-user-circle" class="text-primary-600" />
|
|
<h3 class="font-semibold text-gray-950">
|
|
{{ account.displayName }}
|
|
</h3>
|
|
</div>
|
|
<dl class="mt-4 grid gap-2 text-sm">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<dt class="text-gray-500">Nebenstelle</dt>
|
|
<dd class="font-mono text-gray-950">{{ account.extension }}</dd>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<dt class="text-gray-500">Passwort</dt>
|
|
<dd class="font-mono text-gray-950">{{ account.password }}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
|
|
<p v-if="lastUpdated" class="text-xs text-gray-500">
|
|
Zuletzt geprüft: {{ lastUpdated.toLocaleString("de-DE") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|