KI-AGENT: Telefonie Nebenstellen in Einstellungen integrieren
This commit is contained in:
@@ -1,451 +1,7 @@
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
const {
|
||||
loading,
|
||||
statusLoading,
|
||||
websocketTesting,
|
||||
config,
|
||||
status,
|
||||
websocketResult,
|
||||
lastUpdated,
|
||||
selectedExtension,
|
||||
sipRegistered,
|
||||
sipStatus,
|
||||
registererState,
|
||||
sipEvents,
|
||||
statusColor,
|
||||
statusIcon,
|
||||
websocketColor,
|
||||
loadTelephony,
|
||||
refreshStatus,
|
||||
testWebSocket,
|
||||
} = useTelephonySoftphone()
|
||||
|
||||
const trunkStatus = ref(null)
|
||||
const trunkStatusLoading = ref(false)
|
||||
const trunkApplying = ref(false)
|
||||
|
||||
const loadTrunkStatus = async () => {
|
||||
trunkStatusLoading.value = true
|
||||
|
||||
try {
|
||||
trunkStatus.value = await useNuxtApp().$api("/api/telephony/trunk-status")
|
||||
} catch (error) {
|
||||
trunkStatus.value = {
|
||||
reachable: false,
|
||||
registered: false,
|
||||
hasRegistration: false,
|
||||
message: error?.data?.error || error?.message || "Trunk-Status konnte nicht geladen werden."
|
||||
}
|
||||
} finally {
|
||||
trunkStatusLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const applyTrunk = async () => {
|
||||
trunkApplying.value = true
|
||||
|
||||
try {
|
||||
const res = await useNuxtApp().$api("/api/telephony/trunk-config/apply", {
|
||||
method: "POST"
|
||||
})
|
||||
trunkStatus.value = res?.status || trunkStatus.value
|
||||
toast.add({
|
||||
title: res?.warning ? "Trunk-Konfiguration geschrieben" : "Trunk angewendet",
|
||||
description: res?.warning || (res?.status?.registered ? "Trunk-Registration ist aktiv." : "Asterisk wurde neu geladen."),
|
||||
color: res?.warning ? "orange" : "success"
|
||||
})
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: "Trunk konnte nicht angewendet werden",
|
||||
description: error?.data?.error || error?.message,
|
||||
color: "error"
|
||||
})
|
||||
} finally {
|
||||
trunkApplying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadTelephony()
|
||||
await loadTrunkStatus()
|
||||
})
|
||||
await navigateTo("/settings/telephony", { replace: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-0 flex-1 overflow-y-auto 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 Setup
|
||||
</h1>
|
||||
<p class="mt-2 max-w-3xl text-sm text-gray-600">
|
||||
Asterisk-Status, Browser-Verbindung und lokale Test-Nebenstellen.
|
||||
</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/phone"
|
||||
icon="i-heroicons-phone"
|
||||
variant="outline"
|
||||
>
|
||||
Zur Telefonie
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Externe Telefonie
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
SIP-Trunk-Anbindung über den lokalen Asterisk.
|
||||
</p>
|
||||
</div>
|
||||
<UBadge :color="config?.external?.enabled ? 'success' : 'neutral'" variant="soft">
|
||||
{{ config?.external?.enabled ? "Aktiviert" : "Deaktiviert" }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-building-office-2" 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?.external?.provider || "-" }}
|
||||
</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-globe-alt" class="text-gray-500" />
|
||||
<span class="text-sm font-medium text-gray-700">Registrar</span>
|
||||
</div>
|
||||
<p class="mt-3 break-all font-mono text-sm font-semibold text-gray-950">
|
||||
{{ config?.external?.registrar || "-" }}
|
||||
</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-down-left" class="text-gray-500" />
|
||||
<span class="text-sm font-medium text-gray-700">Eingehend</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
{{ config?.external?.inboundExtension || "-" }}
|
||||
</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">Ausgehend</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
Prefix {{ config?.external?.outboundPrefix || "0" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<UAlert
|
||||
:color="config?.external?.sipUserConfigured ? 'success' : 'warning'"
|
||||
:icon="config?.external?.sipUserConfigured ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-triangle'"
|
||||
title="SIP-ID"
|
||||
:description="config?.external?.sipUserConfigured ? 'Konfiguriert' : 'Fehlt'"
|
||||
/>
|
||||
<UAlert
|
||||
:color="config?.external?.passwordConfigured ? 'success' : 'warning'"
|
||||
:icon="config?.external?.passwordConfigured ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-triangle'"
|
||||
title="Kennwort"
|
||||
:description="config?.external?.passwordConfigured ? 'Konfiguriert' : 'Fehlt'"
|
||||
/>
|
||||
<UAlert
|
||||
:color="config?.external?.authUserConfigured ? 'success' : 'neutral'"
|
||||
:icon="config?.external?.authUserConfigured ? 'i-heroicons-check-circle' : 'i-heroicons-information-circle'"
|
||||
title="Auth-User"
|
||||
:description="config?.external?.authUserConfigured ? 'Konfiguriert' : 'Optional'"
|
||||
/>
|
||||
<UAlert
|
||||
:color="config?.external?.callerIdConfigured ? 'success' : 'neutral'"
|
||||
:icon="config?.external?.callerIdConfigured ? 'i-heroicons-check-circle' : 'i-heroicons-information-circle'"
|
||||
title="Absendernummer"
|
||||
:description="config?.external?.callerIdConfigured ? 'Konfiguriert' : 'Optional'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid gap-3 lg:grid-cols-[1fr_auto] lg:items-center">
|
||||
<UAlert
|
||||
:color="trunkStatus?.registered ? 'success' : (trunkStatus?.reachable ? 'warning' : 'neutral')"
|
||||
:icon="trunkStatus?.registered ? 'i-heroicons-check-circle' : (trunkStatus?.reachable ? 'i-heroicons-exclamation-triangle' : 'i-heroicons-signal-slash')"
|
||||
:title="trunkStatus?.registered ? 'SIP-Trunk registriert' : (trunkStatus?.hasRegistration ? 'SIP-Trunk nicht registriert' : 'Keine Trunk-Registration aktiv')"
|
||||
:description="trunkStatus?.message || (trunkStatus?.reachable ? 'Asterisk-AMI ist erreichbar.' : 'Asterisk-AMI ist noch nicht erreichbar.')"
|
||||
/>
|
||||
<div class="flex flex-wrap gap-2 lg:justify-end">
|
||||
<UButton
|
||||
icon="i-heroicons-signal"
|
||||
variant="outline"
|
||||
:loading="trunkStatusLoading"
|
||||
@click="loadTrunkStatus"
|
||||
>
|
||||
Status prüfen
|
||||
</UButton>
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-path-rounded-square"
|
||||
variant="soft"
|
||||
:loading="trunkApplying"
|
||||
@click="applyTrunk"
|
||||
>
|
||||
Trunk anwenden
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<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 lokale Call-Tests 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>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
SIP-Diagnose
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Aktuelle Registrierung und letzte SIP-Ereignisse.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UBadge :color="sipRegistered ? 'success' : 'neutral'" variant="soft">
|
||||
{{ sipStatus }}
|
||||
</UBadge>
|
||||
<UBadge color="neutral" variant="soft">
|
||||
Nebenstelle {{ selectedExtension }}
|
||||
</UBadge>
|
||||
<UBadge color="neutral" variant="soft">
|
||||
{{ registererState }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="sipEvents.length" class="rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
<ul class="space-y-1 text-xs text-gray-600">
|
||||
<li
|
||||
v-for="event in sipEvents"
|
||||
:key="`${event.time}-${event.message}`"
|
||||
class="grid grid-cols-[4.5rem_1fr] gap-2"
|
||||
>
|
||||
<span class="font-mono text-gray-400">{{ event.time }}</span>
|
||||
<span class="break-words">{{ event.message }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p v-else class="text-sm text-gray-500">
|
||||
Noch keine SIP-Ereignisse vorhanden.
|
||||
</p>
|
||||
</UCard>
|
||||
|
||||
<p v-if="lastUpdated" class="text-xs text-gray-500">
|
||||
Zuletzt geprüft: {{ lastUpdated.toLocaleString("de-DE") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</template>
|
||||
|
||||
@@ -137,7 +137,7 @@ onMounted(loadTelephony)
|
||||
<label class="text-sm font-medium text-gray-700">Nebenstelle</label>
|
||||
<div class="mt-2 grid gap-2 sm:grid-cols-2">
|
||||
<button
|
||||
v-for="account in config?.testAccounts || []"
|
||||
v-for="account in config?.accounts || []"
|
||||
:key="account.extension"
|
||||
type="button"
|
||||
class="rounded-lg border px-4 py-3 text-left transition"
|
||||
@@ -149,6 +149,9 @@ onMounted(loadTelephony)
|
||||
<span class="mt-1 block text-xs opacity-75">{{ account.displayName }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="!(config?.accounts || []).length" class="mt-2 text-sm text-gray-500">
|
||||
Für deinen Benutzer ist noch keine Nebenstelle hinterlegt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
|
||||
Reference in New Issue
Block a user