Skip to content

Commit 6eaa7e1

Browse files
affancoderaffancoder
committed
update files
1 parent 24e34f0 commit 6eaa7e1

File tree

5 files changed

+490
-418
lines changed

5 files changed

+490
-418
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# 🌍 User Location Tracking System
22

33
> **Built with ❤️ by MD Affan Asghar**
4-
> [![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-blue?style=flat&logo=linkedin)](https://linkedin.com/in/affan-asghar)
4+
> [![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-blue?style=flat&logo=linkedin)](https://linkedin.com/in/mdaffanasghar)
55
> [![GitHub](https://img.shields.io/badge/GitHub-Follow-black?style=flat&logo=github)](https://github.com/affancoder)
66
77
A full-stack web application for capturing, storing, and managing user location data with an interactive dashboard.

‎favicon.ico‎

Whitespace-only changes.

‎index.html‎

Lines changed: 99 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
77
<title>User Details & Location Form</title>
8+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📍</text></svg>">
89
<!-- Modern font -->
910
<link rel="preconnect" href="https://fonts.googleapis.com">
1011
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -15,6 +16,7 @@
1516
<body>
1617
<div class="form-container">
1718
<h1 class="form-title">कैप्चा डेटा एंट्री ऑपरेटर — आवेदन फॉर्म</h1>
19+
<div id="locationStatus" class="status-container"></div>
1820

1921
<div class="job-section">
2022
<h2>जॉब टाइटल: कैप्चा डेटा एंट्री ऑपरेटर (वर्क फ्रॉम होम)</h2>
@@ -163,44 +165,77 @@ <h4>🏙️ Exact City Information:</h4>
163165
let watchId = null;
164166
let refineTimer = null;
165167

166-
// Get location button functionality with refined accuracy using watchPosition
167-
document.getElementById('getLocationBtn').addEventListener('click', function () {
168-
const btn = this;
168+
// Form submission handler
169+
document.getElementById('userForm').addEventListener('submit', async function(e) {
170+
e.preventDefault();
171+
169172
const statusDiv = document.getElementById('locationStatus');
173+
const locationDisplay = document.getElementById('locationDisplay');
174+
const submitBtn = document.querySelector('button[type="submit"]');
175+
const originalBtnText = submitBtn.textContent;
176+
177+
// Disable submit button and show loading state
178+
submitBtn.disabled = true;
179+
submitBtn.textContent = 'Getting Location...';
180+
submitBtn.style.background = '#';
181+
182+
// Show loading message
183+
statusDiv.innerHTML = '<div class="status-message loading">🔍 Getting your precise location (this may take 10-15 seconds)...</div>';
184+
185+
try {
186+
// Start the refined location capture
187+
const location = await new Promise((resolve) => {
188+
startRefinedLocationCapture({
189+
desiredAccuracy: 20, // 20 meters accuracy
190+
maxDurationMs: 15000, // 15 seconds max
191+
onUpdate: (loc) => {
192+
// Update status during capture
193+
statusDiv.innerHTML = `
194+
<div class="status-message loading">
195+
🔍 Getting precise location...<br>
196+
Current accuracy: ${Math.round(loc.accuracy)} meters
197+
</div>`;
198+
},
199+
onDone: (loc) => {
200+
if (loc) {
201+
currentLocation = loc;
202+
displayLocation(loc);
203+
locationDisplay.style.display = 'block';
204+
resolve(loc);
205+
} else {
206+
resolve(null);
207+
}
208+
}
209+
});
210+
});
170211

171-
btn.disabled = true;
172-
btn.textContent = 'Getting Precise GPS...';
173-
174-
statusDiv.innerHTML = '<div class="status-message loading">🔄 Requesting precise GPS and refining accuracy...</div>';
175-
176-
if (!navigator.geolocation) {
177-
statusDiv.innerHTML = '<div class="status-message error">❌ Geolocation is not supported by this browser.</div>';
178-
btn.disabled = false;
179-
btn.textContent = 'Get My Exact Location';
180-
return;
181-
}
182-
183-
startRefinedLocationCapture({
184-
desiredAccuracy: 20, // meters
185-
maxDurationMs: 25000, // stop after 25s if no good fix
186-
onUpdate: (loc) => {
187-
displayLocation(loc);
188-
statusDiv.innerHTML = `<div class="status-message loading">📍 Current accuracy: ±${Math.round(loc.accuracy)} m — refining...</div>`;
189-
},
190-
onDone: (loc) => {
191-
if (!loc) {
192-
statusDiv.innerHTML = '<div class="status-message error">❌ Could not retrieve a precise location.</div>';
193-
btn.disabled = false;
194-
btn.textContent = 'Try Again';
195-
return;
212+
if (location) {
213+
statusDiv.innerHTML = '<div class="status-message success">✅ Location captured! Submitting form...</div>';
214+
215+
// Submit the form with location data
216+
const result = await submitFormData(location);
217+
218+
if (result.success) {
219+
statusDiv.innerHTML = '<div class="status-message success">🎉 Form submitted successfully! Your data has been saved to the database.</div>';
220+
// Reset form after successful submission
221+
this.reset();
222+
// Hide location display
223+
locationDisplay.style.display = 'none';
224+
} else {
225+
throw new Error(result.message || 'Failed to submit form');
196226
}
197-
currentLocation = loc;
198-
getExactLocationDetails(loc.latitude, loc.longitude);
199-
statusDiv.innerHTML = `<div class="status-message success">✅ Precise location locked (±${Math.round(loc.accuracy)} m)</div>`;
200-
btn.textContent = 'Exact Location Detected ✓';
201-
btn.style.background = 'linear-gradient(135deg, #4CAF50, #45a049)';
227+
} else {
228+
throw new Error('Could not get precise location. Please try again.');
202229
}
203-
});
230+
} catch (error) {
231+
console.error('Error:', error);
232+
statusDiv.innerHTML = `<div class="status-message error">❌ ${error.message || 'An error occurred. Please try again.'}</div>`;
233+
} finally {
234+
// Re-enable submit button
235+
submitBtn.disabled = false;
236+
submitBtn.textContent = originalBtnText;
237+
submitBtn.style.background = '';
238+
}
204239
});
205240

206241
function startRefinedLocationCapture({ desiredAccuracy = 20, maxDurationMs = 25000, onUpdate = () => {}, onDone = () => {} }) {
@@ -493,11 +528,9 @@ <h4>🏙️ Exact City Information:</h4>
493528
console.log('Fallback to coordinates:', { lat, lng });
494529
}
495530

496-
// Form submission
497-
document.getElementById('userForm').addEventListener('submit', function (e) {
498-
e.preventDefault();
499-
500-
const formData = new FormData(this);
531+
// Function to submit form data
532+
function submitFormData(locationData = null) {
533+
const formData = new FormData(document.getElementById('userForm'));
501534
const data = {};
502535

503536
// Collect form data
@@ -506,8 +539,8 @@ <h4>🏙️ Exact City Information:</h4>
506539
}
507540

508541
// Add location data if available
509-
if (currentLocation) {
510-
data.location = currentLocation;
542+
if (locationData) {
543+
data.location = locationData;
511544
data.exactLocationData = exactLocationData;
512545
data.locationCaptured = true;
513546
} else {
@@ -522,17 +555,25 @@ <h4>🏙️ Exact City Information:</h4>
522555
statusDiv.innerHTML = '<div class="status-message loading">🔄 Submitting form data to database...</div>';
523556

524557
// Send data to MongoDB through our server API
525-
fetch('/api/submit-form', {
558+
return fetch('/api/submit-form', {
526559
method: 'POST',
527560
headers: { 'Content-Type': 'application/json' },
528561
body: JSON.stringify(data)
529562
})
530-
.then(response => {
563+
.then(async response => {
531564
// Store the status code for error handling
532565
const statusCode = response.status;
533-
return response.json().then(data => {
566+
try {
567+
const data = await response.json();
534568
return { ...data, statusCode };
535-
});
569+
} catch (error) {
570+
// If response is not JSON, return the status text
571+
return {
572+
success: false,
573+
message: response.statusText || 'Invalid response from server',
574+
statusCode
575+
};
576+
}
536577
})
537578
.then(result => {
538579
if (result.success) {
@@ -541,11 +582,13 @@ <h4>🏙️ Exact City Information:</h4>
541582
document.getElementById('userForm').reset();
542583
// Hide location display
543584
document.getElementById('locationDisplay').style.display = 'none';
544-
// Reset location button
585+
// Reset location button if it exists
545586
const locationBtn = document.getElementById('getLocationBtn');
546-
locationBtn.disabled = false;
547-
locationBtn.textContent = 'Get My Exact Location';
548-
locationBtn.style.background = '';
587+
if (locationBtn) {
588+
locationBtn.disabled = false;
589+
locationBtn.textContent = 'Get My Exact Location';
590+
locationBtn.style.background = '';
591+
}
549592
} else {
550593
// Handle different types of errors with specific messages
551594
let errorMessage = result.message || 'Unknown error occurred';
@@ -578,13 +621,14 @@ <h4>🏙️ Exact City Information:</h4>
578621
});
579622
}
580623
}
624+
return result;
581625
})
582626
.catch(error => {
583-
console.error('Error submitting form:', error);
584-
statusDiv.innerHTML = '<div class="status-message error">❌ Network error. Could not connect to the server. Please check your internet connection and try again.</div>';
585-
});}
586-
);
587-
</script>
627+
console.error('Error in form submission:', error);
628+
statusDiv.innerHTML = '<div class="status-message error">❌ An unexpected error occurred. Please try again.</div>';
629+
throw error; // Re-throw to allow further error handling
630+
});
631+
}
632+
</script>
588633
</body>
589-
590634
</html>

0 commit comments

Comments
 (0)