@@ -826,6 +1159,10 @@
+
+
+
+
@@ -942,20 +1279,17 @@
// Radar chart variables
let radarChart = null;
- const metricLabels = ['Weight', 'Body Fat', 'BMI', 'Body Water', 'Muscle Mass', 'Bone Mass', 'Visceral Fat', 'BMR', 'Protein', 'Body Age'];
- const metricKeys = ['weight', 'body_fat_percentage', 'bmi', 'body_water_percentage', 'muscle_mass', 'bone_mass', 'visceral_fat', 'bmr', 'protein_percentage', 'body_age'];
+ const metricLabels = ['Height', 'Weight', 'Body Fat', 'BMI', 'Body Water', 'Muscle Mass', 'Bone Mass', 'Visceral Fat', 'BMR', 'Protein', 'Body Age'];
+ const metricKeys = ['height', 'weight', 'body_fat_percentage', 'bmi', 'body_water_percentage', 'muscle_mass', 'bone_mass', 'visceral_fat', 'bmr', 'protein_percentage', 'body_age'];
// Function to create/update radar chart
function updateRadarChart(currentRecord, previousRecord) {
console.log('updateRadarChart called', currentRecord, previousRecord);
const ctx = document.getElementById('radarChart').getContext('2d');
- console.log('ctx', ctx);
+ // Extract data for current and previous records
const currentData = metricKeys.map(key => currentRecord ? (currentRecord[key] || 0) : 0);
const previousData = metricKeys.map(key => previousRecord ? (previousRecord[key] || 0) : 0);
- console.log('currentData', currentData);
- console.log('previousData', previousData);
- console.log('window.Chart', window.Chart);
if (radarChart) {
radarChart.destroy();
@@ -967,30 +1301,36 @@
labels: metricLabels,
datasets: [
{
- label: 'From Record',
- data: previousData,
- borderColor: 'rgba(54, 162, 235, 1)',
+ label: 'Current Reading',
+ data: currentData,
+ fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
- pointBackgroundColor: 'rgba(54, 162, 235, 1)',
+ borderColor: 'rgb(54, 162, 235)',
+ pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
+ pointHoverBorderColor: 'rgb(54, 162, 235)'
},
{
- label: 'To Record',
- data: currentData,
- borderColor: 'rgba(255, 99, 132, 1)',
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
- pointBackgroundColor: 'rgba(255, 99, 132, 1)',
+ label: 'Previous Reading',
+ data: previousData,
+ fill: false,
+ borderColor: 'rgb(255, 99, 132)',
+ pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
- pointHoverBorderColor: 'rgba(255, 99, 132, 1)',
+ pointHoverBorderColor: 'rgb(255, 99, 132)'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
+ elements: {
+ line: {
+ borderWidth: 3
+ }
+ },
plugins: {
legend: {
position: 'top',
@@ -1020,12 +1360,32 @@
});
}
+ // Function to calculate BMI
+ function calculateBMI() {
+ const height = parseFloat(document.getElementById('height').value);
+ const weight = parseFloat(document.getElementById('weight').value);
+ const bmiField = document.getElementById('bmi');
+
+ if (height > 0 && weight > 0) {
+ const heightInMeters = height / 100;
+ const bmi = weight / (heightInMeters * heightInMeters);
+ bmiField.value = bmi.toFixed(1);
+ } else {
+ bmiField.value = '';
+ }
+ }
+
+ // Add event listeners for BMI calculation
+ document.getElementById('height').addEventListener('input', calculateBMI);
+ document.getElementById('weight').addEventListener('input', calculateBMI);
+
// Function to reset modal for adding new record
function resetHealthModal() {
document.getElementById('healthUpdateModalLabel').textContent = 'Add Health Update';
document.getElementById('healthUpdateForm').action = '{{ route("family.store-health", $relationship->dependent->id) }}';
document.getElementById('healthUpdateForm').method = 'POST';
document.getElementById('recorded_at').value = '{{ \Carbon\Carbon::now()->format("Y-m-d") }}';
+ document.getElementById('height').value = '';
document.getElementById('weight').value = '';
document.getElementById('body_fat_percentage').value = '';
document.getElementById('bmi').value = '';
@@ -1059,6 +1419,7 @@
methodInput.value = 'PUT';
document.getElementById('recorded_at').value = record.recorded_at.split('T')[0];
+ document.getElementById('height').value = record.height || '';
document.getElementById('weight').value = record.weight || '';
document.getElementById('body_fat_percentage').value = record.body_fat_percentage || '';
document.getElementById('bmi').value = record.bmi || '';
@@ -1099,6 +1460,7 @@
document.getElementById('timeDifference').innerHTML = `Time between records: ${timeDiff}`;
// Update the table rows
+ updateTableRow('height', currentRecord.height, previousRecord.height);
updateTableRow('weight', currentRecord.weight, previousRecord.weight);
updateTableRow('body_fat', currentRecord.body_fat_percentage, previousRecord.body_fat_percentage);
updateTableRow('bmi', currentRecord.bmi, previousRecord.bmi);
@@ -1138,7 +1500,9 @@
const cells = row.querySelectorAll('td');
if (cells.length >= 4) {
// Update current value
- if (metric === 'weight' || metric === 'muscle_mass' || metric === 'bone_mass') {
+ if (metric === 'height') {
+ cells[1].textContent = currentValue ? `${currentValue}cm` : 'N/A';
+ } else if (metric === 'weight' || metric === 'muscle_mass' || metric === 'bone_mass') {
cells[1].textContent = currentValue ? `${currentValue}kg` : 'N/A';
} else if (metric === 'body_fat' || metric === 'body_water' || metric === 'protein') {
cells[1].textContent = currentValue ? `${currentValue}%` : 'N/A';
@@ -1151,7 +1515,9 @@
}
// Update previous value
- if (metric === 'weight' || metric === 'muscle_mass' || metric === 'bone_mass') {
+ if (metric === 'height') {
+ cells[2].textContent = previousValue ? `${previousValue}cm` : 'N/A';
+ } else if (metric === 'weight' || metric === 'muscle_mass' || metric === 'bone_mass') {
cells[2].textContent = previousValue ? `${previousValue}kg` : 'N/A';
} else if (metric === 'body_fat' || metric === 'body_water' || metric === 'protein') {
cells[2].textContent = previousValue ? `${previousValue}%` : 'N/A';
@@ -1211,6 +1577,214 @@
}
}
}, 1000);
+
+ // Tournament filtering functionality
+ const sportFilter = document.getElementById('sportFilter');
+ const tournamentsTable = document.getElementById('tournamentsTable');
+ const awardCards = document.getElementById('awardCards');
+
+ if (sportFilter && tournamentsTable) {
+ sportFilter.addEventListener('change', function() {
+ const selectedSport = this.value;
+ const rows = tournamentsTable.querySelectorAll('tbody tr');
+
+ let visibleRows = 0;
+ let specialCount = 0, firstCount = 0, secondCount = 0, thirdCount = 0;
+
+ rows.forEach(row => {
+ const sport = row.getAttribute('data-sport');
+ if (selectedSport === 'all' || sport === selectedSport) {
+ row.style.display = '';
+ visibleRows++;
+
+ // Count awards in visible rows
+ const performanceCell = row.querySelector('td:nth-child(2)');
+ if (performanceCell) {
+ const badges = performanceCell.querySelectorAll('.badge');
+ badges.forEach(badge => {
+ if (badge.textContent.includes('Special Award')) specialCount++;
+ else if (badge.textContent.includes('1st Place')) firstCount++;
+ else if (badge.textContent.includes('2nd Place')) secondCount++;
+ else if (badge.textContent.includes('3rd Place')) thirdCount++;
+ });
+ }
+ } else {
+ row.style.display = 'none';
+ }
+ });
+
+ // Update award counts
+ document.getElementById('specialCount').textContent = specialCount;
+ document.getElementById('firstCount').textContent = firstCount;
+ document.getElementById('secondCount').textContent = secondCount;
+ document.getElementById('thirdCount').textContent = thirdCount;
+
+ // Show/hide award cards based on visible rows
+ if (visibleRows === 0) {
+ awardCards.style.display = 'none';
+ } else {
+ awardCards.style.display = '';
+ }
+ });
+ }
+
+ // Goals filtering functionality
+ const goalFilterCards = document.querySelectorAll('.goal-filter-card');
+ const goalsContainer = document.querySelector('.row.g-4'); // Container with goal cards
+ const goalsTitle = document.querySelector('h5.fw-bold'); // The "Goal Tracking" title
+
+ if (goalFilterCards.length > 0 && goalsContainer) {
+ // Add click event to filter cards
+ goalFilterCards.forEach(card => {
+ card.addEventListener('click', function() {
+ const filterType = this.getAttribute('data-filter');
+ filterGoals(filterType);
+
+ // Update card styles to show active filter
+ goalFilterCards.forEach(c => c.classList.remove('border', 'border-primary', 'shadow-lg'));
+ this.classList.add('border', 'border-primary', 'shadow-lg');
+ });
+ });
+
+ // Add click event to title to show all goals
+ if (goalsTitle) {
+ goalsTitle.style.cursor = 'pointer';
+ goalsTitle.addEventListener('click', function() {
+ filterGoals('all');
+ // Remove active styles from filter cards
+ goalFilterCards.forEach(c => c.classList.remove('border', 'border-primary', 'shadow-lg'));
+ });
+ }
+ }
+
+ function filterGoals(filterType) {
+ const goalCards = goalsContainer.querySelectorAll('.col-lg-6');
+
+ goalCards.forEach(card => {
+ const statusBadge = card.querySelector('.badge');
+ if (!statusBadge) return;
+
+ const statusText = statusBadge.textContent.toLowerCase();
+
+ if (filterType === 'all') {
+ card.style.display = '';
+ } else if (filterType === 'active' && statusText === 'active') {
+ card.style.display = '';
+ } else if (filterType === 'completed' && statusText === 'completed') {
+ card.style.display = '';
+ } else {
+ card.style.display = 'none';
+ }
+ });
+
+ // Update title to show current filter
+ const titleElement = document.querySelector('h5.fw-bold');
+ if (titleElement) {
+ const baseTitle = 'Goal Tracking';
+ if (filterType === 'all') {
+ titleElement.innerHTML = `${baseTitle}`;
+ } else {
+ const filterLabel = filterType === 'active' ? 'Active' : 'Completed';
+ titleElement.innerHTML = `${baseTitle} - ${filterLabel} Goals`;
+ }
+ }
+ }
+
+ // Goal editing functionality
+ const editGoalButtons = document.querySelectorAll('.edit-goal-btn');
+ const goalEditModal = new bootstrap.Modal(document.getElementById('goalEditModal'));
+ const goalEditForm = document.getElementById('goalEditForm');
+ let currentGoalId = null;
+
+ // Store goals data for editing
+ const goalsData = @json($goals);
+
+ if (editGoalButtons.length > 0) {
+ editGoalButtons.forEach(button => {
+ button.addEventListener('click', function(e) {
+ e.preventDefault();
+ const goalId = this.getAttribute('data-goal-id');
+ populateGoalEditModal(goalId);
+ goalEditModal.show();
+ });
+ });
+ }
+
+ function populateGoalEditModal(goalId) {
+ const goal = goalsData.find(g => g.id == goalId);
+ if (!goal) return;
+
+ currentGoalId = goalId;
+
+ // Update form action
+ goalEditForm.action = `/family/goal/${goalId}`;
+
+ // Populate modal fields
+ document.getElementById('goalTitleDisplay').textContent = goal.title;
+ document.getElementById('goalDescriptionDisplay').textContent = goal.description || 'No description';
+ document.getElementById('current_progress_value').value = goal.current_progress_value;
+ document.getElementById('goal_status').value = goal.status;
+ document.getElementById('goalUnitDisplay').textContent = goal.unit;
+ document.getElementById('goalTargetDisplay').textContent = `${goal.target_value} ${goal.unit}`;
+
+ // Update icon
+ const iconElement = document.getElementById('goalIconDisplay').querySelector('i');
+ if (goal.icon_type === 'dumbbell') {
+ iconElement.className = 'bi bi-dumbbell text-white';
+ } else if (goal.icon_type === 'clock') {
+ iconElement.className = 'bi bi-clock text-white';
+ } else {
+ iconElement.className = 'bi bi-bullseye text-white';
+ }
+
+ // Update progress preview
+ updateProgressPreview();
+ }
+
+ function updateProgressPreview() {
+ const currentValue = parseFloat(document.getElementById('current_progress_value').value) || 0;
+ const goal = goalsData.find(g => g.id == currentGoalId);
+ if (!goal) return;
+
+ const targetValue = goal.target_value;
+ const percentage = targetValue > 0 ? Math.min(100, (currentValue / targetValue) * 100) : 0;
+
+ document.getElementById('progressPreview').style.width = `${percentage}%`;
+ document.getElementById('progressTextPreview').textContent = `Progress: ${currentValue.toFixed(1)} / ${targetValue.toFixed(1)} ${goal.unit} (${percentage.toFixed(1)}%)`;
+ }
+
+ // Update progress preview on input change
+ document.getElementById('current_progress_value').addEventListener('input', updateProgressPreview);
+
+ // Handle form submission
+ goalEditForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ const formData = new FormData(this);
+ formData.append('_method', 'PUT');
+
+ fetch(this.action, {
+ method: 'POST',
+ body: formData,
+ headers: {
+ 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+ }
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.success) {
+ goalEditModal.hide();
+ // Reload the page to show updated data
+ window.location.reload();
+ } else {
+ alert('Error updating goal: ' + (data.message || 'Unknown error'));
+ }
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ alert('Error updating goal. Please try again.');
+ });
+ });
});
@endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 5957ff3..95ddbc8 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -443,6 +443,9 @@
+
+ @vite(['resources/js/app.js'])
+
@stack('scripts')