gitmedia/mivita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cocker Setup

Browse source
This commit is contained in:
Kevin Adametz 2025-08-29 14:48:03 +02:00
parent 8fdaa0ba1d
commit 8c11130b5d
191 changed files with 8152 additions and 18186 deletions
Download patch file Download diff file Expand all files Collapse all files

454
resources/views/public/tracking.blade.php Normal file
View file

@ -0,0 +1,454 @@
@extends('web.layouts.layout')
@section('content')
<div class="container">
<!-- Hero Section -->
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="text-center mb-5">
<h1 class="display-4 font-weight-bold text-primary mb-3">
<i class="fas fa-search"></i>
Sendungsverfolgung
</h1>
<p class="lead text-muted">
Verfolgen Sie den Status Ihrer DHL-Sendung in Echtzeit
</p>
</div>
</div>
</div>
<!-- Tracking Form -->
<div class="row justify-content-center mb-5">
<div class="col-lg-6">
<div class="card shadow-lg border-0">
<div class="card-body p-5">
<form id="tracking-form">
<div class="form-group">
<label for="tracking_number" class="font-weight-semibold text-primary">
<i class="fas fa-hashtag"></i>
Tracking-Nummer
</label>
<input type="text"
class="form-control form-control-lg"
id="tracking_number"
name="tracking_number"
placeholder="z.B. 1234567890"
value="{{ request('tracking_number') }}"
required>
<small class="form-text text-muted">
Geben Sie Ihre DHL Tracking-Nummer ein (10-20 Zeichen)
</small>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block" id="track-btn">
<i class="fas fa-search"></i>
Sendung verfolgen
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Tracking Results -->
<div id="tracking-results" style="display: none;">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow border-0">
<div class="card-header bg-primary text-white">
<h4 class="mb-0">
<i class="fas fa-info-circle"></i>
Sendungsinformationen
</h4>
</div>
<div class="card-body">
<div id="tracking-content">
<!-- Dynamic content will be loaded here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Error Message -->
<div id="error-message" class="row justify-content-center" style="display: none;">
<div class="col-lg-6">
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">
<i class="fas fa-exclamation-triangle"></i>
Sendung nicht gefunden
</h4>
<p class="mb-0">
Die eingegebene Tracking-Nummer konnte nicht gefunden werden.
Bitte überprüfen Sie die Nummer und versuchen Sie es erneut.
</p>
</div>
</div>
</div>
<!-- Loading Spinner -->
<div id="loading-spinner" class="row justify-content-center" style="display: none;">
<div class="col-lg-6">
<div class="card border-0">
<div class="card-body text-center py-5">
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
</div>
<p class="mt-3 text-muted">
Tracking-Informationen werden abgerufen...
</p>
</div>
</div>
</div>
</div>
<!-- How to find Tracking Number -->
<div class="row justify-content-center mt-5">
<div class="col-lg-10">
<div class="card bg-light border-0">
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-8">
<h5 class="font-weight-bold text-primary mb-3">
<i class="fas fa-question-circle"></i>
Wo finde ich meine Tracking-Nummer?
</h5>
<ul class="mb-0">
<li>In der Versandbestätigungs-E-Mail</li>
<li>Auf dem Versandlabel oder Paketschein</li>
<li>In Ihrem Kundenkonto unter "Bestellungen"</li>
<li>Als SMS-Benachrichtigung (falls aktiviert)</li>
</ul>
</div>
<div class="col-md-4 text-center">
<i class="fas fa-box fa-4x text-muted"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Support Information -->
<div class="row justify-content-center mt-4 mb-5">
<div class="col-lg-10">
<div class="text-center">
<p class="text-muted">
<strong>Probleme bei der Sendungsverfolgung?</strong><br>
Kontaktieren Sie uns unter
<a href="mailto:support@mivita.care" class="text-primary">support@mivita.care</a>
oder besuchen Sie unsere
<a href="{{ route('contact_create') }}" class="text-primary">Kontaktseite</a>.
</p>
</div>
</div>
</div>
</div>
<!-- Back to Top Button -->
<button type="button" class="btn btn-primary btn-sm" id="back-to-top" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 99;">
<i class="fas fa-arrow-up"></i>
</button>
@endsection
@section('scripts')
<script>
$(document).ready(function() {
// Auto-track if tracking number is provided in URL
if ($('#tracking_number').val()) {
$('#tracking-form').submit();
}
// Form submission
$('#tracking-form').on('submit', function(e) {
e.preventDefault();
var trackingNumber = $('#tracking_number').val().trim();
if (!trackingNumber || trackingNumber.length < 10) {
showError('Bitte geben Sie eine gültige Tracking-Nummer ein (mindestens 10 Zeichen).');
return;
}
// Hide previous results and errors
hideAllResults();
// Show loading spinner
$('#loading-spinner').show();
// Disable form
$('#track-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Wird verfolgt...');
// Perform AJAX request
$.ajax({
url: '{{ route("public.tracking.check") }}',
method: 'POST',
data: {
tracking_number: trackingNumber,
_token: '{{ csrf_token() }}'
},
success: function(response) {
$('#loading-spinner').hide();
resetForm();
if (response.success && response.data) {
showTrackingResult(response.data);
} else {
showError(response.message || 'Sendung nicht gefunden.');
}
},
error: function(xhr) {
$('#loading-spinner').hide();
resetForm();
var errorMessage = 'Fehler beim Abrufen der Tracking-Informationen.';
if (xhr.responseJSON && xhr.responseJSON.message) {
errorMessage = xhr.responseJSON.message;
}
showError(errorMessage);
}
});
});
// Show tracking results
function showTrackingResult(data) {
var statusBadge = getStatusBadge(data.status);
var trackingStatusInfo = data.tracking_status ?
`<p class="mb-2"><strong>DHL Status:</strong> <em>${data.tracking_status}</em></p>` : '';
var lastTrackedInfo = data.last_tracked_at ?
`<p class="mb-2"><strong>Zuletzt aktualisiert:</strong> ${data.last_tracked_at}</p>` : '';
var html = `
<div class="row">
<div class="col-md-6">
<h5 class="text-primary mb-3">
<i class="fas fa-hashtag"></i>
${data.tracking_number}
</h5>
<p class="mb-2"><strong>Status:</strong> ${statusBadge}</p>
${trackingStatusInfo}
${lastTrackedInfo}
</div>
<div class="col-md-6">
<div class="text-center">
<div class="mb-3">
${getStatusIcon(data.status)}
</div>
<p class="text-muted small">
Die Informationen werden regelmäßig aktualisiert.
Für detaillierte Tracking-Informationen besuchen Sie die
<a href="https://www.dhl.de/de/privatkunden/pakete-empfangen/verfolgen.html?lang=de&idc=${data.tracking_number}"
target="_blank" class="text-primary">
DHL Website <i class="fas fa-external-link-alt"></i>
</a>
</p>
</div>
</div>
</div>
`;
$('#tracking-content').html(html);
$('#tracking-results').show();
// Smooth scroll to results
$('html, body').animate({
scrollTop: $('#tracking-results').offset().top - 20
}, 500);
// Update URL without page refresh
if (history.pushState) {
var newUrl = window.location.protocol + "//" + window.location.host +
window.location.pathname + '?tracking_number=' + encodeURIComponent(data.tracking_number);
window.history.pushState({path: newUrl}, '', newUrl);
}
}
// Show error message
function showError(message) {
$('#error-message .alert p').html(message);
$('#error-message').show();
// Smooth scroll to error
$('html, body').animate({
scrollTop: $('#error-message').offset().top - 20
}, 500);
}
// Hide all result sections
function hideAllResults() {
$('#tracking-results, #error-message, #loading-spinner').hide();
}
// Reset form
function resetForm() {
$('#track-btn').prop('disabled', false).html('<i class="fas fa-search"></i> Sendung verfolgen');
}
// Get status badge HTML
function getStatusBadge(status) {
var badgeClass = '';
var text = status;
switch(status) {
case 'pending':
badgeClass = 'badge-warning';
text = 'Wartend';
break;
case 'created':
badgeClass = 'badge-success';
text = 'Erstellt';
break;
case 'shipped':
badgeClass = 'badge-primary';
text = 'Unterwegs';
break;
case 'delivered':
badgeClass = 'badge-info';
text = 'Zugestellt';
break;
case 'cancelled':
badgeClass = 'badge-secondary';
text = 'Storniert';
break;
case 'failed':
badgeClass = 'badge-danger';
text = 'Fehler';
break;
default:
badgeClass = 'badge-light';
}
return `<span class="badge ${badgeClass}">${text}</span>`;
}
// Get status icon
function getStatusIcon(status) {
var iconClass = '';
var color = 'text-muted';
switch(status) {
case 'pending':
iconClass = 'fas fa-clock';
color = 'text-warning';
break;
case 'created':
iconClass = 'fas fa-check-circle';
color = 'text-success';
break;
case 'shipped':
iconClass = 'fas fa-truck';
color = 'text-primary';
break;
case 'delivered':
iconClass = 'fas fa-home';
color = 'text-info';
break;
case 'cancelled':
iconClass = 'fas fa-ban';
color = 'text-secondary';
break;
case 'failed':
iconClass = 'fas fa-exclamation-triangle';
color = 'text-danger';
break;
default:
iconClass = 'fas fa-question-circle';
}
return `<i class="${iconClass} fa-4x ${color}"></i>`;
}
// Input validation
$('#tracking_number').on('input', function() {
var value = $(this).val().trim();
var isValid = value.length >= 10;
if (!isValid && value.length > 0) {
$(this).addClass('is-invalid');
} else {
$(this).removeClass('is-invalid');
}
});
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('html, body').animate({scrollTop: 0}, 600);
return false;
});
// Clear form when clicking on input
$('#tracking_number').focus(function() {
hideAllResults();
});
});
</script>
<style>
/* Custom styles for tracking page */
.border-left-primary {
border-left: 0.25rem solid #007bff !important;
}
.card {
transition: all 0.3s ease-in-out;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
.form-control-lg {
padding: 1rem;
font-size: 1.1rem;
}
.btn-lg {
padding: 0.8rem 2rem;
font-size: 1.1rem;
}
.spinner-border {
animation: spinner-border 1s linear infinite;
}
#back-to-top {
border-radius: 50%;
width: 50px;
height: 50px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
#back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.display-4 {
font-size: 2.5rem;
}
.card-body.p-5 {
padding: 2rem !important;
}
.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
}
</style>
@endsection