first commit
SwyxWeb: React-Frontend und Spring-Boot-Backend mit SwyxTray-Mock. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+17
@@ -0,0 +1,17 @@
|
|||||||
|
# Backend
|
||||||
|
backend/target/
|
||||||
|
!backend/.mvn/wrapper/maven-wrapper.properties
|
||||||
|
|
||||||
|
# Frontend
|
||||||
|
frontend/node_modules/
|
||||||
|
frontend/dist/
|
||||||
|
frontend/.env
|
||||||
|
frontend/.env.local
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Tooling / OS
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
*.iml
|
||||||
|
.DS_Store
|
||||||
|
*.log
|
||||||
@@ -0,0 +1,294 @@
|
|||||||
|
# SwyxWeb
|
||||||
|
|
||||||
|
React-Frontend mit Spring-Boot-Backend. Die Startseite verbindet sich **aus dem Browser heraus**
|
||||||
|
per WebSocket mit der **SwyxTray-App** (`ws://192.168.180.135:17654/ws`), meldet eingehende
|
||||||
|
Anrufe und startet ausgehende Anrufe.
|
||||||
|
|
||||||
|
```
|
||||||
|
SwyxWeb/
|
||||||
|
├── backend/ Spring Boot 4.1 (Java 21, Maven Wrapper)
|
||||||
|
└── frontend/ React 19 + TypeScript + Vite
|
||||||
|
```
|
||||||
|
|
||||||
|
## Wer verbindet sich mit wem?
|
||||||
|
|
||||||
|
Die WebSocket-Verbindung wird ausschließlich im Browser aufgebaut – in
|
||||||
|
[SwyxTrayClient.ts](frontend/src/swyx/SwyxTrayClient.ts) über `new WebSocket(url)`.
|
||||||
|
Das Backend baut **keine** eigene WebSocket-Verbindung auf; es hat zwei Aufgaben:
|
||||||
|
|
||||||
|
1. `GET /api/config` liefert dem Frontend die Zieladresse, damit sie nicht im JS-Bundle
|
||||||
|
fest verdrahtet ist (konfigurierbar in [application.properties](backend/src/main/resources/application.properties)).
|
||||||
|
2. Es stellt unter seinem eigenen Port einen **SwyxTray-Mock** bereit, um die Startseite ohne
|
||||||
|
echte Telefonanlage testen zu können (siehe unten). Im Normalbetrieb wird er nicht benutzt.
|
||||||
|
|
||||||
|
**Zwei getrennte Ports:** `8080` ist der Port dieser Anwendung (REST-API und Mock),
|
||||||
|
`17654` der Port der SwyxTray-App auf 192.168.180.135. Sie sind unabhängig voneinander.
|
||||||
|
|
||||||
|
## Protokoll der SwyxTray-App
|
||||||
|
|
||||||
|
Quelle: Mitschnitt gegen die laufende App (Version 1.0.0.0, `protocol: 1`) am 13.08.2026.
|
||||||
|
Seit der Tab-Verwaltung meldet die App im `hello` **`protocol: 6`**; die älteren Nachrichten
|
||||||
|
sind unverändert geblieben. Implementiert in [protocol.ts](frontend/src/swyx/protocol.ts) und
|
||||||
|
[SwyxTrayClient.ts](frontend/src/swyx/SwyxTrayClient.ts).
|
||||||
|
|
||||||
|
Ein Anruf wird über die **1-basierte Leitungsnummer `line`** identifiziert – so, wie sie auch
|
||||||
|
in SwyxIt! erscheint. Eine Anruf-Id gibt es nicht.
|
||||||
|
|
||||||
|
> **Die App schickt keine Ereignisnachrichten.** Jede Zustandsänderung – auch ein eingehender
|
||||||
|
> Anruf – kommt als **vollständiger `snapshot`** über alle vier Leitungen. Die Anrufmeldung der
|
||||||
|
> Startseite entsteht deshalb aus dem Vergleich zweier Snapshots
|
||||||
|
> ([mergeSnapshot](frontend/src/swyx/protocol.ts)).
|
||||||
|
|
||||||
|
### Begrüßung (App → Seite, beim Verbinden)
|
||||||
|
|
||||||
|
```json
|
||||||
|
{ "app": "SwyxTray", "version": "1.0.0.0", "protocol": 1, "session": 7, "type": "hello" }
|
||||||
|
```
|
||||||
|
|
||||||
|
Direkt danach folgt der erste Snapshot.
|
||||||
|
|
||||||
|
### Snapshot (App → Seite, bei jeder Änderung)
|
||||||
|
|
||||||
|
```json
|
||||||
|
{ "connected": true, "serverUp": true, "overall": "Ringing", "statusText": "Eingehender Ruf",
|
||||||
|
"user": "Muster, M.", "server": "127.0.0.1", "type": "snapshot",
|
||||||
|
"lines": [
|
||||||
|
{ "line": 1, "state": "LSRinging", "stateCode": 3, "stateText": "klingelt",
|
||||||
|
"peer": "001602107449", "peerNumber": "001602107449", "peerName": "",
|
||||||
|
"busy": true, "selected": true },
|
||||||
|
{ "line": 2, "state": "LSInactive", "stateCode": 0, "stateText": "frei",
|
||||||
|
"peer": "unbekannt", "peerNumber": "", "peerName": "", "busy": false, "selected": false }
|
||||||
|
] }
|
||||||
|
```
|
||||||
|
|
||||||
|
`state` trägt die Namen der CLMgr-Aufzählung `LineState`, `stateText` den Klartext aus SwyxIt!.
|
||||||
|
Belegt sind bisher `LSInactive / 0 / "frei"` und `LSRinging / 3 / "klingelt"`.
|
||||||
|
[callStateOf](frontend/src/swyx/protocol.ts) bildet beides auf `incoming` · `outgoing` ·
|
||||||
|
`connected` ab und wertet dabei **Name und Klartext** aus; ein unbekannter Zustand gilt als
|
||||||
|
**belegt**, damit eine klingelnde Leitung nie stillschweigend verschwindet. `peer` ist die
|
||||||
|
fertige Anzeigeform, `"unbekannt"` der Platzhalter für „keine Gegenstelle". Freie Leitungen
|
||||||
|
schickt die App immer mit; die Startseite blendet sie aus.
|
||||||
|
|
||||||
|
### Kommandos (Seite → App)
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
// ->
|
||||||
|
{ "id": 7, "cmd": "call", "number": "+49 30 1234567" }
|
||||||
|
// <- Quittung, id gespiegelt
|
||||||
|
{ "id": 7, "ok": true, "line": 2, "type": "result" }
|
||||||
|
// <- Fehlerfall (ungültige Nummer, keine Verbindung zu SwyxIt!)
|
||||||
|
{ "id": 7, "ok": false, "error": "…", "type": "result" }
|
||||||
|
```
|
||||||
|
|
||||||
|
`ok: true` heißt **nur**, dass CLMgr den Auftrag angenommen hat – gewählt wird asynchron.
|
||||||
|
Der tatsächliche Verlauf kommt danach über die folgenden Snapshots. Die Startseite weist im
|
||||||
|
Wählbereich darauf hin.
|
||||||
|
|
||||||
|
| Kommando | Felder | Zweck | Antwort |
|
||||||
|
|------------|----------------|-------------------------------------------|-----------------------------|
|
||||||
|
| `call` | `number` | Wählvorgang starten | `line` |
|
||||||
|
| `answer` | `line` | Anruf annehmen | – |
|
||||||
|
| `hangup` | `line` | Anruf beenden/ablehnen | – |
|
||||||
|
| `ping` | – | Verbindungstest | – |
|
||||||
|
| `status` | – | Snapshot anfordern | – |
|
||||||
|
| `focus` | `title`, `url` | Fenster in den Vordergrund holen | `focused` |
|
||||||
|
| `tabs` | – | Offene Tabs des Firefox-Plugins auflisten | `tabs` |
|
||||||
|
| `opentab` | `url` | Neuen Tab öffnen | `tabId` |
|
||||||
|
| `closetab` | `tabId` | Tab schließen | – |
|
||||||
|
|
||||||
|
Alles andere quittiert die App mit `"Unbekanntes Kommando '…'."`, ein fehlendes `cmd` mit
|
||||||
|
`"Feld 'cmd' fehlt."`.
|
||||||
|
|
||||||
|
### Fenster in den Vordergrund holen
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
// ->
|
||||||
|
{ "id": 9, "cmd": "focus", "title": "Kundenakte Muster GmbH", "url": "https://crm.example.local/kunden/4711" }
|
||||||
|
// <- Fenster war da und ist jetzt vorn
|
||||||
|
{ "type": "result", "id": 9, "ok": true, "focused": true }
|
||||||
|
// <- kein Fenster gefunden, stattdessen Browser mit der URL gestartet
|
||||||
|
{ "type": "result", "id": 9, "ok": true, "focused": false }
|
||||||
|
```
|
||||||
|
|
||||||
|
`title` wird als **Teilzeichenkette** gesucht, unabhängig von der Groß-/Kleinschreibung –
|
||||||
|
`"swyxit"` findet also das Fenster „SwyxIt!". `url` ist optional und wird nur benutzt, wenn
|
||||||
|
kein Fenster passt; fehlt sie in diesem Fall, antwortet die App mit
|
||||||
|
`ok: false` und `"Kein Fenster mit Titel '…' gefunden und keine URL angegeben."`. Ein
|
||||||
|
fehlender oder leerer Titel ergibt `"Feld 'title' fehlt."`.
|
||||||
|
|
||||||
|
Seit der Umstellung des Tab-Bereichs benutzt die Startseite `focus` nicht mehr; das Kommando
|
||||||
|
bleibt aber im Protokoll und in `SwyxTrayClient.focusWindow()` erhalten.
|
||||||
|
|
||||||
|
### Tabs des Firefox-Plugins
|
||||||
|
|
||||||
|
Die drei Tab-Kommandos reicht die SwyxTray-App **unverändert an das Firefox-Plugin durch** –
|
||||||
|
gemeint sind also die Tabs des Firefox auf dem Rechner der App, nicht die Bereiche der
|
||||||
|
Startseite. Es sind dieselben Kanäle, die auch die Tray-Menüpunkte *Lese Tabs*, *Tab öffnen*
|
||||||
|
und *Tab schliessen* benutzen.
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
// ->
|
||||||
|
{ "id": 12, "cmd": "tabs" }
|
||||||
|
// <-
|
||||||
|
{ "type": "result", "id": 12, "ok": true, "tabs": [
|
||||||
|
{ "id": 43, "title": "Kundenakte", "url": "https://crm.example.local/kunden/4711", "active": true },
|
||||||
|
{ "id": 44, "title": "SwyxWeb", "url": "http://localhost:5173/", "active": false } ] }
|
||||||
|
|
||||||
|
// ->
|
||||||
|
{ "id": 13, "cmd": "opentab", "url": "https://crm.example.local/kunden/4711" }
|
||||||
|
// <-
|
||||||
|
{ "type": "result", "id": 13, "ok": true, "tabId": 43 }
|
||||||
|
|
||||||
|
// -> tabId stammt aus einer tabs-Antwort
|
||||||
|
{ "id": 14, "cmd": "closetab", "tabId": 43 }
|
||||||
|
// <-
|
||||||
|
{ "type": "result", "id": 14, "ok": true }
|
||||||
|
```
|
||||||
|
|
||||||
|
`url` muss eine **absolute http(s)-Adresse** sein – dieselbe Prüfung wie bei `focus`; sonst
|
||||||
|
antwortet die App mit `ok: false`. Ist **kein Plugin verbunden**, endet jedes der drei
|
||||||
|
Kommandos nach dem Zeitfenster von rund fünf Sekunden ebenfalls mit `ok: false`. Deshalb
|
||||||
|
wartet die Startseite auf diese drei Kommandos 15 statt 10 Sekunden
|
||||||
|
([SwyxTrayClient.ts](frontend/src/swyx/SwyxTrayClient.ts)).
|
||||||
|
|
||||||
|
Auch hier gilt: **die App meldet Tab-Änderungen nicht von selbst.** Die Liste wird nach jedem
|
||||||
|
Öffnen und Schließen neu über `tabs` geholt.
|
||||||
|
|
||||||
|
Alle Regeln sind in [protocol.test.ts](frontend/src/swyx/protocol.test.ts) festgehalten –
|
||||||
|
darunter die wörtlich mitgeschnittene Nachricht eines echten eingehenden Anrufs.
|
||||||
|
|
||||||
|
## Funktionen der Startseite
|
||||||
|
|
||||||
|
Die Seite ist in drei Bereiche aufgeteilt ([Tabs.tsx](frontend/src/components/Tabs.tsx)):
|
||||||
|
|
||||||
|
| Tab | Inhalt |
|
||||||
|
|---|---|
|
||||||
|
| **Anrufe** | Rufnummer wählen (`call`), belegte Leitungen mit Aktionen und dem Zustand der App (`statusText`, angemeldeter Benutzer, Warnung bei `connected: false`), Verlauf der Anrufereignisse |
|
||||||
|
| **Tabs** | Offene Tabs des Firefox-Plugins anzeigen (`tabs`), einzeln schließen (`closetab`) und eine URL als neuen Tab öffnen (`opentab`); die Liste wird beim ersten Öffnen des Bereichs und nach jeder Änderung geholt, die eingetippte URL übersteht einen Reload (`localStorage`) |
|
||||||
|
| **Verbindung** | Adresse, Verbinden/Trennen, Benachrichtigungen erlauben, Diagnose: Rohnachrichten-Log, Status abfragen, Freitext senden |
|
||||||
|
|
||||||
|
Die **Meldung eines eingehenden Anrufs** steht bewusst *über* den Tabs – mit Leitungsnummer,
|
||||||
|
Name und Rufnummer, „Annehmen"/„Ablehnen" –, damit sie in keinem Bereich untergeht. Liegt der
|
||||||
|
Browser-Tab im Hintergrund, kommt zusätzlich eine System-Benachrichtigung (nach Erlaubnis).
|
||||||
|
|
||||||
|
Weiteres:
|
||||||
|
|
||||||
|
- Der Verlauf entsteht aus dem Vergleich aufeinanderfolgender Snapshots.
|
||||||
|
- Eine Nachricht, die keinem der drei Typen entspricht, wird im Log ausdrücklich als
|
||||||
|
„nicht erkannt" vermerkt statt still verworfen.
|
||||||
|
- Automatischer Reconnect mit exponentiellem Backoff, nur nach unerwartetem Abbruch.
|
||||||
|
|
||||||
|
## Starten
|
||||||
|
|
||||||
|
### Aus VS Code
|
||||||
|
|
||||||
|
Im Debug-Panel die Compound-Konfiguration **„SwyxWeb starten (Backend + Frontend)"** wählen
|
||||||
|
([launch.json](.vscode/launch.json)). Sie startet das Backend im Debugger, danach den
|
||||||
|
Vite-Dev-Server und öffnet Chrome, sobald dieser bereit ist – Breakpoints funktionieren auf
|
||||||
|
beiden Seiten. „Stop" beendet beides zusammen.
|
||||||
|
|
||||||
|
Alternative **„SwyxWeb starten (lokaler Test gegen SwyxTray-Mock)"**: `/api/config` liefert dann
|
||||||
|
`ws://localhost:8080/ws`, die Startseite spricht also mit dem SwyxTray-Mock.
|
||||||
|
|
||||||
|
Benötigte Extensions: *Extension Pack for Java* (Backend) und *JavaScript Debugger* (im
|
||||||
|
VS Code enthalten, für Vite und Chrome).
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd backend
|
||||||
|
./mvnw spring-boot:run
|
||||||
|
```
|
||||||
|
|
||||||
|
Läuft auf `http://0.0.0.0:8080`. Achtung: Auf diesem Rechner belegt bereits ein anderes
|
||||||
|
Projekt Port 8080 – dann auf einen freien Port ausweichen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
./mvnw spring-boot:run -Dspring-boot.run.arguments="--server.port=8081"
|
||||||
|
```
|
||||||
|
|
||||||
|
Der Port der SwyxTray-App (17654) ändert sich dadurch nicht.
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd frontend
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Öffnet `http://localhost:5173`. Der Vite-Dev-Server leitet `/api` an `http://localhost:8080`
|
||||||
|
weiter (überschreibbar per `VITE_BACKEND_URL`). Die WebSocket-Verbindung läuft **nicht** über
|
||||||
|
diesen Proxy – der Browser verbindet sich direkt mit der SwyxTray-App.
|
||||||
|
|
||||||
|
## Ohne echte Telefonanlage testen
|
||||||
|
|
||||||
|
Der [SwyxTrayMockHandler](backend/src/main/java/de/appcreation/swyxweb/websocket/SwyxTrayMockHandler.java)
|
||||||
|
spricht dasselbe Protokoll: `hello` (mit `protocol: 6`) und Snapshot beim Verbinden, Quittungen
|
||||||
|
auf `call`/`answer`/`hangup`/`ping`/`status`/`focus`/`tabs`/`opentab`/`closetab` und nach jeder
|
||||||
|
Änderung einen vollständigen Snapshot über alle vier Leitungen. Einen eingehenden Anruf auslösen:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -X POST "http://localhost:8080/api/mock/incoming-call?number=%2B493012345&name=Muster%20GmbH"
|
||||||
|
```
|
||||||
|
|
||||||
|
Für `focus` täuscht der Mock die Fenster **„SwyxIt!"**, **„SwyxWeb – Google Chrome"** und
|
||||||
|
**„Kundenakte Muster GmbH"** vor (Teilzeichenkette, Schreibweise egal). Ein passender Titel
|
||||||
|
ergibt `focused: true`, ein unbekannter mit URL `focused: false`, ein unbekannter ohne URL
|
||||||
|
denselben Fehler wie die echte App. Geöffnet wird natürlich nichts – der Mock protokolliert nur.
|
||||||
|
|
||||||
|
Für die Tab-Kommandos spielt der Mock das Firefox-Plugin und führt eine Tabliste im Speicher –
|
||||||
|
anfangs **„SwyxWeb"** und **„Kundenakte Muster GmbH"**. `opentab` hängt einen Tab an und
|
||||||
|
liefert dessen `tabId`, `closetab` entfernt ihn; eine unbekannte Kennung ergibt
|
||||||
|
`"Kein Tab mit der Kennung …"`, eine relative Adresse denselben Fehler wie die echte App.
|
||||||
|
Geöffnet wird auch hier nichts. Der Mock bildet den Fall „kein Plugin verbunden" **nicht** nach;
|
||||||
|
er antwortet immer sofort.
|
||||||
|
|
||||||
|
Die Startseite muss dazu auf `ws://localhost:8080/ws` zeigen – entweder im Adressfeld
|
||||||
|
eintragen oder das Backend mit `--app.websocket.host=localhost --app.websocket.port=8080`
|
||||||
|
starten (macht die VS-Code-Konfiguration „lokaler Test" automatisch).
|
||||||
|
|
||||||
|
## Konfiguration der WebSocket-Adresse
|
||||||
|
|
||||||
|
Es gilt die erste Quelle, die etwas liefert:
|
||||||
|
|
||||||
|
| Priorität | Quelle | Beispiel |
|
||||||
|
|---|---|---|
|
||||||
|
| 1 | Eingabefeld auf der Startseite | zur Laufzeit änderbar |
|
||||||
|
| 2 | `GET /api/config` vom Backend | `app.websocket.host` in `application.properties` |
|
||||||
|
| 3 | `VITE_WS_URL` aus `frontend/.env` | siehe [.env.example](frontend/.env.example) |
|
||||||
|
| 4 | Default im Code | `ws://192.168.180.135:17654/ws` |
|
||||||
|
|
||||||
|
Backend-seitig:
|
||||||
|
|
||||||
|
```properties
|
||||||
|
server.port=8080 # Port dieser Anwendung
|
||||||
|
|
||||||
|
app.websocket.host=192.168.180.135 # SwyxTray-App
|
||||||
|
app.websocket.port=17654
|
||||||
|
app.websocket.path=/ws
|
||||||
|
app.websocket.secure=false # true ⇒ wss://
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build und Tests
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd backend && ./mvnw clean package # erzeugt target/backend-0.0.1-SNAPSHOT.jar
|
||||||
|
cd frontend && npm test && npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Um das Frontend aus dem Backend auszuliefern, `frontend/dist/*` nach
|
||||||
|
`backend/src/main/resources/static/` kopieren und neu packen.
|
||||||
|
|
||||||
|
## Hinweise
|
||||||
|
|
||||||
|
- **HTTPS-Seite ⇒ `wss://`**: Ein über HTTPS ausgelieferter Browser blockiert unverschlüsselte
|
||||||
|
`ws://`-Verbindungen (Mixed Content). Im Dev-Betrieb über `http://` ist `ws://` in Ordnung.
|
||||||
|
- **CORS/Origin**: Der Mock akzeptiert alle Origins (`setAllowedOriginPatterns("*")`), damit der
|
||||||
|
Vite-Dev-Server auf Port 5173 sich verbinden kann. Für die Produktion einschränken – siehe
|
||||||
|
[WebSocketConfig.java](backend/src/main/java/de/appcreation/swyxweb/config/WebSocketConfig.java)
|
||||||
|
und [CorsConfig.java](backend/src/main/java/de/appcreation/swyxweb/config/CorsConfig.java).
|
||||||
|
- **Firewall**: Port 17654 muss auf 192.168.180.135 eingehend freigegeben sein, sonst
|
||||||
|
scheitert der Verbindungsaufbau ohne aussagekräftige Browser-Fehlermeldung.
|
||||||
|
- **System-Benachrichtigungen** verlangen eine Benutzerinteraktion zur Erlaubniserteilung und
|
||||||
|
funktionieren nur über `https://` oder `localhost`.
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
wrapperVersion=3.3.4
|
||||||
|
distributionType=only-script
|
||||||
|
distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.16/apache-maven-3.9.16-bin.zip
|
||||||
+295
@@ -0,0 +1,295 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
# ----------------------------------------------------------------------------
|
||||||
|
# Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
# or more contributor license agreements. See the NOTICE file
|
||||||
|
# distributed with this work for additional information
|
||||||
|
# regarding copyright ownership. The ASF licenses this file
|
||||||
|
# to you under the Apache License, Version 2.0 (the
|
||||||
|
# "License"); you may not use this file except in compliance
|
||||||
|
# with the License. You may obtain a copy of the License at
|
||||||
|
#
|
||||||
|
# http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
#
|
||||||
|
# Unless required by applicable law or agreed to in writing,
|
||||||
|
# software distributed under the License is distributed on an
|
||||||
|
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
# KIND, either express or implied. See the License for the
|
||||||
|
# specific language governing permissions and limitations
|
||||||
|
# under the License.
|
||||||
|
# ----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
# ----------------------------------------------------------------------------
|
||||||
|
# Apache Maven Wrapper startup batch script, version 3.3.4
|
||||||
|
#
|
||||||
|
# Optional ENV vars
|
||||||
|
# -----------------
|
||||||
|
# JAVA_HOME - location of a JDK home dir, required when download maven via java source
|
||||||
|
# MVNW_REPOURL - repo url base for downloading maven distribution
|
||||||
|
# MVNW_USERNAME/MVNW_PASSWORD - user and password for downloading maven
|
||||||
|
# MVNW_VERBOSE - true: enable verbose log; debug: trace the mvnw script; others: silence the output
|
||||||
|
# ----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
set -euf
|
||||||
|
[ "${MVNW_VERBOSE-}" != debug ] || set -x
|
||||||
|
|
||||||
|
# OS specific support.
|
||||||
|
native_path() { printf %s\\n "$1"; }
|
||||||
|
case "$(uname)" in
|
||||||
|
CYGWIN* | MINGW*)
|
||||||
|
[ -z "${JAVA_HOME-}" ] || JAVA_HOME="$(cygpath --unix "$JAVA_HOME")"
|
||||||
|
native_path() { cygpath --path --windows "$1"; }
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
# set JAVACMD and JAVACCMD
|
||||||
|
set_java_home() {
|
||||||
|
# For Cygwin and MinGW, ensure paths are in Unix format before anything is touched
|
||||||
|
if [ -n "${JAVA_HOME-}" ]; then
|
||||||
|
if [ -x "$JAVA_HOME/jre/sh/java" ]; then
|
||||||
|
# IBM's JDK on AIX uses strange locations for the executables
|
||||||
|
JAVACMD="$JAVA_HOME/jre/sh/java"
|
||||||
|
JAVACCMD="$JAVA_HOME/jre/sh/javac"
|
||||||
|
else
|
||||||
|
JAVACMD="$JAVA_HOME/bin/java"
|
||||||
|
JAVACCMD="$JAVA_HOME/bin/javac"
|
||||||
|
|
||||||
|
if [ ! -x "$JAVACMD" ] || [ ! -x "$JAVACCMD" ]; then
|
||||||
|
echo "The JAVA_HOME environment variable is not defined correctly, so mvnw cannot run." >&2
|
||||||
|
echo "JAVA_HOME is set to \"$JAVA_HOME\", but \"\$JAVA_HOME/bin/java\" or \"\$JAVA_HOME/bin/javac\" does not exist." >&2
|
||||||
|
return 1
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
JAVACMD="$(
|
||||||
|
'set' +e
|
||||||
|
'unset' -f command 2>/dev/null
|
||||||
|
'command' -v java
|
||||||
|
)" || :
|
||||||
|
JAVACCMD="$(
|
||||||
|
'set' +e
|
||||||
|
'unset' -f command 2>/dev/null
|
||||||
|
'command' -v javac
|
||||||
|
)" || :
|
||||||
|
|
||||||
|
if [ ! -x "${JAVACMD-}" ] || [ ! -x "${JAVACCMD-}" ]; then
|
||||||
|
echo "The java/javac command does not exist in PATH nor is JAVA_HOME set, so mvnw cannot run." >&2
|
||||||
|
return 1
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
}
|
||||||
|
|
||||||
|
# hash string like Java String::hashCode
|
||||||
|
hash_string() {
|
||||||
|
str="${1:-}" h=0
|
||||||
|
while [ -n "$str" ]; do
|
||||||
|
char="${str%"${str#?}"}"
|
||||||
|
h=$(((h * 31 + $(LC_CTYPE=C printf %d "'$char")) % 4294967296))
|
||||||
|
str="${str#?}"
|
||||||
|
done
|
||||||
|
printf %x\\n $h
|
||||||
|
}
|
||||||
|
|
||||||
|
verbose() { :; }
|
||||||
|
[ "${MVNW_VERBOSE-}" != true ] || verbose() { printf %s\\n "${1-}"; }
|
||||||
|
|
||||||
|
die() {
|
||||||
|
printf %s\\n "$1" >&2
|
||||||
|
exit 1
|
||||||
|
}
|
||||||
|
|
||||||
|
trim() {
|
||||||
|
# MWRAPPER-139:
|
||||||
|
# Trims trailing and leading whitespace, carriage returns, tabs, and linefeeds.
|
||||||
|
# Needed for removing poorly interpreted newline sequences when running in more
|
||||||
|
# exotic environments such as mingw bash on Windows.
|
||||||
|
printf "%s" "${1}" | tr -d '[:space:]'
|
||||||
|
}
|
||||||
|
|
||||||
|
scriptDir="$(dirname "$0")"
|
||||||
|
scriptName="$(basename "$0")"
|
||||||
|
|
||||||
|
# parse distributionUrl and optional distributionSha256Sum, requires .mvn/wrapper/maven-wrapper.properties
|
||||||
|
while IFS="=" read -r key value; do
|
||||||
|
case "${key-}" in
|
||||||
|
distributionUrl) distributionUrl=$(trim "${value-}") ;;
|
||||||
|
distributionSha256Sum) distributionSha256Sum=$(trim "${value-}") ;;
|
||||||
|
esac
|
||||||
|
done <"$scriptDir/.mvn/wrapper/maven-wrapper.properties"
|
||||||
|
[ -n "${distributionUrl-}" ] || die "cannot read distributionUrl property in $scriptDir/.mvn/wrapper/maven-wrapper.properties"
|
||||||
|
|
||||||
|
case "${distributionUrl##*/}" in
|
||||||
|
maven-mvnd-*bin.*)
|
||||||
|
MVN_CMD=mvnd.sh _MVNW_REPO_PATTERN=/maven/mvnd/
|
||||||
|
case "${PROCESSOR_ARCHITECTURE-}${PROCESSOR_ARCHITEW6432-}:$(uname -a)" in
|
||||||
|
*AMD64:CYGWIN* | *AMD64:MINGW*) distributionPlatform=windows-amd64 ;;
|
||||||
|
:Darwin*x86_64) distributionPlatform=darwin-amd64 ;;
|
||||||
|
:Darwin*arm64) distributionPlatform=darwin-aarch64 ;;
|
||||||
|
:Linux*x86_64*) distributionPlatform=linux-amd64 ;;
|
||||||
|
*)
|
||||||
|
echo "Cannot detect native platform for mvnd on $(uname)-$(uname -m), use pure java version" >&2
|
||||||
|
distributionPlatform=linux-amd64
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
distributionUrl="${distributionUrl%-bin.*}-$distributionPlatform.zip"
|
||||||
|
;;
|
||||||
|
maven-mvnd-*) MVN_CMD=mvnd.sh _MVNW_REPO_PATTERN=/maven/mvnd/ ;;
|
||||||
|
*) MVN_CMD="mvn${scriptName#mvnw}" _MVNW_REPO_PATTERN=/org/apache/maven/ ;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
# apply MVNW_REPOURL and calculate MAVEN_HOME
|
||||||
|
# maven home pattern: ~/.m2/wrapper/dists/{apache-maven-<version>,maven-mvnd-<version>-<platform>}/<hash>
|
||||||
|
[ -z "${MVNW_REPOURL-}" ] || distributionUrl="$MVNW_REPOURL$_MVNW_REPO_PATTERN${distributionUrl#*"$_MVNW_REPO_PATTERN"}"
|
||||||
|
distributionUrlName="${distributionUrl##*/}"
|
||||||
|
distributionUrlNameMain="${distributionUrlName%.*}"
|
||||||
|
distributionUrlNameMain="${distributionUrlNameMain%-bin}"
|
||||||
|
MAVEN_USER_HOME="${MAVEN_USER_HOME:-${HOME}/.m2}"
|
||||||
|
MAVEN_HOME="${MAVEN_USER_HOME}/wrapper/dists/${distributionUrlNameMain-}/$(hash_string "$distributionUrl")"
|
||||||
|
|
||||||
|
exec_maven() {
|
||||||
|
unset MVNW_VERBOSE MVNW_USERNAME MVNW_PASSWORD MVNW_REPOURL || :
|
||||||
|
exec "$MAVEN_HOME/bin/$MVN_CMD" "$@" || die "cannot exec $MAVEN_HOME/bin/$MVN_CMD"
|
||||||
|
}
|
||||||
|
|
||||||
|
if [ -d "$MAVEN_HOME" ]; then
|
||||||
|
verbose "found existing MAVEN_HOME at $MAVEN_HOME"
|
||||||
|
exec_maven "$@"
|
||||||
|
fi
|
||||||
|
|
||||||
|
case "${distributionUrl-}" in
|
||||||
|
*?-bin.zip | *?maven-mvnd-?*-?*.zip) ;;
|
||||||
|
*) die "distributionUrl is not valid, must match *-bin.zip or maven-mvnd-*.zip, but found '${distributionUrl-}'" ;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
# prepare tmp dir
|
||||||
|
if TMP_DOWNLOAD_DIR="$(mktemp -d)" && [ -d "$TMP_DOWNLOAD_DIR" ]; then
|
||||||
|
clean() { rm -rf -- "$TMP_DOWNLOAD_DIR"; }
|
||||||
|
trap clean HUP INT TERM EXIT
|
||||||
|
else
|
||||||
|
die "cannot create temp dir"
|
||||||
|
fi
|
||||||
|
|
||||||
|
mkdir -p -- "${MAVEN_HOME%/*}"
|
||||||
|
|
||||||
|
# Download and Install Apache Maven
|
||||||
|
verbose "Couldn't find MAVEN_HOME, downloading and installing it ..."
|
||||||
|
verbose "Downloading from: $distributionUrl"
|
||||||
|
verbose "Downloading to: $TMP_DOWNLOAD_DIR/$distributionUrlName"
|
||||||
|
|
||||||
|
# select .zip or .tar.gz
|
||||||
|
if ! command -v unzip >/dev/null; then
|
||||||
|
distributionUrl="${distributionUrl%.zip}.tar.gz"
|
||||||
|
distributionUrlName="${distributionUrl##*/}"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# verbose opt
|
||||||
|
__MVNW_QUIET_WGET=--quiet __MVNW_QUIET_CURL=--silent __MVNW_QUIET_UNZIP=-q __MVNW_QUIET_TAR=''
|
||||||
|
[ "${MVNW_VERBOSE-}" != true ] || __MVNW_QUIET_WGET='' __MVNW_QUIET_CURL='' __MVNW_QUIET_UNZIP='' __MVNW_QUIET_TAR=v
|
||||||
|
|
||||||
|
# normalize http auth
|
||||||
|
case "${MVNW_PASSWORD:+has-password}" in
|
||||||
|
'') MVNW_USERNAME='' MVNW_PASSWORD='' ;;
|
||||||
|
has-password) [ -n "${MVNW_USERNAME-}" ] || MVNW_USERNAME='' MVNW_PASSWORD='' ;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
if [ -z "${MVNW_USERNAME-}" ] && command -v wget >/dev/null; then
|
||||||
|
verbose "Found wget ... using wget"
|
||||||
|
wget ${__MVNW_QUIET_WGET:+"$__MVNW_QUIET_WGET"} "$distributionUrl" -O "$TMP_DOWNLOAD_DIR/$distributionUrlName" || die "wget: Failed to fetch $distributionUrl"
|
||||||
|
elif [ -z "${MVNW_USERNAME-}" ] && command -v curl >/dev/null; then
|
||||||
|
verbose "Found curl ... using curl"
|
||||||
|
curl ${__MVNW_QUIET_CURL:+"$__MVNW_QUIET_CURL"} -f -L -o "$TMP_DOWNLOAD_DIR/$distributionUrlName" "$distributionUrl" || die "curl: Failed to fetch $distributionUrl"
|
||||||
|
elif set_java_home; then
|
||||||
|
verbose "Falling back to use Java to download"
|
||||||
|
javaSource="$TMP_DOWNLOAD_DIR/Downloader.java"
|
||||||
|
targetZip="$TMP_DOWNLOAD_DIR/$distributionUrlName"
|
||||||
|
cat >"$javaSource" <<-END
|
||||||
|
public class Downloader extends java.net.Authenticator
|
||||||
|
{
|
||||||
|
protected java.net.PasswordAuthentication getPasswordAuthentication()
|
||||||
|
{
|
||||||
|
return new java.net.PasswordAuthentication( System.getenv( "MVNW_USERNAME" ), System.getenv( "MVNW_PASSWORD" ).toCharArray() );
|
||||||
|
}
|
||||||
|
public static void main( String[] args ) throws Exception
|
||||||
|
{
|
||||||
|
setDefault( new Downloader() );
|
||||||
|
java.nio.file.Files.copy( java.net.URI.create( args[0] ).toURL().openStream(), java.nio.file.Paths.get( args[1] ).toAbsolutePath().normalize() );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
END
|
||||||
|
# For Cygwin/MinGW, switch paths to Windows format before running javac and java
|
||||||
|
verbose " - Compiling Downloader.java ..."
|
||||||
|
"$(native_path "$JAVACCMD")" "$(native_path "$javaSource")" || die "Failed to compile Downloader.java"
|
||||||
|
verbose " - Running Downloader.java ..."
|
||||||
|
"$(native_path "$JAVACMD")" -cp "$(native_path "$TMP_DOWNLOAD_DIR")" Downloader "$distributionUrl" "$(native_path "$targetZip")"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# If specified, validate the SHA-256 sum of the Maven distribution zip file
|
||||||
|
if [ -n "${distributionSha256Sum-}" ]; then
|
||||||
|
distributionSha256Result=false
|
||||||
|
if [ "$MVN_CMD" = mvnd.sh ]; then
|
||||||
|
echo "Checksum validation is not supported for maven-mvnd." >&2
|
||||||
|
echo "Please disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties." >&2
|
||||||
|
exit 1
|
||||||
|
elif command -v sha256sum >/dev/null; then
|
||||||
|
if echo "$distributionSha256Sum $TMP_DOWNLOAD_DIR/$distributionUrlName" | sha256sum -c - >/dev/null 2>&1; then
|
||||||
|
distributionSha256Result=true
|
||||||
|
fi
|
||||||
|
elif command -v shasum >/dev/null; then
|
||||||
|
if echo "$distributionSha256Sum $TMP_DOWNLOAD_DIR/$distributionUrlName" | shasum -a 256 -c >/dev/null 2>&1; then
|
||||||
|
distributionSha256Result=true
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
echo "Checksum validation was requested but neither 'sha256sum' or 'shasum' are available." >&2
|
||||||
|
echo "Please install either command, or disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
if [ $distributionSha256Result = false ]; then
|
||||||
|
echo "Error: Failed to validate Maven distribution SHA-256, your Maven distribution might be compromised." >&2
|
||||||
|
echo "If you updated your Maven version, you need to update the specified distributionSha256Sum property." >&2
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
# unzip and move
|
||||||
|
if command -v unzip >/dev/null; then
|
||||||
|
unzip ${__MVNW_QUIET_UNZIP:+"$__MVNW_QUIET_UNZIP"} "$TMP_DOWNLOAD_DIR/$distributionUrlName" -d "$TMP_DOWNLOAD_DIR" || die "failed to unzip"
|
||||||
|
else
|
||||||
|
tar xzf${__MVNW_QUIET_TAR:+"$__MVNW_QUIET_TAR"} "$TMP_DOWNLOAD_DIR/$distributionUrlName" -C "$TMP_DOWNLOAD_DIR" || die "failed to untar"
|
||||||
|
fi
|
||||||
|
|
||||||
|
# Find the actual extracted directory name (handles snapshots where filename != directory name)
|
||||||
|
actualDistributionDir=""
|
||||||
|
|
||||||
|
# First try the expected directory name (for regular distributions)
|
||||||
|
if [ -d "$TMP_DOWNLOAD_DIR/$distributionUrlNameMain" ]; then
|
||||||
|
if [ -f "$TMP_DOWNLOAD_DIR/$distributionUrlNameMain/bin/$MVN_CMD" ]; then
|
||||||
|
actualDistributionDir="$distributionUrlNameMain"
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
# If not found, search for any directory with the Maven executable (for snapshots)
|
||||||
|
if [ -z "$actualDistributionDir" ]; then
|
||||||
|
# enable globbing to iterate over items
|
||||||
|
set +f
|
||||||
|
for dir in "$TMP_DOWNLOAD_DIR"/*; do
|
||||||
|
if [ -d "$dir" ]; then
|
||||||
|
if [ -f "$dir/bin/$MVN_CMD" ]; then
|
||||||
|
actualDistributionDir="$(basename "$dir")"
|
||||||
|
break
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
set -f
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ -z "$actualDistributionDir" ]; then
|
||||||
|
verbose "Contents of $TMP_DOWNLOAD_DIR:"
|
||||||
|
verbose "$(ls -la "$TMP_DOWNLOAD_DIR")"
|
||||||
|
die "Could not find Maven distribution directory in extracted archive"
|
||||||
|
fi
|
||||||
|
|
||||||
|
verbose "Found extracted Maven distribution directory: $actualDistributionDir"
|
||||||
|
printf %s\\n "$distributionUrl" >"$TMP_DOWNLOAD_DIR/$actualDistributionDir/mvnw.url"
|
||||||
|
mv -- "$TMP_DOWNLOAD_DIR/$actualDistributionDir" "$MAVEN_HOME" || [ -d "$MAVEN_HOME" ] || die "fail to move MAVEN_HOME"
|
||||||
|
|
||||||
|
clean || :
|
||||||
|
exec_maven "$@"
|
||||||
Vendored
+189
@@ -0,0 +1,189 @@
|
|||||||
|
<# : batch portion
|
||||||
|
@REM ----------------------------------------------------------------------------
|
||||||
|
@REM Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
@REM or more contributor license agreements. See the NOTICE file
|
||||||
|
@REM distributed with this work for additional information
|
||||||
|
@REM regarding copyright ownership. The ASF licenses this file
|
||||||
|
@REM to you under the Apache License, Version 2.0 (the
|
||||||
|
@REM "License"); you may not use this file except in compliance
|
||||||
|
@REM with the License. You may obtain a copy of the License at
|
||||||
|
@REM
|
||||||
|
@REM http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
@REM
|
||||||
|
@REM Unless required by applicable law or agreed to in writing,
|
||||||
|
@REM software distributed under the License is distributed on an
|
||||||
|
@REM "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
@REM KIND, either express or implied. See the License for the
|
||||||
|
@REM specific language governing permissions and limitations
|
||||||
|
@REM under the License.
|
||||||
|
@REM ----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
@REM ----------------------------------------------------------------------------
|
||||||
|
@REM Apache Maven Wrapper startup batch script, version 3.3.4
|
||||||
|
@REM
|
||||||
|
@REM Optional ENV vars
|
||||||
|
@REM MVNW_REPOURL - repo url base for downloading maven distribution
|
||||||
|
@REM MVNW_USERNAME/MVNW_PASSWORD - user and password for downloading maven
|
||||||
|
@REM MVNW_VERBOSE - true: enable verbose log; others: silence the output
|
||||||
|
@REM ----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
@IF "%__MVNW_ARG0_NAME__%"=="" (SET __MVNW_ARG0_NAME__=%~nx0)
|
||||||
|
@SET __MVNW_CMD__=
|
||||||
|
@SET __MVNW_ERROR__=
|
||||||
|
@SET __MVNW_PSMODULEP_SAVE=%PSModulePath%
|
||||||
|
@SET PSModulePath=
|
||||||
|
@FOR /F "usebackq tokens=1* delims==" %%A IN (`powershell -noprofile "& {$scriptDir='%~dp0'; $script='%__MVNW_ARG0_NAME__%'; icm -ScriptBlock ([Scriptblock]::Create((Get-Content -Raw '%~f0'))) -NoNewScope}"`) DO @(
|
||||||
|
IF "%%A"=="MVN_CMD" (set __MVNW_CMD__=%%B) ELSE IF "%%B"=="" (echo %%A) ELSE (echo %%A=%%B)
|
||||||
|
)
|
||||||
|
@SET PSModulePath=%__MVNW_PSMODULEP_SAVE%
|
||||||
|
@SET __MVNW_PSMODULEP_SAVE=
|
||||||
|
@SET __MVNW_ARG0_NAME__=
|
||||||
|
@SET MVNW_USERNAME=
|
||||||
|
@SET MVNW_PASSWORD=
|
||||||
|
@IF NOT "%__MVNW_CMD__%"=="" ("%__MVNW_CMD__%" %*)
|
||||||
|
@echo Cannot start maven from wrapper >&2 && exit /b 1
|
||||||
|
@GOTO :EOF
|
||||||
|
: end batch / begin powershell #>
|
||||||
|
|
||||||
|
$ErrorActionPreference = "Stop"
|
||||||
|
if ($env:MVNW_VERBOSE -eq "true") {
|
||||||
|
$VerbosePreference = "Continue"
|
||||||
|
}
|
||||||
|
|
||||||
|
# calculate distributionUrl, requires .mvn/wrapper/maven-wrapper.properties
|
||||||
|
$distributionUrl = (Get-Content -Raw "$scriptDir/.mvn/wrapper/maven-wrapper.properties" | ConvertFrom-StringData).distributionUrl
|
||||||
|
if (!$distributionUrl) {
|
||||||
|
Write-Error "cannot read distributionUrl property in $scriptDir/.mvn/wrapper/maven-wrapper.properties"
|
||||||
|
}
|
||||||
|
|
||||||
|
switch -wildcard -casesensitive ( $($distributionUrl -replace '^.*/','') ) {
|
||||||
|
"maven-mvnd-*" {
|
||||||
|
$USE_MVND = $true
|
||||||
|
$distributionUrl = $distributionUrl -replace '-bin\.[^.]*$',"-windows-amd64.zip"
|
||||||
|
$MVN_CMD = "mvnd.cmd"
|
||||||
|
break
|
||||||
|
}
|
||||||
|
default {
|
||||||
|
$USE_MVND = $false
|
||||||
|
$MVN_CMD = $script -replace '^mvnw','mvn'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# apply MVNW_REPOURL and calculate MAVEN_HOME
|
||||||
|
# maven home pattern: ~/.m2/wrapper/dists/{apache-maven-<version>,maven-mvnd-<version>-<platform>}/<hash>
|
||||||
|
if ($env:MVNW_REPOURL) {
|
||||||
|
$MVNW_REPO_PATTERN = if ($USE_MVND -eq $False) { "/org/apache/maven/" } else { "/maven/mvnd/" }
|
||||||
|
$distributionUrl = "$env:MVNW_REPOURL$MVNW_REPO_PATTERN$($distributionUrl -replace "^.*$MVNW_REPO_PATTERN",'')"
|
||||||
|
}
|
||||||
|
$distributionUrlName = $distributionUrl -replace '^.*/',''
|
||||||
|
$distributionUrlNameMain = $distributionUrlName -replace '\.[^.]*$','' -replace '-bin$',''
|
||||||
|
|
||||||
|
$MAVEN_M2_PATH = "$HOME/.m2"
|
||||||
|
if ($env:MAVEN_USER_HOME) {
|
||||||
|
$MAVEN_M2_PATH = "$env:MAVEN_USER_HOME"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (-not (Test-Path -Path $MAVEN_M2_PATH)) {
|
||||||
|
New-Item -Path $MAVEN_M2_PATH -ItemType Directory | Out-Null
|
||||||
|
}
|
||||||
|
|
||||||
|
$MAVEN_WRAPPER_DISTS = $null
|
||||||
|
if ((Get-Item $MAVEN_M2_PATH).Target[0] -eq $null) {
|
||||||
|
$MAVEN_WRAPPER_DISTS = "$MAVEN_M2_PATH/wrapper/dists"
|
||||||
|
} else {
|
||||||
|
$MAVEN_WRAPPER_DISTS = (Get-Item $MAVEN_M2_PATH).Target[0] + "/wrapper/dists"
|
||||||
|
}
|
||||||
|
|
||||||
|
$MAVEN_HOME_PARENT = "$MAVEN_WRAPPER_DISTS/$distributionUrlNameMain"
|
||||||
|
$MAVEN_HOME_NAME = ([System.Security.Cryptography.SHA256]::Create().ComputeHash([byte[]][char[]]$distributionUrl) | ForEach-Object {$_.ToString("x2")}) -join ''
|
||||||
|
$MAVEN_HOME = "$MAVEN_HOME_PARENT/$MAVEN_HOME_NAME"
|
||||||
|
|
||||||
|
if (Test-Path -Path "$MAVEN_HOME" -PathType Container) {
|
||||||
|
Write-Verbose "found existing MAVEN_HOME at $MAVEN_HOME"
|
||||||
|
Write-Output "MVN_CMD=$MAVEN_HOME/bin/$MVN_CMD"
|
||||||
|
exit $?
|
||||||
|
}
|
||||||
|
|
||||||
|
if (! $distributionUrlNameMain -or ($distributionUrlName -eq $distributionUrlNameMain)) {
|
||||||
|
Write-Error "distributionUrl is not valid, must end with *-bin.zip, but found $distributionUrl"
|
||||||
|
}
|
||||||
|
|
||||||
|
# prepare tmp dir
|
||||||
|
$TMP_DOWNLOAD_DIR_HOLDER = New-TemporaryFile
|
||||||
|
$TMP_DOWNLOAD_DIR = New-Item -Itemtype Directory -Path "$TMP_DOWNLOAD_DIR_HOLDER.dir"
|
||||||
|
$TMP_DOWNLOAD_DIR_HOLDER.Delete() | Out-Null
|
||||||
|
trap {
|
||||||
|
if ($TMP_DOWNLOAD_DIR.Exists) {
|
||||||
|
try { Remove-Item $TMP_DOWNLOAD_DIR -Recurse -Force | Out-Null }
|
||||||
|
catch { Write-Warning "Cannot remove $TMP_DOWNLOAD_DIR" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
New-Item -Itemtype Directory -Path "$MAVEN_HOME_PARENT" -Force | Out-Null
|
||||||
|
|
||||||
|
# Download and Install Apache Maven
|
||||||
|
Write-Verbose "Couldn't find MAVEN_HOME, downloading and installing it ..."
|
||||||
|
Write-Verbose "Downloading from: $distributionUrl"
|
||||||
|
Write-Verbose "Downloading to: $TMP_DOWNLOAD_DIR/$distributionUrlName"
|
||||||
|
|
||||||
|
$webclient = New-Object System.Net.WebClient
|
||||||
|
if ($env:MVNW_USERNAME -and $env:MVNW_PASSWORD) {
|
||||||
|
$webclient.Credentials = New-Object System.Net.NetworkCredential($env:MVNW_USERNAME, $env:MVNW_PASSWORD)
|
||||||
|
}
|
||||||
|
[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
|
||||||
|
$webclient.DownloadFile($distributionUrl, "$TMP_DOWNLOAD_DIR/$distributionUrlName") | Out-Null
|
||||||
|
|
||||||
|
# If specified, validate the SHA-256 sum of the Maven distribution zip file
|
||||||
|
$distributionSha256Sum = (Get-Content -Raw "$scriptDir/.mvn/wrapper/maven-wrapper.properties" | ConvertFrom-StringData).distributionSha256Sum
|
||||||
|
if ($distributionSha256Sum) {
|
||||||
|
if ($USE_MVND) {
|
||||||
|
Write-Error "Checksum validation is not supported for maven-mvnd. `nPlease disable validation by removing 'distributionSha256Sum' from your maven-wrapper.properties."
|
||||||
|
}
|
||||||
|
Import-Module $PSHOME\Modules\Microsoft.PowerShell.Utility -Function Get-FileHash
|
||||||
|
if ((Get-FileHash "$TMP_DOWNLOAD_DIR/$distributionUrlName" -Algorithm SHA256).Hash.ToLower() -ne $distributionSha256Sum) {
|
||||||
|
Write-Error "Error: Failed to validate Maven distribution SHA-256, your Maven distribution might be compromised. If you updated your Maven version, you need to update the specified distributionSha256Sum property."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# unzip and move
|
||||||
|
Expand-Archive "$TMP_DOWNLOAD_DIR/$distributionUrlName" -DestinationPath "$TMP_DOWNLOAD_DIR" | Out-Null
|
||||||
|
|
||||||
|
# Find the actual extracted directory name (handles snapshots where filename != directory name)
|
||||||
|
$actualDistributionDir = ""
|
||||||
|
|
||||||
|
# First try the expected directory name (for regular distributions)
|
||||||
|
$expectedPath = Join-Path "$TMP_DOWNLOAD_DIR" "$distributionUrlNameMain"
|
||||||
|
$expectedMvnPath = Join-Path "$expectedPath" "bin/$MVN_CMD"
|
||||||
|
if ((Test-Path -Path $expectedPath -PathType Container) -and (Test-Path -Path $expectedMvnPath -PathType Leaf)) {
|
||||||
|
$actualDistributionDir = $distributionUrlNameMain
|
||||||
|
}
|
||||||
|
|
||||||
|
# If not found, search for any directory with the Maven executable (for snapshots)
|
||||||
|
if (!$actualDistributionDir) {
|
||||||
|
Get-ChildItem -Path "$TMP_DOWNLOAD_DIR" -Directory | ForEach-Object {
|
||||||
|
$testPath = Join-Path $_.FullName "bin/$MVN_CMD"
|
||||||
|
if (Test-Path -Path $testPath -PathType Leaf) {
|
||||||
|
$actualDistributionDir = $_.Name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!$actualDistributionDir) {
|
||||||
|
Write-Error "Could not find Maven distribution directory in extracted archive"
|
||||||
|
}
|
||||||
|
|
||||||
|
Write-Verbose "Found extracted Maven distribution directory: $actualDistributionDir"
|
||||||
|
Rename-Item -Path "$TMP_DOWNLOAD_DIR/$actualDistributionDir" -NewName $MAVEN_HOME_NAME | Out-Null
|
||||||
|
try {
|
||||||
|
Move-Item -Path "$TMP_DOWNLOAD_DIR/$MAVEN_HOME_NAME" -Destination $MAVEN_HOME_PARENT | Out-Null
|
||||||
|
} catch {
|
||||||
|
if (! (Test-Path -Path "$MAVEN_HOME" -PathType Container)) {
|
||||||
|
Write-Error "fail to move MAVEN_HOME"
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
try { Remove-Item $TMP_DOWNLOAD_DIR -Recurse -Force | Out-Null }
|
||||||
|
catch { Write-Warning "Cannot remove $TMP_DOWNLOAD_DIR" }
|
||||||
|
}
|
||||||
|
|
||||||
|
Write-Output "MVN_CMD=$MAVEN_HOME/bin/$MVN_CMD"
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||||
|
<modelVersion>4.0.0</modelVersion>
|
||||||
|
<parent>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-parent</artifactId>
|
||||||
|
<version>4.1.0</version>
|
||||||
|
<relativePath/> <!-- lookup parent from repository -->
|
||||||
|
</parent>
|
||||||
|
<groupId>de.appcreation</groupId>
|
||||||
|
<artifactId>backend</artifactId>
|
||||||
|
<version>0.0.1-SNAPSHOT</version>
|
||||||
|
<name>swyxweb-backend</name>
|
||||||
|
<description>Spring-Boot-Backend mit WebSocket-Endpunkt für die SwyxWeb-Startseite</description>
|
||||||
|
|
||||||
|
<properties>
|
||||||
|
<java.version>21</java.version>
|
||||||
|
</properties>
|
||||||
|
|
||||||
|
<dependencies>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-webmvc</artifactId>
|
||||||
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-websocket</artifactId>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-webmvc-test</artifactId>
|
||||||
|
<scope>test</scope>
|
||||||
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-websocket-test</artifactId>
|
||||||
|
<scope>test</scope>
|
||||||
|
</dependency>
|
||||||
|
</dependencies>
|
||||||
|
|
||||||
|
<build>
|
||||||
|
<plugins>
|
||||||
|
<plugin>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-maven-plugin</artifactId>
|
||||||
|
</plugin>
|
||||||
|
</plugins>
|
||||||
|
</build>
|
||||||
|
|
||||||
|
</project>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package de.appcreation.swyxweb;
|
||||||
|
|
||||||
|
import de.appcreation.swyxweb.config.WebSocketProperties;
|
||||||
|
import org.springframework.boot.SpringApplication;
|
||||||
|
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||||
|
import org.springframework.boot.context.properties.EnableConfigurationProperties;
|
||||||
|
|
||||||
|
@SpringBootApplication
|
||||||
|
@EnableConfigurationProperties(WebSocketProperties.class)
|
||||||
|
public class BackendApplication {
|
||||||
|
|
||||||
|
public static void main(String[] args) {
|
||||||
|
SpringApplication.run(BackendApplication.class, args);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
package de.appcreation.swyxweb.config;
|
||||||
|
|
||||||
|
import org.springframework.context.annotation.Configuration;
|
||||||
|
import org.springframework.web.servlet.config.annotation.CorsRegistry;
|
||||||
|
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Erlaubt dem Vite-Dev-Server den Zugriff auf die REST-Endpunkte.
|
||||||
|
*/
|
||||||
|
@Configuration
|
||||||
|
public class CorsConfig implements WebMvcConfigurer {
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void addCorsMappings(CorsRegistry registry) {
|
||||||
|
registry.addMapping("/api/**")
|
||||||
|
.allowedOriginPatterns("*")
|
||||||
|
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS");
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
package de.appcreation.swyxweb.config;
|
||||||
|
|
||||||
|
import de.appcreation.swyxweb.websocket.SwyxTrayMockHandler;
|
||||||
|
import org.springframework.context.annotation.Configuration;
|
||||||
|
import org.springframework.web.socket.config.annotation.EnableWebSocket;
|
||||||
|
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
|
||||||
|
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stellt den SwyxTray-Mock unter dem konfigurierten Pfad bereit, damit sich die
|
||||||
|
* Startseite auch ohne die echte SwyxTray-App testen lässt.
|
||||||
|
*/
|
||||||
|
@Configuration
|
||||||
|
@EnableWebSocket
|
||||||
|
public class WebSocketConfig implements WebSocketConfigurer {
|
||||||
|
|
||||||
|
private final SwyxTrayMockHandler handler;
|
||||||
|
private final WebSocketProperties properties;
|
||||||
|
|
||||||
|
public WebSocketConfig(SwyxTrayMockHandler handler, WebSocketProperties properties) {
|
||||||
|
this.handler = handler;
|
||||||
|
this.properties = properties;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
|
||||||
|
registry.addHandler(handler, properties.path())
|
||||||
|
// Der Browser meldet sich von einem anderen Origin (Vite-Dev-Server) aus an.
|
||||||
|
.setAllowedOriginPatterns("*");
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package de.appcreation.swyxweb.config;
|
||||||
|
|
||||||
|
import org.springframework.boot.context.properties.ConfigurationProperties;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Verbindungsdaten des WebSocket-Servers, die das Frontend über /api/config abholt.
|
||||||
|
*/
|
||||||
|
@ConfigurationProperties(prefix = "app.websocket")
|
||||||
|
public record WebSocketProperties(String host, int port, String path, boolean secure) {
|
||||||
|
|
||||||
|
/** Fertige URL, z. B. ws://192.168.180.135:8080/ws */
|
||||||
|
public String url() {
|
||||||
|
return (secure ? "wss" : "ws") + "://" + host + ":" + port + path;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
package de.appcreation.swyxweb.web;
|
||||||
|
|
||||||
|
import de.appcreation.swyxweb.config.WebSocketProperties;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Liefert dem Frontend die Laufzeit-Konfiguration, damit die WebSocket-Adresse
|
||||||
|
* nicht im JavaScript-Bundle fest verdrahtet werden muss.
|
||||||
|
*/
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("/api")
|
||||||
|
public class ConfigController {
|
||||||
|
|
||||||
|
private final WebSocketProperties properties;
|
||||||
|
|
||||||
|
public ConfigController(WebSocketProperties properties) {
|
||||||
|
this.properties = properties;
|
||||||
|
}
|
||||||
|
|
||||||
|
public record ClientConfig(String websocketUrl, String host, int port, String path) {
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/config")
|
||||||
|
public ClientConfig config() {
|
||||||
|
return new ClientConfig(
|
||||||
|
properties.url(),
|
||||||
|
properties.host(),
|
||||||
|
properties.port(),
|
||||||
|
properties.path());
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/health")
|
||||||
|
public java.util.Map<String, String> health() {
|
||||||
|
return java.util.Map.of("status", "UP");
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
package de.appcreation.swyxweb.web;
|
||||||
|
|
||||||
|
import de.appcreation.swyxweb.websocket.LineState;
|
||||||
|
import de.appcreation.swyxweb.websocket.SwyxTrayMockHandler;
|
||||||
|
import org.springframework.web.bind.annotation.PostMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestParam;
|
||||||
|
import org.springframework.web.bind.annotation.RestController;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Auslöser für den SwyxTray-Mock: simuliert einen eingehenden Anruf, damit sich
|
||||||
|
* die Anrufmeldung der Startseite ohne echte Telefonanlage prüfen lässt.
|
||||||
|
*
|
||||||
|
* <pre>curl -X POST "http://localhost:8080/api/mock/incoming-call?number=%2B493012345&name=Muster%20GmbH"</pre>
|
||||||
|
*/
|
||||||
|
@RestController
|
||||||
|
@RequestMapping("/api/mock")
|
||||||
|
public class MockController {
|
||||||
|
|
||||||
|
private final SwyxTrayMockHandler mock;
|
||||||
|
|
||||||
|
public MockController(SwyxTrayMockHandler mock) {
|
||||||
|
this.mock = mock;
|
||||||
|
}
|
||||||
|
|
||||||
|
@PostMapping("/incoming-call")
|
||||||
|
public LineState incomingCall(
|
||||||
|
@RequestParam(required = false) String number,
|
||||||
|
@RequestParam(required = false) String name) {
|
||||||
|
return mock.simulateIncomingCall(number, name);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
package de.appcreation.swyxweb.websocket;
|
||||||
|
|
||||||
|
import com.fasterxml.jackson.annotation.JsonIgnore;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Leitungseintrag im Snapshot – Feldnamen und Werte wie bei der echten
|
||||||
|
* SwyxTray-App: {@code state} trägt den Namen aus der CLMgr-Aufzählung
|
||||||
|
* {@code LineState}, {@code stateText} den deutschen Klartext aus SwyxIt!.
|
||||||
|
*
|
||||||
|
* <p>Mitgeschnitten und damit bestätigt sind {@code LSInactive / 0 / "frei"} und
|
||||||
|
* {@code LSRinging / 3 / "klingelt"}; die Werte für Wählen und Gespräch sind der
|
||||||
|
* Aufzählung nachempfunden. Die Startseite wertet {@code state} und
|
||||||
|
* {@code stateText} aus, nicht {@code stateCode}.
|
||||||
|
*/
|
||||||
|
public record LineState(
|
||||||
|
int line,
|
||||||
|
String state,
|
||||||
|
int stateCode,
|
||||||
|
String stateText,
|
||||||
|
String peer,
|
||||||
|
String peerNumber,
|
||||||
|
String peerName,
|
||||||
|
boolean busy,
|
||||||
|
boolean selected) {
|
||||||
|
|
||||||
|
public static final String FREE = "LSInactive";
|
||||||
|
public static final String RINGING = "LSRinging";
|
||||||
|
public static final String DIALING = "LSDialing";
|
||||||
|
public static final String ACTIVE = "LSActive";
|
||||||
|
|
||||||
|
/** Platzhalter der App für eine Leitung ohne Gegenstelle. */
|
||||||
|
private static final String NO_PEER = "unbekannt";
|
||||||
|
|
||||||
|
public static LineState free(int line) {
|
||||||
|
return new LineState(line, FREE, 0, "frei", NO_PEER, "", "", false, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
public static LineState ringing(int line, String number, String name) {
|
||||||
|
return occupied(line, RINGING, 3, "klingelt", number, name);
|
||||||
|
}
|
||||||
|
|
||||||
|
@JsonIgnore
|
||||||
|
public boolean isRinging() {
|
||||||
|
return RINGING.equals(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
public static LineState dialing(int line, String number, String name) {
|
||||||
|
return occupied(line, DIALING, 2, "wählt", number, name);
|
||||||
|
}
|
||||||
|
|
||||||
|
public LineState connected() {
|
||||||
|
return occupied(line, ACTIVE, 6, "verbunden", peerNumber, peerName);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Nur für den Mock – die App kennt dieses Feld nicht, also nicht serialisieren. */
|
||||||
|
@JsonIgnore
|
||||||
|
public boolean isFree() {
|
||||||
|
return FREE.equals(state);
|
||||||
|
}
|
||||||
|
|
||||||
|
private static LineState occupied(
|
||||||
|
int line, String state, int stateCode, String stateText, String number, String name) {
|
||||||
|
return new LineState(
|
||||||
|
line, state, stateCode, stateText,
|
||||||
|
peerOf(number, name),
|
||||||
|
number == null ? "" : number,
|
||||||
|
name == null ? "" : name,
|
||||||
|
true, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fertige Anzeigeform: Name mit Nummer in Klammern; fehlt eines, nur der
|
||||||
|
* vorhandene Wert.
|
||||||
|
*/
|
||||||
|
private static String peerOf(String number, String name) {
|
||||||
|
boolean hasName = name != null && !name.isBlank();
|
||||||
|
boolean hasNumber = number != null && !number.isBlank();
|
||||||
|
if (hasName && hasNumber) {
|
||||||
|
return name + " (" + number + ")";
|
||||||
|
}
|
||||||
|
if (hasName) {
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
return hasNumber ? number : NO_PEER;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package de.appcreation.swyxweb.websocket;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tab des Firefox-Plugins im Mock – Feldnamen wie in der Quittung auf
|
||||||
|
* {@code tabs}: {@code {"id":43,"title":"…","url":"https://…","active":true}}.
|
||||||
|
*
|
||||||
|
* <p>Die echte SwyxTray-App erzeugt diese Einträge nicht selbst; sie reicht die
|
||||||
|
* Antwort des Plugins unverändert durch.
|
||||||
|
*/
|
||||||
|
public record MockTab(int id, String title, String url, boolean active) {
|
||||||
|
|
||||||
|
public MockTab withActive(boolean nowActive) {
|
||||||
|
return new MockTab(id, title, url, nowActive);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,405 @@
|
|||||||
|
package de.appcreation.swyxweb.websocket;
|
||||||
|
|
||||||
|
import java.io.IOException;
|
||||||
|
import java.net.URI;
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.Collections;
|
||||||
|
import java.util.LinkedHashMap;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
import java.util.concurrent.ConcurrentHashMap;
|
||||||
|
import java.util.concurrent.atomic.AtomicInteger;
|
||||||
|
|
||||||
|
import tools.jackson.databind.JsonNode;
|
||||||
|
import tools.jackson.databind.ObjectMapper;
|
||||||
|
|
||||||
|
import org.slf4j.Logger;
|
||||||
|
import org.slf4j.LoggerFactory;
|
||||||
|
import org.springframework.stereotype.Component;
|
||||||
|
import org.springframework.web.socket.CloseStatus;
|
||||||
|
import org.springframework.web.socket.TextMessage;
|
||||||
|
import org.springframework.web.socket.WebSocketSession;
|
||||||
|
import org.springframework.web.socket.handler.TextWebSocketHandler;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simuliert die SwyxTray-App für Entwicklung und Test – im Format, das gegen die
|
||||||
|
* echte App (Version 1.0.0.0, {@code protocol: 1}) mitgeschnitten wurde.
|
||||||
|
*
|
||||||
|
* <ul>
|
||||||
|
* <li>Beim Verbinden: {@code {"app":"SwyxTray",…,"type":"hello"}}, danach ein Snapshot.</li>
|
||||||
|
* <li>Kommando: {@code {"id":7,"cmd":"call","number":"…"}}
|
||||||
|
* → {@code {"id":7,"ok":true,"line":2,"type":"result"}}</li>
|
||||||
|
* <li><b>Keine Ereignisnachrichten.</b> Jede Änderung geht als vollständiger
|
||||||
|
* {@code snapshot} über alle Leitungen raus – auch ein eingehender Anruf.</li>
|
||||||
|
* </ul>
|
||||||
|
*
|
||||||
|
* Ein eingehender Anruf lässt sich über {@code POST /api/mock/incoming-call} auslösen.
|
||||||
|
*
|
||||||
|
* <p>Seit Protokoll 6 beantwortet der Mock zusätzlich {@code tabs}, {@code opentab} und
|
||||||
|
* {@code closetab}. Die echte App reicht diese Kommandos an das Firefox-Plugin durch;
|
||||||
|
* der Mock spielt das Plugin und führt eine Liste vorgetäuschter Tabs im Speicher.
|
||||||
|
*/
|
||||||
|
@Component
|
||||||
|
public class SwyxTrayMockHandler extends TextWebSocketHandler {
|
||||||
|
|
||||||
|
private static final Logger log = LoggerFactory.getLogger(SwyxTrayMockHandler.class);
|
||||||
|
|
||||||
|
/** So viele Leitungen meldet die echte App. */
|
||||||
|
private static final int LINE_COUNT = 4;
|
||||||
|
|
||||||
|
/** Vorgetäuschte Fenstertitel für {@code focus} – damit beide Zweige prüfbar sind. */
|
||||||
|
private static final List<String> MOCK_WINDOWS = List.of(
|
||||||
|
"SwyxIt!", "SwyxWeb – Google Chrome", "Kundenakte Muster GmbH");
|
||||||
|
|
||||||
|
/** Protokollstand der echten App seit der Tab-Verwaltung. */
|
||||||
|
private static final int PROTOCOL_VERSION = 6;
|
||||||
|
|
||||||
|
private final ObjectMapper mapper;
|
||||||
|
private final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
|
||||||
|
private final Map<Integer, LineState> lines = new ConcurrentHashMap<>();
|
||||||
|
// Vorgetäuschte Tabs des Firefox-Plugins, in der Reihenfolge des Öffnens.
|
||||||
|
private final Map<Integer, MockTab> tabs = Collections.synchronizedMap(new LinkedHashMap<>());
|
||||||
|
private final AtomicInteger nextTabId = new AtomicInteger(41);
|
||||||
|
private final AtomicInteger nextSession = new AtomicInteger();
|
||||||
|
// Serialisiert Begrüßung und Snapshot, damit die Reihenfolge garantiert ist.
|
||||||
|
private final Object sendLock = new Object();
|
||||||
|
|
||||||
|
public SwyxTrayMockHandler(ObjectMapper mapper) {
|
||||||
|
this.mapper = mapper;
|
||||||
|
for (int line = 1; line <= LINE_COUNT; line++) {
|
||||||
|
lines.put(line, LineState.free(line));
|
||||||
|
}
|
||||||
|
// Zwei Tabs von Anfang an, damit die Startseite etwas anzuzeigen hat.
|
||||||
|
addTab("SwyxWeb", "http://localhost:5173/");
|
||||||
|
addTab("Kundenakte Muster GmbH", "https://crm.example.local/kunden/4711");
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void afterConnectionEstablished(WebSocketSession session) {
|
||||||
|
sessions.put(session.getId(), session);
|
||||||
|
log.info("SwyxTray-Mock: Client {} verbunden ({} aktiv)", session.getId(), sessions.size());
|
||||||
|
synchronized (sendLock) {
|
||||||
|
sendText(session, toJson(hello()));
|
||||||
|
sendText(session, toJson(snapshot()));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
|
||||||
|
sessions.remove(session.getId());
|
||||||
|
log.info("SwyxTray-Mock: Client {} getrennt ({}) – {} aktiv", session.getId(), status, sessions.size());
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
protected void handleTextMessage(WebSocketSession session, TextMessage message) {
|
||||||
|
JsonNode request;
|
||||||
|
try {
|
||||||
|
request = mapper.readTree(message.getPayload());
|
||||||
|
} catch (Exception e) {
|
||||||
|
sendText(session, toJson(result(0, false, null, "Ungültiges JSON: " + e.getMessage())));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
int id = request.path("id").asInt(0);
|
||||||
|
String cmd = request.path("cmd").asString(null);
|
||||||
|
log.debug("SwyxTray-Mock: Kommando {} (id={})", cmd, id);
|
||||||
|
|
||||||
|
if (cmd == null) {
|
||||||
|
sendText(session, toJson(result(id, false, null, "Feld 'cmd' fehlt.")));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// `focus` rührt keine Leitung an und schickt deshalb auch keinen Snapshot.
|
||||||
|
if ("focus".equals(cmd)) {
|
||||||
|
boolean focused = focus(request.path("title").asString(null),
|
||||||
|
request.path("url").asString(null));
|
||||||
|
sendText(session, toJson(focusResult(id, focused)));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Die drei Tab-Kommandos gehen bei der echten App ans Firefox-Plugin;
|
||||||
|
// sie berühren die Leitungen ebenfalls nicht.
|
||||||
|
switch (cmd) {
|
||||||
|
case "tabs" -> {
|
||||||
|
sendText(session, toJson(tabsResult(id, listTabs())));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
case "opentab" -> {
|
||||||
|
sendText(session, toJson(openTabResult(id, openTab(request.path("url").asString(null)))));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
case "closetab" -> {
|
||||||
|
closeTab(request.path("tabId"));
|
||||||
|
sendText(session, toJson(result(id, true, null, null)));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
default -> { /* weiter unten */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
Integer line = switch (cmd) {
|
||||||
|
case "call" -> dial(request.path("number").asString(null));
|
||||||
|
case "answer" -> answer(requiredLine(request));
|
||||||
|
case "hangup" -> hangup(requiredLine(request));
|
||||||
|
case "ping", "status" -> null;
|
||||||
|
default -> throw new IllegalArgumentException("Unbekanntes Kommando '" + cmd + "'.");
|
||||||
|
};
|
||||||
|
sendText(session, toJson(result(id, true, line, null)));
|
||||||
|
broadcastSnapshot();
|
||||||
|
} catch (IllegalArgumentException | IllegalStateException e) {
|
||||||
|
sendText(session, toJson(result(id, false, null, e.getMessage())));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Kommandos -------------------------------------------------------
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Nimmt den Wählauftrag an und belegt eine freie Leitung – wie CLMgr, das
|
||||||
|
* asynchron wählt; der Verlauf kommt über die folgenden Snapshots.
|
||||||
|
*/
|
||||||
|
private int dial(String number) {
|
||||||
|
if (number == null || number.isBlank()) {
|
||||||
|
throw new IllegalArgumentException("Parameter 'number' fehlt.");
|
||||||
|
}
|
||||||
|
int line = freeLine();
|
||||||
|
lines.put(line, LineState.dialing(line, number.trim(), null));
|
||||||
|
log.info("SwyxTray-Mock: Wähle {} auf Leitung {}", number, line);
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
|
||||||
|
private int answer(int line) {
|
||||||
|
lines.put(line, occupied(line).connected());
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
|
||||||
|
private int hangup(int line) {
|
||||||
|
occupied(line);
|
||||||
|
lines.put(line, LineState.free(line));
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simuliert {@code focus}: Fenster mit passendem Titel „in den Vordergrund holen",
|
||||||
|
* sonst „Browser starten". Der Mock öffnet natürlich nichts, er protokolliert nur –
|
||||||
|
* die Antworten entsprechen aber denen der echten App.
|
||||||
|
*
|
||||||
|
* @return {@code true}, wenn ein Fenster gefunden wurde
|
||||||
|
*/
|
||||||
|
private boolean focus(String title, String url) {
|
||||||
|
if (title == null || title.isBlank()) {
|
||||||
|
throw new IllegalArgumentException("Feld 'title' fehlt.");
|
||||||
|
}
|
||||||
|
String wanted = title.trim();
|
||||||
|
boolean found = MOCK_WINDOWS.stream()
|
||||||
|
.anyMatch(window -> window.toLowerCase().contains(wanted.toLowerCase()));
|
||||||
|
if (found) {
|
||||||
|
log.info("SwyxTray-Mock: Fenster '{}' in den Vordergrund geholt", wanted);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (url == null || url.isBlank()) {
|
||||||
|
throw new IllegalArgumentException(
|
||||||
|
"Kein Fenster mit Titel '" + wanted + "' gefunden und keine URL angegeben.");
|
||||||
|
}
|
||||||
|
log.info("SwyxTray-Mock: Kein Fenster '{}' – würde {} im Browser öffnen", wanted, url.trim());
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Die offenen Tabs in der Reihenfolge des Öffnens. */
|
||||||
|
private List<MockTab> listTabs() {
|
||||||
|
synchronized (tabs) {
|
||||||
|
return List.copyOf(tabs.values());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simuliert {@code opentab}. Die echte App prüft die Adresse selbst und lässt
|
||||||
|
* nur absolute http(s)-Adressen durch – der Mock hält sich an dieselbe Regel.
|
||||||
|
*
|
||||||
|
* @return Kennung des neuen Tabs
|
||||||
|
*/
|
||||||
|
private int openTab(String url) {
|
||||||
|
if (url == null || url.isBlank()) {
|
||||||
|
throw new IllegalArgumentException("Feld 'url' fehlt.");
|
||||||
|
}
|
||||||
|
String wanted = url.trim();
|
||||||
|
URI uri;
|
||||||
|
try {
|
||||||
|
uri = URI.create(wanted);
|
||||||
|
} catch (IllegalArgumentException e) {
|
||||||
|
throw new IllegalArgumentException("Ungültige URL '" + wanted + "'.");
|
||||||
|
}
|
||||||
|
String scheme = uri.getScheme() == null ? "" : uri.getScheme().toLowerCase();
|
||||||
|
if (!uri.isAbsolute() || !(scheme.equals("http") || scheme.equals("https"))) {
|
||||||
|
throw new IllegalArgumentException(
|
||||||
|
"Nur absolute http(s)-Adressen sind erlaubt, nicht '" + wanted + "'.");
|
||||||
|
}
|
||||||
|
MockTab tab = addTab(uri.getHost() == null ? wanted : uri.getHost(), wanted);
|
||||||
|
log.info("SwyxTray-Mock: Tab {} für {} geöffnet", tab.id(), wanted);
|
||||||
|
return tab.id();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Simuliert {@code closetab}; eine unbekannte Kennung ergibt einen Fehler. */
|
||||||
|
private void closeTab(JsonNode tabId) {
|
||||||
|
if (!tabId.isNumber()) {
|
||||||
|
throw new IllegalArgumentException("Feld 'tabId' fehlt.");
|
||||||
|
}
|
||||||
|
int id = tabId.asInt();
|
||||||
|
synchronized (tabs) {
|
||||||
|
if (tabs.remove(id) == null) {
|
||||||
|
throw new IllegalArgumentException("Kein Tab mit der Kennung " + id + ".");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
log.info("SwyxTray-Mock: Tab {} geschlossen", id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Legt einen Tab an; der zuletzt geöffnete ist der aktive. */
|
||||||
|
private MockTab addTab(String title, String url) {
|
||||||
|
MockTab tab = new MockTab(nextTabId.incrementAndGet(), title, url, true);
|
||||||
|
synchronized (tabs) {
|
||||||
|
tabs.replaceAll((id, existing) -> existing.withActive(false));
|
||||||
|
tabs.put(tab.id(), tab);
|
||||||
|
}
|
||||||
|
return tab;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Löst einen eingehenden Anruf aus: Leitung belegen, Snapshot verschicken. */
|
||||||
|
public LineState simulateIncomingCall(String number, String name) {
|
||||||
|
int line = freeLine();
|
||||||
|
LineState state = LineState.ringing(
|
||||||
|
line,
|
||||||
|
number == null || number.isBlank() ? "+493012345" : number.trim(),
|
||||||
|
name == null || name.isBlank() ? null : name.trim());
|
||||||
|
lines.put(line, state);
|
||||||
|
log.info("SwyxTray-Mock: Eingehender Anruf von {} auf Leitung {}", state.peer(), line);
|
||||||
|
broadcastSnapshot();
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Hilfsmittel -----------------------------------------------------
|
||||||
|
|
||||||
|
private int requiredLine(JsonNode request) {
|
||||||
|
JsonNode node = request.path("line");
|
||||||
|
if (!node.isNumber()) {
|
||||||
|
throw new IllegalArgumentException("Parameter 'line' fehlt.");
|
||||||
|
}
|
||||||
|
return node.asInt();
|
||||||
|
}
|
||||||
|
|
||||||
|
private LineState occupied(int line) {
|
||||||
|
LineState state = lines.get(line);
|
||||||
|
if (state == null || state.isFree()) {
|
||||||
|
throw new IllegalArgumentException("Leitung " + line + " ist nicht belegt.");
|
||||||
|
}
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
private int freeLine() {
|
||||||
|
for (int line = 1; line <= LINE_COUNT; line++) {
|
||||||
|
if (lines.get(line).isFree()) {
|
||||||
|
return line;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw new IllegalStateException("Alle Leitungen sind belegt.");
|
||||||
|
}
|
||||||
|
|
||||||
|
private Map<String, Object> hello() {
|
||||||
|
Map<String, Object> message = new LinkedHashMap<>();
|
||||||
|
message.put("app", "SwyxTray");
|
||||||
|
message.put("version", "mock");
|
||||||
|
message.put("protocol", PROTOCOL_VERSION);
|
||||||
|
message.put("session", nextSession.incrementAndGet());
|
||||||
|
message.put("type", "hello");
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Vollzustand über <b>alle</b> Leitungen, auch die freien – wie die echte App. */
|
||||||
|
private Map<String, Object> snapshot() {
|
||||||
|
List<LineState> entries = new ArrayList<>(LINE_COUNT);
|
||||||
|
for (int line = 1; line <= LINE_COUNT; line++) {
|
||||||
|
entries.add(lines.get(line));
|
||||||
|
}
|
||||||
|
boolean anyRinging = entries.stream().anyMatch(state -> state.isRinging());
|
||||||
|
boolean anyBusy = entries.stream().anyMatch(state -> !state.isFree());
|
||||||
|
|
||||||
|
Map<String, Object> message = new LinkedHashMap<>();
|
||||||
|
message.put("connected", true);
|
||||||
|
message.put("serverUp", true);
|
||||||
|
// Gesamtzustand wie die echte App: "Ringing"/"Eingehender Ruf" bzw. "Idle"/"Bereit".
|
||||||
|
message.put("overall", anyRinging ? "Ringing" : anyBusy ? "Busy" : "Idle");
|
||||||
|
message.put("statusText", anyRinging ? "Eingehender Ruf" : anyBusy ? "Im Gespräch" : "Bereit");
|
||||||
|
message.put("user", "Mock, M.");
|
||||||
|
message.put("server", "127.0.0.1");
|
||||||
|
message.put("lines", entries);
|
||||||
|
message.put("type", "snapshot");
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Quittung auf {@code focus}; trägt statt der Leitung das Feld {@code focused}. */
|
||||||
|
private Map<String, Object> focusResult(int id, boolean focused) {
|
||||||
|
Map<String, Object> message = new LinkedHashMap<>();
|
||||||
|
message.put("id", id);
|
||||||
|
message.put("ok", true);
|
||||||
|
message.put("focused", focused);
|
||||||
|
message.put("type", "result");
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Quittung auf {@code tabs}; trägt die Liste der Tabs. */
|
||||||
|
private Map<String, Object> tabsResult(int id, List<MockTab> entries) {
|
||||||
|
Map<String, Object> message = new LinkedHashMap<>();
|
||||||
|
message.put("id", id);
|
||||||
|
message.put("ok", true);
|
||||||
|
message.put("tabs", entries);
|
||||||
|
message.put("type", "result");
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Quittung auf {@code opentab}; trägt die Kennung des neuen Tabs. */
|
||||||
|
private Map<String, Object> openTabResult(int id, int tabId) {
|
||||||
|
Map<String, Object> message = new LinkedHashMap<>();
|
||||||
|
message.put("id", id);
|
||||||
|
message.put("ok", true);
|
||||||
|
message.put("tabId", tabId);
|
||||||
|
message.put("type", "result");
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
|
||||||
|
private Map<String, Object> result(int id, boolean ok, Integer line, String error) {
|
||||||
|
Map<String, Object> message = new LinkedHashMap<>();
|
||||||
|
message.put("id", id);
|
||||||
|
message.put("ok", ok);
|
||||||
|
if (line != null) {
|
||||||
|
message.put("line", line);
|
||||||
|
}
|
||||||
|
if (error != null) {
|
||||||
|
message.put("error", error);
|
||||||
|
}
|
||||||
|
message.put("type", "result");
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void broadcastSnapshot() {
|
||||||
|
String json = toJson(snapshot());
|
||||||
|
synchronized (sendLock) {
|
||||||
|
sessions.values().forEach(session -> sendText(session, json));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private String toJson(Object value) {
|
||||||
|
return mapper.writeValueAsString(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void sendText(WebSocketSession session, String json) {
|
||||||
|
if (!session.isOpen()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// sendMessage ist nicht threadsicher – Zugriffe pro Session serialisieren.
|
||||||
|
synchronized (session) {
|
||||||
|
try {
|
||||||
|
session.sendMessage(new TextMessage(json));
|
||||||
|
} catch (IOException e) {
|
||||||
|
log.warn("Senden an {} fehlgeschlagen: {}", session.getId(), e.getMessage());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
spring.application.name=swyxweb-backend
|
||||||
|
|
||||||
|
# Port dieser Anwendung (REST-API und der eingebaute Test-Endpunkt /ws).
|
||||||
|
server.address=0.0.0.0
|
||||||
|
server.port=8080
|
||||||
|
|
||||||
|
# Adresse des WebSocket-Servers, die das Frontend über /api/config als
|
||||||
|
# Verbindungsziel bekommt. Unabhängig vom Port dieser Anwendung.
|
||||||
|
app.websocket.host=192.168.180.135
|
||||||
|
app.websocket.port=17654
|
||||||
|
app.websocket.path=/ws
|
||||||
|
app.websocket.secure=false
|
||||||
|
|
||||||
|
logging.level.de.appcreation.swyxweb=DEBUG
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
package de.appcreation.swyxweb;
|
||||||
|
|
||||||
|
import org.junit.jupiter.api.Test;
|
||||||
|
import org.springframework.boot.test.context.SpringBootTest;
|
||||||
|
|
||||||
|
@SpringBootTest
|
||||||
|
class BackendApplicationTests {
|
||||||
|
|
||||||
|
@Test
|
||||||
|
void contextLoads() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
# Adresse des WebSocket-Servers; überschreibt den Wert aus /api/config.
|
||||||
|
VITE_WS_URL=ws://192.168.180.135:17654/ws
|
||||||
|
|
||||||
|
# Ziel des Dev-Proxys für /api, also der Port dieser Anwendung
|
||||||
|
# (Standard: http://localhost:8080)
|
||||||
|
VITE_BACKEND_URL=http://localhost:8080
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>SwyxWeb</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+2273
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "swyxweb-frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest run",
|
||||||
|
"typecheck": "tsc -b --noEmit false --emitDeclarationOnly false"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.1.0",
|
||||||
|
"react-dom": "^19.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^26.2.0",
|
||||||
|
"@types/react": "^19.1.0",
|
||||||
|
"@types/react-dom": "^19.1.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"typescript": "^5.7.3",
|
||||||
|
"vite": "^6.0.11",
|
||||||
|
"vitest": "^4.1.10"
|
||||||
|
},
|
||||||
|
"allowScripts": {
|
||||||
|
"esbuild@0.25.12": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import HomePage from './pages/HomePage'
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return <HomePage />
|
||||||
|
}
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
import { useCallback, useEffect, useRef, useState, type FormEvent } from 'react'
|
||||||
|
import { describeTab, type BrowserTab, type ResultMessage } from '../swyx/protocol'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
/** Panel ist sichtbar – erst dann wird von selbst geladen. */
|
||||||
|
active: boolean
|
||||||
|
disabled: boolean
|
||||||
|
busy: boolean
|
||||||
|
onList: () => Promise<ResultMessage | null>
|
||||||
|
onOpen: (url: string) => Promise<ResultMessage | null>
|
||||||
|
onClose: (tabId: number) => Promise<ResultMessage | null>
|
||||||
|
}
|
||||||
|
|
||||||
|
const STORAGE_URL = 'swyxweb.tabs.url'
|
||||||
|
|
||||||
|
function stored(key: string): string {
|
||||||
|
try {
|
||||||
|
return localStorage.getItem(key) ?? ''
|
||||||
|
} catch {
|
||||||
|
// Privater Modus o. Ä. – dann eben ohne Gedächtnis.
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function remember(key: string, value: string): void {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(key, value)
|
||||||
|
} catch {
|
||||||
|
// absichtlich still
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Die App nimmt nur absolute http(s)-Adressen an. Der gleiche Test hier erspart
|
||||||
|
* den Umweg über App und Plugin und erklärt den Fehler an Ort und Stelle.
|
||||||
|
*/
|
||||||
|
function isAbsoluteHttpUrl(value: string): boolean {
|
||||||
|
try {
|
||||||
|
const parsed = new URL(value)
|
||||||
|
return parsed.protocol === 'http:' || parsed.protocol === 'https:'
|
||||||
|
} catch {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tabs des Firefox-Plugins: anzeigen (`tabs`), öffnen (`opentab`) und
|
||||||
|
* schließen (`closetab`). Die SwyxTray-App reicht alle drei Kommandos nur an
|
||||||
|
* das Plugin durch – ohne verbundenes Plugin antwortet sie mit einem Fehler.
|
||||||
|
*/
|
||||||
|
export default function BrowserTabsPanel({ active, disabled, busy, onList, onOpen, onClose }: Props) {
|
||||||
|
const [tabs, setTabs] = useState<BrowserTab[] | null>(null)
|
||||||
|
const [url, setUrl] = useState(() => stored(STORAGE_URL))
|
||||||
|
const [hint, setHint] = useState<string | null>(null)
|
||||||
|
const [outcome, setOutcome] = useState<string | null>(null)
|
||||||
|
|
||||||
|
// Nach einem Verbindungsabbruch soll beim nächsten Öffnen erneut geladen werden.
|
||||||
|
const loadedRef = useRef(false)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Holt die Liste neu. Die Meldung des letzten Vorgangs bleibt dabei stehen –
|
||||||
|
* Öffnen und Schließen laden hinterher nach und würden sie sonst selbst löschen.
|
||||||
|
*/
|
||||||
|
const load = useCallback(async () => {
|
||||||
|
const result = await onList()
|
||||||
|
// null heißt: Fehler – der steht bereits in der Fehleranzeige der Seite.
|
||||||
|
if (!result) return
|
||||||
|
setTabs(result.tabs ?? [])
|
||||||
|
}, [onList])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (disabled) {
|
||||||
|
// Ohne Verbindung ist die Liste veraltet; sie wird beim nächsten Mal neu geholt.
|
||||||
|
loadedRef.current = false
|
||||||
|
setTabs(null)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!active || loadedRef.current) return
|
||||||
|
loadedRef.current = true
|
||||||
|
void load()
|
||||||
|
}, [active, disabled, load])
|
||||||
|
|
||||||
|
async function handleOpen(event: FormEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
const wanted = url.trim()
|
||||||
|
if (!wanted) return
|
||||||
|
if (!isAbsoluteHttpUrl(wanted)) {
|
||||||
|
setHint('Bitte eine vollständige Adresse angeben, z. B. https://example.com/seite.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setHint(null)
|
||||||
|
setOutcome(null)
|
||||||
|
remember(STORAGE_URL, wanted)
|
||||||
|
const result = await onOpen(wanted)
|
||||||
|
if (!result) return
|
||||||
|
|
||||||
|
// Die Liste ist jetzt veraltet – die App meldet Änderungen nicht von selbst.
|
||||||
|
await load()
|
||||||
|
setOutcome(
|
||||||
|
result.tabId === undefined
|
||||||
|
? `${wanted} geöffnet.`
|
||||||
|
: `${wanted} als Tab ${result.tabId} geöffnet.`,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleClose(tab: BrowserTab) {
|
||||||
|
setOutcome(null)
|
||||||
|
const result = await onClose(tab.id)
|
||||||
|
if (!result) return
|
||||||
|
await load()
|
||||||
|
setOutcome(`Tab „${describeTab(tab)}" geschlossen.`)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="card__header">
|
||||||
|
<h2>Tabs (Firefox-Plugin)</h2>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button button--ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setOutcome(null)
|
||||||
|
void load()
|
||||||
|
}}
|
||||||
|
disabled={disabled || busy}
|
||||||
|
>
|
||||||
|
{busy ? 'Sende …' : 'Tabs anzeigen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{disabled ? (
|
||||||
|
<p className="note">Erst mit der SwyxTray-App verbinden.</p>
|
||||||
|
) : tabs === null ? (
|
||||||
|
<p className="note">Noch nicht abgefragt.</p>
|
||||||
|
) : tabs.length === 0 ? (
|
||||||
|
<p className="note">Keine offenen Tabs gemeldet.</p>
|
||||||
|
) : (
|
||||||
|
<ul className="tablist">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<li key={tab.id} className={`tablist__item${tab.active ? ' tablist__item--active' : ''}`}>
|
||||||
|
<span className="tablist__id">{tab.id}</span>
|
||||||
|
<span className="tablist__info">
|
||||||
|
<span className="tablist__title">
|
||||||
|
{describeTab(tab)}
|
||||||
|
{tab.active && <span className="tablist__flag">aktiv</span>}
|
||||||
|
</span>
|
||||||
|
{tab.url && <span className="tablist__url">{tab.url}</span>}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button button--small"
|
||||||
|
onClick={() => void handleClose(tab)}
|
||||||
|
disabled={busy}
|
||||||
|
>
|
||||||
|
Schließen
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form className="row" onSubmit={handleOpen}>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field__label">Neuen Tab öffnen</span>
|
||||||
|
<input
|
||||||
|
className="field__input"
|
||||||
|
type="url"
|
||||||
|
value={url}
|
||||||
|
disabled={disabled}
|
||||||
|
spellCheck={false}
|
||||||
|
autoComplete="off"
|
||||||
|
placeholder={disabled ? 'Erst verbinden' : 'https://crm.example.local/kunden/4711'}
|
||||||
|
onChange={(e) => setUrl(e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="row__actions">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="button button--primary"
|
||||||
|
disabled={disabled || busy || !url.trim()}
|
||||||
|
>
|
||||||
|
{busy ? 'Sende …' : 'Tab öffnen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p className="note">
|
||||||
|
Die Tabs gehören zum Firefox auf dem Rechner der SwyxTray-App. Ohne verbundenes Plugin
|
||||||
|
beantwortet die App die drei Kommandos nach etwa fünf Sekunden mit einem Fehler.
|
||||||
|
</p>
|
||||||
|
{hint && <p className="note note--error">{hint}</p>}
|
||||||
|
{outcome && <p className="note note--success">{outcome}</p>}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import { describeCall, type CallEvent, type CallEventKind } from '../swyx/protocol'
|
||||||
|
|
||||||
|
const EVENT_LABELS: Record<CallEventKind, string> = {
|
||||||
|
incoming: 'klingelt',
|
||||||
|
outgoing: 'wählt',
|
||||||
|
connected: 'verbunden',
|
||||||
|
ended: 'beendet',
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
calls: CallEvent[]
|
||||||
|
busy: boolean
|
||||||
|
onAnswer: (line: number) => void
|
||||||
|
onHangup: (line: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Belegte Leitungen mit Aktionen. */
|
||||||
|
export function ActiveCallList({ calls, busy, onAnswer, onHangup }: Props) {
|
||||||
|
if (calls.length === 0) {
|
||||||
|
return <p className="note">Zurzeit keine belegte Leitung.</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul className="calls">
|
||||||
|
{calls.map((call) => (
|
||||||
|
<li key={call.line} className={`calls__item calls__item--${call.event}`}>
|
||||||
|
<span className="calls__line" title={`Leitung ${call.line}`}>
|
||||||
|
L{call.line}
|
||||||
|
</span>
|
||||||
|
<div className="calls__info">
|
||||||
|
<span className="calls__number">{describeCall(call)}</span>
|
||||||
|
{/* Klartext der App bevorzugen – er ist genauer als unsere vier Zustände. */}
|
||||||
|
<span className="calls__state">{call.stateText ?? EVENT_LABELS[call.event]}</span>
|
||||||
|
</div>
|
||||||
|
<div className="calls__actions">
|
||||||
|
{call.event === 'incoming' && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button button--accept button--small"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => onAnswer(call.line)}
|
||||||
|
>
|
||||||
|
Annehmen
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button button--reject button--small"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => onHangup(call.line)}
|
||||||
|
>
|
||||||
|
Auflegen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Verlauf aller empfangenen Anruf-Ereignisse. */
|
||||||
|
export function CallHistory({ events }: { events: CallEvent[] }) {
|
||||||
|
if (events.length === 0) {
|
||||||
|
return <p className="note">Noch keine Anruf-Ereignisse empfangen.</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul className="history">
|
||||||
|
{events.map((event, index) => (
|
||||||
|
<li key={`${event.line}-${event.event}-${index}`} className="history__item">
|
||||||
|
<span className="history__line">L{event.line}</span>
|
||||||
|
<span className={`history__badge history__badge--${event.event}`}>
|
||||||
|
{EVENT_LABELS[event.event]}
|
||||||
|
</span>
|
||||||
|
<span className="history__number">{describeCall(event)}</span>
|
||||||
|
{event.direction && (
|
||||||
|
<span className="history__meta">
|
||||||
|
{event.direction === 'incoming' ? 'eingehend' : 'ausgehend'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { useState, type FormEvent } from 'react'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
disabled: boolean
|
||||||
|
busy: boolean
|
||||||
|
onDial: (number: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Eingabe für Click-to-Dial (Kommando `call`). */
|
||||||
|
export default function DialPanel({ disabled, busy, onDial }: Props) {
|
||||||
|
const [number, setNumber] = useState('')
|
||||||
|
|
||||||
|
function handleSubmit(event: FormEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
const target = number.trim()
|
||||||
|
if (!target) return
|
||||||
|
onDial(target)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className="row" onSubmit={handleSubmit}>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field__label">Rufnummer</span>
|
||||||
|
<input
|
||||||
|
className="field__input"
|
||||||
|
type="tel"
|
||||||
|
value={number}
|
||||||
|
disabled={disabled}
|
||||||
|
spellCheck={false}
|
||||||
|
autoComplete="tel"
|
||||||
|
placeholder={disabled ? 'Erst verbinden' : '+49 30 1234567'}
|
||||||
|
onChange={(e) => setNumber(e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="row__actions">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="button button--primary"
|
||||||
|
disabled={disabled || busy || !number.trim()}
|
||||||
|
>
|
||||||
|
{busy ? 'Wähle …' : 'Anrufen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
import { useState, type FormEvent } from 'react'
|
||||||
|
import type { ResultMessage } from '../swyx/protocol'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
disabled: boolean
|
||||||
|
busy: boolean
|
||||||
|
onFocus: (title: string, url?: string) => Promise<ResultMessage | null>
|
||||||
|
}
|
||||||
|
|
||||||
|
const STORAGE_TITLE = 'swyxweb.focus.title'
|
||||||
|
const STORAGE_URL = 'swyxweb.focus.url'
|
||||||
|
|
||||||
|
/** Merkt sich die Eingaben über einen Neuladevorgang hinweg. */
|
||||||
|
function stored(key: string): string {
|
||||||
|
try {
|
||||||
|
return localStorage.getItem(key) ?? ''
|
||||||
|
} catch {
|
||||||
|
// Privater Modus o. Ä. – dann eben ohne Gedächtnis.
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function remember(key: string, value: string): void {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(key, value)
|
||||||
|
} catch {
|
||||||
|
// absichtlich still
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Eingabe für das Kommando `focus`: Fenster mit dem Titel nach vorn holen,
|
||||||
|
* ersatzweise die URL im Standardbrowser öffnen.
|
||||||
|
*/
|
||||||
|
export default function FocusPanel({ disabled, busy, onFocus }: Props) {
|
||||||
|
const [title, setTitle] = useState(() => stored(STORAGE_TITLE))
|
||||||
|
const [url, setUrl] = useState(() => stored(STORAGE_URL))
|
||||||
|
const [outcome, setOutcome] = useState<string | null>(null)
|
||||||
|
|
||||||
|
async function handleSubmit(event: FormEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
const wantedTitle = title.trim()
|
||||||
|
const wantedUrl = url.trim()
|
||||||
|
if (!wantedTitle) return
|
||||||
|
|
||||||
|
remember(STORAGE_TITLE, wantedTitle)
|
||||||
|
remember(STORAGE_URL, wantedUrl)
|
||||||
|
setOutcome(null)
|
||||||
|
|
||||||
|
const result = await onFocus(wantedTitle, wantedUrl || undefined)
|
||||||
|
// null heißt: Fehler – der steht bereits in der Fehleranzeige der Seite.
|
||||||
|
if (!result) return
|
||||||
|
|
||||||
|
setOutcome(
|
||||||
|
result.focused
|
||||||
|
? `Fenster „${wantedTitle}" in den Vordergrund geholt.`
|
||||||
|
: wantedUrl
|
||||||
|
? `Kein Fenster gefunden – Browser mit ${wantedUrl} geöffnet.`
|
||||||
|
: 'Kein Fenster gefunden.',
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="row">
|
||||||
|
<label className="field">
|
||||||
|
<span className="field__label">Fenstertitel</span>
|
||||||
|
<input
|
||||||
|
className="field__input"
|
||||||
|
type="text"
|
||||||
|
value={title}
|
||||||
|
disabled={disabled}
|
||||||
|
spellCheck={false}
|
||||||
|
autoComplete="off"
|
||||||
|
placeholder={disabled ? 'Erst verbinden' : 'Kundenakte Muster GmbH'}
|
||||||
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="row">
|
||||||
|
<label className="field">
|
||||||
|
<span className="field__label">URL (falls kein Fenster gefunden wird)</span>
|
||||||
|
<input
|
||||||
|
className="field__input"
|
||||||
|
type="url"
|
||||||
|
value={url}
|
||||||
|
disabled={disabled}
|
||||||
|
spellCheck={false}
|
||||||
|
autoComplete="off"
|
||||||
|
placeholder="https://crm.example.local/kunden/4711"
|
||||||
|
onChange={(e) => setUrl(e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="row__actions">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="button button--primary"
|
||||||
|
disabled={disabled || busy || !title.trim()}
|
||||||
|
>
|
||||||
|
{busy ? 'Sende …' : 'Fenster holen'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="note">
|
||||||
|
Ein Teil des Titels genügt, die Schreibweise ist egal. Gibt es kein passendes Fenster,
|
||||||
|
startet die App den Standardbrowser mit der URL – ohne URL meldet sie einen Fehler.
|
||||||
|
</p>
|
||||||
|
{outcome && <p className="note note--success">{outcome}</p>}
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { type CallEvent } from '../swyx/protocol'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
call: CallEvent
|
||||||
|
busy: boolean
|
||||||
|
onAnswer: (line: number) => void
|
||||||
|
onHangup: (line: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Meldung für einen eingehenden, noch klingelnden Anruf. */
|
||||||
|
export default function IncomingCallCard({ call, busy, onAnswer, onHangup }: Props) {
|
||||||
|
// Name und Nummer getrennt anzeigen, sonst die fertige Anzeigeform der App.
|
||||||
|
const title = call.peerName ?? call.peerNumber ?? call.peer ?? `Leitung ${call.line}`
|
||||||
|
const subtitle = call.peerName ? call.peerNumber : undefined
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="card card--ringing" role="alert">
|
||||||
|
<div className="ringing">
|
||||||
|
<span className="ringing__icon" aria-hidden="true">
|
||||||
|
☎
|
||||||
|
</span>
|
||||||
|
<div className="ringing__text">
|
||||||
|
<p className="ringing__label">Eingehender Anruf · Leitung {call.line}</p>
|
||||||
|
<p className="ringing__number">{title}</p>
|
||||||
|
{subtitle && <p className="ringing__meta">{subtitle}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="ringing__actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button button--accept"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => onAnswer(call.line)}
|
||||||
|
>
|
||||||
|
Annehmen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button button--reject"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => onHangup(call.line)}
|
||||||
|
>
|
||||||
|
Ablehnen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
import type { LogEntry } from '../hooks/useSwyxTray'
|
||||||
|
|
||||||
|
const PREFIX: Record<LogEntry['direction'], string> = {
|
||||||
|
in: '←',
|
||||||
|
out: '→',
|
||||||
|
system: '•',
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeFormat = new Intl.DateTimeFormat('de-DE', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit',
|
||||||
|
})
|
||||||
|
|
||||||
|
export default function MessageLog({ entries }: { entries: LogEntry[] }) {
|
||||||
|
const endRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
endRef.current?.scrollIntoView({ block: 'nearest' })
|
||||||
|
}, [entries])
|
||||||
|
|
||||||
|
if (entries.length === 0) {
|
||||||
|
return <p className="log log--empty">Noch keine Nachrichten.</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="log" role="log" aria-live="polite">
|
||||||
|
{entries.map((entry) => (
|
||||||
|
<div key={entry.id} className={`log__entry log__entry--${entry.direction}`}>
|
||||||
|
<span className="log__time">{timeFormat.format(entry.at)}</span>
|
||||||
|
<span className="log__arrow">{PREFIX[entry.direction]}</span>
|
||||||
|
<span className="log__text">{entry.text}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div ref={endRef} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import type { ConnectionStatus } from '../swyx/SwyxTrayClient'
|
||||||
|
|
||||||
|
const LABELS: Record<ConnectionStatus, string> = {
|
||||||
|
idle: 'Nicht verbunden',
|
||||||
|
connecting: 'Verbinde …',
|
||||||
|
open: 'Verbunden',
|
||||||
|
closing: 'Trenne …',
|
||||||
|
closed: 'Getrennt',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function StatusBadge({ status }: { status: ConnectionStatus }) {
|
||||||
|
return (
|
||||||
|
<span className={`badge badge--${status}`}>
|
||||||
|
<span className="badge__dot" aria-hidden="true" />
|
||||||
|
{LABELS[status]}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
export interface Tab<Id extends string> {
|
||||||
|
id: Id
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props<Id extends string> {
|
||||||
|
tabs: Tab<Id>[]
|
||||||
|
active: Id
|
||||||
|
onChange: (id: Id) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Kennung des Knopfes zu einem Tab – die Panels verweisen mit aria-labelledby darauf. */
|
||||||
|
export function tabId(id: string): string {
|
||||||
|
return `tab-${id}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Kennung des Panels zu einem Tab. */
|
||||||
|
export function panelId(id: string): string {
|
||||||
|
return `panel-${id}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Tab-Leiste. Native Knöpfe, damit die Tastaturbedienung von selbst funktioniert. */
|
||||||
|
export default function Tabs<Id extends string>({ tabs, active, onChange }: Props<Id>) {
|
||||||
|
return (
|
||||||
|
<nav className="tabs" role="tablist" aria-label="Bereiche">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
id={tabId(tab.id)}
|
||||||
|
type="button"
|
||||||
|
role="tab"
|
||||||
|
className={`tabs__button${tab.id === active ? ' tabs__button--active' : ''}`}
|
||||||
|
aria-selected={tab.id === active}
|
||||||
|
aria-controls={panelId(tab.id)}
|
||||||
|
onClick={() => onChange(tab.id)}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
/** Fallback-Adresse des WebSocket-Servers, falls weder .env noch /api/config etwas liefern. */
|
||||||
|
export const DEFAULT_WS_HOST = '192.168.180.135'
|
||||||
|
export const DEFAULT_WS_PORT = 17654
|
||||||
|
export const DEFAULT_WS_PATH = '/ws'
|
||||||
|
|
||||||
|
export const DEFAULT_WS_URL =
|
||||||
|
import.meta.env.VITE_WS_URL ?? `ws://${DEFAULT_WS_HOST}:${DEFAULT_WS_PORT}${DEFAULT_WS_PATH}`
|
||||||
|
|
||||||
|
export interface ClientConfig {
|
||||||
|
websocketUrl: string
|
||||||
|
host: string
|
||||||
|
port: number
|
||||||
|
path: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Holt die WebSocket-Adresse vom Backend. Schlägt der Aufruf fehl (Backend nicht
|
||||||
|
* erreichbar, rein statisches Hosting), bleibt es beim Default aus der .env.
|
||||||
|
*/
|
||||||
|
export async function fetchClientConfig(signal?: AbortSignal): Promise<string> {
|
||||||
|
const response = await fetch('/api/config', { signal })
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`/api/config antwortete mit HTTP ${response.status}`)
|
||||||
|
}
|
||||||
|
const config = (await response.json()) as Partial<ClientConfig>
|
||||||
|
if (!config.websocketUrl) {
|
||||||
|
throw new Error('/api/config lieferte keine websocketUrl')
|
||||||
|
}
|
||||||
|
return config.websocketUrl
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||||
|
import { describeCall, type CallEvent } from '../swyx/protocol'
|
||||||
|
|
||||||
|
type Permission = NotificationPermission | 'unsupported'
|
||||||
|
|
||||||
|
function currentPermission(): Permission {
|
||||||
|
return typeof Notification === 'undefined' ? 'unsupported' : Notification.permission
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zeigt bei einem eingehenden Anruf eine System-Benachrichtigung, damit der
|
||||||
|
* Anruf auch bemerkt wird, wenn der Tab im Hintergrund liegt.
|
||||||
|
*/
|
||||||
|
export function useCallNotifications(ringingCall: CallEvent | null) {
|
||||||
|
const [permission, setPermission] = useState<Permission>(currentPermission)
|
||||||
|
// Pro klingelnder Leitung nur einmal benachrichtigen.
|
||||||
|
const notifiedRef = useRef<number | null>(null)
|
||||||
|
|
||||||
|
const requestPermission = useCallback(() => {
|
||||||
|
if (typeof Notification === 'undefined') return
|
||||||
|
void Notification.requestPermission().then(setPermission)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!ringingCall) {
|
||||||
|
notifiedRef.current = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (permission !== 'granted' || notifiedRef.current === ringingCall.line) return
|
||||||
|
|
||||||
|
notifiedRef.current = ringingCall.line
|
||||||
|
const notification = new Notification(`Eingehender Anruf · Leitung ${ringingCall.line}`, {
|
||||||
|
body: describeCall(ringingCall),
|
||||||
|
tag: `swyx-line-${ringingCall.line}`,
|
||||||
|
})
|
||||||
|
notification.onclick = () => {
|
||||||
|
window.focus()
|
||||||
|
notification.close()
|
||||||
|
}
|
||||||
|
return () => notification.close()
|
||||||
|
}, [ringingCall, permission])
|
||||||
|
|
||||||
|
return { permission, requestPermission }
|
||||||
|
}
|
||||||
@@ -0,0 +1,174 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||||
|
import { SwyxTrayClient, type ConnectionStatus, type RawMessage } from '../swyx/SwyxTrayClient'
|
||||||
|
import { mergeSnapshot, type CallEvent, type SnapshotMessage } from '../swyx/protocol'
|
||||||
|
|
||||||
|
export interface LogEntry extends RawMessage {
|
||||||
|
id: number
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Zustand der App selbst, aus dem Snapshot – unabhängig von den Leitungen. */
|
||||||
|
export interface TrayState {
|
||||||
|
connected?: boolean
|
||||||
|
serverUp?: boolean
|
||||||
|
overall?: string
|
||||||
|
statusText?: string
|
||||||
|
user?: string
|
||||||
|
server?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const MAX_LOG_ENTRIES = 300
|
||||||
|
const MAX_HISTORY = 50
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bindet den SwyxTrayClient an React: Verbindungsstatus, Zustand der Leitungen,
|
||||||
|
* Ereignisverlauf und die Telefonie-Kommandos.
|
||||||
|
*/
|
||||||
|
export function useSwyxTray() {
|
||||||
|
const [status, setStatus] = useState<ConnectionStatus>('idle')
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
const [log, setLog] = useState<LogEntry[]>([])
|
||||||
|
const [history, setHistory] = useState<CallEvent[]>([])
|
||||||
|
// Belegte Leitungen, nach Leitungsnummer; jeder Snapshot schreibt sie neu.
|
||||||
|
const [lines, setLines] = useState<Record<number, CallEvent>>({})
|
||||||
|
const [tray, setTray] = useState<TrayState>({})
|
||||||
|
const [busy, setBusy] = useState(false)
|
||||||
|
|
||||||
|
const clientRef = useRef<SwyxTrayClient | null>(null)
|
||||||
|
const logIdRef = useRef(0)
|
||||||
|
// Stand der Leitungen für den Snapshot-Vergleich.
|
||||||
|
const linesRef = useRef<Record<number, CallEvent>>({})
|
||||||
|
|
||||||
|
if (clientRef.current === null) {
|
||||||
|
clientRef.current = new SwyxTrayClient()
|
||||||
|
}
|
||||||
|
const client = clientRef.current
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const unsubscribe = [
|
||||||
|
client.on('status', (next) => {
|
||||||
|
setStatus(next)
|
||||||
|
if (next === 'open') setError(null)
|
||||||
|
// Der Leitungszustand der alten Verbindung ist nach dem Abbruch wertlos;
|
||||||
|
// die App schickt beim Verbinden ohnehin einen Snapshot.
|
||||||
|
if (next === 'closed') {
|
||||||
|
linesRef.current = {}
|
||||||
|
setLines({})
|
||||||
|
setTray({})
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
client.on('error', (message) => setError(message)),
|
||||||
|
client.on('raw', (message) => {
|
||||||
|
setLog((entries) => {
|
||||||
|
const next = [...entries, { ...message, id: logIdRef.current++ }]
|
||||||
|
return next.length > MAX_LOG_ENTRIES ? next.slice(next.length - MAX_LOG_ENTRIES) : next
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
client.on('snapshot', (snapshot: SnapshotMessage) => {
|
||||||
|
setTray({
|
||||||
|
connected: snapshot.connected,
|
||||||
|
serverUp: snapshot.serverUp,
|
||||||
|
overall: snapshot.overall,
|
||||||
|
statusText: snapshot.statusText,
|
||||||
|
user: snapshot.user,
|
||||||
|
server: snapshot.server,
|
||||||
|
})
|
||||||
|
// Der Vollzustand ersetzt den bisherigen Stand; die Anruf-Ereignisse für
|
||||||
|
// Verlauf und Benachrichtigung entstehen aus dem Vergleich mit ihm.
|
||||||
|
// Der Vergleich läuft über die Ref, nicht im State-Updater – der wird
|
||||||
|
// im StrictMode doppelt ausgeführt und würde den Verlauf verdoppeln.
|
||||||
|
const { lines: next, events } = mergeSnapshot(linesRef.current, snapshot.lines)
|
||||||
|
linesRef.current = next
|
||||||
|
setLines(next)
|
||||||
|
if (events.length > 0) {
|
||||||
|
setHistory((entries) => [...[...events].reverse(), ...entries].slice(0, MAX_HISTORY))
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
return () => {
|
||||||
|
unsubscribe.forEach((off) => off())
|
||||||
|
}
|
||||||
|
}, [client])
|
||||||
|
|
||||||
|
// Beim Verlassen der Seite Verbindung und Timer aufräumen.
|
||||||
|
useEffect(() => () => client.dispose(), [client])
|
||||||
|
|
||||||
|
const connect = useCallback((url: string) => client.connect(url), [client])
|
||||||
|
const disconnect = useCallback(() => client.disconnect(), [client])
|
||||||
|
|
||||||
|
/** Führt ein Kommando aus und übernimmt Fehleranzeige und Busy-Zustand. */
|
||||||
|
const run = useCallback(async <T,>(action: () => Promise<T>): Promise<T | null> => {
|
||||||
|
setBusy(true)
|
||||||
|
setError(null)
|
||||||
|
try {
|
||||||
|
return await action()
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : String(e))
|
||||||
|
return null
|
||||||
|
} finally {
|
||||||
|
setBusy(false)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const dial = useCallback((number: string) => run(() => client.dial(number)), [client, run])
|
||||||
|
const answer = useCallback((line: number) => run(() => client.answer(line)), [client, run])
|
||||||
|
const hangup = useCallback((line: number) => run(() => client.hangup(line)), [client, run])
|
||||||
|
const refresh = useCallback(() => run(() => client.requestStatus()), [client, run])
|
||||||
|
const focusWindow = useCallback(
|
||||||
|
(title: string, url?: string) => run(() => client.focusWindow(title, url)),
|
||||||
|
[client, run],
|
||||||
|
)
|
||||||
|
|
||||||
|
// Tabs des Firefox-Plugins; die App reicht diese drei Kommandos nur durch.
|
||||||
|
const listTabs = useCallback(() => run(() => client.listTabs()), [client, run])
|
||||||
|
const openTab = useCallback((url: string) => run(() => client.openTab(url)), [client, run])
|
||||||
|
const closeTab = useCallback((tabId: number) => run(() => client.closeTab(tabId)), [client, run])
|
||||||
|
|
||||||
|
const sendRaw = useCallback(
|
||||||
|
(text: string) => {
|
||||||
|
try {
|
||||||
|
client.sendRaw(text)
|
||||||
|
return true
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : String(e))
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[client],
|
||||||
|
)
|
||||||
|
|
||||||
|
const clearLog = useCallback(() => setLog([]), [])
|
||||||
|
|
||||||
|
const calls = useMemo(
|
||||||
|
() => Object.values(lines).sort((a, b) => a.line - b.line),
|
||||||
|
[lines],
|
||||||
|
)
|
||||||
|
|
||||||
|
/** Erste klingelnde Leitung eines eingehenden Anrufs. */
|
||||||
|
const ringingCall = useMemo(
|
||||||
|
() => calls.find((call) => call.event === 'incoming') ?? null,
|
||||||
|
[calls],
|
||||||
|
)
|
||||||
|
|
||||||
|
return {
|
||||||
|
status,
|
||||||
|
error,
|
||||||
|
log,
|
||||||
|
history,
|
||||||
|
calls,
|
||||||
|
ringingCall,
|
||||||
|
tray,
|
||||||
|
busy,
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
dial,
|
||||||
|
answer,
|
||||||
|
hangup,
|
||||||
|
refresh,
|
||||||
|
focusWindow,
|
||||||
|
listTabs,
|
||||||
|
openTab,
|
||||||
|
closeTab,
|
||||||
|
sendRaw,
|
||||||
|
clearLog,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,597 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #0f1116;
|
||||||
|
--surface: #171a21;
|
||||||
|
--surface-2: #1f2530;
|
||||||
|
--border: #2b3341;
|
||||||
|
--text: #e6e9ef;
|
||||||
|
--text-muted: #98a2b3;
|
||||||
|
--accent: #4f8cff;
|
||||||
|
--ok: #35c98a;
|
||||||
|
--warn: #e0b341;
|
||||||
|
--err: #f2585b;
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--bg: #f5f7fa;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--surface-2: #eef1f6;
|
||||||
|
--border: #d8dee9;
|
||||||
|
--text: #1b2230;
|
||||||
|
--text-muted: #5c6779;
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 20px 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 26px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__subtitle {
|
||||||
|
margin: 2px 0 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__footer {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 18px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
flex: 1 1 260px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__label {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 9px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface-2);
|
||||||
|
color: var(--text);
|
||||||
|
font: inherit;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__input:focus {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field__input:disabled {
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
padding: 9px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface-2);
|
||||||
|
color: var(--text);
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover:not(:disabled) {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:disabled {
|
||||||
|
opacity: 0.45;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--primary {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--ghost {
|
||||||
|
background: transparent;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.note--error {
|
||||||
|
color: var(--err);
|
||||||
|
}
|
||||||
|
|
||||||
|
.note--success {
|
||||||
|
color: var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs__button {
|
||||||
|
padding: 9px 16px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
/* Die aktive Kante überdeckt die Linie der Leiste. */
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs__button:hover:not(.tabs__button--active) {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs__button--active {
|
||||||
|
background: var(--surface);
|
||||||
|
border-color: var(--border);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
[role='tabpanel'] {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Muss nach der Regel oben stehen: display:flex schlägt sonst das hidden-Attribut. */
|
||||||
|
[role='tabpanel'][hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge__dot {
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--open .badge__dot {
|
||||||
|
background: var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--connecting .badge__dot,
|
||||||
|
.badge--closing .badge__dot {
|
||||||
|
background: var(--warn);
|
||||||
|
animation: pulse 1.1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--error .badge__dot,
|
||||||
|
.badge--closed .badge__dot {
|
||||||
|
background: var(--err);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
50% {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.badge__dot {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Eingehender Anruf --- */
|
||||||
|
|
||||||
|
.card--ringing {
|
||||||
|
border-color: var(--ok);
|
||||||
|
box-shadow: 0 0 0 1px var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringing {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringing__icon {
|
||||||
|
font-size: 30px;
|
||||||
|
animation: shake 1s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringing__text {
|
||||||
|
flex: 1 1 200px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringing__label {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringing__number {
|
||||||
|
margin: 2px 0 0;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringing__meta {
|
||||||
|
margin: 2px 0 0;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ringing__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
25% {
|
||||||
|
transform: rotate(-14deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: rotate(14deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.ringing__icon {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--accept {
|
||||||
|
background: var(--ok);
|
||||||
|
border-color: var(--ok);
|
||||||
|
color: #06281c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--reject {
|
||||||
|
background: var(--err);
|
||||||
|
border-color: var(--err);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--small {
|
||||||
|
padding: 5px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Anruflisten --- */
|
||||||
|
|
||||||
|
.calls,
|
||||||
|
.history {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calls__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calls__item--incoming {
|
||||||
|
border-color: var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calls__line,
|
||||||
|
.history__line {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--border);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calls__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calls__number {
|
||||||
|
font-weight: 600;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calls__state {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calls__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__time {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
min-width: 68px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__badge {
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__badge--incoming {
|
||||||
|
border-color: var(--ok);
|
||||||
|
color: var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__badge--connected,
|
||||||
|
.history__badge--outgoing {
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__badge--ended {
|
||||||
|
border-color: var(--err);
|
||||||
|
color: var(--err);
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__number {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__meta {
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Tabs des Firefox-Plugins --- */
|
||||||
|
|
||||||
|
.tablist {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist__item--active {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist__id {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--border);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
/* Lange Titel dürfen die Zeile nicht sprengen. */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist__flag {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 1px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablist__url {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log {
|
||||||
|
height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface-2);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log--empty {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log__entry {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log__time {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log__text {
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log__entry--in .log__arrow {
|
||||||
|
color: var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log__entry--out .log__arrow {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log__entry--system {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import App from './App.tsx'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
const container = document.getElementById('root')
|
||||||
|
if (!container) {
|
||||||
|
throw new Error('Root-Element #root nicht gefunden')
|
||||||
|
}
|
||||||
|
|
||||||
|
createRoot(container).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
@@ -0,0 +1,248 @@
|
|||||||
|
import { useEffect, useRef, useState, type FormEvent, type ReactNode } from 'react'
|
||||||
|
import { DEFAULT_WS_URL, fetchClientConfig } from '../config'
|
||||||
|
import { useSwyxTray } from '../hooks/useSwyxTray'
|
||||||
|
import { useCallNotifications } from '../hooks/useCallNotifications'
|
||||||
|
import StatusBadge from '../components/StatusBadge'
|
||||||
|
import MessageLog from '../components/MessageLog'
|
||||||
|
import IncomingCallCard from '../components/IncomingCallCard'
|
||||||
|
import DialPanel from '../components/DialPanel'
|
||||||
|
import BrowserTabsPanel from '../components/BrowserTabsPanel'
|
||||||
|
import Tabs, { panelId, tabId, type Tab } from '../components/Tabs'
|
||||||
|
import { ActiveCallList, CallHistory } from '../components/CallList'
|
||||||
|
|
||||||
|
type TabName = 'calls' | 'browsertabs' | 'connection'
|
||||||
|
|
||||||
|
const TABS: Tab<TabName>[] = [
|
||||||
|
{ id: 'calls', label: 'Anrufe' },
|
||||||
|
{ id: 'browsertabs', label: 'Tabs' },
|
||||||
|
{ id: 'connection', label: 'Verbindung' },
|
||||||
|
]
|
||||||
|
|
||||||
|
/** Panel eines Tabs; ausgeblendet statt ausgebaut, damit Eingaben erhalten bleiben. */
|
||||||
|
function TabPanel({ id, active, children }: { id: TabName; active: boolean; children: ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div id={panelId(id)} role="tabpanel" aria-labelledby={tabId(id)} hidden={!active}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const [url, setUrl] = useState(DEFAULT_WS_URL)
|
||||||
|
const [configNote, setConfigNote] = useState<string | null>(null)
|
||||||
|
const [tab, setTab] = useState<TabName>('calls')
|
||||||
|
const [draft, setDraft] = useState('')
|
||||||
|
|
||||||
|
const tray = useSwyxTray()
|
||||||
|
const { status, error, log, history, calls, ringingCall, busy, tray: appState } = tray
|
||||||
|
const isConnected = status === 'open'
|
||||||
|
const isBusyConnection = status === 'connecting' || status === 'open' || status === 'closing'
|
||||||
|
|
||||||
|
const { permission, requestPermission } = useCallNotifications(ringingCall)
|
||||||
|
|
||||||
|
// Der Benutzer soll seine eingetippte Adresse nicht durch die Backend-Antwort verlieren.
|
||||||
|
const urlTouched = useRef(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const controller = new AbortController()
|
||||||
|
fetchClientConfig(controller.signal)
|
||||||
|
.then((backendUrl) => {
|
||||||
|
if (controller.signal.aborted) return
|
||||||
|
setConfigNote(`Adresse vom Backend übernommen: ${backendUrl}`)
|
||||||
|
if (!urlTouched.current) setUrl(backendUrl)
|
||||||
|
})
|
||||||
|
.catch((e: unknown) => {
|
||||||
|
if (controller.signal.aborted) return
|
||||||
|
const message = e instanceof Error ? e.message : String(e)
|
||||||
|
setConfigNote(`Backend-Konfiguration nicht abrufbar (${message}) – Standardadresse wird verwendet.`)
|
||||||
|
})
|
||||||
|
return () => controller.abort()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
function handleConnect(event: FormEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
const target = url.trim()
|
||||||
|
if (target) tray.connect(target)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSendRaw(event: FormEvent) {
|
||||||
|
event.preventDefault()
|
||||||
|
const message = draft.trim()
|
||||||
|
if (message && tray.sendRaw(message)) setDraft('')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page">
|
||||||
|
<header className="page__header">
|
||||||
|
<div>
|
||||||
|
<h1>SwyxWeb</h1>
|
||||||
|
<p className="page__subtitle">Telefonie über die SwyxTray-App</p>
|
||||||
|
</div>
|
||||||
|
<StatusBadge status={status} />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main className="page__main">
|
||||||
|
{/* Steht bewusst über den Tabs: Ein klingelnder Anruf darf nicht davon
|
||||||
|
abhängen, welcher Bereich gerade offen ist. */}
|
||||||
|
{ringingCall && (
|
||||||
|
<IncomingCallCard
|
||||||
|
call={ringingCall}
|
||||||
|
busy={busy}
|
||||||
|
onAnswer={(line) => void tray.answer(line)}
|
||||||
|
onHangup={(line) => void tray.hangup(line)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Tabs tabs={TABS} active={tab} onChange={setTab} />
|
||||||
|
|
||||||
|
<TabPanel id="calls" active={tab === 'calls'}>
|
||||||
|
<section className="card">
|
||||||
|
<h2>Anrufen</h2>
|
||||||
|
<DialPanel disabled={!isConnected} busy={busy} onDial={(number) => void tray.dial(number)} />
|
||||||
|
<p className="note">
|
||||||
|
Die Quittung bestätigt nur die Annahme des Wählauftrags – der Verlauf erscheint
|
||||||
|
anschließend unter „Leitungen".
|
||||||
|
</p>
|
||||||
|
{error && <p className="note note--error">{error}</p>}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="card">
|
||||||
|
<h2>Leitungen</h2>
|
||||||
|
<ActiveCallList
|
||||||
|
calls={calls}
|
||||||
|
busy={busy}
|
||||||
|
onAnswer={(line) => void tray.answer(line)}
|
||||||
|
onHangup={(line) => void tray.hangup(line)}
|
||||||
|
/>
|
||||||
|
{isConnected && (appState.statusText || appState.user) && (
|
||||||
|
<p className={`note${appState.connected === false ? ' note--error' : ''}`}>
|
||||||
|
SwyxIt!: {appState.statusText ?? appState.overall ?? 'unbekannt'}
|
||||||
|
{appState.user && ` · ${appState.user}`}
|
||||||
|
{appState.connected === false && ' · keine Verbindung zu SwyxIt!'}
|
||||||
|
{appState.serverUp === false && ' · SwyxServer nicht erreichbar'}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="card">
|
||||||
|
<h2>Verlauf</h2>
|
||||||
|
<CallHistory events={history} />
|
||||||
|
</section>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel id="browsertabs" active={tab === 'browsertabs'}>
|
||||||
|
<section className="card">
|
||||||
|
<BrowserTabsPanel
|
||||||
|
active={tab === 'browsertabs'}
|
||||||
|
disabled={!isConnected}
|
||||||
|
busy={busy}
|
||||||
|
// Unverpackt weitergereicht: die Rückrufe sind stabil, damit das
|
||||||
|
// Panel nicht bei jedem Rendern neu lädt.
|
||||||
|
onList={tray.listTabs}
|
||||||
|
onOpen={tray.openTab}
|
||||||
|
onClose={tray.closeTab}
|
||||||
|
/>
|
||||||
|
{error && <p className="note note--error">{error}</p>}
|
||||||
|
</section>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel id="connection" active={tab === 'connection'}>
|
||||||
|
<section className="card">
|
||||||
|
<h2>Verbindung</h2>
|
||||||
|
|
||||||
|
<form className="row" onSubmit={handleConnect}>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field__label">SwyxTray-Adresse</span>
|
||||||
|
<input
|
||||||
|
className="field__input"
|
||||||
|
type="text"
|
||||||
|
value={url}
|
||||||
|
spellCheck={false}
|
||||||
|
autoComplete="off"
|
||||||
|
placeholder="ws://192.168.180.135:17654/ws"
|
||||||
|
onChange={(e) => {
|
||||||
|
urlTouched.current = true
|
||||||
|
setUrl(e.target.value)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="row__actions">
|
||||||
|
<button type="submit" className="button button--primary" disabled={!url.trim()}>
|
||||||
|
{isConnected ? 'Neu verbinden' : 'Verbinden'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button"
|
||||||
|
onClick={tray.disconnect}
|
||||||
|
disabled={!isBusyConnection}
|
||||||
|
>
|
||||||
|
Trennen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{configNote && <p className="note">{configNote}</p>}
|
||||||
|
{error && <p className="note note--error">{error}</p>}
|
||||||
|
{permission !== 'granted' && (
|
||||||
|
<p className="note">
|
||||||
|
Für Hinweise bei eingehenden Anrufen auch außerhalb des Tabs:{' '}
|
||||||
|
<button type="button" className="button button--ghost" onClick={requestPermission}>
|
||||||
|
Benachrichtigungen erlauben
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="card">
|
||||||
|
<h2>Diagnose</h2>
|
||||||
|
<MessageLog entries={log} />
|
||||||
|
<form className="row" onSubmit={handleSendRaw}>
|
||||||
|
<label className="field">
|
||||||
|
<span className="field__label">Rohnachricht senden</span>
|
||||||
|
<input
|
||||||
|
className="field__input"
|
||||||
|
type="text"
|
||||||
|
value={draft}
|
||||||
|
disabled={!isConnected}
|
||||||
|
placeholder={'{"id":1,"cmd":"status"}'}
|
||||||
|
onChange={(e) => setDraft(e.target.value)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="row__actions">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="button button--primary"
|
||||||
|
disabled={!isConnected || !draft.trim()}
|
||||||
|
>
|
||||||
|
Senden
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button"
|
||||||
|
onClick={() => void tray.refresh()}
|
||||||
|
disabled={!isConnected || busy}
|
||||||
|
>
|
||||||
|
Status abfragen
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="button button--ghost"
|
||||||
|
onClick={tray.clearLog}
|
||||||
|
disabled={log.length === 0}
|
||||||
|
>
|
||||||
|
Log leeren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</TabPanel>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer className="page__footer">
|
||||||
|
SwyxTray · Kommandos <code>call</code> / <code>answer</code> / <code>hangup</code> /{' '}
|
||||||
|
<code>tabs</code> / <code>opentab</code> / <code>closetab</code> · Zustand über{' '}
|
||||||
|
<code>snapshot</code> · Standardziel <code>{DEFAULT_WS_URL}</code>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,356 @@
|
|||||||
|
import {
|
||||||
|
COMMANDS,
|
||||||
|
parseHello,
|
||||||
|
parseResult,
|
||||||
|
parseSnapshot,
|
||||||
|
type HelloMessage,
|
||||||
|
type ResultMessage,
|
||||||
|
type SnapshotMessage,
|
||||||
|
} from './protocol'
|
||||||
|
|
||||||
|
export type ConnectionStatus = 'idle' | 'connecting' | 'open' | 'closing' | 'closed'
|
||||||
|
|
||||||
|
export interface RawMessage {
|
||||||
|
direction: 'in' | 'out' | 'system'
|
||||||
|
text: string
|
||||||
|
at: Date
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Listeners {
|
||||||
|
status: (status: ConnectionStatus) => void
|
||||||
|
hello: (hello: HelloMessage) => void
|
||||||
|
snapshot: (snapshot: SnapshotMessage) => void
|
||||||
|
raw: (message: RawMessage) => void
|
||||||
|
error: (message: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Pending {
|
||||||
|
resolve: (value: ResultMessage) => void
|
||||||
|
reject: (reason: Error) => void
|
||||||
|
timer: ReturnType<typeof setTimeout>
|
||||||
|
}
|
||||||
|
|
||||||
|
const CLOSE_CODE_NORMAL = 1000
|
||||||
|
const DEFAULT_TIMEOUT_MS = 10000
|
||||||
|
// Die Tab-Kommandos gehen ans Firefox-Plugin weiter; die App wartet darauf
|
||||||
|
// selbst fünf Sekunden, bevor sie mit einem Fehler antwortet.
|
||||||
|
const TAB_TIMEOUT_MS = 15000
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WebSocket-Client für die SwyxTray-App. Die Verbindung wird im Browser
|
||||||
|
* aufgebaut; Quittungen werden über die numerische `id` zugeordnet,
|
||||||
|
* unaufgeforderte Anruf-Ereignisse an registrierte Hörer gemeldet.
|
||||||
|
*/
|
||||||
|
export class SwyxTrayClient {
|
||||||
|
private url: string | null = null
|
||||||
|
private socket: WebSocket | null = null
|
||||||
|
private nextId = 1
|
||||||
|
private readonly pending = new Map<number, Pending>()
|
||||||
|
private readonly listeners: { [K in keyof Listeners]: Set<Listeners[K]> } = {
|
||||||
|
status: new Set(),
|
||||||
|
hello: new Set(),
|
||||||
|
snapshot: new Set(),
|
||||||
|
raw: new Set(),
|
||||||
|
error: new Set(),
|
||||||
|
}
|
||||||
|
|
||||||
|
private reconnectTimer: ReturnType<typeof setTimeout> | null = null
|
||||||
|
private attempt = 0
|
||||||
|
// Wunsch des Benutzers: nach manuellem Trennen nicht erneut verbinden.
|
||||||
|
private desiredConnected = false
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private readonly reconnectDelayMs = 1000,
|
||||||
|
private readonly maxReconnectDelayMs = 15000,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
on<K extends keyof Listeners>(event: K, listener: Listeners[K]): () => void {
|
||||||
|
this.listeners[event].add(listener as never)
|
||||||
|
return () => {
|
||||||
|
this.listeners[event].delete(listener as never)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isConnected(): boolean {
|
||||||
|
return this.socket?.readyState === WebSocket.OPEN
|
||||||
|
}
|
||||||
|
|
||||||
|
connect(url: string): void {
|
||||||
|
this.clearReconnectTimer()
|
||||||
|
this.desiredConnected = true
|
||||||
|
this.url = url
|
||||||
|
this.closeSocket('Neuverbindung')
|
||||||
|
this.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect(): void {
|
||||||
|
this.desiredConnected = false
|
||||||
|
this.clearReconnectTimer()
|
||||||
|
this.attempt = 0
|
||||||
|
if (!this.socket) {
|
||||||
|
this.emit('status', 'closed')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.emit('status', 'closing')
|
||||||
|
this.socket.close(CLOSE_CODE_NORMAL, 'Vom Benutzer getrennt')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sendet ein Kommando und löst mit dessen Quittung auf. Die Felder des
|
||||||
|
* Kommandos liegen flach neben `id` und `cmd`.
|
||||||
|
*/
|
||||||
|
send(
|
||||||
|
cmd: string,
|
||||||
|
payload: Record<string, unknown> = {},
|
||||||
|
timeoutMs = DEFAULT_TIMEOUT_MS,
|
||||||
|
): Promise<ResultMessage> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (!this.isConnected()) {
|
||||||
|
reject(new Error('Keine Verbindung zur SwyxTray-App.'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const id = this.nextId++
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
this.pending.delete(id)
|
||||||
|
reject(new Error(`Zeitüberschreitung für Kommando '${cmd}'.`))
|
||||||
|
}, timeoutMs)
|
||||||
|
this.pending.set(id, { resolve, reject, timer })
|
||||||
|
|
||||||
|
const message = JSON.stringify({ id, cmd, ...payload })
|
||||||
|
this.socket!.send(message)
|
||||||
|
this.emit('raw', { direction: 'out', text: message, at: new Date() })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Freitext senden – nur für den Diagnosebereich der Startseite. */
|
||||||
|
sendRaw(text: string): void {
|
||||||
|
if (!this.isConnected()) {
|
||||||
|
throw new Error('Keine Verbindung zur SwyxTray-App.')
|
||||||
|
}
|
||||||
|
this.socket!.send(text)
|
||||||
|
this.emit('raw', { direction: 'out', text, at: new Date() })
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Startet einen Wählvorgang. Die Quittung bestätigt nur die Annahme des
|
||||||
|
* Auftrags – der Verlauf kommt anschließend als Push-Nachricht.
|
||||||
|
*/
|
||||||
|
dial(number: string): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.call, { number })
|
||||||
|
}
|
||||||
|
|
||||||
|
answer(line: number): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.answer, { line })
|
||||||
|
}
|
||||||
|
|
||||||
|
hangup(line: number): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.hangup, { line })
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Holt auf dem Rechner der App das Fenster nach vorn, dessen Titel `title`
|
||||||
|
* enthält. Ohne Treffer öffnet die App `url` im Standardbrowser; fehlt auch
|
||||||
|
* die, antwortet sie mit einem Fehler.
|
||||||
|
*/
|
||||||
|
focusWindow(title: string, url?: string): Promise<ResultMessage> {
|
||||||
|
const payload: Record<string, unknown> = { title }
|
||||||
|
// Leeres Feld gar nicht erst mitschicken – die App entscheidet an seinem
|
||||||
|
// Vorhandensein, ob sie ersatzweise den Browser startet.
|
||||||
|
if (url) payload.url = url
|
||||||
|
return this.send(COMMANDS.focus, payload)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fragt die offenen Tabs des Firefox-Plugins ab. Die App reicht das Kommando
|
||||||
|
* nur durch; ohne verbundenes Plugin antwortet sie nach ihrem Zeitfenster von
|
||||||
|
* fünf Sekunden mit einem Fehler.
|
||||||
|
*/
|
||||||
|
listTabs(): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.tabs, {}, TAB_TIMEOUT_MS)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Öffnet `url` als neuen Tab; die Quittung trägt dessen Kennung in `tabId`. */
|
||||||
|
openTab(url: string): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.openTab, { url }, TAB_TIMEOUT_MS)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Schließt den Tab mit dieser Kennung – sie stammt aus einer `tabs`-Antwort. */
|
||||||
|
closeTab(tabId: number): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.closeTab, { tabId }, TAB_TIMEOUT_MS)
|
||||||
|
}
|
||||||
|
|
||||||
|
ping(): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.ping)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Fordert einen frischen Snapshot an. */
|
||||||
|
requestStatus(): Promise<ResultMessage> {
|
||||||
|
return this.send(COMMANDS.status)
|
||||||
|
}
|
||||||
|
|
||||||
|
private open(): void {
|
||||||
|
const url = this.url
|
||||||
|
if (!url) return
|
||||||
|
|
||||||
|
this.emit('status', 'connecting')
|
||||||
|
this.emit('raw', { direction: 'system', text: `Verbinde mit ${url} …`, at: new Date() })
|
||||||
|
|
||||||
|
let socket: WebSocket
|
||||||
|
try {
|
||||||
|
socket = new WebSocket(url)
|
||||||
|
} catch (e) {
|
||||||
|
const message = e instanceof Error ? e.message : String(e)
|
||||||
|
this.emit('error', `Ungültige WebSocket-Adresse: ${message}`)
|
||||||
|
this.emit('status', 'closed')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.socket = socket
|
||||||
|
|
||||||
|
socket.onopen = () => {
|
||||||
|
if (this.socket !== socket) return
|
||||||
|
this.attempt = 0
|
||||||
|
this.emit('status', 'open')
|
||||||
|
this.emit('raw', { direction: 'system', text: 'Verbindung hergestellt.', at: new Date() })
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.onmessage = (event: MessageEvent<unknown>) => {
|
||||||
|
if (this.socket !== socket) return
|
||||||
|
this.handleMessage(event.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.onerror = () => {
|
||||||
|
if (this.socket !== socket) return
|
||||||
|
// Der Browser liefert aus Sicherheitsgründen keine Fehlerdetails.
|
||||||
|
this.emit('error', 'Verbindungsfehler – Adresse, Port und Erreichbarkeit der SwyxTray-App prüfen.')
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.onclose = (event: CloseEvent) => {
|
||||||
|
if (this.socket !== socket) return
|
||||||
|
this.socket = null
|
||||||
|
this.failAllPending(new Error('Verbindung zur SwyxTray-App geschlossen.'))
|
||||||
|
this.emit('status', 'closed')
|
||||||
|
this.emit('raw', {
|
||||||
|
direction: 'system',
|
||||||
|
text: `Verbindung geschlossen (Code ${event.code}${event.reason ? `, ${event.reason}` : ''}).`,
|
||||||
|
at: new Date(),
|
||||||
|
})
|
||||||
|
if (this.desiredConnected) {
|
||||||
|
this.scheduleReconnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleMessage(data: unknown): void {
|
||||||
|
if (typeof data !== 'string') {
|
||||||
|
const size = data instanceof Blob ? data.size : data instanceof ArrayBuffer ? data.byteLength : 0
|
||||||
|
this.emit('raw', { direction: 'in', text: `[Binärdaten, ${size} Bytes]`, at: new Date() })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.emit('raw', { direction: 'in', text: data, at: new Date() })
|
||||||
|
|
||||||
|
let parsed: unknown
|
||||||
|
try {
|
||||||
|
parsed = JSON.parse(data)
|
||||||
|
} catch {
|
||||||
|
// Kein JSON – bleibt im Diagnoseprotokoll sichtbar, sonst ignorieren.
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = parseResult(parsed)
|
||||||
|
if (result) {
|
||||||
|
const request = this.pending.get(result.id)
|
||||||
|
if (!request) return
|
||||||
|
this.pending.delete(result.id)
|
||||||
|
clearTimeout(request.timer)
|
||||||
|
if (result.ok) {
|
||||||
|
request.resolve(result)
|
||||||
|
} else {
|
||||||
|
request.reject(new Error(result.error ?? 'Unbekannter Fehler.'))
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Die App schickt keine Ereignisse: Jede Änderung – auch ein eingehender
|
||||||
|
// Anruf – kommt als vollständiger Snapshot.
|
||||||
|
const snapshot = parseSnapshot(parsed)
|
||||||
|
if (snapshot) {
|
||||||
|
this.emit('snapshot', snapshot)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const hello = parseHello(parsed)
|
||||||
|
if (hello) {
|
||||||
|
this.emit('hello', hello)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nicht stillschweigend verwerfen – sonst bliebe eine Protokolländerung
|
||||||
|
// der App unbemerkt, genau wie bei den früher erwarteten call-Ereignissen.
|
||||||
|
this.emit('raw', {
|
||||||
|
direction: 'system',
|
||||||
|
text: 'Nachricht nicht erkannt – Protokoll der App prüfen.',
|
||||||
|
at: new Date(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private scheduleReconnect(): void {
|
||||||
|
if (this.reconnectTimer !== null) return
|
||||||
|
this.attempt += 1
|
||||||
|
const delay = Math.min(this.reconnectDelayMs * 2 ** (this.attempt - 1), this.maxReconnectDelayMs)
|
||||||
|
this.emit('raw', {
|
||||||
|
direction: 'system',
|
||||||
|
text: `Neuer Versuch #${this.attempt} in ${Math.round(delay / 1000)} s …`,
|
||||||
|
at: new Date(),
|
||||||
|
})
|
||||||
|
this.reconnectTimer = setTimeout(() => {
|
||||||
|
this.reconnectTimer = null
|
||||||
|
if (this.desiredConnected) this.open()
|
||||||
|
}, delay)
|
||||||
|
}
|
||||||
|
|
||||||
|
private clearReconnectTimer(): void {
|
||||||
|
if (this.reconnectTimer !== null) {
|
||||||
|
clearTimeout(this.reconnectTimer)
|
||||||
|
this.reconnectTimer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Schließt eine bestehende Verbindung, ohne einen Reconnect auszulösen. */
|
||||||
|
private closeSocket(reason: string): void {
|
||||||
|
const socket = this.socket
|
||||||
|
if (!socket) return
|
||||||
|
socket.onopen = null
|
||||||
|
socket.onmessage = null
|
||||||
|
socket.onerror = null
|
||||||
|
socket.onclose = null
|
||||||
|
this.socket = null
|
||||||
|
if (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING) {
|
||||||
|
socket.close(CLOSE_CODE_NORMAL, reason)
|
||||||
|
}
|
||||||
|
this.failAllPending(new Error(reason))
|
||||||
|
}
|
||||||
|
|
||||||
|
private failAllPending(error: Error): void {
|
||||||
|
for (const request of this.pending.values()) {
|
||||||
|
clearTimeout(request.timer)
|
||||||
|
request.reject(error)
|
||||||
|
}
|
||||||
|
this.pending.clear()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Beendet den Client endgültig (Seitenwechsel). */
|
||||||
|
dispose(): void {
|
||||||
|
this.desiredConnected = false
|
||||||
|
this.clearReconnectTimer()
|
||||||
|
this.closeSocket('Seite verlassen')
|
||||||
|
for (const set of Object.values(this.listeners)) {
|
||||||
|
set.clear()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private emit<K extends keyof Listeners>(event: K, ...args: Parameters<Listeners[K]>): void {
|
||||||
|
for (const listener of this.listeners[event]) {
|
||||||
|
;(listener as (...a: unknown[]) => void)(...args)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,334 @@
|
|||||||
|
import { describe, expect, it } from 'vitest'
|
||||||
|
import {
|
||||||
|
callStateOf,
|
||||||
|
describeCall,
|
||||||
|
describeTab,
|
||||||
|
mergeSnapshot,
|
||||||
|
parseHello,
|
||||||
|
parseResult,
|
||||||
|
parseSnapshot,
|
||||||
|
parseTabs,
|
||||||
|
type CallEvent,
|
||||||
|
} from './protocol'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Die Beispielnachrichten sind gegen die laufende SwyxTray-App 1.0.0.0
|
||||||
|
* mitgeschnitten (ws://192.168.180.135:17654/ws).
|
||||||
|
*/
|
||||||
|
const HELLO = '{"app":"SwyxTray","version":"1.0.0.0","protocol":1,"session":7,"type":"hello"}'
|
||||||
|
|
||||||
|
/** Wörtlich mitgeschnitten, während ein Anruf auf Leitung 1 einging. */
|
||||||
|
const RINGING_SNAPSHOT =
|
||||||
|
'{"connected":true,"serverUp":true,"overall":"Ringing","statusText":"Eingehender Ruf",' +
|
||||||
|
'"user":"Muster, M.","server":"127.0.0.1","lines":[' +
|
||||||
|
'{"line":1,"state":"LSRinging","stateCode":3,"stateText":"klingelt","peer":"001602107449",' +
|
||||||
|
'"peerNumber":"001602107449","peerName":"","busy":true,"selected":true},' +
|
||||||
|
'{"line":2,"state":"LSInactive","stateCode":0,"stateText":"frei","peer":"unbekannt",' +
|
||||||
|
'"peerNumber":"","peerName":"","busy":false,"selected":false},' +
|
||||||
|
'{"line":3,"state":"LSInactive","stateCode":0,"stateText":"frei","peer":"unbekannt",' +
|
||||||
|
'"peerNumber":"","peerName":"","busy":false,"selected":false},' +
|
||||||
|
'{"line":4,"state":"LSInactive","stateCode":0,"stateText":"frei","peer":"unbekannt",' +
|
||||||
|
'"peerNumber":"","peerName":"","busy":false,"selected":false}],"type":"snapshot"}'
|
||||||
|
|
||||||
|
/** Leitungseintrag im Snapshot; Vorgabe ist eine freie Leitung. */
|
||||||
|
function line(overrides: Record<string, unknown> = {}) {
|
||||||
|
return {
|
||||||
|
line: 1,
|
||||||
|
state: 'LSInactive',
|
||||||
|
stateCode: 0,
|
||||||
|
stateText: 'frei',
|
||||||
|
peer: 'unbekannt',
|
||||||
|
peerNumber: '',
|
||||||
|
peerName: '',
|
||||||
|
busy: false,
|
||||||
|
selected: false,
|
||||||
|
...overrides,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function snapshot(...entries: Record<string, unknown>[]) {
|
||||||
|
return {
|
||||||
|
connected: true,
|
||||||
|
serverUp: true,
|
||||||
|
overall: 'Idle',
|
||||||
|
statusText: 'Bereit',
|
||||||
|
user: 'Muster, M.',
|
||||||
|
server: '127.0.0.1',
|
||||||
|
lines: entries,
|
||||||
|
type: 'snapshot',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('parseHello', () => {
|
||||||
|
it('liest die Begrüßung der App', () => {
|
||||||
|
expect(parseHello(JSON.parse(HELLO))).toEqual({
|
||||||
|
app: 'SwyxTray',
|
||||||
|
version: '1.0.0.0',
|
||||||
|
protocol: 1,
|
||||||
|
session: 7,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('hält andere Nachrichten für keine Begrüßung', () => {
|
||||||
|
expect(parseHello(snapshot())).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('liest die Protokollversion der Tab-Verwaltung', () => {
|
||||||
|
expect(
|
||||||
|
parseHello(JSON.parse('{"app":"SwyxTray","version":"1.0.0.0","protocol":6,"session":1,"type":"hello"}'))
|
||||||
|
?.protocol,
|
||||||
|
).toBe(6)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('callStateOf', () => {
|
||||||
|
it('hält freie Leitungen für frei', () => {
|
||||||
|
expect(callStateOf('LSInactive', 'frei')).toBeNull()
|
||||||
|
expect(callStateOf('LSTerminate', 'beendet')).toBeNull()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('erkennt einen eingehenden Anruf am Zustand', () => {
|
||||||
|
expect(callStateOf('LSRinging', 'klingelt')).toBe('incoming')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('erkennt ihn auch nur am Klartext der App', () => {
|
||||||
|
expect(callStateOf('LSIrgendwas', 'klingelt')).toBe('incoming')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('erkennt den Wählvorgang', () => {
|
||||||
|
expect(callStateOf('LSDialing', 'wählt')).toBe('outgoing')
|
||||||
|
expect(callStateOf('LSAlerting', 'Verbindungsaufbau')).toBe('outgoing')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('hält alles Unbekannte für belegt statt für frei', () => {
|
||||||
|
// Sonst verschwände eine Leitung stillschweigend – der Fehler, wegen dem
|
||||||
|
// eingehende Anrufe gar nicht angezeigt wurden.
|
||||||
|
expect(callStateOf('LSActive', 'verbunden')).toBe('connected')
|
||||||
|
expect(callStateOf('LSVölligNeu', 'was auch immer')).toBe('connected')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('parseSnapshot', () => {
|
||||||
|
it('liest den Zustand der App', () => {
|
||||||
|
expect(parseSnapshot(snapshot(line()))).toMatchObject({
|
||||||
|
connected: true,
|
||||||
|
serverUp: true,
|
||||||
|
overall: 'Idle',
|
||||||
|
statusText: 'Bereit',
|
||||||
|
user: 'Muster, M.',
|
||||||
|
server: '127.0.0.1',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('verwirft freie Leitungen – die App schickt immer alle vier', () => {
|
||||||
|
const parsed = parseSnapshot(
|
||||||
|
snapshot(line({ line: 1 }), line({ line: 2 }), line({ line: 3 }), line({ line: 4 })),
|
||||||
|
)
|
||||||
|
expect(parsed?.lines).toEqual([])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('liest die klingelnde Leitung mit Gegenstelle', () => {
|
||||||
|
const parsed = parseSnapshot(
|
||||||
|
snapshot(
|
||||||
|
line({ line: 1 }),
|
||||||
|
line({
|
||||||
|
line: 2,
|
||||||
|
state: 'LSRinging',
|
||||||
|
stateCode: 4,
|
||||||
|
stateText: 'klingelt',
|
||||||
|
peer: 'Muster GmbH (+493012345)',
|
||||||
|
peerNumber: '+493012345',
|
||||||
|
peerName: 'Muster GmbH',
|
||||||
|
busy: true,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
expect(parsed?.lines).toEqual([
|
||||||
|
{
|
||||||
|
line: 2,
|
||||||
|
event: 'incoming',
|
||||||
|
direction: 'incoming',
|
||||||
|
peer: 'Muster GmbH (+493012345)',
|
||||||
|
peerNumber: '+493012345',
|
||||||
|
peerName: 'Muster GmbH',
|
||||||
|
stateText: 'klingelt',
|
||||||
|
state: 'LSRinging',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('lässt den Platzhalter "unbekannt" weg', () => {
|
||||||
|
const parsed = parseSnapshot(snapshot(line({ state: 'LSActive', stateText: 'verbunden' })))
|
||||||
|
expect(parsed?.lines[0]).toMatchObject({ line: 1, event: 'connected', peer: undefined })
|
||||||
|
})
|
||||||
|
|
||||||
|
it('hält andere Nachrichten für keinen Snapshot', () => {
|
||||||
|
expect(parseSnapshot(JSON.parse(HELLO))).toBeNull()
|
||||||
|
expect(parseSnapshot('hallo')).toBeNull()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('echter eingehender Anruf', () => {
|
||||||
|
it('meldet den mitgeschnittenen Anruf als klingelnde Leitung', () => {
|
||||||
|
const parsed = parseSnapshot(JSON.parse(RINGING_SNAPSHOT))
|
||||||
|
expect(parsed?.statusText).toBe('Eingehender Ruf')
|
||||||
|
expect(parsed?.lines).toEqual([
|
||||||
|
{
|
||||||
|
line: 1,
|
||||||
|
event: 'incoming',
|
||||||
|
direction: 'incoming',
|
||||||
|
peer: '001602107449',
|
||||||
|
peerNumber: '001602107449',
|
||||||
|
peerName: undefined,
|
||||||
|
stateText: 'klingelt',
|
||||||
|
state: 'LSRinging',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
// Aus dem Vergleich mit dem vorherigen Stand entsteht die Anrufmeldung.
|
||||||
|
const { events } = mergeSnapshot({}, parsed!.lines)
|
||||||
|
expect(events).toHaveLength(1)
|
||||||
|
expect(events[0]).toMatchObject({ line: 1, event: 'incoming' })
|
||||||
|
})
|
||||||
|
|
||||||
|
it('räumt die Leitung wieder ab, wenn der Anrufer auflegt', () => {
|
||||||
|
const ringing = parseSnapshot(JSON.parse(RINGING_SNAPSHOT))!
|
||||||
|
const { lines } = mergeSnapshot({}, ringing.lines)
|
||||||
|
const idle = parseSnapshot(snapshot(line({ line: 1 }), line({ line: 2 })))!
|
||||||
|
const { lines: next, events } = mergeSnapshot(lines, idle.lines)
|
||||||
|
expect(next).toEqual({})
|
||||||
|
expect(events[0]).toMatchObject({ line: 1, event: 'ended', peerNumber: '001602107449' })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('mergeSnapshot', () => {
|
||||||
|
const ringing: CallEvent = {
|
||||||
|
line: 2,
|
||||||
|
event: 'incoming',
|
||||||
|
direction: 'incoming',
|
||||||
|
peerNumber: '+493012345',
|
||||||
|
peerName: 'Muster GmbH',
|
||||||
|
}
|
||||||
|
|
||||||
|
it('meldet eine neu klingelnde Leitung', () => {
|
||||||
|
const { lines, events } = mergeSnapshot({}, [ringing])
|
||||||
|
expect(events).toEqual([ringing])
|
||||||
|
expect(lines[2]).toEqual(ringing)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('meldet nichts, solange sich nichts ändert', () => {
|
||||||
|
const { lines } = mergeSnapshot({}, [ringing])
|
||||||
|
expect(mergeSnapshot(lines, [ringing]).events).toEqual([])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('führt die Richtung über das Annehmen hinweg mit', () => {
|
||||||
|
const { lines } = mergeSnapshot({}, [ringing])
|
||||||
|
const connected = { ...ringing, event: 'connected' as const, direction: undefined }
|
||||||
|
const { events } = mergeSnapshot(lines, [connected])
|
||||||
|
expect(events).toEqual([{ ...connected, direction: 'incoming' }])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('meldet das Ende, wenn die Leitung im Snapshot fehlt', () => {
|
||||||
|
const { lines } = mergeSnapshot({}, [ringing])
|
||||||
|
const { lines: next, events } = mergeSnapshot(lines, [])
|
||||||
|
expect(events).toEqual([{ ...ringing, event: 'ended', state: undefined, stateText: undefined }])
|
||||||
|
expect(next).toEqual({})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('erkennt einen zweiten Anruf auf derselben Leitung', () => {
|
||||||
|
const { lines } = mergeSnapshot({}, [ringing])
|
||||||
|
const other = { ...ringing, peerNumber: '+499998888', peerName: 'Andere GmbH' }
|
||||||
|
expect(mergeSnapshot(lines, [other]).events).toEqual([other])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('parseResult', () => {
|
||||||
|
it('liest die Erfolgsquittung mit Leitungsnummer', () => {
|
||||||
|
expect(parseResult(JSON.parse('{"id":11,"ok":true,"line":4,"type":"result"}'))).toEqual({
|
||||||
|
id: 11,
|
||||||
|
ok: true,
|
||||||
|
line: 4,
|
||||||
|
error: undefined,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('liest die Fehlerquittung', () => {
|
||||||
|
expect(
|
||||||
|
parseResult(JSON.parse('{"id":8,"ok":false,"error":"Unbekanntes Kommando","type":"result"}')),
|
||||||
|
).toMatchObject({ id: 8, ok: false, error: 'Unbekanntes Kommando' })
|
||||||
|
})
|
||||||
|
|
||||||
|
it('liest die beiden Quittungen auf focus', () => {
|
||||||
|
// Fenster war da und ist jetzt vorn.
|
||||||
|
expect(parseResult(JSON.parse('{"type":"result","id":9,"ok":true,"focused":true}'))).toMatchObject(
|
||||||
|
{ id: 9, ok: true, focused: true },
|
||||||
|
)
|
||||||
|
// Kein Fenster gefunden – die App hat die URL im Browser geöffnet.
|
||||||
|
expect(parseResult(JSON.parse('{"type":"result","id":9,"ok":true,"focused":false}'))).toMatchObject(
|
||||||
|
{ id: 9, ok: true, focused: false },
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('lässt focused bei allen anderen Quittungen offen', () => {
|
||||||
|
expect(parseResult(JSON.parse('{"id":11,"ok":true,"line":4,"type":"result"}'))?.focused).toBeUndefined()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('liest die Quittung auf tabs', () => {
|
||||||
|
const raw =
|
||||||
|
'{"type":"result","id":12,"ok":true,"tabs":[' +
|
||||||
|
'{"id":43,"title":"Kundenakte","url":"https://crm.example.local/kunden/4711","active":true},' +
|
||||||
|
'{"id":44,"title":"SwyxWeb","url":"http://localhost:5173/","active":false}]}'
|
||||||
|
expect(parseResult(JSON.parse(raw))?.tabs).toEqual([
|
||||||
|
{ id: 43, title: 'Kundenakte', url: 'https://crm.example.local/kunden/4711', active: true },
|
||||||
|
{ id: 44, title: 'SwyxWeb', url: 'http://localhost:5173/', active: false },
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('liest die Kennung aus der Quittung auf opentab', () => {
|
||||||
|
expect(parseResult(JSON.parse('{"type":"result","id":13,"ok":true,"tabId":43}'))).toMatchObject({
|
||||||
|
id: 13,
|
||||||
|
ok: true,
|
||||||
|
tabId: 43,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('lässt tabs und tabId bei allen anderen Quittungen offen', () => {
|
||||||
|
const result = parseResult(JSON.parse('{"id":11,"ok":true,"line":4,"type":"result"}'))
|
||||||
|
expect(result?.tabs).toBeUndefined()
|
||||||
|
expect(result?.tabId).toBeUndefined()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('hält einen Snapshot für keine Quittung', () => {
|
||||||
|
expect(parseResult(snapshot())).toBeNull()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('parseTabs', () => {
|
||||||
|
it('nimmt fehlende Felder hin – nur die Kennung ist Pflicht', () => {
|
||||||
|
expect(parseTabs([{ id: 7 }])).toEqual([{ id: 7, title: undefined, url: undefined, active: false }])
|
||||||
|
})
|
||||||
|
|
||||||
|
it('verwirft Einträge ohne brauchbare Kennung', () => {
|
||||||
|
// Ohne Kennung ließe sich der Tab ohnehin nicht schließen.
|
||||||
|
expect(parseTabs([{ title: 'Ohne Kennung' }, 'Unfug', null, { id: 9 }])).toEqual([
|
||||||
|
{ id: 9, title: undefined, url: undefined, active: false },
|
||||||
|
])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('describeTab', () => {
|
||||||
|
it('nimmt den Titel, sonst die URL, sonst die Kennung', () => {
|
||||||
|
expect(describeTab({ id: 1, title: 'Kundenakte', url: 'https://x/', active: true })).toBe('Kundenakte')
|
||||||
|
expect(describeTab({ id: 2, url: 'https://x/', active: false })).toBe('https://x/')
|
||||||
|
expect(describeTab({ id: 3, active: false })).toBe('Tab 3')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('describeCall', () => {
|
||||||
|
it('bevorzugt die fertige Anzeigeform der App', () => {
|
||||||
|
expect(describeCall({ line: 1, event: 'incoming', peer: 'Muster GmbH (+49301)' })).toBe(
|
||||||
|
'Muster GmbH (+49301)',
|
||||||
|
)
|
||||||
|
expect(describeCall({ line: 3, event: 'connected' })).toBe('Leitung 3')
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,323 @@
|
|||||||
|
/**
|
||||||
|
* Protokoll der SwyxTray-App, aufgezeichnet gegen `ws://192.168.180.135:17654/ws`
|
||||||
|
* (App-Version 1.0.0.0, `protocol: 1`; seit der Tab-Verwaltung meldet die App
|
||||||
|
* `protocol: 6`).
|
||||||
|
*
|
||||||
|
* App → Seite:
|
||||||
|
* { "app":"SwyxTray","version":"1.0.0.0","protocol":1,"session":7,"type":"hello" }
|
||||||
|
* { "type":"snapshot","connected":true,"serverUp":true,"overall":"Idle",
|
||||||
|
* "statusText":"Bereit","user":"Muster, M.","server":"127.0.0.1",
|
||||||
|
* "lines":[{"line":1,"state":"LSInactive","stateCode":0,"stateText":"frei",
|
||||||
|
* "peer":"unbekannt","peerNumber":"","peerName":"","busy":false,
|
||||||
|
* "selected":true}, …] }
|
||||||
|
* { "type":"result","id":7,"ok":true,"line":2 }
|
||||||
|
*
|
||||||
|
* Seite → App:
|
||||||
|
* { "id":7,"cmd":"call","number":"+49 30 1234567" } ferner answer/hangup (je `line`),
|
||||||
|
* ping, status und focus (bestätigt durch Sondierung; alles andere quittiert die App mit
|
||||||
|
* „Unbekanntes Kommando").
|
||||||
|
* { "id":9,"cmd":"focus","title":"Kundenakte Muster GmbH","url":"https://…" }
|
||||||
|
* → { "type":"result","id":9,"ok":true,"focused":true } Fenster war da und ist jetzt vorn
|
||||||
|
* → { "type":"result","id":9,"ok":true,"focused":false } kein Fenster – Browser mit `url`
|
||||||
|
* Der Titel wird als Teilzeichenkette gesucht, unabhängig von der Schreibweise. Ohne
|
||||||
|
* Treffer und ohne `url` antwortet die App mit `ok:false`.
|
||||||
|
*
|
||||||
|
* Seit Protokoll 6 reicht die App drei weitere Kommandos unverändert an das
|
||||||
|
* Firefox-Plugin durch – die Tabs gehören also zum Browser auf dem Rechner der App:
|
||||||
|
* { "id":12,"cmd":"tabs" }
|
||||||
|
* → { "type":"result","id":12,"ok":true,
|
||||||
|
* "tabs":[{"id":43,"title":"Kundenakte","url":"https://…","active":true}, …] }
|
||||||
|
* { "id":13,"cmd":"opentab","url":"https://…" } → { …,"ok":true,"tabId":43 }
|
||||||
|
* { "id":14,"cmd":"closetab","tabId":43 } → { …,"ok":true }
|
||||||
|
* Ist kein Plugin verbunden, antwortet die App nach rund fünf Sekunden mit `ok:false`.
|
||||||
|
*
|
||||||
|
* **Die App kennt keine Ereignisnachrichten.** Jede Zustandsänderung – auch ein
|
||||||
|
* eingehender Anruf – kommt als vollständiger `snapshot` über *alle* Leitungen.
|
||||||
|
* Die Anrufmeldung der Seite entsteht deshalb aus dem Vergleich zweier Snapshots
|
||||||
|
* (siehe {@link mergeSnapshot}).
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type CallEventKind = 'incoming' | 'outgoing' | 'connected' | 'ended'
|
||||||
|
export type CallDirection = 'incoming' | 'outgoing'
|
||||||
|
|
||||||
|
export interface CallEvent {
|
||||||
|
/** 1-basierte Leitungsnummer, wie in SwyxIt! */
|
||||||
|
line: number
|
||||||
|
event: CallEventKind
|
||||||
|
/** Bei `connected` aus dem vorherigen Zustand derselben Leitung übernommen. */
|
||||||
|
direction?: CallDirection
|
||||||
|
/** Fertige Anzeigeform der App, z. B. "Muster GmbH (+493012345)". */
|
||||||
|
peer?: string
|
||||||
|
peerNumber?: string
|
||||||
|
peerName?: string
|
||||||
|
/** Klartext der App zum Leitungszustand, z. B. "klingelt". */
|
||||||
|
stateText?: string
|
||||||
|
/** Rohzustand der App, z. B. "LSRinging" – für die Diagnose. */
|
||||||
|
state?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ResultMessage {
|
||||||
|
id: number
|
||||||
|
ok: boolean
|
||||||
|
line?: number
|
||||||
|
/** Nur bei `focus`: true = Fenster geholt, false = Browser mit der URL gestartet. */
|
||||||
|
focused?: boolean
|
||||||
|
/** Nur bei `tabs`: die offenen Tabs des Firefox-Plugins. */
|
||||||
|
tabs?: BrowserTab[]
|
||||||
|
/** Nur bei `opentab`: Kennung des neu geöffneten Tabs. */
|
||||||
|
tabId?: number
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ein Tab des Firefox-Plugins, wie ihn die Quittung auf `tabs` meldet. */
|
||||||
|
export interface BrowserTab {
|
||||||
|
/** Kennung des Tabs; sie geht unverändert an `closetab` zurück. */
|
||||||
|
id: number
|
||||||
|
title?: string
|
||||||
|
url?: string
|
||||||
|
/** Ist das der im Fenster sichtbare Tab? */
|
||||||
|
active: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Begrüßung beim Verbindungsaufbau. */
|
||||||
|
export interface HelloMessage {
|
||||||
|
app?: string
|
||||||
|
version?: string
|
||||||
|
protocol?: number
|
||||||
|
session?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Vollzustand; die App schickt ihn beim Verbinden und nach jeder Änderung. */
|
||||||
|
export interface SnapshotMessage {
|
||||||
|
/** Nur belegte Leitungen; freie Leitungen sind hier nicht enthalten. */
|
||||||
|
lines: CallEvent[]
|
||||||
|
/** Ist die App mit SwyxIt! verbunden? */
|
||||||
|
connected?: boolean
|
||||||
|
/** Ist der SwyxServer erreichbar? */
|
||||||
|
serverUp?: boolean
|
||||||
|
/** Gesamtzustand, z. B. "Idle" oder "Dialing". */
|
||||||
|
overall?: string
|
||||||
|
/** Klartext dazu, z. B. "Bereit". */
|
||||||
|
statusText?: string
|
||||||
|
user?: string
|
||||||
|
server?: string
|
||||||
|
raw: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Kommandonamen; alle gegen die App bestätigt. */
|
||||||
|
export const COMMANDS = {
|
||||||
|
call: 'call',
|
||||||
|
answer: 'answer',
|
||||||
|
hangup: 'hangup',
|
||||||
|
ping: 'ping',
|
||||||
|
status: 'status',
|
||||||
|
focus: 'focus',
|
||||||
|
tabs: 'tabs',
|
||||||
|
openTab: 'opentab',
|
||||||
|
closeTab: 'closetab',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||||
|
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function asString(value: unknown): string | undefined {
|
||||||
|
if (typeof value === 'string' && value !== '') return value
|
||||||
|
if (typeof value === 'number') return String(value)
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ganze Zahlen aus dem Protokoll – Leitungsnummer, Kommando-Id, Tab-Kennung.
|
||||||
|
* Eine Ziffernfolge als Text wird ebenfalls akzeptiert.
|
||||||
|
*/
|
||||||
|
function asLine(value: unknown): number | undefined {
|
||||||
|
if (typeof value === 'number' && Number.isInteger(value)) return value
|
||||||
|
if (typeof value === 'string' && /^\d+$/.test(value.trim())) return Number(value)
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
function asBoolean(value: unknown): boolean | undefined {
|
||||||
|
return typeof value === 'boolean' ? value : undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Leitungszustand der App → Anrufzustand der Seite; `null` heißt „frei".
|
||||||
|
*
|
||||||
|
* `state` trägt die Namen der CLMgr-Aufzählung `LineState`, `stateText` den
|
||||||
|
* deutschen Klartext aus SwyxIt!. Bestätigt ist bisher nur `LSInactive`/"frei";
|
||||||
|
* deshalb wird beides ausgewertet und ein **unbekannter Zustand als belegt**
|
||||||
|
* behandelt – eine klingelnde Leitung darf nie stillschweigend verschwinden.
|
||||||
|
*/
|
||||||
|
export function callStateOf(state?: string, stateText?: string): CallEventKind | null {
|
||||||
|
const name = (state ?? '').toLowerCase()
|
||||||
|
const text = (stateText ?? '').toLowerCase()
|
||||||
|
const has = (...needles: string[]) => needles.some((n) => name.includes(n) || text.includes(n))
|
||||||
|
|
||||||
|
// Frei oder gerade freigeworden.
|
||||||
|
if (has('inactive', 'disabled', 'terminate', 'frei', 'beendet')) return null
|
||||||
|
// Eingehend: die Leitung klingelt beim Benutzer.
|
||||||
|
if (has('ringing', 'knocking', 'klingelt', 'ruft an')) return 'incoming'
|
||||||
|
// Ausgehend: gewählt wird, die Gegenstelle wird gerufen.
|
||||||
|
if (has('dialing', 'initiate', 'alerting', 'wählt', 'wahl', 'verbindungsaufbau')) return 'outgoing'
|
||||||
|
// Alles Übrige gilt als belegt (aktiv, gehalten, Konferenz, unbekannt).
|
||||||
|
return 'connected'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Liest einen Leitungseintrag aus dem Snapshot; `null`, wenn die Leitung frei ist. */
|
||||||
|
export function parseSnapshotLine(raw: unknown): CallEvent | null {
|
||||||
|
if (!isRecord(raw)) return null
|
||||||
|
const line = asLine(raw.line)
|
||||||
|
if (line === undefined) return null
|
||||||
|
|
||||||
|
const state = asString(raw.state)
|
||||||
|
const stateText = asString(raw.stateText)
|
||||||
|
const event = callStateOf(state, stateText)
|
||||||
|
if (!event) return null
|
||||||
|
|
||||||
|
// "unbekannt" ist der Platzhalter der App für eine Leitung ohne Gegenstelle.
|
||||||
|
const peer = asString(raw.peer)
|
||||||
|
return {
|
||||||
|
line,
|
||||||
|
event,
|
||||||
|
// Bei `connected` verrät der Zustand die Richtung nicht – sie kommt aus dem
|
||||||
|
// vorherigen Snapshot derselben Leitung (siehe mergeSnapshot).
|
||||||
|
direction: event === 'incoming' || event === 'outgoing' ? event : undefined,
|
||||||
|
peer: peer === 'unbekannt' ? undefined : peer,
|
||||||
|
peerNumber: asString(raw.peerNumber),
|
||||||
|
peerName: asString(raw.peerName),
|
||||||
|
stateText,
|
||||||
|
state,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Liest die Quittung auf ein Kommando. */
|
||||||
|
export function parseResult(raw: unknown): ResultMessage | null {
|
||||||
|
if (!isRecord(raw)) return null
|
||||||
|
if (raw.type !== undefined && raw.type !== 'result') return null
|
||||||
|
if (typeof raw.ok !== 'boolean') return null
|
||||||
|
|
||||||
|
const id = asLine(raw.id)
|
||||||
|
if (id === undefined) return null
|
||||||
|
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
ok: raw.ok,
|
||||||
|
line: asLine(raw.line),
|
||||||
|
focused: asBoolean(raw.focused),
|
||||||
|
tabs: Array.isArray(raw.tabs) ? parseTabs(raw.tabs) : undefined,
|
||||||
|
tabId: asLine(raw.tabId),
|
||||||
|
error: asString(raw.error),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Liest die Tabliste aus der Quittung auf `tabs`. Einträge ohne brauchbare
|
||||||
|
* Kennung fallen weg – ohne sie ließe sich der Tab ohnehin nicht schließen.
|
||||||
|
*/
|
||||||
|
export function parseTabs(raw: unknown[]): BrowserTab[] {
|
||||||
|
return raw.flatMap((entry) => {
|
||||||
|
if (!isRecord(entry)) return []
|
||||||
|
const id = asLine(entry.id)
|
||||||
|
if (id === undefined) return []
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id,
|
||||||
|
title: asString(entry.title),
|
||||||
|
url: asString(entry.url),
|
||||||
|
active: asBoolean(entry.active) ?? false,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Anzeigename eines Tabs: Titel, sonst die URL, sonst die Kennung. */
|
||||||
|
export function describeTab(tab: BrowserTab): string {
|
||||||
|
return tab.title ?? tab.url ?? `Tab ${tab.id}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Liest die Begrüßung. */
|
||||||
|
export function parseHello(raw: unknown): HelloMessage | null {
|
||||||
|
if (!isRecord(raw) || raw.type !== 'hello') return null
|
||||||
|
return {
|
||||||
|
app: asString(raw.app),
|
||||||
|
version: asString(raw.version),
|
||||||
|
protocol: asLine(raw.protocol),
|
||||||
|
session: asLine(raw.session),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Liest den Vollzustand. Freie Leitungen werden verworfen – die App schickt
|
||||||
|
* immer alle vier Leitungen mit, auch die unbenutzten.
|
||||||
|
*/
|
||||||
|
export function parseSnapshot(raw: unknown): SnapshotMessage | null {
|
||||||
|
if (!isRecord(raw) || raw.type !== 'snapshot') return null
|
||||||
|
|
||||||
|
const entries = Array.isArray(raw.lines) ? raw.lines : []
|
||||||
|
const lines = entries.flatMap((entry) => {
|
||||||
|
const parsed = parseSnapshotLine(entry)
|
||||||
|
return parsed ? [parsed] : []
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
lines,
|
||||||
|
connected: asBoolean(raw.connected),
|
||||||
|
serverUp: asBoolean(raw.serverUp),
|
||||||
|
overall: asString(raw.overall),
|
||||||
|
statusText: asString(raw.statusText),
|
||||||
|
user: asString(raw.user),
|
||||||
|
server: asString(raw.server),
|
||||||
|
raw,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Führt einen Snapshot mit dem bisherigen Stand zusammen.
|
||||||
|
*
|
||||||
|
* Weil die App keine Ereignisse schickt, entstehen sie hier aus dem Vergleich:
|
||||||
|
* neue oder veränderte Leitungen ergeben ein Ereignis, verschwundene ein
|
||||||
|
* `ended`. Die Richtung wird über den Wechsel hinweg mitgeführt, damit ein
|
||||||
|
* angenommener Anruf im Verlauf eingehend bleibt.
|
||||||
|
*/
|
||||||
|
export function mergeSnapshot(
|
||||||
|
previous: Record<number, CallEvent>,
|
||||||
|
lines: CallEvent[],
|
||||||
|
): { lines: Record<number, CallEvent>; events: CallEvent[] } {
|
||||||
|
const next: Record<number, CallEvent> = {}
|
||||||
|
const events: CallEvent[] = []
|
||||||
|
|
||||||
|
for (const entry of lines) {
|
||||||
|
const before = previous[entry.line]
|
||||||
|
// Gleiche Gegenstelle ⇒ derselbe Anruf; nur dann darf etwas übernommen werden.
|
||||||
|
const sameCall =
|
||||||
|
before !== undefined &&
|
||||||
|
(entry.peerNumber ?? entry.peer) === (before.peerNumber ?? before.peer)
|
||||||
|
|
||||||
|
const merged: CallEvent = {
|
||||||
|
...entry,
|
||||||
|
direction: entry.direction ?? (sameCall ? before.direction : undefined),
|
||||||
|
peer: entry.peer ?? (sameCall ? before.peer : undefined),
|
||||||
|
peerNumber: entry.peerNumber ?? (sameCall ? before.peerNumber : undefined),
|
||||||
|
peerName: entry.peerName ?? (sameCall ? before.peerName : undefined),
|
||||||
|
}
|
||||||
|
next[entry.line] = merged
|
||||||
|
|
||||||
|
if (!before || before.event !== merged.event || !sameCall) {
|
||||||
|
events.push(merged)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const before of Object.values(previous)) {
|
||||||
|
if (!next[before.line]) {
|
||||||
|
events.push({ ...before, event: 'ended', stateText: undefined, state: undefined })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { lines: next, events: events.sort((a, b) => a.line - b.line) }
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Anzeigename einer Leitung: fertige Anzeigeform, sonst Name oder Nummer. */
|
||||||
|
export function describeCall(event: CallEvent): string {
|
||||||
|
return event.peer ?? event.peerName ?? event.peerNumber ?? `Leitung ${event.line}`
|
||||||
|
}
|
||||||
Vendored
+10
@@ -0,0 +1,10 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_WS_URL?: string
|
||||||
|
readonly VITE_BACKEND_URL?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"types": ["vite/client"]
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"types": ["node"]
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
host: true,
|
||||||
|
port: 5173,
|
||||||
|
proxy: {
|
||||||
|
// REST-Aufrufe im Dev-Betrieb an das Spring-Boot-Backend weiterreichen.
|
||||||
|
'/api': {
|
||||||
|
target: process.env.VITE_BACKEND_URL ?? 'http://localhost:8080',
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user