UI updates/backend/pipeline
This commit is contained in:
209
Seasoned.Frontend/app/pages/uploader.vue
Normal file
209
Seasoned.Frontend/app/pages/uploader.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card class="recipe-card pa-10 mx-auto mt-10" max-width="950" elevation="1">
|
||||
<header class="text-center mb-10">
|
||||
<v-img
|
||||
src="/images/seasoned-logo.png"
|
||||
width="180"
|
||||
class="mx-auto"
|
||||
contain
|
||||
>
|
||||
</v-img>
|
||||
<p class="brand-subtitle">Recipe Uploader</p>
|
||||
</header>
|
||||
|
||||
<v-divider class="mb-10 separator"></v-divider>
|
||||
|
||||
<v-row justify="center" class="mb-12">
|
||||
<v-col cols="12" md="8" class="d-flex flex-column align-center">
|
||||
<div
|
||||
class="drop-zone mb-4"
|
||||
:class="{ 'drop-zone--active': isDragging }"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="handleDrop"
|
||||
@click="$refs.fileInput.click()"
|
||||
>
|
||||
<v-icon icon="mdi-cloud-upload-outline" size="large" class="mb-2" color="#5d4a36"></v-icon>
|
||||
<p v-if="!files || files.length === 0" class="drop-text">
|
||||
Drag your recipe photo here or <strong>click to browse</strong>
|
||||
</p>
|
||||
<p v-else class="drop-text selected-text">
|
||||
{{ Array.isArray(files) ? files[0]?.name : files?.name }}
|
||||
</p>
|
||||
|
||||
<v-file-input
|
||||
ref="fileInput"
|
||||
v-model="files"
|
||||
accept="image/*"
|
||||
class="d-none"
|
||||
hide-details
|
||||
></v-file-input>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-flex w-100 mt-4">
|
||||
<v-btn class="analyze-btn flex-grow-1 mr-2" size="large" :loading="loading" :disabled="!files" @click="uploadImage">
|
||||
<v-icon icon="mdi-pot-steam" class="mr-2"></v-icon>Analyze Recipe
|
||||
</v-btn>
|
||||
<v-btn class="clear-btn-solid" size="large" @click="clearAll"><v-icon icon="mdi-refresh"></v-icon></v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<RecipeDisplay
|
||||
:recipe="recipe"
|
||||
:is-saving="saving"
|
||||
:has-saved="hasSaved"
|
||||
@save="saveToCollection"
|
||||
/>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import '@/assets/css/app-theme.css'
|
||||
|
||||
const router = useRouter()
|
||||
const config = useRuntimeConfig()
|
||||
const files = ref(null)
|
||||
const loading = ref(false)
|
||||
const recipe = ref(null)
|
||||
const isDragging = ref(false)
|
||||
const saving = ref(false)
|
||||
const hasSaved = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
const savedRecipe = localStorage.getItem('pending_recipe')
|
||||
if (savedRecipe) {
|
||||
recipe.value = JSON.parse(savedRecipe)
|
||||
localStorage.removeItem('pending_recipe')
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message: 'Restored your analyzed recipe.',
|
||||
color: '#f4ede1',
|
||||
icon: 'mdi-history',
|
||||
iconColor: '#556b2f',
|
||||
textColor: '#5d4037'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const isAuthenticated = async () => {
|
||||
try {
|
||||
await $fetch('/api/auth/manage/info', { credentials: 'include' })
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const handleDrop = (e) => {
|
||||
isDragging.value = false
|
||||
const droppedFiles = e.dataTransfer.files
|
||||
if (droppedFiles.length > 0) {
|
||||
files.value = [droppedFiles[0]]
|
||||
}
|
||||
}
|
||||
|
||||
const uploadImage = async () => {
|
||||
const fileToUpload = Array.isArray(files.value) ? files.value[0] : files.value;
|
||||
if (!fileToUpload) return;
|
||||
|
||||
loading.value = true;
|
||||
recipe.value = null;
|
||||
hasSaved.value = false;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('image', fileToUpload);
|
||||
|
||||
try {
|
||||
const response = await $fetch(`${config.public.apiBase}api/recipe/upload`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
recipe.value = response;
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const saveToCollection = async () => {
|
||||
if (!recipe.value || hasSaved.value) return;
|
||||
|
||||
saving.value = true;
|
||||
|
||||
const isAuth = await isAuthenticated();
|
||||
|
||||
if (!isAuth) {
|
||||
saving.value = false;
|
||||
localStorage.setItem('pending_recipe', JSON.stringify(recipe.value))
|
||||
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message: 'Please sign in to preserve this recipe in your archives.',
|
||||
color: '#efe5e3',
|
||||
icon: 'mdi-account-key',
|
||||
iconColor: '#8c4a32',
|
||||
textColor: '#5d4037'
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
router.push('/login')
|
||||
}, 2000)
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await $fetch(`${config.public.apiBase}api/recipe/save`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: recipe.value
|
||||
});
|
||||
|
||||
hasSaved.value = true;
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message: 'Recipe added to your collection.',
|
||||
color: '#f4ede1',
|
||||
icon: 'mdi-check-decagram',
|
||||
iconColor: '#556b2f',
|
||||
textColor: '#5d4037'
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Save failed:", error);
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message: 'Failure to save recipe.',
|
||||
color: '#f8d7da',
|
||||
icon: 'mdi-alert-rhombus',
|
||||
iconColor: '#8c4a32',
|
||||
textColor: '#5d4037'
|
||||
};
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const snackbar = ref({
|
||||
show: false,
|
||||
message: '',
|
||||
color: '#f4ede1',
|
||||
icon: 'mdi-check-decagram',
|
||||
iconColor: '#556b2f',
|
||||
textColor: '#5d4037'
|
||||
})
|
||||
|
||||
const clearAll = () => {
|
||||
files.value = null
|
||||
recipe.value = null
|
||||
hasSaved.value = false
|
||||
loading.value = false
|
||||
saving.value = false
|
||||
localStorage.removeItem('pending_recipe')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user