Skip to content

Dev mountainproject pull #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nmack41 merged 2 commits into from
Mar 8, 2025
Merged

Dev mountainproject pull #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d44ec46
fixed errors in view your climbs
nmack41 Mar 6, 2025
60f65e6
changed recent to all climbs'
nmack41 Mar 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 38 additions & 10 deletions components/ClimbingDashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="dashboard-container">
<div class="header">
<h1><b>Climbing Journey</b></h1>
<h1>Climbing Journey</h1>
<p>
Tracking progress one clip at a time based on Mountain Project ticks
</p>
Expand All @@ -15,6 +15,7 @@
<div class="stat-card">
<h3>Total Sends</h3>
<div class="stat-value">{{ totalSends }}</div>
<div class="stat-note">(Onsight, Flash, Redpoint, Pinkpoint)</div>
</div>
</div>

Expand All @@ -41,11 +42,11 @@
</div>
</div>

<div class="recent-climbs">
<h3>Recent Sport Climbs</h3>
<div class="Climbs">
<h3>Sport Climbs</h3>
<ul class="climb-list">
<li
v-for="(climb, index) in recentClimbs"
v-for="(climb, index) in orderedClimbs"
:key="index"
class="climb-item"
>
Expand All @@ -69,13 +70,14 @@ export default {
totalClimbs: "--",
totalSends: "--",
commonGrade: "--",
recentClimbs: [],
orderedClimbs: [],
gradeData: [],
sendGradeData: [],
showSendsOnly: true,
timeData: {},
gradeChart: null,
timeChart: null,
debugInfo: null,
};
},
mounted() {
Expand All @@ -88,6 +90,8 @@ export default {
const response = await axios.get("/api/tick-export");
const data = response.data;

console.log("Received dashboard data:", data);

// Update data properties based on the API response
this.totalClimbs = data.total_climbs;
this.totalSends = data.total_sends;
Expand All @@ -100,7 +104,7 @@ export default {
? data.grades[0][0]
: "--";

this.recentClimbs = data.recent_climbs;
this.orderedClimbs = data.ordered_climbs;

// Store both all attempts and sends-only grade data
this.gradeData = data.grades || [];
Expand All @@ -112,6 +116,7 @@ export default {
this.createLineChart();
} catch (error) {
console.error("Error loading dashboard data:", error);
this.debugInfo = `Error: ${error.toString()}`;
}
},

Expand All @@ -120,6 +125,11 @@ export default {
},

createBarChart() {
if (!this.$refs.gradeChart) {
console.error("Grade chart reference not found");
return;
}

// Define the exact order of grades you want to show
const GRADE_ORDER = [
"5.6",
Expand Down Expand Up @@ -156,6 +166,10 @@ export default {
? this.sendGradeData
: this.gradeData;

console.log("Grade data being rendered:", this.gradeData);
console.log("Send grades data being rendered:", this.sendGradeData);
console.log("Data used for chart:", dataToUse);

// Convert the array [ [grade, count], ... ] into a lookup object for quick access
const gradeCounts = {};
dataToUse.forEach(([grade, count]) => {
Expand All @@ -169,6 +183,8 @@ export default {
gradeCounts[grade] || 0,
]);

console.log("Final ordered data for chart:", orderedGradeData);

this.gradeChart = new Chart(ctx, {
type: "bar",
data: {
Expand Down Expand Up @@ -198,6 +214,11 @@ export default {
},

createLineChart() {
if (!this.$refs.timeChart) {
console.error("Time chart reference not found");
return;
}

const ctx = this.$refs.timeChart.getContext("2d");

// Destroy any existing chart instance
Expand All @@ -208,7 +229,12 @@ export default {
// Group climbs by year rather than by exact month, build an object like { '2024': totalClimbsIn2024, '2025': totalClimbsIn2025, ... }
const yearCounts = {};
for (const [dateStr, count] of Object.entries(this.timeData)) {
const year = moment(dateStr).format("YYYY");
if (!dateStr) continue;

const year = moment(dateStr).isValid()
? moment(dateStr).format("YYYY")
: "Unknown";

if (!yearCounts[year]) {
yearCounts[year] = 0;
}
Expand All @@ -220,7 +246,9 @@ export default {
a[0].localeCompare(b[0])
);

// 3. Create the line chart with years on the x-axis
console.log("Time data for chart:", sortedYearData);

// Create the line chart with years on the x-axis
this.timeChart = new Chart(ctx, {
type: "line",
data: {
Expand Down Expand Up @@ -338,14 +366,14 @@ export default {
font-size: 14px;
color: #555;
}
.recent-climbs {
.ordered-climbs {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.recent-climbs h3 {
.ordered-climbs h3 {
margin-top: 0;
color: #555;
}
Expand Down
93 changes: 66 additions & 27 deletions components/ClimbingDashboardSelfService.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,14 @@
<button
@click="loadDashboard"
class="load-btn"
:disabled="!userId || !userName"
:disabled="!userId || !userName || loading"
>
Load Dashboard
{{ loading ? "Loading..." : "Load Dashboard" }}
</button>
<div v-if="debugInfo" class="debug-info">
<p>Debug Info:</p>
<pre>{{ debugInfo }}</pre>
</div>
</div>
<div class="example-section">
<p>Need help finding your Mountain Project ID?</p>
Expand Down Expand Up @@ -73,7 +77,7 @@
<div class="stat-card">
<h3>Total Sends</h3>
<div class="stat-value">{{ totalSends }}</div>
<div class="stat-note">(OS, Flash, Redpoint)</div>
<div class="stat-note">(Onsight, Flash, Redpoint, Pinkpoint)</div>
</div>
<div class="stat-card">
<h3>Most Common Grade</h3>
Expand Down Expand Up @@ -140,6 +144,7 @@ export default {
dataLoaded: false,
loading: false,
error: null,
debugInfo: null,

// Climbing data
totalClimbs: "--",
Expand All @@ -165,22 +170,39 @@ export default {

this.loading = true;
this.error = null;
this.debugInfo = null;

try {
// Log request parameters for debugging
console.log(
`Requesting data for userId: ${this.userId}, userName: ${this.userName}`
);

// Fetch data from API endpoint with user parameters
const response = await axios.get("/api/tick-export", {
const response = await axios.get("/api/tick-export-self-service", {
params: {
userId: this.userId,
userName: this.userName,
},
});

// Store raw response for debugging
console.log("Received response:", response);
this.debugInfo = `Status: ${
response.status
}, Data type: ${typeof response.data}`;

const data = response.data;

if (data.error) {
throw new Error(data.details || data.error);
}

// Check if essential data is present
if (!data.total_climbs && data.total_climbs !== 0) {
throw new Error("Invalid data format returned from server");
}

// Update data properties
this.totalClimbs = data.total_climbs;
this.totalSends = data.total_sends;
Expand All @@ -192,7 +214,7 @@ export default {
? data.grades[0][0]
: "--";

this.recentClimbs = data.recent_climbs;
this.recentClimbs = data.recent_climbs || [];
this.gradeData = data.grades || [];
this.sendGradeData = data.send_grades || [];
this.timeData = data.climbs_over_time || {};
Expand All @@ -207,6 +229,7 @@ export default {
} catch (error) {
console.error("Error loading dashboard data:", error);
this.error = `Failed to load climbing data: ${error.message}`;
this.debugInfo = `Error: ${error.toString()}`;
} finally {
this.loading = false;
}
Expand All @@ -218,6 +241,7 @@ export default {
this.userName = "";
this.dataLoaded = false;
this.error = null;
this.debugInfo = null;

// Clean up charts
if (this.gradeChart) {
Expand All @@ -232,10 +256,17 @@ export default {
},

updateGradeChart() {
this.createBarChart();
if (this.dataLoaded) {
this.createBarChart();
}
},

createBarChart() {
if (!this.$refs.gradeChart) {
console.error("Grade chart reference not found");
return;
}

const GRADE_ORDER = [
"5.6",
"5.7",
Expand All @@ -259,6 +290,11 @@ export default {
"5.13d",
];

// Log the data for debugging
console.log("Grade data being rendered:", this.gradeData);
console.log("Send grades data being rendered:", this.sendGradeData);
console.log("Show sends only:", this.showSendsOnly);

const ctx = this.$refs.gradeChart.getContext("2d");

if (this.gradeChart) {
Expand All @@ -270,6 +306,8 @@ export default {
? this.sendGradeData
: this.gradeData;

console.log("Data used for chart:", dataToUse);

// Convert to lookup object
const gradeCounts = {};
dataToUse.forEach(([grade, count]) => {
Expand All @@ -282,6 +320,8 @@ export default {
gradeCounts[grade] || 0,
]);

console.log("Final ordered data for chart:", orderedGradeData);

this.gradeChart = new Chart(ctx, {
type: "bar",
data: {
Expand Down Expand Up @@ -311,6 +351,11 @@ export default {
},

createLineChart() {
if (!this.$refs.timeChart) {
console.error("Time chart reference not found");
return;
}

const ctx = this.$refs.timeChart.getContext("2d");

if (this.timeChart) {
Expand All @@ -320,7 +365,12 @@ export default {
// Group by year
const yearCounts = {};
for (const [dateStr, count] of Object.entries(this.timeData)) {
const year = moment(dateStr).format("YYYY");
if (!dateStr) continue;

const year = moment(dateStr).isValid()
? moment(dateStr).format("YYYY")
: "Unknown";

if (!yearCounts[year]) {
yearCounts[year] = 0;
}
Expand Down Expand Up @@ -417,6 +467,15 @@ export default {
background-color: #aaa;
cursor: not-allowed;
}
.debug-info {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
font-size: 12px;
color: #666;
overflow-x: auto;
}
.example-section {
background-color: #f5f5f5;
border-radius: 8px;
Expand Down Expand Up @@ -561,24 +620,4 @@ export default {
margin-top: 0;
color: #555;
}
.climb-list {
list-style-type: none;
padding: 0;
}
.climb-item {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.climb-name {
font-weight: bold;
}
.climb-details {
color: #777;
font-size: 14px;
}
@media (max-width: 768px) {
.chart-card {
width: 100%;
}
}
</style>
4 changes: 2 additions & 2 deletions pages/view_your_climbs/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
</template>

<script>
import ClimbingDashboard from "@/components/ClimbingDashboardSelfService.vue";
import ClimbingDashboardSelfService from "@/components/ClimbingDashboardSelfService.vue";

export default {
components: {
ClimbingDashboard,
ClimbingDashboardSelfService,
},
};
</script>
Loading
Loading