Screenshots – Sparks for Teams Dokumentation (Deutsch)
Stand: März 2026
Dieser Ordner enthält alle Screenshots für das Benutzerhandbuch (BENUTZERHANDBUCH.md). Die Liste ist mit den Konzepten in Vistameet-Teams abgeglichen (z. B. Meeting-Chat „Create on first access“: calendar-context-menu-meeting-chat, meeting-chat-tab).
Sprache: English
Noch zu erstellen: SCREENSHOTS_TO_CREATE.md
Vorhandene Screenshots
Diese Dateien liegen unter docs/screenshots/de/ (bzw. für Englisch docs/screenshots/en/):
| Datei | Beschreibung | Verwendung im Handbuch |
|---|---|---|
login-screen.png | Login-Seite mit Logo | Erste Schritte – Erster Start |
keycloak-login-page.png | Keycloak-Login (nach Klick auf „Sign in“) | Erste Schritte – Anmeldeoptionen |
Weitere Screenshots werden per Skript erzeugt (npm run screenshots) oder manuell hinzugefügt.
In screenshot-config.json konfigurierte Screenshots
Diese Screens werden von scripts/generate-screenshots.js erzeugt, sofern die Vistameet-Teams-App unter http://localhost:5173 läuft und ggf. Login-Daten in .env gesetzt sind:
| Name (→ Dateiname) | URL | Beschreibung | Login nötig |
|---|---|---|---|
| login-screen | /login | Login-Seite mit SPARKS-Logo | Nein |
| keycloak-login-page | /login + Aktionen | Keycloak-Loginmaske | Nein (Aktionen) |
| main-interface | / | Hauptoberfläche mit Sidebar | Ja |
| chat-list | / | Chat-Liste mit Räumen | Ja |
| calendar-month-view | /calendar | Kalender Monatsansicht | Ja |
| calendar-week-view | /calendar | Kalender Wochenansicht (nach Klick) | Ja |
| planner-board-view | /planner | Planner Board-Ansicht | Ja |
| teams-list | /teams | Teams-Liste | Ja |
| calls-page | /calls | Anrufe / Tab Kontakte | Ja |
| contacts-page | /contacts | Kontakte / Personen | Ja |
| settings-general | /settings | Einstellungen – Allgemein | Ja |
| settings-appearance | /settings | Einstellungen – Darstellung | Ja |
| settings-security | /settings | Einstellungen – Sicherheit | Ja |
| settings-accounts | /settings | Konten & Organisationen (Provider) | Ja |
| settings-privacy | /settings | Datenschutz | Ja |
| ms-chat | /ms-chat | Microsoft Teams Chat | Ja |
| ms-channels | /ms-channels | Microsoft Teams Channels | Ja |
| call-log | /calls | Anrufverlauf / Call Log | Ja |
| activity | /activity | Aktivitäts-Feed | Ja |
| assistant | /assistant | KI-Assistent | Ja |
| priority-contacts | /settings/priority-contacts | Prioritätskontakte | Ja |
| blocked-contacts | /settings/blocked-contacts | Blockierte Kontakte | Ja |
| marketing-main-interface … marketing-settings-security | diverse | Marketing-Varianten | Ja |
Hinweis: Die Screens calendar-context-menu-meeting-chat und meeting-chat-tab sind in der Mitwirker-Checkliste (templates/screenshot-checklist.de.md) bzw. in SCREENSHOTS_TO_CREATE.md geführt, aber noch nicht in screenshot-config.json – bei Bedarf dort ergänzen.
Wartezeiten: Nach Login und Seitenwechsel wartet das Skript automatisch (4–7,5 s je nach Seite), damit Kalender, Planner, Kontakte, Calls und MS-Chat ihre Daten laden. Zu kurze Wartezeiten führen zu Ladeblumen oder leeren Screenshots. Details und Tabelle: SETUP.md.
Nach dem Lauf liegen die Dateien als {name}.png pro Sprache in docs/screenshots/de/ bzw. docs/screenshots/en/. Locales stehen in scripts/screenshot-config.json (locales) oder per Umgebungsvariable SCREENSHOT_LOCALES=de,en.
User-Accounts und Tenant für die Screens
| Was | Beschreibung |
|---|---|
| Tenant | dev03 – Keycloak-Realm und Tenant der Vistameet-Teams-Dev-Umgebung (Authority z. B. https://keycloak.vistameet.eu/realms/dev03). Die App lädt die Konfiguration beim Start; für Screenshots muss die App mit diesem Tenant laufen (z. B. lokal mit Vistameet-Teams .env). Screenshot-Login nutzt SSO (Erweiterte Optionen → „Mit SSO anmelden“) und screenshot-config.json → login.keycloak.tenant. |
| User 1 | Credentials aus E2E_USER1 / E2E_PASSWORD1 (z. B. Keycloak-Benutzername test). Wird für alle Screens mit Login verwendet. |
| User 2 | Optional: E2E_USER2 / E2E_PASSWORD2 (z. B. test2) – für Screens mit zweitem Nutzer oder E2E-Demo; das Screenshot-Skript nutzt standardmäßig nur User 1. |
Credentials in Vista-Teams-Docs/.env oder Vistameet-Teams/.env eintragen. Siehe SETUP.md → „User-Accounts und Tenant für Screenshots“.
Geplante Unterordner (optional)
Screenshots können nach Feature gruppiert werden:
| Ordner | Inhalt |
|---|---|
getting-started/ | Login, Initialisierung, Oberfläche |
chat/ | Chat, Nachrichten, Suche |
calendar/ | Kalender, Termine |
planner/ | Planner, Aufgaben |
teams/ | Teams, Kanäle |
calls/ | Anrufe, Meeting-Raum |
contacts/ | Kontakte, Prioritätskontakte, Blockierte Kontakte |
settings/ | Einstellungsseiten |
security/ | Verschlüsselung, Geräte |
troubleshooting/ | Fehlermeldungen, Hilfe |
Aktuell liegen alle Screens direkt in screenshots/. Bei Nutzung von Unterordnern die Pfade in BENUTZERHANDBUCH.md anpassen (z.B. screenshots/getting-started/login-screen.png).
Screenshots aus dem Hauptprojekt (E2E-Demo)
Im Repository Vistameet-Teams werden unter tests/e2e/demo/ Playwright-Tests ausgeführt, die zusätzliche Screenshots erzeugen (Meeting-Raum mit mehreren Teilnehmern):
tests/e2e/demo/screenshots/3-participants-grid.pngtests/e2e/demo/screenshots/3-participants-speaker.pngtests/e2e/demo/screenshots/10-participants-grid.pngtests/e2e/demo/screenshots/10-participants-grid-scrolled.pngtests/e2e/demo/screenshots/10-participants-speaker.pngtests/e2e/demo/screenshots/10-participants-controls.png
Diese Dateien bleiben im Vistameet-Teams-Projekt. Für die Dokumentation können sie bei Bedarf nach Vista-Teams-Docs/docs/screenshots/ (z.B. in calls/ oder meetings/) kopiert und im Handbuch referenziert werden.
Geplante Erweiterung: Google als Provider (Vistameet-Teams)
Wenn in Vistameet-Teams Google als Kalender-, Todo- oder Kontakte-Provider integriert ist (siehe docs/PLAN_GOOGLE_KALENDER_TODO_KONTAKTE_DATEIEN.md), können zusätzliche Screenshots sinnvoll sein:
| Screenshot (optional) | Beschreibung |
|---|---|
settings-accounts-google.png | Einstellungen → Konten & Organisationen mit verbundenem Google-Account |
| Kalender/Planner/Kontakte mit Google-Badge | Ansichten mit aktivem Google-Provider (Badge „Google“ an Terminen/Aufgaben/Kontakten) |
Diese sind in der aktuellen screenshot-config.json noch nicht konfiguriert; bei Umsetzung der Google-Integration in der App hier und in der Checkliste ergänzen.
Namenskonventionen
- Kleinbuchstaben, Bindestriche:
login-screen.png,calendar-month-view.png - Aussagekräftig:
create-task-dialog.png,encryption-setup-wizard.png
Richtlinien für Bilder
- Format: PNG für Screenshots
- Größe: Max. Breite 1920px (Retina: 3840px)
- Dateigröße: Bilder ggf. komprimieren
- Datenschutz: Keine sichtbaren sensiblen Daten (ggf. unkenntlich machen)
Screenshots erzeugen
# 1. Vistameet-Teams starten (im anderen Terminal)
cd ../Vistameet-Teams
npm run dev
# 2. Im Vista-Teams-Docs-Verzeichnis
npm run screenshots
Konfiguration: scripts/screenshot-config.json (baseUrl, Selektoren, Login).
Vollständige Checkliste (nur Repository): screenshot-checklist.de.md