Erste Version mit spezifischen Suchfeldern und Teilen-Funktion

README.md

@@ -5,16 +5,18 @@ Eine Flask-basierte Webanwendung zur Suche in Kundendaten aus einer CSV-Datei.
 ## Features
 
 - Live-Suche während der Eingabe
-- Suche nach:
+- Spezifische Suchfelder für:
   - Kundennummer
   - Name (Vor- und Nachname)
   - Fachrichtung
   - Ort
+- 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
 
@@ -37,6 +39,7 @@ medi-customers/
 ├── spezexpo.csv       # Kundendaten
 ├── requirements.txt   # Python-Abhängigkeiten
 ├── Dockerfile        # Docker-Konfiguration
+├── docker-compose.yml # Docker Compose Konfiguration
 └── .dockerignore     # Docker-Ignore-Datei
 ```
 
@@ -76,14 +79,11 @@ Die Anwendung erwartet eine CSV-Datei (`spezexpo.csv`) mit folgenden Spalten:
 ### Docker-Container
 
 1. Docker installieren
-2. Container bauen:
+2. Container mit Docker Compose starten:
    ```bash
-   docker build -t medi-customers .
+   docker-compose up --build
-   ```
-3. Container starten:
-   ```bash
-   docker run -d -p 5000:5000 --name medi-customers medi-customers
    ```
+   Die Anwendung ist dann unter `http://localhost:5001` erreichbar.
 
 ## API-Endpunkte
 
@@ -91,16 +91,22 @@ Die Anwendung erwartet eine CSV-Datei (`spezexpo.csv`) mit folgenden Spalten:
 - Rendert die Hauptseite
 
 ### GET /search
-- Sucht nach Kunden basierend auf dem Query-Parameter
+- Sucht nach Kunden basierend auf verschiedenen Parametern
-- Parameter: `q` (Suchbegriff)
+- 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
 
 ## Frontend-Funktionen
 
 ### Suchfunktion
 - Live-Suche mit 300ms Debounce
-- Minimale Suchlänge: 2 Zeichen
+- Spezifische Suchfelder für präzise Suche
-- Suche wird bei Enter-Taste sofort ausgeführt
+- Allgemeine Suche für breite Suche
+- Kombinierbare Suchkriterien
 
 ### Link-Generierung
 - `createPhoneLink()`: Erstellt tel:-Links mit führender 0
@@ -108,6 +114,11 @@ Die Anwendung erwartet eine CSV-Datei (`spezexpo.csv`) mit folgenden Spalten:
 - `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
@@ -132,25 +143,24 @@ python app.py
 ### Container-Verwaltung
 ```bash
 # Container stoppen
-docker stop medi-customers
+docker-compose down
 
 # Container starten
-docker start medi-customers
+docker-compose up
+
+# Container im Hintergrund starten
+docker-compose up -d
 
 # Container-Logs anzeigen
-docker logs medi-customers
+docker-compose logs -f
-
-# Container entfernen
-docker rm medi-customers
 ```
 
 ### Datenaktualisierung
 1. CSV-Datei aktualisieren
 2. Container neu bauen und starten:
    ```bash
-   docker stop medi-customers
+   docker-compose down
-   docker build -t medi-customers .
+   docker-compose up --build
-   docker run -d -p 5000:5000 --name medi-customers medi-customers
    ```
 
 ## Sicherheit

app.py

@@ -1,10 +1,10 @@
-from flask import Flask, render_template, request, jsonify
+from flask import Flask, render_template, request, jsonify, url_for
 import pandas as pd
 import os
 import logging
 import numpy as np
 
-app = Flask(__name__)
+app = Flask(__name__, static_folder='static')
 logging.basicConfig(level=logging.DEBUG)
 logger = logging.getLogger(__name__)
 
@@ -35,21 +35,54 @@ def index():
 @app.route('/search')
 def search():
     try:
+        # Spezifische Suchparameter
+        name = request.args.get('name', '').lower()
+        ort = request.args.get('ort', '').lower()
+        kundennummer = request.args.get('kundennummer', '').lower()
+        fachrichtung = request.args.get('fachrichtung', '').lower()
+        
+        # Allgemeine Suche (für die alte Funktionalität)
         query = request.args.get('q', '').lower()
-        logger.info(f"Suche nach: {query}")
+        
+        logger.info(f"Suche nach - Name: {name}, Ort: {ort}, Kundennummer: {kundennummer}, Fachrichtung: {fachrichtung}, Query: {query}")
         
         df = load_data()
         if df is None:
             return jsonify({"error": "Datenbank konnte nicht geladen werden"}), 500
         
-        # Suche über verschiedene Felder
+        # Basis-Mask (immer True)
-        mask = (
+        mask = pd.Series(True, index=df.index)
+        
+        # Spezifische Suchkriterien anwenden
+        if name:
+            name_mask = (
+                df['Vorname'].str.lower().str.contains(name, na=False) |
+                df['Nachname'].str.lower().str.contains(name, na=False)
+            )
+            mask &= name_mask
+            
+        if ort:
+            ort_mask = df['Ort'].str.lower().str.contains(ort, na=False)
+            mask &= ort_mask
+            
+        if kundennummer:
+            kunden_mask = df['Nummer'].astype(str).str.contains(kundennummer, na=False)
+            mask &= kunden_mask
+            
+        if fachrichtung:
+            fach_mask = df['Fachrichtung'].str.lower().str.contains(fachrichtung, na=False)
+            mask &= fach_mask
+            
+        # Wenn eine allgemeine Suche vorhanden ist, diese zusätzlich anwenden
+        if query:
+            query_mask = (
                 df['Vorname'].str.lower().str.contains(query, na=False) |
                 df['Nachname'].str.lower().str.contains(query, na=False) |
                 df['Fachrichtung'].str.lower().str.contains(query, na=False) |
                 df['Ort'].str.lower().str.contains(query, na=False) |
-            df['Nummer'].astype(str).str.contains(query, na=False)  # Suche nach Kundennummer
+                df['Nummer'].astype(str).str.contains(query, na=False)
             )
+            mask &= query_mask
         
         results = df[mask].to_dict('records')
         logger.info(f"{len(results)} Ergebnisse gefunden")

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3.8'
+
+services:
+  web:
+    build: .
+    ports:
+      - "5001:5000"
+    volumes:
+      - .:/app
+    environment:
+      - FLASK_APP=app.py
+      - FLASK_ENV=development
+      - FLASK_DEBUG=1
+    command: flask run --host=0.0.0.0 

templates/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>medisoftware Kundensuche</title>
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
@@ -60,6 +61,42 @@
             border-top: 1px solid #dee2e6;
             width: 100%;
         }
+        .share-feedback {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: #28a745;
+            color: white;
+            padding: 8px 16px;
+            border-radius: 4px;
+            display: none;
+            animation: fadeOut 2s forwards;
+            z-index: 1000;
+        }
+        @keyframes fadeOut {
+            0% { opacity: 1; }
+            70% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+        .card-actions {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 1rem;
+        }
+        .share-button {
+            padding: 5px 10px;
+            border-radius: 15px;
+            font-size: 0.9em;
+        }
+        .search-fields {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+        .search-field {
+            position: relative;
+        }
     </style>
 </head>
 <body>
@@ -67,9 +104,28 @@
         <div class="container search-container">
             <h1 class="text-center mb-4">medisoftware Kundensuche</h1>
             
+            <div class="search-fields">
+                <div class="search-field">
+                    <input type="text" id="nameInput" class="form-control" 
+                           placeholder="Name...">
+                </div>
+                <div class="search-field">
+                    <input type="text" id="ortInput" class="form-control" 
+                           placeholder="Ort...">
+                </div>
+                <div class="search-field">
+                    <input type="text" id="kundennummerInput" class="form-control" 
+                           placeholder="Kundennummer...">
+                </div>
+                <div class="search-field">
+                    <input type="text" id="fachrichtungInput" class="form-control" 
+                           placeholder="Fachrichtung...">
+                </div>
+            </div>
+
             <div class="input-group mb-4 position-relative">
                 <input type="text" id="searchInput" class="form-control form-control-lg" 
-                       placeholder="Suchen Sie nach Name, Fachrichtung, Ort oder Kundennummer...">
+                       placeholder="Allgemeine Suche...">
                 <span class="search-icon">🔍</span>
             </div>
 
@@ -85,6 +141,10 @@
         </div>
     </div>
 
+    <div id="shareFeedback" class="share-feedback">
+        Link kopiert!
+    </div>
+
     <footer class="footer">
         <p class="mb-0">(c) 2025 <a href="https://medisoftware.de" target="_blank" rel="noopener noreferrer" class="text-decoration-none">medisoftware</a></p>
     </footer>
@@ -94,11 +154,8 @@
 
         function createPhoneLink(phone) {
             if (!phone) return 'N/A';
-            // Entferne alle nicht-numerischen Zeichen für den tel: Link
             const cleaned = phone.replace(/\D/g, '');
-            // Füge immer eine führende 0 hinzu
             const telLink = '0' + cleaned;
-            // Zeige die ursprüngliche Nummer an
             return `<a href="tel:${telLink}" class="phone-link">${phone}</a>`;
         }
 
@@ -126,9 +183,37 @@
                    </a>`;
         }
 
+        function showCopyFeedback() {
+            const feedback = document.getElementById('shareFeedback');
+            feedback.style.display = 'block';
+            feedback.style.opacity = '1';
+            
+            feedback.addEventListener('animationend', () => {
+                feedback.style.display = 'none';
+            }, { once: true });
+        }
+
+        async function copyCustomerLink(customerNumber) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('kundennummer', customerNumber);
+            
+            try {
+                await navigator.clipboard.writeText(url.toString());
+                showCopyFeedback();
+            } catch (err) {
+                console.error('Fehler beim Kopieren:', err);
+            }
+        }
+
         function searchCustomers() {
+            const name = document.getElementById('nameInput').value;
+            const ort = document.getElementById('ortInput').value;
+            const kundennummer = document.getElementById('kundennummerInput').value;
+            const fachrichtung = document.getElementById('fachrichtungInput').value;
             const query = document.getElementById('searchInput').value;
-            if (query.length < 2) {
+
+            // Prüfe, ob mindestens ein Suchfeld ausgefüllt ist
+            if (!name && !ort && !kundennummer && !fachrichtung && !query) {
                 document.getElementById('results').innerHTML = '';
                 return;
             }
@@ -137,7 +222,15 @@
             document.getElementById('loading').style.display = 'block';
             document.getElementById('results').innerHTML = '';
 
-            fetch(`/search?q=${encodeURIComponent(query)}`)
+            // URL-Parameter erstellen
+            const params = new URLSearchParams();
+            if (name) params.append('name', name);
+            if (ort) params.append('ort', ort);
+            if (kundennummer) params.append('kundennummer', kundennummer);
+            if (fachrichtung) params.append('fachrichtung', fachrichtung);
+            if (query) params.append('q', query);
+
+            fetch(`/search?${params.toString()}`)
                 .then(response => {
                     if (!response.ok) {
                         return response.json().then(data => {
@@ -170,6 +263,11 @@
                                     <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>
+                                </div>
                             </div>
                         `;
                         resultsDiv.appendChild(card);
@@ -181,26 +279,42 @@
                         `<div class="alert alert-danger">${error.message}</div>`;
                 })
                 .finally(() => {
-                    // Lade-Animation ausblenden
                     document.getElementById('loading').style.display = 'none';
                 });
         }
 
         // Event-Listener für die Live-Suche
-        document.getElementById('searchInput').addEventListener('input', function(e) {
+        const searchInputs = [
-            // Clear previous timeout
+            document.getElementById('nameInput'),
-            clearTimeout(searchTimeout);
+            document.getElementById('ortInput'),
+            document.getElementById('kundennummerInput'),
+            document.getElementById('fachrichtungInput'),
+            document.getElementById('searchInput')
+        ];
 
-            // Set new timeout
+        searchInputs.forEach(input => {
-            searchTimeout = setTimeout(() => {
+            input.addEventListener('input', function() {
-                searchCustomers();
+                clearTimeout(searchTimeout);
-            }, 300); // 300ms Verzögerung
+                searchTimeout = setTimeout(searchCustomers, 300);
+            });
         });
 
-        // Suche bei Enter-Taste
+        // URL-Parameter beim Laden der Seite prüfen
-        document.getElementById('searchInput').addEventListener('keypress', function(e) {
+        window.addEventListener('load', function() {
-            if (e.key === 'Enter') {
+            const urlParams = new URLSearchParams(window.location.search);
-                clearTimeout(searchTimeout);
+            const name = urlParams.get('name');
+            const ort = urlParams.get('ort');
+            const kundennummer = urlParams.get('kundennummer');
+            const fachrichtung = urlParams.get('fachrichtung');
+            const query = urlParams.get('q');
+
+            if (name) document.getElementById('nameInput').value = name;
+            if (ort) document.getElementById('ortInput').value = ort;
+            if (kundennummer) document.getElementById('kundennummerInput').value = kundennummer;
+            if (fachrichtung) document.getElementById('fachrichtungInput').value = fachrichtung;
+            if (query) document.getElementById('searchInput').value = query;
+
+            if (name || ort || kundennummer || fachrichtung || query) {
                 searchCustomers();
             }
         });