initial commit
This commit is contained in:
203
scripts/lead-details.js
Normal file
203
scripts/lead-details.js
Normal file
@@ -0,0 +1,203 @@
|
||||
// lead-details.js
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const leadId = urlParams.get('id');
|
||||
const detailsContainer = document.getElementById('leadDetailsContent');
|
||||
|
||||
function getLeads() {
|
||||
const storedLeads = localStorage.getItem('myLeads');
|
||||
if (storedLeads) {
|
||||
return JSON.parse(storedLeads);
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
const statusClasses = {
|
||||
'neu': 'status-new',
|
||||
'in-bearbeitung': 'status-in-progress',
|
||||
'abgeschlossen': 'status-completed',
|
||||
'storniert': 'status-cancelled'
|
||||
};
|
||||
return statusClasses[status] || 'status-new';
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
if (leadId && detailsContainer) {
|
||||
const leadsData = getLeads();
|
||||
const lead = leadsData.find(l => l.id == leadId);
|
||||
|
||||
if (lead) {
|
||||
detailsContainer.innerHTML = `
|
||||
<div class="lead-details-card">
|
||||
<!-- Status Section -->
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">Status</h2>
|
||||
<div class="status-container">
|
||||
<span class="status-badge ${getStatusClass(lead.status)}">${lead.statusText}</span>
|
||||
<p class="status-info">Letzte Aktualisierung: ${formatDate(lead.datum)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">Kontaktinformationen</h2>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-label">Name</div>
|
||||
<div class="info-value">${lead.name || 'Nicht angegeben'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Organisation</div>
|
||||
<div class="info-value">${lead.organisation || 'Nicht angegeben'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Kontakt</div>
|
||||
<div class="info-value">${lead.contact || 'Nicht angegeben'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Budget</div>
|
||||
<div class="info-value">${lead.budget || 'Nicht angegeben'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Service Information -->
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">Dienstleistung</h2>
|
||||
<div class="service-info">
|
||||
<div class="service-icon">${getServiceIcon(lead.dienstleistung)}</div>
|
||||
<div class="service-details">
|
||||
<h3 class="service-title">${lead.dienstleistung}</h3>
|
||||
<p class="service-description">${getServiceDescription(lead.dienstleistung)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Description -->
|
||||
${lead.description ? `
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">Projektbeschreibung</h2>
|
||||
<div class="description-box">
|
||||
<p class="description-text">${lead.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">Zeitstrahl</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item active">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>Anfrage erhalten</h4>
|
||||
<p>${formatDate(lead.datum)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item ${lead.status !== 'neu' ? 'active' : ''}">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>In Bearbeitung</h4>
|
||||
<p>${lead.status !== 'neu' ? 'Anfrage wird bearbeitet' : 'Ausstehend'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item ${lead.status === 'abgeschlossen' ? 'active' : ''}">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>Abgeschlossen</h4>
|
||||
<p>${lead.status === 'abgeschlossen' ? 'Projekt erfolgreich abgeschlossen' : 'Ausstehend'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="detail-section">
|
||||
<h2 class="section-title">Aktionen</h2>
|
||||
<div class="action-buttons">
|
||||
<button class="action-btn primary" onclick="window.print()">
|
||||
🖨️ Details drucken
|
||||
</button>
|
||||
<button class="action-btn secondary" onclick="shareLead()">
|
||||
📤 Teilen
|
||||
</button>
|
||||
<button class="action-btn secondary" onclick="exportLead()">
|
||||
📄 Exportieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Update page title
|
||||
document.title = `Profice - Anfrage von ${lead.name || 'Unbekannt'}`;
|
||||
} else {
|
||||
detailsContainer.innerHTML = `
|
||||
<div class="error-message">
|
||||
<h2>Anfrage nicht gefunden</h2>
|
||||
<p>Die angeforderte Anfrage konnte nicht gefunden werden.</p>
|
||||
<a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
detailsContainer.innerHTML = `
|
||||
<div class="error-message">
|
||||
<h2>Keine Anfrage-ID angegeben</h2>
|
||||
<p>Bitte navigieren Sie über das Leads Dashboard zu den Details.</p>
|
||||
<a href="leads.html" class="cta-btn secondary">Zum Dashboard</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
function getServiceIcon(service) {
|
||||
const icons = {
|
||||
'Website': '🌐',
|
||||
'KI Integration': '🤖',
|
||||
'Automatisation': '⚙️',
|
||||
'Unabhängige Wahl': '🎯'
|
||||
};
|
||||
return icons[service] || '📋';
|
||||
}
|
||||
|
||||
function getServiceDescription(service) {
|
||||
const descriptions = {
|
||||
'Website': 'Moderne, responsive Webseiten, die konvertieren und Ihre Marke perfekt repräsentieren.',
|
||||
'KI Integration': 'Nutzen Sie die Kraft künstlicher Intelligenz, um Ihre Daten besser zu verstehen und Prozesse zu optimieren.',
|
||||
'Automatisation': 'Sparen Sie Zeit und Ressourcen durch intelligente Workflow-Automatisierungen.',
|
||||
'Unabhängige Wahl': 'Maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen.'
|
||||
};
|
||||
return descriptions[service] || 'Individuelle Dienstleistung.';
|
||||
}
|
||||
|
||||
function shareLead() {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: document.title,
|
||||
text: 'Details meiner Projektanfrage bei Profice',
|
||||
url: window.location.href
|
||||
});
|
||||
} else {
|
||||
// Fallback for browsers that don't support Web Share API
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
alert('Link wurde in die Zwischenablage kopiert!');
|
||||
}
|
||||
}
|
||||
|
||||
function exportLead() {
|
||||
window.print();
|
||||
}
|
||||
Reference in New Issue
Block a user