11 Commits

5 changed files with 207 additions and 246 deletions

53
CHANGELOG.md Normal file
View File

@@ -0,0 +1,53 @@
# Changelog
Alle wichtigen Änderungen an diesem Projekt werden in dieser Datei dokumentiert.
Das Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.0.0/),
und dieses Projekt adhäriert zu [Semantic Versioning](https://semver.org/lang/de/).
## [1.0.2] - 2024-03-19
### Hinzugefügt
- Wetterinformationen für jeden Suchtreffer
- Integration der OpenWeather API
- Wetter-Icons und Temperaturanzeige
- Umgebungsvariablen für API-Keys
### Geändert
- Anpassung der API-Antwortstruktur
- Verbesserte Fehlerbehandlung für API-Anfragen
## [1.0.1] - 2024-03-19
### Hinzugefügt
- Neues Suchfeld für Telefonnummer
- Reset-Icons für alle Suchfelder
- Trefferzähler für Suchergebnisse
### Geändert
- Verbesserte Positionierung der UI-Elemente
- Optimierte Suchlogik im Backend
- CSV-Datei in data-Verzeichnis verschoben
- Allgemeine Suche um Telefonnummer erweitert
### Behoben
- Korrektur der Icon-Anzeige in Suchfeldern
- Verbesserte Fehlerbehandlung beim Laden der CSV-Datei
## [1.0.0] - 2024-03-18
### Hinzugefügt
- Grundlegende Suchfunktionalität
- Spezifische Suchfelder für:
- Name
- Ort
- Kundennummer
- Fachrichtung
- Allgemeine Suche über alle Felder
- Klickbare Links für:
- Telefonnummern
- E-Mail-Adressen
- Google Maps Integration
- Share-Funktion für Suchergebnisse
- Responsive Design mit Bootstrap
- Live-Suche während der Eingabe

274
README.md
View File

@@ -1,229 +1,107 @@
# medisoftware Kundensuche
Eine Flask-basierte Webanwendung zur Suche in Kundendaten aus einer CSV-Datei.
Eine Webanwendung zur Suche in Kundendaten der medisoftware.
## Features
- Live-Suche während der Eingabe
- Live-Suche in Kundendaten
- Spezifische Suchfelder für:
- Kundennummer
- Name (Vor- und Nachname)
- Fachrichtung
- Name
- Ort
- Kundennummer
- Fachrichtung
- Telefonnummer
- Allgemeine Suche über alle Felder
- Klickbare Links für:
- Telefonnummern (tel:)
- E-Mail-Adressen (mailto:)
- Adressen (Google Maps)
- Kundennummern (KKBefe-System)
- Teilen-Funktion für einzelne Suchergebnisse
- Responsive Design mit Bootstrap
- Docker-Container-Unterstützung
## Technische Details
### Technologie-Stack
- **Backend**: Python 3.11 mit Flask
- **Frontend**: HTML, CSS, JavaScript, Bootstrap 5
- **Datenverarbeitung**: pandas, numpy
- **Container**: Docker
### Projektstruktur
```
medi-customers/
├── app.py # Flask-Anwendung
├── templates/ # HTML-Templates
│ └── index.html # Hauptseite
├── spezexpo.csv # Kundendaten
├── requirements.txt # Python-Abhängigkeiten
├── Dockerfile # Docker-Konfiguration
├── docker-compose.yml # Docker Compose Konfiguration
└── .dockerignore # Docker-Ignore-Datei
```
### Datenformat
Die Anwendung erwartet eine CSV-Datei (`spezexpo.csv`) mit folgenden Spalten:
- Nummer (Kundennummer)
- Vorname
- Nachname
- Fachrichtung
- Strasse
- PLZ
- Ort
- Tel
- mail
- Klickbare Telefonnummern
- Klickbare E-Mail-Adressen
- Google Maps Integration für Adressen
- Share-Funktion für Suchergebnisse
- Trefferzähler
- Reset-Funktion für alle Suchfelder
## Installation
### Lokale Entwicklung
1. Python 3.11 installieren
2. Virtuelle Umgebung erstellen und aktivieren:
```bash
python -m venv venv
source venv/bin/activate # Linux/Mac
venv\Scripts\activate # Windows
```
3. Abhängigkeiten installieren:
```bash
pip install -r requirements.txt
```
4. Anwendung starten:
```bash
python app.py
```
### Docker-Container
1. Docker installieren
2. Container mit Docker Compose starten:
```bash
docker-compose up --build
```
Die Anwendung ist dann unter `http://localhost:5001` erreichbar.
## API-Endpunkte
### GET /
- Rendert die Hauptseite
### GET /search
- Sucht nach Kunden basierend auf verschiedenen Parametern
- Parameter:
- `name`: Suche nach Vor- oder Nachname
- `ort`: Suche nach Ort
- `kundennummer`: Suche nach Kundennummer
- `fachrichtung`: Suche nach Fachrichtung
- `q`: Allgemeine Suche über alle Felder
- Returns: JSON-Array mit gefundenen Kunden
#### API-Beispiele
1. Suche nach Namen:
```bash
curl "http://localhost:5001/search?name=Schmidt"
```
2. Suche nach Ort:
```bash
curl "http://localhost:5001/search?ort=Berlin"
```
3. Suche nach Kundennummer:
```bash
curl "http://localhost:5001/search?kundennummer=12345"
```
4. Suche nach Fachrichtung:
```bash
curl "http://localhost:5001/search?fachrichtung=Allgemeinmedizin"
```
5. Kombinierte Suche:
```bash
curl "http://localhost:5001/search?name=Schmidt&ort=Berlin&fachrichtung=Allgemeinmedizin"
```
6. Allgemeine Suche:
```bash
curl "http://localhost:5001/search?q=Schmidt"
```
#### Beispiel-Response
```json
[
{
"Nummer": "12345",
"Vorname": "Max",
"Nachname": "Schmidt",
"Fachrichtung": "Allgemeinmedizin",
"Strasse": "Hauptstraße 1",
"PLZ": "10115",
"Ort": "Berlin",
"Tel": "030-123456",
"mail": "max.schmidt@example.com"
}
]
1. Repository klonen:
```bash
git clone https://gitea.elpatron.me/elpatron/medi-customers.git
cd medi-customers
```
## Frontend-Funktionen
2. Python-Abhängigkeiten installieren:
```bash
pip install -r requirements.txt
```
### Suchfunktion
- Live-Suche mit 300ms Debounce
- Spezifische Suchfelder für präzise Suche
- Allgemeine Suche für breite Suche
- Kombinierbare Suchkriterien
- Trefferzähler für jedes Suchfeld
3. CSV-Datei in das `data`-Verzeichnis kopieren:
```bash
mkdir data
cp spezexpo.csv data/customers.csv
```
### Link-Generierung
- `createPhoneLink()`: Erstellt tel:-Links mit führender 0
- `createEmailLink()`: Erstellt mailto:-Links
- `createAddressLink()`: Erstellt Google Maps-Links
- `createCustomerLink()`: Erstellt KKBefe-System-Links
### Teilen-Funktion
- Individueller Teilen-Button für jedes Suchergebnis
- Kopiert einen direkten Link zum spezifischen Kunden
- Visuelles Feedback beim Kopieren
## Fehlerbehandlung
- Logging für Backend-Fehler
- Benutzerfreundliche Fehlermeldungen im Frontend
- Graceful Degradation bei fehlenden Daten
## Entwicklung
### Debug-Modus
Die Anwendung läuft standardmäßig im Debug-Modus:
4. Anwendung starten:
```bash
python app.py
```
### Logging
- Backend-Logs werden mit Python's logging-Modul erstellt
- Log-Level: DEBUG
- Logs werden in der Konsole ausgegeben
Die Anwendung ist dann unter `http://localhost:5001` erreichbar.
## Wartung
## API-Beispiele
### Container-Verwaltung
Die Such-API unterstützt folgende Parameter:
### Spezifische Suche
```bash
# Container stoppen
docker-compose down
# Nach Name suchen
curl "http://localhost:5001/search?name=Schmidt"
# Container starten
docker-compose up
# Nach Ort suchen
curl "http://localhost:5001/search?ort=Berlin"
# Container im Hintergrund starten
docker-compose up -d
# Nach Kundennummer suchen
curl "http://localhost:5001/search?kundennummer=12345"
# Container-Logs anzeigen
docker-compose logs -f
# Nach Fachrichtung suchen
curl "http://localhost:5001/search?fachrichtung=Allgemeinmedizin"
# Nach Telefonnummer suchen
curl "http://localhost:5001/search?telefon=030"
# Kombinierte Suche
curl "http://localhost:5001/search?name=Schmidt&ort=Berlin&fachrichtung=Allgemeinmedizin"
```
### Datenaktualisierung
1. CSV-Datei aktualisieren
2. Container neu bauen und starten:
```bash
docker-compose down
docker-compose up --build
```
### Allgemeine Suche
```bash
# Suche in allen Feldern
curl "http://localhost:5001/search?q=Schmidt"
```
## Sicherheit
### Beispiel-Response
```json
[
{
"Vorname": "Max",
"Nachname": "Mustermann",
"Nummer": "12345",
"Ort": "Berlin",
"Fachrichtung": "Allgemeinmedizin",
"Tel": "030123456",
"Email": "max@example.com"
}
]
```
- Alle externen Links öffnen sich in neuen Tabs
- Sicherheitsattribute für externe Links (noopener, noreferrer)
- Input-Validierung im Backend
- Fehlerbehandlung für ungültige Daten
## Versionen
## Browser-Kompatibilität
### v1.0.1
- Telefonnummer-Suchfeld hinzugefügt
- Reset-Icons für alle Suchfelder
- Verbesserte Positionierung der UI-Elemente
- Optimierte Suchlogik
- CSV-Datei in data-Verzeichnis verschoben
Die Anwendung wurde getestet mit:
- Chrome (neueste Version)
- Firefox (neueste Version)
- Edge (neueste Version)
- Safari (neueste Version)
### v1.0.0
- Erste Version
- Grundlegende Suchfunktionalität
- Klickbare Links für Telefon, E-Mail und Adressen
- Share-Funktion für Suchergebnisse

27
app.py
View File

@@ -3,18 +3,24 @@ import pandas as pd
import os
import logging
import numpy as np
from datetime import datetime
from datetime import datetime, timedelta
from dotenv import load_dotenv
import requests
from collections import defaultdict
app = Flask(__name__, static_folder='static')
logging.basicConfig(level=logging.DEBUG)
logger = logging.getLogger(__name__)
# Version der Anwendung
VERSION = "1.0.1"
VERSION = "1.0.4"
# Pfad zur CSV-Datei
CSV_FILE = "data/customers.csv"
# Lade Umgebungsvariablen
load_dotenv()
def clean_dataframe(df):
"""Konvertiert NaN-Werte in None für JSON-Kompatibilität"""
return df.replace({np.nan: None})
@@ -27,7 +33,14 @@ def load_data():
logger.error(f"CSV-Datei '{CSV_FILE}' nicht gefunden!")
return None
df = pd.read_csv(CSV_FILE, encoding='utf-8')
# Lade CSV mit Komma als Trennzeichen
df = pd.read_csv(CSV_FILE, sep=',', encoding='utf-8', quotechar='"')
# Entferne Anführungszeichen aus den Spaltennamen
df.columns = df.columns.str.strip('"')
# Entferne Anführungszeichen aus den Werten
for col in df.columns:
if df[col].dtype == 'object':
df[col] = df[col].str.strip('"')
df = clean_dataframe(df)
logger.info(f"CSV-Datei erfolgreich geladen. {len(df)} Einträge gefunden.")
return df
@@ -95,10 +108,14 @@ def search():
results = df[mask].to_dict('records')
logger.info(f"{len(results)} Ergebnisse gefunden")
return jsonify(results)
return jsonify({
'results': results,
'total': len(results)
})
except Exception as e:
logger.error(f"Fehler bei der Suche: {str(e)}")
return jsonify({"error": str(e)}), 500
if __name__ == '__main__':
app.run(debug=True)
app.run(debug=True, port=5001)

View File

@@ -1,4 +1,5 @@
flask==3.0.2
pandas==2.2.1
numpy==1.26.4
python-dotenv==1.0.1
python-dotenv==1.0.1
requests==2.32.3

View File

@@ -139,6 +139,18 @@
margin-left: 4px;
font-size: 1.2em;
}
.weather-info {
display: inline-flex;
align-items: center;
margin-left: 10px;
font-size: 0.9em;
color: #666;
}
.weather-info img {
width: 24px;
height: 24px;
margin-right: 4px;
}
</style>
</head>
<body>
@@ -300,52 +312,52 @@
if (query) params.append('q', query);
fetch(`/search?${params.toString()}`)
.then(response => {
if (!response.ok) {
return response.json().then(data => {
throw new Error(data.error || 'Ein Fehler ist aufgetreten');
});
}
return response.json();
})
.then(response => response.json())
.then(data => {
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
if (data.length === 0) {
resultsDiv.innerHTML = '<div class="alert alert-info">Keine Ergebnisse gefunden.</div>';
lastResults = [];
updateResultCounts();
if (data.error) {
showError(data.error);
return;
}
data.forEach(customer => {
const card = document.createElement('div');
card.className = 'card result-card';
card.innerHTML = `
<div class="card-body">
<h5 class="card-title">
${customer.Vorname} ${customer.Nachname}
<span class="customer-number ms-2">(Kunde: ${createCustomerLink(customer.Nummer)})</span>
</h5>
<p class="card-text">
<strong>Fachrichtung:</strong> ${customer.Fachrichtung || 'N/A'}<br>
<strong>Adresse:</strong> ${createAddressLink(customer.Strasse, customer.PLZ, customer.Ort)}<br>
<strong>Telefon:</strong> ${createPhoneLink(customer.Tel)}<br>
<strong>E-Mail:</strong> ${createEmailLink(customer.mail)}
</p>
<div class="card-actions">
<button class="btn btn-outline-primary share-button" onclick="copyCustomerLink('${customer.Nummer}')">
🔗 Teilen
</button>
const resultsContainer = document.getElementById('results');
resultsContainer.innerHTML = '';
if (data.results && data.results.length > 0) {
data.results.forEach(customer => {
const card = document.createElement('div');
card.className = 'card mb-3';
card.innerHTML = `
<div class="card-body">
<h5 class="card-title">${customer.Vorname} ${customer.Nachname}</h5>
<p class="card-text">
<strong>Kundennummer:</strong> ${customer.Nummer}<br>
<strong>Fachrichtung:</strong> ${customer.Fachrichtung || 'N/A'}<br>
<strong>Adresse:</strong> ${createAddressLink(customer.Strasse, customer.PLZ, customer.Ort)}
${customer.weather ? `
<span class="weather-info">
<img src="http://openweathermap.org/img/wn/${customer.weather.icon}@2x.png"
alt="${customer.weather.description}"
title="${customer.weather.description}">
${customer.weather.temperature}°C
</span>
` : ''}
<br>
<strong>Telefon:</strong> ${createPhoneLink(customer.Tel)}<br>
<strong>E-Mail:</strong> ${createEmailLink(customer.mail)}
</p>
</div>
</div>
`;
resultsDiv.appendChild(card);
});
lastResults = data;
updateResultCounts();
`;
resultsContainer.appendChild(card);
});
// Zeige die Anzahl der Treffer an
const totalResults = document.getElementById('total-results');
if (totalResults) {
totalResults.textContent = `${data.total} Treffer gefunden`;
}
} else {
resultsContainer.innerHTML = '<div class="alert alert-info">Keine Ergebnisse gefunden.</div>';
}
})
.catch(error => {
console.error('Fehler:', error);