ghassan/takeone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed welcome page and the header bar

Browse Source
This commit is contained in:
ghassan committed 2026-01-21 18:14:20 +03:00
1 parent 5cbb26608c
commit 5c9c4aaa2d
8 files changed
+1025 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/clubs/explore.blade.php
+376
View File
@@ -0,0 +1,376 @@
@extends('layouts.app')
@section('content')
<div class="container py-4">
<div class="row mb-4">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center">
<div>
<h1 class="mb-1"><i class="bi bi-compass me-2"></i>Explore</h1>
<p class="text-muted mb-0">Discover what's near you</p>
</div>
<div>
<button id="getLocationBtn" class="btn btn-primary">
<i class="bi bi-geo-alt-fill me-2"></i>Use My Location
</button>
</div>
</div>
</div>
</div>
<!-- Location Status Alert -->
<div id="locationAlert" class="alert alert-info alert-dismissible fade show" role="alert">
<i class="bi bi-info-circle me-2"></i>
<span id="locationMessage">Click "Use My Location" to find clubs near you</span>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Loading Spinner -->
<div id="loadingSpinner" class="text-center py-5" style="display: none;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-3 text-muted">Finding what's near you...</p>
</div>
<div class="row" id="mainContent" style="display: none;">
<!-- Map Column -->
<div class="col-lg-8 mb-4">
<div class="card shadow-sm border-0">
<div class="card-header bg-white border-0 py-3">
<h5 class="mb-0"><i class="bi bi-map me-2"></i>Map View</h5>
</div>
<div class="card-body p-0">
<div id="map" style="height: 600px; width: 100%;"></div>
</div>
</div>
</div>
<!-- Clubs List Column -->
<div class="col-lg-4">
<div class="card shadow-sm border-0 sticky-top" style="top: 20px;">
<div class="card-header bg-white border-0 py-3">
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Nearby</h5>
<span id="clubCount" class="badge bg-primary">0</span>
</div>
</div>
<div class="card-body p-0" style="max-height: 600px; overflow-y: auto;">
<div id="clubsList" class="list-group list-group-flush">
<!-- Clubs will be populated here -->
</div>
<div id="noClubsMessage" class="text-center py-5" style="display: none;">
<i class="bi bi-inbox" style="font-size: 3rem; color: #dee2e6;"></i>
<p class="text-muted mt-3">Nothing found in your area</p>
<p class="text-muted small">Try expanding your search radius</p>
</div>
</div>
</div>
</div>
</div>
</div>
@push('styles')
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
.club-item {
transition: all 0.3s ease;
cursor: pointer;
border-left: 4px solid transparent;
}
.club-item:hover {
background-color: #f8f9fa;
border-left-color: #0d6efd;
}
.club-item.active {
background-color: #e7f1ff;
border-left-color: #0d6efd;
}
.distance-badge {
font-size: 0.875rem;
padding: 0.25rem 0.5rem;
}
.leaflet-popup-content-wrapper {
border-radius: 8px;
}
.leaflet-popup-content {
margin: 15px;
min-width: 200px;
}
.sticky-top {
position: sticky;
z-index: 1020;
}
</style>
@endpush
@push('scripts')
<!-- Leaflet JS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
let map;
let userMarker;
let clubMarkers = [];
let userLocation = null;
// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
// Check if geolocation is supported
if (!navigator.geolocation) {
showAlert('Geolocation is not supported by your browser', 'danger');
document.getElementById('getLocationBtn').disabled = true;
}
// Get location button click handler
document.getElementById('getLocationBtn').addEventListener('click', getUserLocation);
});
// Get user's current location
function getUserLocation() {
const btn = document.getElementById('getLocationBtn');
const originalText = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Getting location...';
showAlert('Requesting your location...', 'info');
document.getElementById('loadingSpinner').style.display = 'block';
navigator.geolocation.getCurrentPosition(
function(position) {
userLocation = {
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
showAlert(`Location found: ${userLocation.latitude.toFixed(4)}, ${userLocation.longitude.toFixed(4)}`, 'success');
// Initialize map
initMap(userLocation.latitude, userLocation.longitude);
// Fetch nearby clubs
fetchNearbyClubs(userLocation.latitude, userLocation.longitude);
btn.innerHTML = '<i class="bi bi-geo-alt-fill me-2"></i>Update Location';
btn.disabled = false;
},
function(error) {
let errorMessage = 'Unable to get your location. ';
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage += 'Please allow location access in your browser settings.';
break;
case error.POSITION_UNAVAILABLE:
errorMessage += 'Location information is unavailable.';
break;
case error.TIMEOUT:
errorMessage += 'Location request timed out.';
break;
default:
errorMessage += 'An unknown error occurred.';
}
showAlert(errorMessage, 'danger');
document.getElementById('loadingSpinner').style.display = 'none';
btn.innerHTML = originalText;
btn.disabled = false;
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}
);
}
// Initialize the map
function initMap(lat, lng) {
// Remove existing map if any
if (map) {
map.remove();
}
// Create map centered on user's location
map = L.map('map').setView([lat, lng], 13);
// Add OpenStreetMap tiles (free!)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
}).addTo(map);
// Add user location marker
userMarker = L.marker([lat, lng], {
icon: L.divIcon({
className: 'user-location-marker',
html: '<div style="background-color: #0d6efd; width: 20px; height: 20px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3);"></div>',
iconSize: [20, 20],
iconAnchor: [10, 10]
})
}).addTo(map);
userMarker.bindPopup('<strong>Your Location</strong>').openPopup();
// Add circle to show search radius
L.circle([lat, lng], {
color: '#0d6efd',
fillColor: '#0d6efd',
fillOpacity: 0.1,
radius: 50000 // 50km radius
}).addTo(map);
document.getElementById('mainContent').style.display = 'block';
document.getElementById('loadingSpinner').style.display = 'none';
}
// Fetch nearby clubs from API
function fetchNearbyClubs(lat, lng) {
fetch(`{{ route('clubs.nearby') }}?latitude=${lat}&longitude=${lng}&radius=50`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
displayClubs(data.clubs);
document.getElementById('clubCount').textContent = data.total;
if (data.total === 0) {
document.getElementById('noClubsMessage').style.display = 'block';
document.getElementById('clubsList').style.display = 'none';
} else {
document.getElementById('noClubsMessage').style.display = 'none';
document.getElementById('clubsList').style.display = 'block';
}
} else {
showAlert('Failed to fetch clubs', 'danger');
}
})
.catch(error => {
console.error('Error:', error);
showAlert('Error fetching clubs. Please try again.', 'danger');
});
}
// Display clubs on map and in list
function displayClubs(clubs) {
// Clear existing club markers
clubMarkers.forEach(marker => map.removeLayer(marker));
clubMarkers = [];
const clubsList = document.getElementById('clubsList');
clubsList.innerHTML = '';
clubs.forEach((club, index) => {
// Add marker to map
const marker = L.marker([club.gps_lat, club.gps_long], {
icon: L.divIcon({
className: 'club-marker',
html: `<div style="background-color: #dc3545; color: white; width: 30px; height: 30px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px;">${index + 1}</div>`,
iconSize: [30, 30],
iconAnchor: [15, 15]
})
}).addTo(map);
marker.bindPopup(`
<div class="text-center">
<h6 class="mb-2">${club.club_name}</h6>
<p class="mb-1 small text-muted"><i class="bi bi-geo-alt"></i> ${club.distance} km away</p>
<p class="mb-1 small"><strong>Owner:</strong> ${club.owner_name}</p>
${club.owner_mobile ? `<p class="mb-1 small"><i class="bi bi-telephone"></i> ${club.owner_mobile}</p>` : ''}
${club.owner_email ? `<p class="mb-0 small"><i class="bi bi-envelope"></i> ${club.owner_email}</p>` : ''}
</div>
`);
clubMarkers.push(marker);
// Add to list
const clubItem = document.createElement('div');
clubItem.className = 'club-item list-group-item list-group-item-action';
clubItem.innerHTML = `
<div class="d-flex justify-content-between align-items-start">
<div class="flex-grow-1">
<div class="d-flex align-items-center mb-2">
<span class="badge bg-danger me-2">${index + 1}</span>
<h6 class="mb-0">${club.club_name}</h6>
</div>
<p class="mb-1 small text-muted">
<i class="bi bi-person-circle me-1"></i>${club.owner_name}
</p>
${club.owner_mobile ? `
<p class="mb-1 small text-muted">
<i class="bi bi-telephone me-1"></i>${club.owner_mobile}
</p>` : ''}
</div>
<div class="text-end">
<span class="badge bg-primary distance-badge">
<i class="bi bi-geo-alt"></i> ${club.distance} km
</span>
</div>
</div>
`;
// Click handler to focus on club marker
clubItem.addEventListener('click', function() {
// Remove active class from all items
document.querySelectorAll('.club-item').forEach(item => {
item.classList.remove('active');
});
// Add active class to clicked item
this.classList.add('active');
// Pan to marker and open popup
map.setView([club.gps_lat, club.gps_long], 15);
marker.openPopup();
});
clubsList.appendChild(clubItem);
});
// Fit map to show all markers
if (clubs.length > 0 && userLocation) {
const bounds = L.latLngBounds([
[userLocation.latitude, userLocation.longitude],
...clubs.map(club => [club.gps_lat, club.gps_long])
]);
map.fitBounds(bounds, { padding: [50, 50] });
}
}
// Show alert message
function showAlert(message, type = 'info') {
const alert = document.getElementById('locationAlert');
const messageSpan = document.getElementById('locationMessage');
alert.className = `alert alert-${type} alert-dismissible fade show`;
messageSpan.textContent = message;
// Auto-dismiss success messages after 5 seconds
if (type === 'success') {
setTimeout(() => {
const bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
}, 5000);
}
}
</script>
@endpush
@endsection
resources/views/family/dashboard.blade.php
+1 -1
View File
@@ -3,7 +3,7 @@
@section('content')
<div class="container py-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="mb-0">My Family</h1>
<h1 class="mb-0">Family</h1>
<div>
<a href="{{ route('invoices.index') }}" class="btn btn-outline-primary">
<i class="bi bi-receipt"></i> All Invoices
resources/views/layouts/app.blade.php
+132 -13
View File
@@ -57,6 +57,73 @@
background-color: #0b5ed7;
border-color: #0a58ca;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
margin-right: 8px;
}
.user-avatar-placeholder {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #0d6efd;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-weight: 600;
}
.dropdown-toggle {
display: flex;
align-items: center;
}
.nav-icon-btn {
position: relative;
padding: 0.5rem;
margin: 0 0.25rem;
border-radius: 50%;
transition: background-color 0.2s;
}
.nav-icon-btn:hover {
background-color: #f8f9fa;
}
.notification-badge {
position: absolute;
top: 0;
right: 0;
background-color: #dc3545;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.notification-dropdown {
min-width: 320px;
max-height: 400px;
overflow-y: auto;
}
.notification-item {
padding: 0.75rem 1rem;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s;
}
.notification-item:hover {
background-color: #f8f9fa;
}
.notification-item:last-child {
border-bottom: none;
}
.notification-item.unread {
background-color: #f0f7ff;
}
</style>
@stack('styles')
@@ -64,7 +131,7 @@
<body>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
<a class="navbar-brand" href="{{ Auth::check() ? route('clubs.explore') : url('/') }}">
<img src="{{ asset('images/logo.png') }}" alt="TAKEONE" height="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
@@ -74,22 +141,60 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
@auth
<li class="nav-item">
<a class="nav-link" href="#">Marketplace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('family.dashboard') }}">My Family</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('invoices.index') }}">Invoices</a>
</li>
@endauth
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@auth
<!-- Explore Button -->
<li class="nav-item">
<a class="nav-link nav-icon-btn" href="{{ route('clubs.explore') }}" title="Explore">
<i class="bi bi-compass" style="font-size: 1.25rem;"></i>
</a>
</li>
<!-- Notifications Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link nav-icon-btn dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Notifications">
<i class="bi bi-bell" style="font-size: 1.25rem;"></i>
<span class="notification-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-end notification-dropdown" aria-labelledby="notificationDropdown">
<h6 class="dropdown-header">Notifications</h6>
<div class="notification-item unread">
<div class="d-flex justify-content-between align-items-start">
<div>
<strong>New Family Member</strong>
<p class="mb-0 small text-muted">John Doe joined your family</p>
</div>
<small class="text-muted">2m</small>
</div>
</div>
<div class="notification-item unread">
<div class="d-flex justify-content-between align-items-start">
<div>
<strong>Invoice Due</strong>
<p class="mb-0 small text-muted">Payment due in 3 days</p>
</div>
<small class="text-muted">1h</small>
</div>
</div>
<div class="notification-item unread">
<div class="d-flex justify-content-between align-items-start">
<div>
<strong>Welcome!</strong>
<p class="mb-0 small text-muted">Thanks for joining TAKEONE</p>
</div>
<small class="text-muted">2d</small>
</div>
</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-center small" href="#">View All Notifications</a>
</div>
</li>
@endauth
@guest
@if (Route::has('login'))
<li class="nav-item">
@@ -105,14 +210,28 @@
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
@if(Auth::user()->profile_picture)
<img src="{{ asset('storage/' . Auth::user()->profile_picture) }}" alt="{{ Auth::user()->full_name }}" class="user-avatar">
@else
<span class="user-avatar-placeholder">
{{ strtoupper(substr(Auth::user()->full_name, 0, 1)) }}
</span>
@endif
{{ Auth::user()->full_name }}
</a>
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('family.dashboard') }}">
<i class="bi bi-people me-2"></i>Family
</a>
<a class="dropdown-item" href="{{ route('invoices.index') }}">
<i class="bi bi-receipt me-2"></i>Invoices
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
<i class="bi bi-box-arrow-right me-2"></i>{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">