164 lines
3.5 KiB
Vue
164 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import ChildDetailCard from './ChildDetailCard.vue'
|
|
import ChildTaskList from '../task/ChildTaskList.vue'
|
|
import ChildRewardList from '../reward/ChildRewardList.vue'
|
|
|
|
interface Child {
|
|
id: string | number
|
|
name: string
|
|
age: number
|
|
points?: number
|
|
}
|
|
|
|
const route = useRoute()
|
|
|
|
const child = ref<Child | null>(null)
|
|
const tasks = ref<string[]>([])
|
|
const loading = ref(true)
|
|
const error = ref<string | null>(null)
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const resp = await fetch(`/api/child/${route.params.id}`)
|
|
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
|
const data = await resp.json()
|
|
child.value = data.children ? data.children : data
|
|
tasks.value = data.tasks || []
|
|
} catch (err) {
|
|
error.value = err instanceof Error ? err.message : 'Failed to fetch child'
|
|
console.error(err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div v-if="loading" class="loading">Loading...</div>
|
|
<div v-else-if="error" class="error">Error: {{ error }}</div>
|
|
|
|
<div v-else class="layout">
|
|
<div class="main">
|
|
<ChildDetailCard :child="child" />
|
|
<ChildTaskList
|
|
:task-ids="tasks"
|
|
:child-id="child ? child.id : null"
|
|
:is-parent-authenticated="false"
|
|
/>
|
|
<ChildRewardList
|
|
:child-id="child ? child.id : null"
|
|
:is-parent-authenticated="false"
|
|
@points-updated="
|
|
({ id, points }) => {
|
|
if (child && child.id === id) child.points = points
|
|
}
|
|
"
|
|
/>
|
|
<!-- removed placeholder -->
|
|
</div>
|
|
<!-- Remove this aside block:
|
|
<aside class="side">
|
|
<div class="placeholder">Additional components go here</div>
|
|
</aside>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
box-sizing: border-box;
|
|
}
|
|
.back-btn {
|
|
background: white;
|
|
border: 0;
|
|
padding: 0.6rem 1rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
margin-bottom: 1.5rem;
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
.loading,
|
|
.error {
|
|
color: white;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.error {
|
|
color: #ff6b6b;
|
|
background: rgba(255, 107, 107, 0.1);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
}
|
|
.layout {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
/* Remove grid styles */
|
|
/* grid-template-columns: 1fr 320px; */
|
|
/* gap: 1.5rem; */
|
|
}
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
max-width: 600px; /* or whatever width fits your content best */
|
|
}
|
|
.side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.placeholder {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: white;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
min-height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 900px) {
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.container {
|
|
padding: 1rem;
|
|
}
|
|
.back-btn {
|
|
padding: 0.45rem 0.75rem;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.main {
|
|
gap: 1rem;
|
|
}
|
|
.placeholder {
|
|
padding: 0.75rem;
|
|
min-height: 80px;
|
|
}
|
|
}
|
|
</style>
|