407 lines
15 KiB
Vue
407 lines
15 KiB
Vue
<script setup>
|
|
const toast = useToast()
|
|
|
|
const telephonyTrunkLoading = ref(false)
|
|
const telephonyTrunkSaving = ref(false)
|
|
const telephonyTrunkApplying = ref(false)
|
|
const telephonyExtensionsLoading = ref(false)
|
|
const trunkStatusLoading = ref(false)
|
|
const trunkStatus = ref(null)
|
|
const telephonyExtensions = ref([])
|
|
|
|
const telephonyProviderOptions = [
|
|
{ label: "Easybell", value: "easybell" },
|
|
{ label: "Telekom", value: "telekom" }
|
|
]
|
|
|
|
const telephonyProviderDefaults = {
|
|
easybell: {
|
|
registrar: "voip.easybell.de",
|
|
title: "Easybell SIP-Trunk",
|
|
description: "Trage die SIP-Daten aus dem Easybell-Kundenportal ein. Die Absendernummer ist die Stammnummer im internationalen Format ohne führende 00."
|
|
},
|
|
telekom: {
|
|
registrar: "tel.t-online.de",
|
|
title: "Telekom Zugangsdaten",
|
|
description: "Die SIP-ID ist meistens die Rufnummer mit Vorwahl ohne Leerzeichen und Sonderzeichen. Klassische Zugangsdaten können als Auth-User hinterlegt werden."
|
|
}
|
|
}
|
|
|
|
const telephonyTrunkForm = reactive({
|
|
provider: "easybell",
|
|
enabled: false,
|
|
registrar: "voip.easybell.de",
|
|
sipUser: "",
|
|
authUser: "",
|
|
password: "",
|
|
passwordConfigured: false,
|
|
clearPassword: false,
|
|
callerId: "",
|
|
inboundExtension: "1001",
|
|
defaultRouteExtensionId: null,
|
|
outboundPrefix: "0",
|
|
externalSignalingAddress: "",
|
|
externalMediaAddress: "",
|
|
localNetworks: "172.16.0.0/12,192.168.0.0/16,10.0.0.0/8"
|
|
})
|
|
|
|
const activeTelephonyProvider = computed(() =>
|
|
telephonyProviderDefaults[telephonyTrunkForm.provider] || telephonyProviderDefaults.easybell
|
|
)
|
|
|
|
const telephonyRouteOptions = computed(() => telephonyExtensions.value.map((extension) => ({
|
|
label: `${extension.extension} - ${extension.targetLabel || extension.displayName || targetTypeLabel(extension.targetType)}`,
|
|
value: extension.id
|
|
})))
|
|
|
|
const targetTypeLabel = (targetType) => {
|
|
if (targetType === "team") return "Team"
|
|
if (targetType === "branch") return "Niederlassung"
|
|
return "Benutzer"
|
|
}
|
|
|
|
const loadTelephonyTrunk = async () => {
|
|
telephonyTrunkLoading.value = true
|
|
|
|
try {
|
|
const res = await useNuxtApp().$api("/api/telephony/trunk-config", {
|
|
params: { provider: telephonyTrunkForm.provider }
|
|
})
|
|
telephonyTrunkForm.provider = res?.provider || telephonyTrunkForm.provider || "easybell"
|
|
telephonyTrunkForm.enabled = Boolean(res?.enabled)
|
|
telephonyTrunkForm.registrar = res?.registrar || activeTelephonyProvider.value.registrar
|
|
telephonyTrunkForm.sipUser = res?.sipUser || ""
|
|
telephonyTrunkForm.authUser = res?.authUser || ""
|
|
telephonyTrunkForm.password = ""
|
|
telephonyTrunkForm.passwordConfigured = Boolean(res?.passwordConfigured)
|
|
telephonyTrunkForm.clearPassword = false
|
|
telephonyTrunkForm.callerId = res?.callerId || ""
|
|
telephonyTrunkForm.inboundExtension = res?.inboundExtension || "1001"
|
|
telephonyTrunkForm.defaultRouteExtensionId = res?.defaultRouteExtensionId || null
|
|
telephonyTrunkForm.outboundPrefix = res?.outboundPrefix || "0"
|
|
telephonyTrunkForm.externalSignalingAddress = res?.externalSignalingAddress || ""
|
|
telephonyTrunkForm.externalMediaAddress = res?.externalMediaAddress || ""
|
|
telephonyTrunkForm.localNetworks = res?.localNetworks || "172.16.0.0/12,192.168.0.0/16,10.0.0.0/8"
|
|
} catch (error) {
|
|
toast.add({ title: "Telefonie konnte nicht geladen werden", color: "error" })
|
|
} finally {
|
|
telephonyTrunkLoading.value = false
|
|
}
|
|
}
|
|
|
|
const saveTelephonyTrunk = async () => {
|
|
if (telephonyTrunkForm.enabled && (!telephonyTrunkForm.sipUser?.trim() || (!telephonyTrunkForm.password?.trim() && !telephonyTrunkForm.passwordConfigured))) {
|
|
toast.add({
|
|
title: "Trunk-Zugang unvollständig",
|
|
description: "Bitte gib mindestens SIP-ID und Kennwort an.",
|
|
color: "warning"
|
|
})
|
|
return
|
|
}
|
|
|
|
telephonyTrunkSaving.value = true
|
|
|
|
try {
|
|
const res = await useNuxtApp().$api("/api/telephony/trunk-config", {
|
|
method: "PUT",
|
|
body: {
|
|
provider: telephonyTrunkForm.provider,
|
|
enabled: telephonyTrunkForm.enabled,
|
|
registrar: telephonyTrunkForm.registrar,
|
|
sipUser: telephonyTrunkForm.sipUser,
|
|
authUser: telephonyTrunkForm.authUser,
|
|
password: telephonyTrunkForm.password,
|
|
clearPassword: telephonyTrunkForm.clearPassword,
|
|
callerId: telephonyTrunkForm.callerId,
|
|
inboundExtension: telephonyTrunkForm.inboundExtension,
|
|
defaultRouteExtensionId: telephonyTrunkForm.defaultRouteExtensionId,
|
|
outboundPrefix: telephonyTrunkForm.outboundPrefix,
|
|
externalSignalingAddress: telephonyTrunkForm.externalSignalingAddress,
|
|
externalMediaAddress: telephonyTrunkForm.externalMediaAddress,
|
|
localNetworks: telephonyTrunkForm.localNetworks
|
|
}
|
|
})
|
|
|
|
telephonyTrunkForm.password = ""
|
|
telephonyTrunkForm.passwordConfigured = Boolean(res?.passwordConfigured)
|
|
telephonyTrunkForm.clearPassword = false
|
|
toast.add({ title: "Telefonie gespeichert", color: "success" })
|
|
} catch (error) {
|
|
toast.add({
|
|
title: "Telefonie konnte nicht gespeichert werden",
|
|
description: error?.data?.error || error?.message,
|
|
color: "error"
|
|
})
|
|
} finally {
|
|
telephonyTrunkSaving.value = false
|
|
}
|
|
}
|
|
|
|
const loadTelephonyExtensions = async () => {
|
|
telephonyExtensionsLoading.value = true
|
|
|
|
try {
|
|
const res = await useNuxtApp().$api("/api/telephony/extensions")
|
|
telephonyExtensions.value = res?.rows || []
|
|
} catch (error) {
|
|
toast.add({ title: "Nebenstellen konnten nicht geladen werden", color: "error" })
|
|
} finally {
|
|
telephonyExtensionsLoading.value = 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 || "Status konnte nicht geladen werden."
|
|
}
|
|
} finally {
|
|
trunkStatusLoading.value = false
|
|
}
|
|
}
|
|
|
|
const applyTelephonyTrunk = async () => {
|
|
telephonyTrunkApplying.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 ? "Konfiguration geschrieben" : "Telefonie angewendet",
|
|
description: res?.warning || (res?.status?.registered ? "Der SIP-Trunk ist registriert." : "Asterisk wurde neu geladen."),
|
|
color: res?.warning ? "warning" : "success"
|
|
})
|
|
} catch (error) {
|
|
toast.add({
|
|
title: "Telefonie konnte nicht angewendet werden",
|
|
description: error?.data?.error || error?.message,
|
|
color: "error"
|
|
})
|
|
} finally {
|
|
telephonyTrunkApplying.value = false
|
|
}
|
|
}
|
|
|
|
watch(() => telephonyTrunkForm.provider, async (provider) => {
|
|
const defaults = telephonyProviderDefaults[provider] || telephonyProviderDefaults.easybell
|
|
if (!telephonyTrunkForm.registrar || ["tel.t-online.de", "voip.easybell.de"].includes(telephonyTrunkForm.registrar)) {
|
|
telephonyTrunkForm.registrar = defaults.registrar
|
|
}
|
|
await loadTelephonyTrunk()
|
|
})
|
|
|
|
onMounted(async () => {
|
|
await Promise.all([
|
|
loadTelephonyExtensions(),
|
|
loadTelephonyTrunk(),
|
|
loadTrunkStatus()
|
|
])
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar title="Telefonie Einstellungen">
|
|
<template #right>
|
|
<UButton
|
|
icon="i-heroicons-arrow-path"
|
|
variant="outline"
|
|
:loading="telephonyTrunkLoading || telephonyExtensionsLoading || trunkStatusLoading"
|
|
@click="Promise.all([loadTelephonyTrunk(), loadTelephonyExtensions(), loadTrunkStatus()])"
|
|
>
|
|
Aktualisieren
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardPanelContent>
|
|
<div class="mx-auto flex max-w-6xl flex-col gap-5">
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h2 class="text-base font-semibold text-highlighted">Anschluss</h2>
|
|
<p class="mt-1 text-sm text-muted">SIP-Trunk, Standardroute und öffentliche Erreichbarkeit.</p>
|
|
</div>
|
|
<UBadge :color="telephonyTrunkForm.enabled ? 'success' : 'neutral'" variant="soft">
|
|
{{ telephonyTrunkForm.enabled ? "Aktiv" : "Inaktiv" }}
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<UAlert
|
|
:title="activeTelephonyProvider.title"
|
|
color="neutral"
|
|
variant="outline"
|
|
:description="activeTelephonyProvider.description"
|
|
/>
|
|
|
|
<div class="mt-5 grid gap-4 md:grid-cols-2">
|
|
<UFormField label="Provider">
|
|
<USelectMenu
|
|
v-model="telephonyTrunkForm.provider"
|
|
:items="telephonyProviderOptions"
|
|
label-key="label"
|
|
value-key="value"
|
|
/>
|
|
</UFormField>
|
|
<UFormField label="Telefonie aktiv">
|
|
<USwitch v-model="telephonyTrunkForm.enabled" />
|
|
</UFormField>
|
|
<UFormField label="Registrar">
|
|
<UInput v-model="telephonyTrunkForm.registrar" :placeholder="activeTelephonyProvider.registrar" />
|
|
</UFormField>
|
|
<UFormField label="SIP-ID / Rufnummer">
|
|
<UInput v-model="telephonyTrunkForm.sipUser" placeholder="SIP-Benutzername" />
|
|
</UFormField>
|
|
<UFormField label="Auth-User">
|
|
<UInput v-model="telephonyTrunkForm.authUser" placeholder="Optional" />
|
|
</UFormField>
|
|
<UFormField :label="telephonyTrunkForm.passwordConfigured ? 'Kennwort ersetzen' : 'Kennwort'">
|
|
<UInput
|
|
v-model="telephonyTrunkForm.password"
|
|
type="password"
|
|
:placeholder="telephonyTrunkForm.passwordConfigured ? 'Bereits gespeichert' : 'SIP-Kennwort'"
|
|
/>
|
|
</UFormField>
|
|
<UFormField label="Gespeichertes Kennwort löschen">
|
|
<USwitch
|
|
v-model="telephonyTrunkForm.clearPassword"
|
|
:disabled="!telephonyTrunkForm.passwordConfigured"
|
|
/>
|
|
</UFormField>
|
|
<UFormField label="Absendernummer">
|
|
<UInput v-model="telephonyTrunkForm.callerId" placeholder="Optional, z. B. 49301234567" />
|
|
</UFormField>
|
|
<UFormField label="Eingehende Nebenstelle">
|
|
<UInput v-model="telephonyTrunkForm.inboundExtension" placeholder="1001" />
|
|
</UFormField>
|
|
<UFormField label="Standardroute">
|
|
<USelectMenu
|
|
v-model="telephonyTrunkForm.defaultRouteExtensionId"
|
|
:items="telephonyRouteOptions"
|
|
label-key="label"
|
|
value-key="value"
|
|
placeholder="Nebenstelle auswählen"
|
|
/>
|
|
</UFormField>
|
|
<UFormField label="Ausgehender Prefix">
|
|
<UInput v-model="telephonyTrunkForm.outboundPrefix" placeholder="0" />
|
|
</UFormField>
|
|
<UFormField label="Öffentliche Signaling-Adresse">
|
|
<UInput v-model="telephonyTrunkForm.externalSignalingAddress" placeholder="Öffentliche IP oder DNS-Name" />
|
|
</UFormField>
|
|
<UFormField label="Öffentliche Medien-Adresse">
|
|
<UInput v-model="telephonyTrunkForm.externalMediaAddress" placeholder="Leer = Signaling-Adresse" />
|
|
</UFormField>
|
|
<UFormField label="Lokale Netze">
|
|
<UInput v-model="telephonyTrunkForm.localNetworks" placeholder="172.16.0.0/12,192.168.0.0/16,10.0.0.0/8" />
|
|
</UFormField>
|
|
</div>
|
|
|
|
<div class="mt-5 flex flex-wrap gap-2">
|
|
<UButton
|
|
icon="i-heroicons-check"
|
|
:loading="telephonyTrunkSaving"
|
|
@click="saveTelephonyTrunk"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
icon="i-heroicons-arrow-path-rounded-square"
|
|
variant="soft"
|
|
:loading="telephonyTrunkApplying"
|
|
@click="applyTelephonyTrunk"
|
|
>
|
|
Anwenden
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h2 class="text-base font-semibold text-highlighted">Status</h2>
|
|
<p class="mt-1 text-sm text-muted">Registrierung des externen Anschlusses.</p>
|
|
</div>
|
|
<UButton
|
|
icon="i-heroicons-signal"
|
|
variant="outline"
|
|
:loading="trunkStatusLoading"
|
|
@click="loadTrunkStatus"
|
|
>
|
|
Prüfen
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
|
|
<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 || 'Noch kein Status geladen.'"
|
|
/>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h2 class="text-base font-semibold text-highlighted">Nebenstellen</h2>
|
|
<p class="mt-1 text-sm text-muted">Die Nebenstellen werden direkt am Benutzer, Team oder an der Niederlassung gepflegt.</p>
|
|
</div>
|
|
<UButton
|
|
icon="i-heroicons-arrow-path"
|
|
variant="outline"
|
|
:loading="telephonyExtensionsLoading"
|
|
@click="loadTelephonyExtensions"
|
|
>
|
|
Aktualisieren
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="divide-y divide-default rounded-md border border-default">
|
|
<div
|
|
v-for="extension in telephonyExtensions"
|
|
:key="extension.id"
|
|
class="grid gap-3 p-3 md:grid-cols-[7rem_1fr_auto] md:items-center"
|
|
>
|
|
<div class="font-mono text-lg font-semibold text-highlighted">
|
|
{{ extension.extension }}
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-highlighted">
|
|
{{ extension.targetLabel || extension.displayName || targetTypeLabel(extension.targetType) }}
|
|
</div>
|
|
<div class="text-sm text-muted">
|
|
{{ targetTypeLabel(extension.targetType) }}
|
|
<span v-if="extension.targetType !== 'user'">
|
|
· Ziele: {{ extension.dialTargets?.length ? extension.dialTargets.join(", ") : "noch keine Benutzer-Nebenstelle" }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<UBadge :color="extension.enabled ? 'success' : 'neutral'" variant="soft">
|
|
{{ extension.enabled ? "Aktiv" : "Inaktiv" }}
|
|
</UBadge>
|
|
</div>
|
|
|
|
<div v-if="!telephonyExtensions.length" class="p-4 text-sm text-muted">
|
|
Noch keine Nebenstellen angelegt.
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</UDashboardPanelContent>
|
|
</template>
|