round 1
This commit is contained in:
@@ -1,687 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { getCachedImageUrl } from '../common/imageCache'
|
||||
|
||||
const props = defineProps<{
|
||||
child: { id: string | number; name: string; age: number; image_id?: string | null } | null
|
||||
}>()
|
||||
const emit = defineEmits(['close', 'updated'])
|
||||
|
||||
const name = ref(props.child?.name ?? '')
|
||||
const age = ref(props.child?.age ?? '')
|
||||
const image = ref<File | null>(null)
|
||||
|
||||
// For image selection
|
||||
const availableImageIds = ref<string[]>([])
|
||||
const availableImageUrls = ref<{ id: string; url: string }[]>([])
|
||||
const loadingImages = ref(false)
|
||||
const selectedImageId = ref<string | null>(props.child?.image_id ?? null)
|
||||
const localImageUrl = ref<string | null>(null)
|
||||
|
||||
// Camera variables
|
||||
const showCamera = ref(false)
|
||||
const cameraStream = ref<MediaStream | null>(null)
|
||||
const cameraVideo = ref<HTMLVideoElement | null>(null)
|
||||
const cameraError = ref<string | null>(null)
|
||||
const capturedImageUrl = ref<string | null>(null)
|
||||
const cameraFile = ref<File | null>(null)
|
||||
|
||||
watch(
|
||||
() => props.child,
|
||||
(c) => {
|
||||
name.value = c?.name ?? ''
|
||||
age.value = c?.age ?? ''
|
||||
image.value = null
|
||||
selectedImageId.value = c?.image_id ?? null
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const selectImage = (id: string) => {
|
||||
selectedImageId.value = id
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
let imageId = selectedImageId.value
|
||||
|
||||
// If the selected image is a local upload, upload it first
|
||||
if (imageId === 'local-upload') {
|
||||
let file: File | null = null
|
||||
|
||||
// Try to get the file from the file input
|
||||
if (fileInput.value && fileInput.value.files && fileInput.value.files.length > 0) {
|
||||
file = fileInput.value.files[0]
|
||||
} else if (cameraFile.value) {
|
||||
file = cameraFile.value
|
||||
}
|
||||
|
||||
if (file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('type', '1')
|
||||
formData.append('permanent', 'false')
|
||||
try {
|
||||
const resp = await fetch('/api/image/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
if (!resp.ok) throw new Error('Image upload failed')
|
||||
const data = await resp.json()
|
||||
imageId = data.id
|
||||
} catch (err) {
|
||||
alert('Failed to upload image.')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
alert('No image file found to upload.')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Now update the child
|
||||
try {
|
||||
const resp = await fetch(`/api/child/${props.child?.id}/edit`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: name.value,
|
||||
age: age.value,
|
||||
image_id: imageId,
|
||||
}),
|
||||
})
|
||||
if (!resp.ok) throw new Error('Failed to update child')
|
||||
emit('updated')
|
||||
} catch (err) {
|
||||
alert('Failed to update child.')
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch available images on mount
|
||||
onMounted(async () => {
|
||||
loadingImages.value = true
|
||||
try {
|
||||
const resp = await fetch('/api/image/list?type=1')
|
||||
if (resp.ok) {
|
||||
const data = await resp.json()
|
||||
let ids = data.ids || []
|
||||
if (props.child?.image_id && ids.includes(props.child.image_id)) {
|
||||
ids = [props.child.image_id, ...ids.filter((id) => id !== props.child.image_id)]
|
||||
} else {
|
||||
// No current image, just use the list as-is
|
||||
ids = [...ids]
|
||||
}
|
||||
availableImageIds.value = ids
|
||||
// Fetch URLs for each image id
|
||||
const urls = await Promise.all(
|
||||
availableImageIds.value.map(async (id: string) => {
|
||||
try {
|
||||
const url = await getCachedImageUrl(id)
|
||||
return { id, url }
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}),
|
||||
)
|
||||
availableImageUrls.value = urls.filter(Boolean) as { id: string; url: string }[]
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load available images', err)
|
||||
} finally {
|
||||
loadingImages.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const addFromLocal = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const onFileChange = (event: Event) => {
|
||||
const files = (event.target as HTMLInputElement).files
|
||||
if (files && files.length > 0) {
|
||||
const file = files[0]
|
||||
// Clean up previous local object URL if any
|
||||
if (localImageUrl.value) {
|
||||
URL.revokeObjectURL(localImageUrl.value)
|
||||
}
|
||||
const url = URL.createObjectURL(file)
|
||||
localImageUrl.value = url
|
||||
|
||||
// Insert at the front of the image lists
|
||||
availableImageUrls.value = [
|
||||
{ id: 'local-upload', url },
|
||||
...availableImageUrls.value.filter((img) => img.id !== 'local-upload'),
|
||||
]
|
||||
availableImageIds.value = [
|
||||
'local-upload',
|
||||
...availableImageIds.value.filter((id) => id !== 'local-upload'),
|
||||
]
|
||||
selectedImageId.value = 'local-upload'
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up local object URL on unmount
|
||||
onBeforeUnmount(() => {
|
||||
if (localImageUrl.value) {
|
||||
URL.revokeObjectURL(localImageUrl.value)
|
||||
}
|
||||
})
|
||||
|
||||
// Open camera modal
|
||||
const addFromCamera = async () => {
|
||||
cameraError.value = null
|
||||
capturedImageUrl.value = null
|
||||
showCamera.value = true
|
||||
await nextTick()
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true })
|
||||
cameraStream.value = stream
|
||||
if (cameraVideo.value) {
|
||||
cameraVideo.value.srcObject = stream
|
||||
await cameraVideo.value.play()
|
||||
}
|
||||
} catch (err) {
|
||||
cameraError.value = 'Unable to access camera'
|
||||
cameraStream.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// Take photo
|
||||
const takePhoto = async () => {
|
||||
if (!cameraVideo.value) return
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = cameraVideo.value.videoWidth
|
||||
canvas.height = cameraVideo.value.videoHeight
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (ctx) {
|
||||
ctx.drawImage(cameraVideo.value, 0, 0, canvas.width, canvas.height)
|
||||
const dataUrl = canvas.toDataURL('image/png')
|
||||
capturedImageUrl.value = dataUrl
|
||||
}
|
||||
}
|
||||
|
||||
// Confirm photo
|
||||
const confirmPhoto = async () => {
|
||||
if (capturedImageUrl.value) {
|
||||
// Clean up previous local object URL if any
|
||||
if (localImageUrl.value) {
|
||||
URL.revokeObjectURL(localImageUrl.value)
|
||||
}
|
||||
|
||||
// Create an image element to load the captured data URL
|
||||
const img = new window.Image()
|
||||
img.src = capturedImageUrl.value
|
||||
|
||||
await new Promise((resolve) => {
|
||||
img.onload = resolve
|
||||
})
|
||||
|
||||
// Calculate new dimensions
|
||||
let { width, height } = img
|
||||
const maxDim = 512
|
||||
if (width > maxDim || height > maxDim) {
|
||||
if (width > height) {
|
||||
height = Math.round((height * maxDim) / width)
|
||||
width = maxDim
|
||||
} else {
|
||||
width = Math.round((width * maxDim) / height)
|
||||
height = maxDim
|
||||
}
|
||||
}
|
||||
|
||||
// Draw to canvas
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx?.drawImage(img, 0, 0, width, height)
|
||||
|
||||
// Convert canvas to blob and object URL
|
||||
const blob: Blob = await new Promise((resolve) =>
|
||||
canvas.toBlob((b) => resolve(b!), 'image/png'),
|
||||
)
|
||||
const url = URL.createObjectURL(blob)
|
||||
localImageUrl.value = url
|
||||
|
||||
// Store the File for upload
|
||||
cameraFile.value = new File([blob], 'camera.png', { type: 'image/png' })
|
||||
|
||||
availableImageUrls.value = [
|
||||
{ id: 'local-upload', url },
|
||||
...availableImageUrls.value.filter((img) => img.id !== 'local-upload'),
|
||||
]
|
||||
availableImageIds.value = [
|
||||
'local-upload',
|
||||
...availableImageIds.value.filter((id) => id !== 'local-upload'),
|
||||
]
|
||||
selectedImageId.value = 'local-upload'
|
||||
}
|
||||
closeCamera()
|
||||
}
|
||||
|
||||
// Retake photo
|
||||
const retakePhoto = async () => {
|
||||
capturedImageUrl.value = null
|
||||
cameraFile.value = null
|
||||
await resumeCameraStream()
|
||||
}
|
||||
|
||||
// Close camera and stop stream
|
||||
const closeCamera = () => {
|
||||
showCamera.value = false
|
||||
capturedImageUrl.value = null
|
||||
if (cameraStream.value) {
|
||||
cameraStream.value.getTracks().forEach((track) => track.stop())
|
||||
cameraStream.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const resumeCameraStream = async () => {
|
||||
await nextTick()
|
||||
if (cameraVideo.value && cameraStream.value) {
|
||||
cameraVideo.value.srcObject = cameraStream.value
|
||||
try {
|
||||
await cameraVideo.value.play()
|
||||
} catch (e) {
|
||||
// ignore play errors
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal-backdrop">
|
||||
<div class="modal">
|
||||
<h3>Edit Child</h3>
|
||||
<form @submit.prevent="submit" class="form">
|
||||
<div class="form-group">
|
||||
<label for="child-name">Name</label>
|
||||
<input id="child-name" v-model="name" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="child-age">Age</label>
|
||||
<input id="child-age" v-model="age" type="number" min="0" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Image</label>
|
||||
</div>
|
||||
<div class="image-scroll">
|
||||
<div v-if="loadingImages" class="loading-images">Loading images...</div>
|
||||
<div v-else class="image-list">
|
||||
<img
|
||||
v-for="img in availableImageUrls"
|
||||
:key="img.id"
|
||||
:src="img.url"
|
||||
class="selectable-image"
|
||||
:class="{ selected: selectedImageId === img.id }"
|
||||
:alt="`Image ${img.id}`"
|
||||
@click="selectImage(img.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hidden file input for local image selection -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept=".png,.jpg,.jpeg,.gif,image/png,image/jpeg,image/gif"
|
||||
style="display: none"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
<div class="image-actions">
|
||||
<button type="button" class="icon-btn" @click="addFromLocal" aria-label="Add from device">
|
||||
<span class="icon">＋</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn"
|
||||
@click="addFromCamera"
|
||||
aria-label="Add from camera"
|
||||
>
|
||||
<span class="icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<rect
|
||||
x="3"
|
||||
y="6"
|
||||
width="14"
|
||||
height="10"
|
||||
rx="2"
|
||||
stroke="#667eea"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<circle cx="10" cy="11" r="3" stroke="#667eea" stroke-width="1.5" />
|
||||
<rect x="7" y="3" width="6" height="3" rx="1" stroke="#667eea" stroke-width="1.5" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn cancel" @click="emit('close')">Cancel</button>
|
||||
<button type="submit" class="btn save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Camera modal -->
|
||||
<div v-if="showCamera" class="modal-backdrop">
|
||||
<div class="modal camera-modal">
|
||||
<h3>Take a Photo</h3>
|
||||
<div v-if="cameraError" class="camera-error">{{ cameraError }}</div>
|
||||
<div v-else>
|
||||
<div v-if="!capturedImageUrl">
|
||||
<video ref="cameraVideo" autoplay playsinline class="camera-video"></video>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn save" @click="takePhoto">Take Photo</button>
|
||||
<button type="button" class="btn cancel" @click="closeCamera">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<img :src="capturedImageUrl" class="captured-preview" alt="Preview" />
|
||||
<div class="actions">
|
||||
<button type="button" class="btn save" @click="confirmPhoto">Use Photo</button>
|
||||
<button type="button" class="btn cancel" @click="retakePhoto">Retake</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
z-index: 1200;
|
||||
overflow-y: auto;
|
||||
padding-top: max(3vh, env(safe-area-inset-top, 24px));
|
||||
padding-bottom: max(3vh, env(safe-area-inset-bottom, 24px));
|
||||
}
|
||||
|
||||
.modal,
|
||||
.camera-modal {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
padding: 1.2rem 2rem 1.2rem 2rem;
|
||||
border-radius: 12px;
|
||||
width: 360px;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* For small screens (portrait or landscape), use 90vw and reduce height */
|
||||
@media (max-width: 600px), (max-height: 480px) {
|
||||
.modal,
|
||||
.camera-modal {
|
||||
width: 90vw;
|
||||
max-width: 98vw;
|
||||
max-height: 94vh;
|
||||
padding: 0.7rem 0.7rem 0.7rem 0.7rem;
|
||||
font-size: 0.97rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* For landscape on larger screens, use 75vw but max 600px */
|
||||
@media (orientation: landscape) and (min-width: 601px) {
|
||||
.modal,
|
||||
.camera-modal {
|
||||
width: 75vw;
|
||||
max-width: 600px;
|
||||
max-height: 94vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* Limit video and preview image height for all screens */
|
||||
.camera-video,
|
||||
.captured-preview {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
max-height: 180px;
|
||||
border-radius: 12px;
|
||||
background: #222;
|
||||
margin-bottom: 1rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.15rem;
|
||||
color: #667eea;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.35rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'] {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5rem 0.7rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e6;
|
||||
font-size: 1rem;
|
||||
background: #fafbff;
|
||||
color: #222;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border: 1.5px solid #667eea;
|
||||
}
|
||||
|
||||
.browse-btn {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.45rem 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
.browse-btn:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
.image-scroll {
|
||||
width: 100%;
|
||||
margin: 0.7rem 0 0.2rem 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
.image-list {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
min-width: min-content;
|
||||
align-items: center;
|
||||
}
|
||||
.selectable-image {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e6e6e6;
|
||||
background: #fafbff;
|
||||
cursor: pointer;
|
||||
transition: border 0.18s;
|
||||
}
|
||||
.selectable-image:hover {
|
||||
border-color: #667eea;
|
||||
}
|
||||
.selectable-image.selected {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px #667eea55;
|
||||
}
|
||||
.loading-images {
|
||||
color: #888;
|
||||
font-size: 0.98rem;
|
||||
padding: 0.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: #f3f3f3;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s;
|
||||
font-size: 1.5rem;
|
||||
color: #667eea;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.07);
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: #e0e7ff;
|
||||
}
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.5rem 1.1rem;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
.btn.cancel {
|
||||
background: #f3f3f3;
|
||||
color: #666;
|
||||
}
|
||||
.btn.save {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
.btn.save:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
/* Camera modal styles */
|
||||
.camera-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1300;
|
||||
width: 380px;
|
||||
max-width: calc(100vw - 32px);
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.camera-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.camera-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.camera-error {
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.camera-video {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
border-radius: 12px;
|
||||
background: #222;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.camera-actions {
|
||||
padding: 0.8rem 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.btn.capture {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
flex: 1;
|
||||
}
|
||||
.btn.capture:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
.btn.confirm {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
flex: 1;
|
||||
}
|
||||
.btn.confirm:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
.captured-preview {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 240px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getCachedImageUrl, revokeAllImageUrls } from '../common/imageCache'
|
||||
import { isParentAuthenticated } from '../stores/auth'
|
||||
import ChildForm from './ChildForm.vue'
|
||||
import ChildForm from './child/ChildForm.vue'
|
||||
|
||||
interface Child {
|
||||
id: string | number
|
||||
432
web/vue-app/src/components/ImagePicker.vue
Normal file
432
web/vue-app/src/components/ImagePicker.vue
Normal file
@@ -0,0 +1,432 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick, defineProps, defineEmits, computed } from 'vue'
|
||||
import { getCachedImageUrl } from '../common/imageCache'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue?: string | null // selected image id or local-upload
|
||||
imageType?: number // 1 or 2, default 1
|
||||
}>()
|
||||
const emit = defineEmits(['update:modelValue', 'add-image'])
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const localImageUrl = ref<string | null>(null)
|
||||
const showCamera = ref(false)
|
||||
const cameraStream = ref<MediaStream | null>(null)
|
||||
const cameraVideo = ref<HTMLVideoElement | null>(null)
|
||||
const cameraError = ref<string | null>(null)
|
||||
const capturedImageUrl = ref<string | null>(null)
|
||||
const cameraFile = ref<File | null>(null)
|
||||
|
||||
const availableImages = ref<{ id: string; url: string }[]>([])
|
||||
const loadingImages = ref(false)
|
||||
|
||||
const typeParam = computed(() => props.imageType ?? 1)
|
||||
|
||||
const selectImage = (id: string | undefined) => {
|
||||
if (!id) {
|
||||
console.warn('selectImage called with null id')
|
||||
return
|
||||
}
|
||||
emit('update:modelValue', id)
|
||||
}
|
||||
|
||||
const addFromLocal = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const onFileChange = (event: Event) => {
|
||||
const files = (event.target as HTMLInputElement).files
|
||||
if (files && files.length > 0) {
|
||||
const file = files[0]
|
||||
if (localImageUrl.value) URL.revokeObjectURL(localImageUrl.value)
|
||||
const url = URL.createObjectURL(file)
|
||||
localImageUrl.value = url
|
||||
const idx = availableImages.value.findIndex((img) => img.id === 'local-upload')
|
||||
if (idx === -1) {
|
||||
availableImages.value.unshift({ id: 'local-upload', url }) // <-- use unshift
|
||||
} else {
|
||||
availableImages.value[idx].url = url
|
||||
}
|
||||
emit('add-image', { id: 'local-upload', url, file })
|
||||
emit('update:modelValue', 'local-upload')
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (localImageUrl.value) URL.revokeObjectURL(localImageUrl.value)
|
||||
})
|
||||
|
||||
const addFromCamera = async () => {
|
||||
cameraError.value = null
|
||||
capturedImageUrl.value = null
|
||||
showCamera.value = true
|
||||
await nextTick()
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true })
|
||||
cameraStream.value = stream
|
||||
if (cameraVideo.value) {
|
||||
cameraVideo.value.srcObject = stream
|
||||
await cameraVideo.value.play()
|
||||
}
|
||||
} catch (err) {
|
||||
cameraError.value = 'Unable to access camera'
|
||||
cameraStream.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const takePhoto = async () => {
|
||||
if (!cameraVideo.value) return
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = cameraVideo.value.videoWidth
|
||||
canvas.height = cameraVideo.value.videoHeight
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (ctx) {
|
||||
ctx.drawImage(cameraVideo.value, 0, 0, canvas.width, canvas.height)
|
||||
const dataUrl = canvas.toDataURL('image/png')
|
||||
capturedImageUrl.value = dataUrl
|
||||
}
|
||||
}
|
||||
|
||||
const confirmPhoto = async () => {
|
||||
if (capturedImageUrl.value) {
|
||||
if (localImageUrl.value) URL.revokeObjectURL(localImageUrl.value)
|
||||
const img = new window.Image()
|
||||
img.src = capturedImageUrl.value
|
||||
await new Promise((resolve) => {
|
||||
img.onload = resolve
|
||||
})
|
||||
let { width, height } = img
|
||||
const maxDim = 512
|
||||
if (width > maxDim || height > maxDim) {
|
||||
if (width > height) {
|
||||
height = Math.round((height * maxDim) / width)
|
||||
width = maxDim
|
||||
} else {
|
||||
width = Math.round((width * maxDim) / height)
|
||||
height = maxDim
|
||||
}
|
||||
}
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx?.drawImage(img, 0, 0, width, height)
|
||||
const blob: Blob = await new Promise((resolve) =>
|
||||
canvas.toBlob((b) => resolve(b!), 'image/png'),
|
||||
)
|
||||
const url = URL.createObjectURL(blob)
|
||||
localImageUrl.value = url
|
||||
cameraFile.value = new File([blob], 'camera.png', { type: 'image/png' })
|
||||
const idx = availableImages.value.findIndex((img) => img.id === 'local-upload')
|
||||
if (idx === -1) {
|
||||
availableImages.value.unshift({ id: 'local-upload', url }) // <-- use unshift
|
||||
} else {
|
||||
availableImages.value[idx].url = url
|
||||
}
|
||||
emit('add-image', { id: 'local-upload', url, file: cameraFile.value })
|
||||
emit('update:modelValue', 'local-upload')
|
||||
}
|
||||
closeCamera()
|
||||
}
|
||||
|
||||
const retakePhoto = async () => {
|
||||
capturedImageUrl.value = null
|
||||
cameraFile.value = null
|
||||
await resumeCameraStream()
|
||||
}
|
||||
|
||||
const closeCamera = () => {
|
||||
showCamera.value = false
|
||||
capturedImageUrl.value = null
|
||||
if (cameraStream.value) {
|
||||
cameraStream.value.getTracks().forEach((track) => track.stop())
|
||||
cameraStream.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const resumeCameraStream = async () => {
|
||||
await nextTick()
|
||||
if (cameraVideo.value && cameraStream.value) {
|
||||
cameraVideo.value.srcObject = cameraStream.value
|
||||
try {
|
||||
await cameraVideo.value.play()
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch images on mount
|
||||
onMounted(async () => {
|
||||
loadingImages.value = true
|
||||
try {
|
||||
const resp = await fetch(`/api/image/list?type=${typeParam.value}`)
|
||||
if (resp.ok) {
|
||||
const data = await resp.json()
|
||||
const ids = data.ids || []
|
||||
// Fetch URLs for each image id using the cache
|
||||
const urls = await Promise.all(
|
||||
ids.map(async (id: string) => {
|
||||
try {
|
||||
const url = await getCachedImageUrl(id)
|
||||
return { id, url }
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}),
|
||||
)
|
||||
const images = urls.filter(Boolean) as { id: string; url: string }[]
|
||||
// Move the selected image to the front if it exists
|
||||
if (props.modelValue) {
|
||||
const idx = images.findIndex((img) => img.id === props.modelValue)
|
||||
if (idx > 0) {
|
||||
const [selected] = images.splice(idx, 1)
|
||||
images.unshift(selected)
|
||||
}
|
||||
}
|
||||
availableImages.value = images
|
||||
}
|
||||
} catch (err) {
|
||||
// Optionally handle error
|
||||
} finally {
|
||||
loadingImages.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="image-scroll">
|
||||
<div v-if="loadingImages" class="loading-images">Loading images...</div>
|
||||
<div v-else class="image-list">
|
||||
<img
|
||||
v-for="img in availableImages"
|
||||
:key="img.id"
|
||||
:src="img.url"
|
||||
class="selectable-image"
|
||||
:class="{ selected: modelValue === img.id }"
|
||||
:alt="`Image ${img.id}`"
|
||||
@click="selectImage(img.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept=".png,.jpg,.jpeg,.gif,image/png,image/jpeg,image/gif"
|
||||
style="display: none"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
<div class="image-actions">
|
||||
<button type="button" class="icon-btn" @click="addFromLocal" aria-label="Add from device">
|
||||
<span class="icon">＋</span>
|
||||
</button>
|
||||
<button type="button" class="icon-btn" @click="addFromCamera" aria-label="Add from camera">
|
||||
<span class="icon">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<rect x="3" y="6" width="14" height="10" rx="2" stroke="#667eea" stroke-width="1.5" />
|
||||
<circle cx="10" cy="11" r="3" stroke="#667eea" stroke-width="1.5" />
|
||||
<rect x="7" y="3" width="6" height="3" rx="1" stroke="#667eea" stroke-width="1.5" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Camera modal -->
|
||||
<div v-if="showCamera" class="modal-backdrop">
|
||||
<div class="modal camera-modal">
|
||||
<h3>Take a Photo</h3>
|
||||
<div v-if="cameraError" class="camera-error">{{ cameraError }}</div>
|
||||
<div v-else>
|
||||
<div v-if="!capturedImageUrl">
|
||||
<video ref="cameraVideo" autoplay playsinline class="camera-video"></video>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn save" @click="takePhoto">Take Photo</button>
|
||||
<button type="button" class="btn cancel" @click="closeCamera">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<img :src="capturedImageUrl" class="captured-preview" alt="Preview" />
|
||||
<div class="actions">
|
||||
<button type="button" class="btn save" @click="confirmPhoto">Use Photo</button>
|
||||
<button type="button" class="btn cancel" @click="retakePhoto">Retake</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.image-scroll {
|
||||
width: 100%;
|
||||
margin: 0.7rem 0 0.2rem 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
.image-list {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
min-width: min-content;
|
||||
align-items: center;
|
||||
}
|
||||
.selectable-image {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e6e6e6;
|
||||
background: #fafbff;
|
||||
cursor: pointer;
|
||||
transition: border 0.18s;
|
||||
}
|
||||
.selectable-image:hover {
|
||||
border-color: #667eea;
|
||||
}
|
||||
.selectable-image.selected {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px #667eea55;
|
||||
}
|
||||
.loading-images {
|
||||
color: #888;
|
||||
font-size: 0.98rem;
|
||||
padding: 0.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: #f3f3f3;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s;
|
||||
font-size: 1.5rem;
|
||||
color: #667eea;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.07);
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: #e0e7ff;
|
||||
}
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Camera modal styles */
|
||||
.camera-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1300;
|
||||
width: 380px;
|
||||
max-width: calc(100vw - 32px);
|
||||
padding-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.camera-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.camera-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.camera-error {
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.camera-video {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
border-radius: 12px;
|
||||
background: #222;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.camera-actions {
|
||||
padding: 0.8rem 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.btn.capture {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
flex: 1;
|
||||
}
|
||||
.btn.capture:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
.btn.confirm {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
flex: 1;
|
||||
}
|
||||
.btn.confirm:hover {
|
||||
background: #218838;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.5rem 1.1rem;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
.btn.cancel {
|
||||
background: #f3f3f3;
|
||||
color: #666;
|
||||
}
|
||||
.btn.save {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
.btn.save:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
.captured-preview {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 240px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -42,13 +42,9 @@ const handleLogout = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-root">
|
||||
<button v-if="!isParentAuthenticated" class="login-btn" @click="open" aria-label="Parent login">
|
||||
Parent
|
||||
</button>
|
||||
<button v-else class="login-btn" @click="handleLogout" aria-label="Parent logout">
|
||||
Log out
|
||||
</button>
|
||||
<div>
|
||||
<button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login">Parent</button>
|
||||
<button v-else @click="handleLogout" aria-label="Parent logout">Log out</button>
|
||||
|
||||
<div v-if="show" class="modal-backdrop" @click.self="close">
|
||||
<div class="modal">
|
||||
@@ -74,22 +70,7 @@ const handleLogout = () => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-root {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
<style>
|
||||
/* modal */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, toRefs, ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { getCachedImageUrl, revokeAllImageUrls } from '../common/imageCache'
|
||||
import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
|
||||
|
||||
interface Child {
|
||||
id: string | number
|
||||
229
web/vue-app/src/components/child/ChildForm.vue
Normal file
229
web/vue-app/src/components/child/ChildForm.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<script setup lang="ts">
|
||||
import { defineProps, defineEmits, ref, watch } from 'vue'
|
||||
import ImagePicker from '../ImagePicker.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
child: { id: string | number; name: string; age: number; image_id?: string | null } | null
|
||||
}>()
|
||||
const emit = defineEmits(['close', 'updated'])
|
||||
|
||||
const name = ref(props.child?.name ?? '')
|
||||
const age = ref(props.child?.age ?? '')
|
||||
const selectedImageId = ref<string | null>(props.child?.image_id ?? null)
|
||||
const localImageFile = ref<File | null>(null)
|
||||
|
||||
watch(
|
||||
() => props.child,
|
||||
(c) => {
|
||||
name.value = c?.name ?? ''
|
||||
age.value = c?.age ?? ''
|
||||
selectedImageId.value = c?.image_id ?? null
|
||||
localImageFile.value = null
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// Handle new image from ImagePicker
|
||||
function onAddImage({ id, file }: { id: string; file: File }) {
|
||||
if (id === 'local-upload') {
|
||||
localImageFile.value = file
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
let imageId = selectedImageId.value
|
||||
|
||||
// If the selected image is a local upload, upload it first
|
||||
if (imageId === 'local-upload' && localImageFile.value) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', localImageFile.value)
|
||||
formData.append('type', '1')
|
||||
formData.append('permanent', 'false')
|
||||
try {
|
||||
const resp = await fetch('/api/image/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
if (!resp.ok) throw new Error('Image upload failed')
|
||||
const data = await resp.json()
|
||||
imageId = data.id
|
||||
} catch (err) {
|
||||
alert('Failed to upload image.')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Now update the child
|
||||
try {
|
||||
const resp = await fetch(`/api/child/${props.child?.id}/edit`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: name.value,
|
||||
age: age.value,
|
||||
image_id: imageId,
|
||||
}),
|
||||
})
|
||||
if (!resp.ok) throw new Error('Failed to update child')
|
||||
emit('updated')
|
||||
} catch (err) {
|
||||
alert('Failed to update child.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal-backdrop">
|
||||
<div class="modal">
|
||||
<h3>Edit Child</h3>
|
||||
<form @submit.prevent="submit" class="form">
|
||||
<div class="form-group">
|
||||
<label for="child-name">Name</label>
|
||||
<input id="child-name" v-model="name" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="child-age">Age</label>
|
||||
<input id="child-age" v-model="age" type="number" min="0" required />
|
||||
</div>
|
||||
<div class="form-group image-picker-group">
|
||||
<label for="child-image">Image</label>
|
||||
<ImagePicker
|
||||
id="child-image"
|
||||
v-model="selectedImageId"
|
||||
:image-type="1"
|
||||
@add-image="onAddImage"
|
||||
/>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn cancel" @click="emit('close')">Cancel</button>
|
||||
<button type="submit" class="btn save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
z-index: 1200;
|
||||
overflow-y: auto;
|
||||
padding-top: max(3vh, env(safe-area-inset-top, 24px));
|
||||
padding-bottom: max(3vh, env(safe-area-inset-bottom, 24px));
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
padding: 1.2rem 2rem 1.2rem 2rem;
|
||||
border-radius: 12px;
|
||||
width: 360px;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 600px), (max-height: 480px) {
|
||||
.modal {
|
||||
width: 90vw;
|
||||
max-width: 98vw;
|
||||
max-height: 94vh;
|
||||
padding: 0.7rem 0.7rem 0.7rem 0.7rem;
|
||||
font-size: 0.97rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (min-width: 601px) {
|
||||
.modal {
|
||||
width: 75vw;
|
||||
max-width: 600px;
|
||||
max-height: 94vh;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 1.15rem;
|
||||
color: #667eea;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.35rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'] {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5rem 0.7rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e6;
|
||||
font-size: 1rem;
|
||||
background: #fafbff;
|
||||
color: #222;
|
||||
transition: border 0.2s;
|
||||
}
|
||||
input:focus {
|
||||
outline: none;
|
||||
border: 1.5px solid #667eea;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.btn {
|
||||
padding: 0.5rem 1.1rem;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
.btn.cancel {
|
||||
background: #f3f3f3;
|
||||
color: #666;
|
||||
}
|
||||
.btn.save {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
.btn.save:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
.form-group.image-picker-group {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useRoute } from 'vue-router'
|
||||
import ChildDetailCard from './ChildDetailCard.vue'
|
||||
import ChildTaskList from './ChildTaskList.vue'
|
||||
import ChildRewardList from './ChildRewardList.vue'
|
||||
import ChildTaskList from '../task/ChildTaskList.vue'
|
||||
import ChildRewardList from '../reward/ChildRewardList.vue'
|
||||
|
||||
interface Child {
|
||||
id: string | number
|
||||
@@ -1,11 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { isParentAuthenticated } from '../stores/auth'
|
||||
import { isParentAuthenticated } from '../../stores/auth'
|
||||
import ChildDetailCard from './ChildDetailCard.vue'
|
||||
import ChildTaskList from './ChildTaskList.vue'
|
||||
import ChildRewardList from './ChildRewardList.vue'
|
||||
import AssignTaskButton from './AssignTaskButton.vue' // <-- Import here
|
||||
import ChildTaskList from '../task/ChildTaskList.vue'
|
||||
import ChildRewardList from '../reward/ChildRewardList.vue'
|
||||
import AssignTaskButton from '../AssignTaskButton.vue'
|
||||
|
||||
interface Child {
|
||||
id: string | number
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
|
||||
import { defineProps, defineEmits, defineExpose } from 'vue'
|
||||
import { getCachedImageUrl, revokeAllImageUrls } from '../common/imageCache'
|
||||
import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
|
||||
|
||||
interface Reward {
|
||||
id: string
|
||||
14
web/vue-app/src/components/reward/RewardView.vue
Normal file
14
web/vue-app/src/components/reward/RewardView.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="reward-view-stub">
|
||||
<h2>Reward View</h2>
|
||||
<p>This is a stub for the Reward View.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.reward-view-stub {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #764ba2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
import { getCachedImageUrl, revokeAllImageUrls } from '../common/imageCache'
|
||||
import { getCachedImageUrl, revokeAllImageUrls } from '../../common/imageCache'
|
||||
|
||||
interface Task {
|
||||
id: string
|
||||
320
web/vue-app/src/components/task/TaskEditView.vue
Normal file
320
web/vue-app/src/components/task/TaskEditView.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, defineEmits, nextTick } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import ImagePicker from '@/components/ImagePicker.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const isEdit = computed(() => !!route.params.id)
|
||||
const emit = defineEmits<{
|
||||
(e: 'updated'): void
|
||||
}>()
|
||||
// Define props
|
||||
const props = defineProps<{
|
||||
id?: string
|
||||
}>()
|
||||
|
||||
const name = ref('')
|
||||
const points = ref(0)
|
||||
const isGood = ref(true)
|
||||
const selectedImageId = ref<string | null>(null)
|
||||
const localImageFile = ref<File | null>(null)
|
||||
|
||||
const nameInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Load task if editing
|
||||
onMounted(async () => {
|
||||
if (isEdit.value) {
|
||||
loading.value = true
|
||||
try {
|
||||
const resp = await fetch(`/api/task/${props.id}`)
|
||||
if (!resp.ok) throw new Error('Failed to load task')
|
||||
const data = await resp.json()
|
||||
name.value = data.name
|
||||
points.value = Number(data.points) || 0
|
||||
isGood.value = data.is_good
|
||||
selectedImageId.value = data.image_id
|
||||
} catch (e) {
|
||||
error.value = 'Could not load task.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
// Delay focus until after DOM updates and event propagation
|
||||
await nextTick()
|
||||
nameInput.value?.focus()
|
||||
}
|
||||
} else {
|
||||
// For create, also use nextTick
|
||||
await nextTick()
|
||||
nameInput.value?.focus()
|
||||
}
|
||||
})
|
||||
|
||||
const submit = async () => {
|
||||
let imageId = selectedImageId.value
|
||||
error.value = null
|
||||
if (!name.value.trim()) {
|
||||
error.value = 'Task name is required.'
|
||||
return
|
||||
}
|
||||
if (points.value < 1) {
|
||||
error.value = 'Points must be at least 1.'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
|
||||
// If the selected image is a local upload, upload it first
|
||||
if (imageId === 'local-upload' && localImageFile.value) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', localImageFile.value)
|
||||
formData.append('type', '2')
|
||||
formData.append('permanent', 'false')
|
||||
try {
|
||||
const resp = await fetch('/api/image/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
if (!resp.ok) throw new Error('Image upload failed')
|
||||
const data = await resp.json()
|
||||
imageId = data.id
|
||||
} catch (err) {
|
||||
alert('Failed to upload image.')
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Now update or create the task
|
||||
try {
|
||||
let resp
|
||||
if (isEdit.value) {
|
||||
resp = await fetch(`/api/task/${props.id}/edit`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: name.value,
|
||||
points: points.value,
|
||||
is_good: isGood.value,
|
||||
image_id: imageId,
|
||||
}),
|
||||
})
|
||||
} else {
|
||||
resp = await fetch('/api/task/add', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: name.value,
|
||||
points: points.value,
|
||||
is_good: isGood.value,
|
||||
image_id: imageId,
|
||||
}),
|
||||
})
|
||||
}
|
||||
if (!resp.ok) throw new Error('Failed to save task')
|
||||
emit('updated')
|
||||
await router.push({ name: 'TaskView' })
|
||||
} catch (err) {
|
||||
alert('Failed to save task.')
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// Handle new image from ImagePicker
|
||||
function onAddImage({ id, file }: { id: string; file: File }) {
|
||||
if (id === 'local-upload') {
|
||||
localImageFile.value = file
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="task-edit-view">
|
||||
<h2>{{ isEdit ? 'Edit Task' : 'Create Task' }}</h2>
|
||||
<div v-if="loading" class="loading-message">Loading task...</div>
|
||||
<form v-else @submit.prevent="submit" class="task-form">
|
||||
<label>
|
||||
Task Name
|
||||
<input ref="nameInput" v-model="name" type="text" required maxlength="64" />
|
||||
</label>
|
||||
<label>
|
||||
Task Points
|
||||
<input v-model.number="points" type="number" min="1" max="100" required />
|
||||
</label>
|
||||
<label>
|
||||
Task Type
|
||||
<div class="good-bad-toggle">
|
||||
<button
|
||||
type="button"
|
||||
:class="['toggle-btn', isGood ? 'good-active' : '']"
|
||||
@click="isGood = true"
|
||||
>
|
||||
Good
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="['toggle-btn', !isGood ? 'bad-active' : '']"
|
||||
@click="isGood = false"
|
||||
>
|
||||
Bad
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<div class="form-group image-picker-group">
|
||||
<ImagePicker
|
||||
id="task-image"
|
||||
v-model="selectedImageId"
|
||||
:image-type="2"
|
||||
@add-image="onAddImage"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<div class="actions">
|
||||
<button type="button" @click="handleCancel" :disabled="loading">Cancel</button>
|
||||
<button type="submit" :disabled="loading">
|
||||
{{ isEdit ? 'Save' : 'Create' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.task-edit-view {
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px #667eea22;
|
||||
padding: 2rem 2.2rem 1.5rem 2.2rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.task-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
.task-form label {
|
||||
display: block;
|
||||
margin-bottom: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #444;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.task-form input[type='text'],
|
||||
.task-form input[type='number'] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.4rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #cbd5e1;
|
||||
font-size: 1rem;
|
||||
background: #f8fafc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button[type='submit'] {
|
||||
background: #667eea;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.4rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
button[type='submit']:hover:not(:disabled) {
|
||||
background: #5a67d8;
|
||||
}
|
||||
|
||||
button[type='button'] {
|
||||
background: #f3f3f3;
|
||||
color: #666;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.4rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.good-bad-toggle {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.1rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
button.toggle-btn {
|
||||
flex: 1 1 0;
|
||||
padding: 0.5rem 1.2rem;
|
||||
border-width: 2px;
|
||||
border-radius: 7px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
background: #f3f3f3;
|
||||
color: #444;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.18s,
|
||||
border-style 0.18s;
|
||||
outline: none;
|
||||
border-style: outset; /* Default style */
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
|
||||
button.toggle-btn.good-active {
|
||||
background: #38c172;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px #38c17233;
|
||||
transform: translateY(2px) scale(0.97);
|
||||
border-style: ridge;
|
||||
border-color: #38c172;
|
||||
}
|
||||
|
||||
button.toggle-btn.bad-active {
|
||||
background: #e53e3e;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px #e53e3e33;
|
||||
transform: translateY(2px) scale(0.97);
|
||||
border-style: ridge;
|
||||
border-color: #e53e3e;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 1.2rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #e53e3e;
|
||||
margin-top: 0.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
.loading-message {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
226
web/vue-app/src/components/task/TaskList.vue
Normal file
226
web/vue-app/src/components/task/TaskList.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, computed } from 'vue'
|
||||
import { getCachedImageUrl } from '../../common/imageCache'
|
||||
const props = defineProps<{
|
||||
childId?: string | number
|
||||
assignable?: boolean
|
||||
deletable?: boolean
|
||||
}>()
|
||||
const emit = defineEmits(['edit-task', 'delete-task'])
|
||||
|
||||
const tasks = ref<
|
||||
{
|
||||
id: string
|
||||
name: string
|
||||
points: number
|
||||
is_good: boolean
|
||||
image_id?: string | null
|
||||
image_url?: string | null
|
||||
}[]
|
||||
>([])
|
||||
const loading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
const fetchTasks = async () => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
let url = ''
|
||||
if (props.childId) {
|
||||
if (props.assignable) {
|
||||
url = `/api/child/${props.childId}/list-assignable-tasks`
|
||||
} else {
|
||||
url = `/api/child/${props.childId}/list-tasks`
|
||||
}
|
||||
} else {
|
||||
url = '/api/task/list'
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(url)
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
const data = await resp.json()
|
||||
const taskList = data.tasks || []
|
||||
// Fetch images for each task if image_id is present
|
||||
await Promise.all(
|
||||
taskList.map(async (task: any) => {
|
||||
if (task.image_id) {
|
||||
try {
|
||||
task.image_url = await getCachedImageUrl(task.image_id)
|
||||
} catch (e) {
|
||||
task.image_url = null
|
||||
}
|
||||
}
|
||||
}),
|
||||
)
|
||||
tasks.value = taskList
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : 'Failed to fetch tasks'
|
||||
tasks.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(fetchTasks)
|
||||
watch(() => [props.childId, props.assignable], fetchTasks)
|
||||
|
||||
const handleEdit = (taskId: string) => {
|
||||
emit('edit-task', taskId)
|
||||
}
|
||||
|
||||
const handleDelete = (taskId: string) => {
|
||||
emit('delete-task', taskId)
|
||||
}
|
||||
|
||||
defineExpose({ refresh: fetchTasks })
|
||||
|
||||
const ITEM_HEIGHT = 52 // px, adjust to match your .task-list-item + margin
|
||||
const listHeight = computed(() => {
|
||||
// Add a little for padding, separators, etc.
|
||||
const n = tasks.value.length
|
||||
return `${Math.min(n * ITEM_HEIGHT + 8, window.innerHeight - 80)}px`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="task-listbox" :style="{ maxHeight: `min(${listHeight}, calc(100vh - 4.5rem))` }">
|
||||
<div v-if="loading" class="loading">Loading tasks...</div>
|
||||
<div v-else-if="error" class="error">{{ error }}</div>
|
||||
<div v-else-if="tasks.length === 0" class="empty">No tasks found.</div>
|
||||
<div v-else>
|
||||
<div v-for="(task, idx) in tasks" :key="task.id">
|
||||
<div
|
||||
class="task-list-item"
|
||||
:class="{ good: task.is_good, bad: !task.is_good }"
|
||||
@click="handleEdit(task.id)"
|
||||
>
|
||||
<img v-if="task.image_url" :src="task.image_url" alt="Task" class="task-image" />
|
||||
<span class="task-name">{{ task.name }}</span>
|
||||
<span class="task-points">
|
||||
{{ task.is_good ? task.points : '-' + task.points }} pts
|
||||
</span>
|
||||
<button
|
||||
v-if="props.deletable"
|
||||
class="delete-btn"
|
||||
@click.stop="handleDelete(task.id)"
|
||||
aria-label="Delete task"
|
||||
type="button"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<circle cx="10" cy="10" r="9" fill="#fff" stroke="#ef4444" stroke-width="2" />
|
||||
<path
|
||||
d="M7 7l6 6M13 7l-6 6"
|
||||
stroke="#ef4444"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="idx < tasks.length - 1" class="task-separator"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.task-listbox {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
/* Subtract any header/nav height if needed, e.g. 4.5rem */
|
||||
max-height: calc(100vh - 4.5rem);
|
||||
overflow-y: auto;
|
||||
margin: 0.2rem 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
background: #fff5;
|
||||
padding: 0.2rem 0.2rem 0.2rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.task-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2px outset #38c172;
|
||||
border-radius: 8px;
|
||||
padding: 0.2rem 1rem;
|
||||
background: #f8fafc;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
transition: border 0.18s;
|
||||
margin-bottom: 0.2rem;
|
||||
margin-left: 0.2rem;
|
||||
margin-right: 0.2rem;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.task-list-item.bad {
|
||||
border-color: #e53e3e;
|
||||
background: #fff5f5;
|
||||
}
|
||||
.task-list-item.good {
|
||||
border-color: #38c172;
|
||||
background: #f0fff4;
|
||||
}
|
||||
.task-image {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
margin-right: 0.7rem;
|
||||
background: #eee;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.task-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.task-points {
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
.loading,
|
||||
.error,
|
||||
.empty {
|
||||
margin: 1.2rem 0;
|
||||
color: #888;
|
||||
}
|
||||
.error {
|
||||
color: #e53e3e;
|
||||
}
|
||||
.task-list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.task-separator {
|
||||
height: 0px;
|
||||
background: #0000;
|
||||
margin: 0rem 0.2rem;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.delete-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
padding: 0.15rem;
|
||||
margin-left: 0.7rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition:
|
||||
background 0.15s,
|
||||
box-shadow 0.15s;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.delete-btn:hover {
|
||||
background: #ffeaea;
|
||||
box-shadow: 0 0 0 2px #ef444422;
|
||||
opacity: 1;
|
||||
}
|
||||
.delete-btn svg {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
148
web/vue-app/src/components/task/TaskView.vue
Normal file
148
web/vue-app/src/components/task/TaskView.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="task-view">
|
||||
<TaskList
|
||||
ref="taskListRef"
|
||||
:deletable="true"
|
||||
@edit-task="(taskId) => $router.push({ name: 'EditTask', params: { id: taskId } })"
|
||||
@delete-task="confirmDeleteTask"
|
||||
/>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<button class="fab" @click="createTask" aria-label="Create Task">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||
<circle cx="14" cy="14" r="14" fill="#667eea" />
|
||||
<path d="M14 8v12M8 14h12" stroke="#fff" stroke-width="2" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div v-if="showConfirm" class="modal-backdrop">
|
||||
<div class="modal">
|
||||
<p>Are you sure you want to delete this task?</p>
|
||||
<div class="actions">
|
||||
<button @click="deleteTask">Yes, Delete</button>
|
||||
<button @click="showConfirm = false">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import TaskList from './TaskList.vue'
|
||||
|
||||
const $router = useRouter()
|
||||
|
||||
const showConfirm = ref(false)
|
||||
const taskToDelete = ref<string | null>(null)
|
||||
const taskListRef = ref()
|
||||
|
||||
function confirmDeleteTask(taskId: string) {
|
||||
taskToDelete.value = taskId
|
||||
showConfirm.value = true
|
||||
}
|
||||
|
||||
const deleteTask = async () => {
|
||||
if (!taskToDelete.value) return
|
||||
try {
|
||||
const resp = await fetch(`/api/task/${taskToDelete.value}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
// Refresh the task list after successful delete
|
||||
taskListRef.value?.refresh()
|
||||
console.log(`Task ${taskToDelete.value} deleted successfully`)
|
||||
} catch (err) {
|
||||
console.error('Failed to delete task:', err)
|
||||
} finally {
|
||||
showConfirm.value = false
|
||||
taskToDelete.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// New function to handle task creation
|
||||
const createTask = () => {
|
||||
// Route to your create task page or open a create dialog
|
||||
// Example:
|
||||
$router.push({ name: 'CreateTask' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1200;
|
||||
}
|
||||
.modal {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 12px;
|
||||
min-width: 240px;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 1.2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.actions button {
|
||||
padding: 0.5rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.actions button:first-child {
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
.actions button:last-child {
|
||||
background: #f3f3f3;
|
||||
color: #666;
|
||||
}
|
||||
.actions button:last-child:hover {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Floating Action Button styles */
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
background: #667eea;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
z-index: 1300;
|
||||
}
|
||||
.fab:hover {
|
||||
background: #5a67d8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user