page redesigns and init calendar work
This commit is contained in:
Blake Ridgway
677
src/components/WorkoutCalendar.vue
Normal file
677
src/components/WorkoutCalendar.vue
Normal file
@@ -0,0 +1,677 @@
|
||||
<template>
|
||||
<div class="calendar-page">
|
||||
<ModernNavbar />
|
||||
|
||||
<div class="calendar-content">
|
||||
<div class="calendar-header">
|
||||
<h2>Workout Calendar</h2>
|
||||
<div class="header-controls">
|
||||
<button @click="previousMonth" class="btn-nav">← Previous</button>
|
||||
<span class="current-month">{{ monthYear }}</span>
|
||||
<button @click="nextMonth" class="btn-nav">Next →</button>
|
||||
<button @click="showAddWorkout = true" class="btn-primary">+ Add Workout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Workout Modal -->
|
||||
<div v-if="showAddWorkout" class="modal-overlay" @click.self="showAddWorkout = false">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Add Workout</h3>
|
||||
<button @click="showAddWorkout = false" class="btn-close">✕</button>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleAddWorkout" class="workout-form">
|
||||
<div class="form-group">
|
||||
<label>Title *</label>
|
||||
<input v-model="newWorkout.title" type="text" required />
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Date *</label>
|
||||
<input v-model="newWorkout.scheduled_date" type="date" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Type</label>
|
||||
<select v-model="newWorkout.type">
|
||||
<option value="">Select type</option>
|
||||
<option v-for="type in workoutTypes" :key="type.id" :value="type.name">
|
||||
{{ type.icon }} {{ type.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Duration (minutes)</label>
|
||||
<input v-model.number="newWorkout.duration" type="number" step="5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<textarea v-model="newWorkout.description" placeholder="Workout details..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>File Upload (ZWO/FIT/TCX/GPX)</label>
|
||||
<input @change="handleFileUpload" type="file" accept=".zwo,.fit,.tcx,.gpx" />
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" :disabled="loading" class="btn-primary">
|
||||
{{ loading ? 'Adding...' : 'Add Workout' }}
|
||||
</button>
|
||||
<button type="button" @click="showAddWorkout = false" class="btn-secondary">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Calendar Grid -->
|
||||
<div class="calendar-grid">
|
||||
<div class="calendar-header-row">
|
||||
<div class="day-header">Sun</div>
|
||||
<div class="day-header">Mon</div>
|
||||
<div class="day-header">Tue</div>
|
||||
<div class="day-header">Wed</div>
|
||||
<div class="day-header">Thu</div>
|
||||
<div class="day-header">Fri</div>
|
||||
<div class="day-header">Sat</div>
|
||||
</div>
|
||||
|
||||
<div class="calendar-days">
|
||||
<div
|
||||
v-for="day in calendarDays"
|
||||
:key="day.date"
|
||||
class="calendar-day"
|
||||
:class="{ 'other-month': !day.isCurrentMonth, 'today': day.isToday }"
|
||||
>
|
||||
<div class="day-number">{{ day.day }}</div>
|
||||
<div class="day-workouts">
|
||||
<div
|
||||
v-for="workout in day.workouts"
|
||||
:key="workout.id"
|
||||
class="workout-badge"
|
||||
:style="{ backgroundColor: getWorkoutColor(workout.type) }"
|
||||
@click="selectWorkout(workout)"
|
||||
:title="workout.title"
|
||||
>
|
||||
{{ workout.title.substring(0, 10) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workout Details Component -->
|
||||
<WorkoutDetail
|
||||
v-if="selectedWorkout"
|
||||
:workout="selectedWorkout"
|
||||
@close="selectedWorkout = null"
|
||||
@updated="loadWorkouts"
|
||||
@deleted="loadWorkouts"
|
||||
/>
|
||||
|
||||
<!-- Workouts List -->
|
||||
<div class="workouts-list">
|
||||
<h3>Upcoming Workouts</h3>
|
||||
<div v-if="upcomingWorkouts.length > 0" class="workouts">
|
||||
<div v-for="workout in upcomingWorkouts.slice(0, 5)" :key="workout.id" class="workout-item">
|
||||
<div class="workout-item-header">
|
||||
<span class="workout-date">{{ formatDate(workout.scheduled_date) }}</span>
|
||||
<span class="workout-title">{{ workout.title }}</span>
|
||||
<span class="workout-type" v-if="workout.type">{{ workout.type }}</span>
|
||||
</div>
|
||||
<div class="workout-item-footer">
|
||||
<span class="workout-duration">{{ workout.duration }}min</span>
|
||||
<span :class="['workout-status', workout.status]">{{ workout.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-state">
|
||||
No upcoming workouts
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import api from '@/services/api'
|
||||
import ModernNavbar from '@/components/ModernNavbar.vue'
|
||||
import WorkoutDetail from './WorkoutDetail.vue'
|
||||
|
||||
const currentDate = ref(new Date())
|
||||
const workouts = ref([])
|
||||
const selectedWorkout = ref(null)
|
||||
const showAddWorkout = ref(false)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const workoutTypes = ref([])
|
||||
|
||||
const newWorkout = ref({
|
||||
title: '',
|
||||
description: '',
|
||||
type: '',
|
||||
scheduled_date: new Date().toISOString().split('T')[0],
|
||||
duration: 60,
|
||||
})
|
||||
|
||||
const monthYear = computed(() => {
|
||||
return currentDate.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
|
||||
})
|
||||
|
||||
const calendarDays = computed(() => {
|
||||
const year = currentDate.value.getFullYear()
|
||||
const month = currentDate.value.getMonth()
|
||||
|
||||
const firstDay = new Date(year, month, 1)
|
||||
const lastDay = new Date(year, month + 1, 0)
|
||||
const startDate = new Date(firstDay)
|
||||
startDate.setDate(startDate.getDate() - firstDay.getDay())
|
||||
|
||||
const days = []
|
||||
let currentDay = new Date(startDate)
|
||||
|
||||
while (currentDay <= lastDay || currentDay.getDay() !== 0) {
|
||||
const dateStr = currentDay.toISOString().split('T')[0]
|
||||
const dayWorkouts = workouts.value.filter(w =>
|
||||
w.scheduled_date.split('T')[0] === dateStr
|
||||
)
|
||||
|
||||
days.push({
|
||||
date: dateStr,
|
||||
day: currentDay.getDate(),
|
||||
isCurrentMonth: currentDay.getMonth() === month,
|
||||
isToday: isToday(currentDay),
|
||||
workouts: dayWorkouts,
|
||||
})
|
||||
|
||||
currentDay.setDate(currentDay.getDate() + 1)
|
||||
}
|
||||
|
||||
return days
|
||||
})
|
||||
|
||||
const upcomingWorkouts = computed(() => {
|
||||
return workouts.value
|
||||
.filter(w => new Date(w.scheduled_date) >= new Date())
|
||||
.sort((a, b) => new Date(a.scheduled_date) - new Date(b.scheduled_date))
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await loadWorkouts()
|
||||
await loadWorkoutTypes()
|
||||
})
|
||||
|
||||
async function loadWorkouts() {
|
||||
try {
|
||||
const { data } = await api.get('/api/protected/workouts')
|
||||
workouts.value = data || []
|
||||
} catch (err) {
|
||||
console.error('Failed to load workouts:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadWorkoutTypes() {
|
||||
try {
|
||||
const { data } = await api.get('/api/protected/workout-types')
|
||||
workoutTypes.value = data || []
|
||||
} catch (err) {
|
||||
console.error('Failed to load workout types:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddWorkout() {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const { data } = await api.post('/api/protected/workouts', {
|
||||
title: newWorkout.value.title,
|
||||
description: newWorkout.value.description,
|
||||
type: newWorkout.value.type,
|
||||
scheduled_date: newWorkout.value.scheduled_date,
|
||||
duration: newWorkout.value.duration,
|
||||
})
|
||||
|
||||
workouts.value.push(data)
|
||||
showAddWorkout.value = false
|
||||
newWorkout.value = {
|
||||
title: '',
|
||||
description: '',
|
||||
type: '',
|
||||
scheduled_date: new Date().toISOString().split('T')[0],
|
||||
duration: 60,
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err.response?.data?.error || 'Failed to add workout'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileUpload(event) {
|
||||
const file = event.target.files[0]
|
||||
if (file) {
|
||||
newWorkout.value.file_name = file.name
|
||||
newWorkout.value.file_type = file.name.split('.').pop().toLowerCase()
|
||||
}
|
||||
}
|
||||
|
||||
function previousMonth() {
|
||||
currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1)
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1)
|
||||
}
|
||||
|
||||
function selectWorkout(workout) {
|
||||
selectedWorkout.value = workout
|
||||
}
|
||||
|
||||
function isToday(date) {
|
||||
const today = new Date()
|
||||
return date.getDate() === today.getDate() &&
|
||||
date.getMonth() === today.getMonth() &&
|
||||
date.getFullYear() === today.getFullYear()
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
return new Date(dateStr).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
function getWorkoutColor(type) {
|
||||
const typeObj = workoutTypes.value.find(t => t.name === type)
|
||||
return typeObj?.color || '#667eea'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.calendar-content {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.calendar-header h2 {
|
||||
margin: 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.current-month {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
min-width: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #ecf0f1;
|
||||
color: #2c3e50;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-nav:hover {
|
||||
background: #bdc3c7;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.workout-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #bdc3c7;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
background: #95a5a6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #7f8c8d;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: #fee;
|
||||
color: #c33;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.calendar-header-row,
|
||||
.calendar-days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 1px;
|
||||
background: #ecf0f1;
|
||||
}
|
||||
|
||||
.day-header {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
min-height: 120px;
|
||||
border: 1px solid #ecf0f1;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.calendar-day:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.calendar-day.other-month {
|
||||
background: #fafafa;
|
||||
color: #bdc3c7;
|
||||
}
|
||||
|
||||
.calendar-day.today {
|
||||
background: #f0f4ff;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.day-workouts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.workout-badge {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.workout-badge:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.workouts-list {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.workouts-list h3 {
|
||||
margin-top: 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.workouts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.workout-item {
|
||||
padding: 1rem;
|
||||
border-left: 4px solid #667eea;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.workout-item:hover {
|
||||
background: #f0f4ff;
|
||||
}
|
||||
|
||||
.workout-item-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.workout-date {
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.workout-title {
|
||||
flex: 1;
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.workout-type {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.workout-item-footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.workout-duration {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.workout-status {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.workout-status.planned {
|
||||
background: #FBBC04;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.workout-status.completed {
|
||||
background: #34A853;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.workout-status.skipped {
|
||||
background: #EA4335;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.calendar-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user