392 lines
13 KiB
Vue
392 lines
13 KiB
Vue
<script setup>
|
|
const {
|
|
loading,
|
|
callHistoryLoading,
|
|
config,
|
|
callHistory,
|
|
selectedExtension,
|
|
dialTarget,
|
|
activeSession,
|
|
remoteAudio,
|
|
sipLoading,
|
|
sipRegistered,
|
|
sipStatus,
|
|
sipError,
|
|
callState,
|
|
registererState,
|
|
canRegisterSip,
|
|
canStartCall,
|
|
canHangup,
|
|
loadTelephony,
|
|
loadCallHistory,
|
|
registerSip,
|
|
stopSip,
|
|
startCall,
|
|
hangupCall,
|
|
} = useTelephonySoftphone()
|
|
|
|
const route = useRoute()
|
|
|
|
const historyFilters = reactive({
|
|
direction: "all",
|
|
status: "all",
|
|
search: ""
|
|
})
|
|
|
|
const directionOptions = [
|
|
{ label: "Alle Richtungen", value: "all" },
|
|
{ label: "Eingehend", value: "incoming" },
|
|
{ label: "Ausgehend", value: "outgoing" }
|
|
]
|
|
|
|
const statusOptions = [
|
|
{ label: "Alle Status", value: "all" },
|
|
{ label: "Aktiv", value: "active" },
|
|
{ label: "Beendet", value: "completed" },
|
|
{ label: "Verpasst", value: "missed" },
|
|
{ label: "Fehlgeschlagen", value: "failed" },
|
|
{ label: "Abgebrochen", value: "canceled" }
|
|
]
|
|
|
|
const callStatusLabel = (status) => ({
|
|
ringing: "Klingelt",
|
|
dialing: "Wählt",
|
|
active: "Aktiv",
|
|
completed: "Beendet",
|
|
missed: "Verpasst",
|
|
rejected: "Abgelehnt",
|
|
canceled: "Abgebrochen",
|
|
failed: "Fehlgeschlagen",
|
|
}[status] || status || "Unbekannt")
|
|
|
|
const callStatusColor = (status) => ({
|
|
completed: "success",
|
|
active: "primary",
|
|
ringing: "primary",
|
|
dialing: "primary",
|
|
missed: "warning",
|
|
rejected: "neutral",
|
|
canceled: "neutral",
|
|
failed: "error",
|
|
}[status] || "neutral")
|
|
|
|
const formatCallTime = (value) => {
|
|
if (!value) return "-"
|
|
return new Date(value).toLocaleString("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})
|
|
}
|
|
|
|
const formatDuration = (seconds) => {
|
|
if (!seconds) return "-"
|
|
|
|
const minutes = Math.floor(seconds / 60)
|
|
const rest = seconds % 60
|
|
return `${minutes}:${String(rest).padStart(2, "0")} Min.`
|
|
}
|
|
|
|
const historyFilterParams = () => ({
|
|
direction: historyFilters.direction !== "all" ? historyFilters.direction : undefined,
|
|
status: historyFilters.status !== "all" ? historyFilters.status : undefined,
|
|
search: historyFilters.search?.trim() || undefined
|
|
})
|
|
|
|
const loadFilteredCallHistory = () => loadCallHistory(historyFilterParams())
|
|
|
|
const setDialTargetFromQuery = () => {
|
|
if (route.query.call) {
|
|
dialTarget.value = String(route.query.call)
|
|
}
|
|
}
|
|
|
|
const callFromHistory = (call) => {
|
|
if (!call?.remoteNumber) return
|
|
dialTarget.value = call.remoteNumber
|
|
}
|
|
|
|
onMounted(async () => {
|
|
setDialTargetFromQuery()
|
|
await loadTelephony()
|
|
})
|
|
|
|
watch(() => route.query.call, setDialTargetFromQuery)
|
|
</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
|
|
</h1>
|
|
<p class="mt-2 max-w-3xl text-sm text-gray-600">
|
|
Anrufe direkt in FEDEO starten und annehmen.
|
|
</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="/settings/telephony"
|
|
icon="i-heroicons-cog-6-tooth"
|
|
variant="outline"
|
|
>
|
|
Einstellungen
|
|
</UButton>
|
|
<UButton
|
|
to="/communication/chat"
|
|
icon="i-heroicons-chat-bubble-left-right"
|
|
variant="outline"
|
|
>
|
|
Zum Chat
|
|
</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">
|
|
FEDEO Softphone
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Registrierung und Anrufe über den angebundenen Asterisk.
|
|
</p>
|
|
</div>
|
|
<UBadge
|
|
:color="sipRegistered ? 'success' : 'neutral'"
|
|
variant="soft"
|
|
class="w-fit"
|
|
>
|
|
{{ sipStatus }}
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<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?.accounts || []"
|
|
:key="account.extension"
|
|
type="button"
|
|
class="rounded-lg border px-4 py-3 text-left transition"
|
|
:class="selectedExtension === account.extension ? 'border-primary-500 bg-primary-50 text-primary-900' : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'"
|
|
:disabled="sipRegistered || sipLoading"
|
|
@click="selectedExtension = account.extension"
|
|
>
|
|
<span class="block font-semibold">{{ account.extension }}</span>
|
|
<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">
|
|
<UButton
|
|
icon="i-heroicons-phone-arrow-up-right"
|
|
:loading="sipLoading && !sipRegistered"
|
|
:disabled="!canRegisterSip || sipRegistered"
|
|
@click="registerSip"
|
|
>
|
|
Registrieren
|
|
</UButton>
|
|
<UButton
|
|
icon="i-heroicons-x-circle"
|
|
color="neutral"
|
|
variant="soft"
|
|
:disabled="!sipRegistered || sipLoading"
|
|
@click="stopSip"
|
|
>
|
|
Trennen
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
|
<div class="grid gap-3 sm:grid-cols-[1fr_auto]">
|
|
<UInput
|
|
v-model="dialTarget"
|
|
icon="i-heroicons-hashtag"
|
|
placeholder="Zielnummer oder Nebenstelle"
|
|
:disabled="!sipRegistered || Boolean(activeSession)"
|
|
/>
|
|
<UButton
|
|
icon="i-heroicons-phone"
|
|
:loading="sipLoading && sipRegistered"
|
|
:disabled="!canStartCall"
|
|
@click="startCall"
|
|
>
|
|
Anrufen
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap items-center gap-2">
|
|
<UButton
|
|
icon="i-heroicons-phone-x-mark"
|
|
color="error"
|
|
variant="soft"
|
|
:disabled="!canHangup"
|
|
@click="hangupCall"
|
|
>
|
|
Auflegen
|
|
</UButton>
|
|
<UBadge color="neutral" variant="soft">
|
|
{{ callState === "active" ? "Aktiver Anruf" : callState === "connecting" ? "Verbindet" : callState === "incoming" ? "Eingehend" : "Bereit" }}
|
|
</UBadge>
|
|
<UBadge :color="sipRegistered ? 'success' : 'warning'" variant="soft">
|
|
Registrierung: {{ registererState }}
|
|
</UBadge>
|
|
</div>
|
|
|
|
<UAlert
|
|
v-if="sipError"
|
|
class="mt-4"
|
|
color="error"
|
|
icon="i-heroicons-exclamation-triangle"
|
|
title="Telefoniefehler"
|
|
:description="sipError"
|
|
/>
|
|
|
|
<audio ref="remoteAudio" autoplay playsinline />
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h2 class="text-base font-semibold text-gray-950">
|
|
Anrufhistorie
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Anrufe dieses Mandanten mit Rückruf und Filter.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<UInput
|
|
v-model="historyFilters.search"
|
|
icon="i-heroicons-magnifying-glass"
|
|
placeholder="Suchen"
|
|
class="w-44"
|
|
@keyup.enter="loadFilteredCallHistory"
|
|
/>
|
|
<USelectMenu
|
|
v-model="historyFilters.direction"
|
|
:items="directionOptions"
|
|
label-key="label"
|
|
value-key="value"
|
|
class="w-40"
|
|
@update:model-value="loadFilteredCallHistory"
|
|
/>
|
|
<USelectMenu
|
|
v-model="historyFilters.status"
|
|
:items="statusOptions"
|
|
label-key="label"
|
|
value-key="value"
|
|
class="w-40"
|
|
@update:model-value="loadFilteredCallHistory"
|
|
/>
|
|
<UButton
|
|
icon="i-heroicons-arrow-path"
|
|
variant="ghost"
|
|
:loading="callHistoryLoading"
|
|
@click="loadFilteredCallHistory"
|
|
>
|
|
Aktualisieren
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="callHistory.length" class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 text-sm">
|
|
<thead class="text-left text-xs font-medium uppercase tracking-wide text-gray-500">
|
|
<tr>
|
|
<th class="px-3 py-2">Zeit</th>
|
|
<th class="px-3 py-2">Richtung</th>
|
|
<th class="px-3 py-2">Teilnehmer</th>
|
|
<th class="px-3 py-2">Nebenstelle</th>
|
|
<th class="px-3 py-2">Status</th>
|
|
<th class="px-3 py-2 text-right">Dauer</th>
|
|
<th class="px-3 py-2 text-right">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<tr
|
|
v-for="call in callHistory"
|
|
:key="call.id"
|
|
class="bg-white"
|
|
>
|
|
<td class="whitespace-nowrap px-3 py-3 text-gray-600">
|
|
{{ formatCallTime(call.startedAt) }}
|
|
</td>
|
|
<td class="whitespace-nowrap px-3 py-3">
|
|
<UIcon
|
|
:name="call.direction === 'incoming' ? 'i-heroicons-phone-arrow-down-left' : 'i-heroicons-phone-arrow-up-right'"
|
|
class="h-5 w-5 text-gray-500"
|
|
/>
|
|
</td>
|
|
<td class="px-3 py-3">
|
|
<div class="font-medium text-gray-950">
|
|
{{ call.remoteDisplayName || call.remoteNumber || "Unbekannt" }}
|
|
</div>
|
|
<div v-if="call.remoteDisplayName && call.remoteNumber && call.remoteDisplayName !== call.remoteNumber" class="text-xs text-gray-500">
|
|
{{ call.remoteNumber }}
|
|
</div>
|
|
</td>
|
|
<td class="whitespace-nowrap px-3 py-3 font-mono text-gray-700">
|
|
{{ call.localExtension || "-" }}
|
|
</td>
|
|
<td class="whitespace-nowrap px-3 py-3">
|
|
<UBadge :color="callStatusColor(call.status)" variant="soft">
|
|
{{ callStatusLabel(call.status) }}
|
|
</UBadge>
|
|
</td>
|
|
<td class="whitespace-nowrap px-3 py-3 text-right text-gray-600">
|
|
{{ formatDuration(call.durationSeconds) }}
|
|
</td>
|
|
<td class="whitespace-nowrap px-3 py-3 text-right">
|
|
<UButton
|
|
v-if="call.remoteNumber"
|
|
icon="i-heroicons-phone"
|
|
size="xs"
|
|
variant="soft"
|
|
@click="callFromHistory(call)"
|
|
>
|
|
Rückruf
|
|
</UButton>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div v-else class="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-6 text-center text-sm text-gray-500">
|
|
Noch keine Anrufe in der Historie.
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</template>
|