mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-11-26 13:44:15 -05:00
file reorganize
This commit is contained in:
Hayden
23
frontend/src/pages/404Page.vue
Normal file
23
frontend/src/pages/404Page.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="text-center">
|
||||
<v-row>
|
||||
<v-col cols="2"></v-col>
|
||||
<v-col>
|
||||
<v-card height="">
|
||||
<v-card-text>
|
||||
<h1>404 No Page Found</h1>
|
||||
</v-card-text>
|
||||
<v-btn text block @click="$router.push('/')"> Take me Home </v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="2"></v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
18
frontend/src/pages/HomePage.vue
Normal file
18
frontend/src/pages/HomePage.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<RecentRecipes />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RecentRecipes from "../components/UI/RecentRecipes";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RecentRecipes,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
125
frontend/src/pages/MealPlanPage.vue
Normal file
125
frontend/src/pages/MealPlanPage.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<EditPlan
|
||||
v-if="editMealPlan"
|
||||
:meal-plan="editMealPlan"
|
||||
@updated="planUpdated"
|
||||
/>
|
||||
<NewMeal v-else @created="requestMeals" />
|
||||
|
||||
<v-card class="my-1">
|
||||
<v-card-title class="secondary white--text"> Meal Plans </v-card-title>
|
||||
|
||||
<v-timeline align-top :dense="$vuetify.breakpoint.smAndDown">
|
||||
<v-timeline-item
|
||||
class="mx-4"
|
||||
v-for="(mealplan, i) in plannedMeals"
|
||||
:key="i"
|
||||
color="accent lighten-2"
|
||||
icon="mdi-silverware-variant"
|
||||
fill-dot
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="white--text secondary lighten-1">
|
||||
{{ formatDate(mealplan.startDate) }} -
|
||||
{{ formatDate(mealplan.endDate) }}
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-row dense align="center">
|
||||
<v-col></v-col>
|
||||
<v-col
|
||||
v-for="(meal, index) in mealplan.meals"
|
||||
:key="generateKey(meal.slug, index)"
|
||||
>
|
||||
<v-img
|
||||
class="rounded-lg info"
|
||||
:src="getImage(meal.image)"
|
||||
height="80"
|
||||
width="80"
|
||||
>
|
||||
</v-img>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row class="mt-2 ml-1">
|
||||
<v-btn
|
||||
color="accent lighten-2"
|
||||
class="mx-0"
|
||||
text
|
||||
@click="editPlan(mealplan.uid)"
|
||||
>
|
||||
Edit
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="error lighten-2"
|
||||
class="mx-2"
|
||||
text
|
||||
@click="deletePlan(mealplan.uid)"
|
||||
>
|
||||
Delete
|
||||
</v-btn>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "../api";
|
||||
import utils from "../utils";
|
||||
import NewMeal from "../components/MealPlan/MealPlanNew";
|
||||
import EditPlan from "../components/MealPlan/MealPlanEditor";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NewMeal,
|
||||
EditPlan,
|
||||
},
|
||||
data: () => ({
|
||||
plannedMeals: [],
|
||||
editMealPlan: null,
|
||||
}),
|
||||
async mounted() {
|
||||
this.requestMeals();
|
||||
},
|
||||
methods: {
|
||||
async requestMeals() {
|
||||
const response = await api.mealPlans.all();
|
||||
this.plannedMeals = response.data;
|
||||
},
|
||||
generateKey(name, index) {
|
||||
return utils.generateUniqueKey(name, index);
|
||||
},
|
||||
formatDate(timestamp) {
|
||||
let dateObject = new Date(timestamp);
|
||||
return utils.getDateAsTextAlt(dateObject);
|
||||
},
|
||||
getImage(image) {
|
||||
return utils.getImageURL(image);
|
||||
},
|
||||
|
||||
editPlan(id) {
|
||||
this.plannedMeals.forEach((element) => {
|
||||
if (element.uid === id) {
|
||||
this.editMealPlan = element;
|
||||
}
|
||||
});
|
||||
},
|
||||
planUpdated() {
|
||||
this.editMealPlan = null;
|
||||
this.requestMeals();
|
||||
},
|
||||
deletePlan(id) {
|
||||
api.mealPlans.delete(id);
|
||||
this.requestMeals();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
67
frontend/src/pages/MealPlanThisWeekPage.vue
Normal file
67
frontend/src/pages/MealPlanThisWeekPage.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<v-container fill-height>
|
||||
<v-row justify="center" align="center">
|
||||
<v-col sm="12">
|
||||
<v-card
|
||||
v-for="(meal, index) in mealPlan.meals"
|
||||
:key="index"
|
||||
class="my-2"
|
||||
>
|
||||
<v-row dense no-gutters align="center" justify="center">
|
||||
<v-col order="1" md="6" sm="12">
|
||||
<v-card flat>
|
||||
<v-card-title> {{ meal.name }} </v-card-title>
|
||||
<v-card-subtitle> {{ meal.dateText }}</v-card-subtitle>
|
||||
|
||||
<v-card-text> {{ meal.description }} </v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
color="secondary"
|
||||
text
|
||||
@click="$router.push(`/recipe/${meal.slug}`)"
|
||||
>
|
||||
View Recipe
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col order-sm="0" :order-md="getOrder(index)" md="6" sm="12">
|
||||
<v-card>
|
||||
<v-img :src="getImage(meal.image)" max-height="300"> </v-img>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "../api";
|
||||
import utils from "../utils";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mealPlan: {},
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
this.mealPlan = await api.mealPlans.thisWeek();
|
||||
console.log(this.mealPlan);
|
||||
},
|
||||
methods: {
|
||||
getOrder(index) {
|
||||
if (index % 2 == 0) return 2;
|
||||
else return 0;
|
||||
},
|
||||
getImage(image) {
|
||||
return utils.getImageURL(image);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
112
frontend/src/pages/RecipeNewPage.vue
Normal file
112
frontend/src/pages/RecipeNewPage.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<v-card :loading="isLoading">
|
||||
<v-img v-if="image" height="400" :src="image">
|
||||
<template v-slot:placeholder>
|
||||
<v-row class="fill-height ma-0" align="center" justify="center">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="grey lighten-5"
|
||||
></v-progress-circular>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-img>
|
||||
<br v-else />
|
||||
|
||||
<ButtonRow
|
||||
@json="jsonEditor = true"
|
||||
@editor="jsonEditor = false"
|
||||
@save="createRecipe"
|
||||
/>
|
||||
|
||||
<div v-if="jsonEditor">
|
||||
<!-- Probably not the best way, but it works! -->
|
||||
<br />
|
||||
<br />
|
||||
<VJsoneditor
|
||||
v-model="recipeDetails"
|
||||
height="1500px"
|
||||
:options="jsonEditorOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RecipeEditor v-else v-model="recipeDetails" @upload="getImage" />
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "../api";
|
||||
|
||||
import RecipeEditor from "../components/Recipe/RecipeEditor";
|
||||
import VJsoneditor from "v-jsoneditor";
|
||||
import ButtonRow from "../components/UI/ButtonRow";
|
||||
export default {
|
||||
components: {
|
||||
VJsoneditor,
|
||||
RecipeEditor,
|
||||
ButtonRow,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
fileObject: null,
|
||||
selectedFile: null,
|
||||
image: null,
|
||||
jsonEditor: false,
|
||||
jsonEditorOptions: {
|
||||
mode: "code",
|
||||
search: false,
|
||||
mainMenuBar: false,
|
||||
},
|
||||
recipeDetails: {
|
||||
name: "",
|
||||
description: "",
|
||||
image: "",
|
||||
recipeYield: "",
|
||||
recipeIngredient: [],
|
||||
recipeInstructions: [],
|
||||
slug: "",
|
||||
filePath: "",
|
||||
tags: [],
|
||||
categories: [],
|
||||
// dateAdded: "",
|
||||
notes: [],
|
||||
extras: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getImage(fileObject) {
|
||||
this.fileObject = fileObject;
|
||||
this.onFileChange();
|
||||
},
|
||||
onFileChange() {
|
||||
this.image = URL.createObjectURL(this.fileObject);
|
||||
},
|
||||
|
||||
async createRecipe() {
|
||||
this.isLoading = true;
|
||||
|
||||
if (this.fileObject) {
|
||||
this.recipeDetails.image = this.fileObject.name;
|
||||
}
|
||||
let slug = await api.recipes.create(this.recipeDetails);
|
||||
|
||||
if (this.fileObject) {
|
||||
await api.recipes.updateImage(slug, this.fileObject);
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
|
||||
this.$router.push(`/recipe/${slug}`);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.img-input {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
157
frontend/src/pages/RecipePage.vue
Normal file
157
frontend/src/pages/RecipePage.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<v-card id="myRecipe">
|
||||
<v-img
|
||||
height="400"
|
||||
:src="getImage(recipeDetails.image)"
|
||||
class="d-print-none"
|
||||
:key="imageKey"
|
||||
>
|
||||
</v-img>
|
||||
<ButtonRow
|
||||
:open="showIcons"
|
||||
@json="jsonEditor = true"
|
||||
@editor="
|
||||
jsonEditor = false;
|
||||
form = true;
|
||||
"
|
||||
@save="saveRecipe"
|
||||
@delete="deleteRecipe"
|
||||
/>
|
||||
|
||||
<RecipeViewer
|
||||
v-if="!form"
|
||||
:name="recipeDetails.name"
|
||||
:ingredients="recipeDetails.recipeIngredient"
|
||||
:description="recipeDetails.description"
|
||||
:instructions="recipeDetails.recipeInstructions"
|
||||
:tags="recipeDetails.tags"
|
||||
:categories="recipeDetails.categories"
|
||||
:notes="recipeDetails.notes"
|
||||
:rating="recipeDetails.rating"
|
||||
:yields="recipeDetails.recipeYield"
|
||||
:orgURL="recipeDetails.orgURL"
|
||||
/>
|
||||
<VJsoneditor
|
||||
@error="logError()"
|
||||
class="mt-10"
|
||||
v-else-if="showJsonEditor"
|
||||
v-model="recipeDetails"
|
||||
height="1500px"
|
||||
:options="jsonEditorOptions"
|
||||
/>
|
||||
<RecipeEditor v-else v-model="recipeDetails" @upload="getImageFile" />
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from "../api";
|
||||
import utils from "../utils";
|
||||
import VJsoneditor from "v-jsoneditor";
|
||||
import RecipeViewer from "../components/Recipe/RecipeViewer";
|
||||
import RecipeEditor from "../components/Recipe/RecipeEditor";
|
||||
import ButtonRow from "../components/UI/ButtonRow";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VJsoneditor,
|
||||
RecipeViewer,
|
||||
RecipeEditor,
|
||||
ButtonRow,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// CurrentRecipe: this.$route.params.recipe,
|
||||
form: false,
|
||||
jsonEditor: false,
|
||||
jsonEditorOptions: {
|
||||
mode: "code",
|
||||
search: false,
|
||||
mainMenuBar: false,
|
||||
},
|
||||
// Recipe Details //
|
||||
recipeDetails: {
|
||||
name: "",
|
||||
description: "",
|
||||
image: "",
|
||||
recipeYield: "",
|
||||
recipeIngredient: [],
|
||||
recipeInstructions: [],
|
||||
slug: "",
|
||||
filePath: "",
|
||||
url: "",
|
||||
tags: [],
|
||||
categories: [],
|
||||
dateAdded: "",
|
||||
notes: [],
|
||||
rating: 0,
|
||||
},
|
||||
imageKey: 1,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getRecipeDetails();
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route: function () {
|
||||
this.getRecipeDetails();
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
CurrentRecipe() {
|
||||
return this.$route.params.recipe;
|
||||
},
|
||||
showIcons() {
|
||||
return this.form;
|
||||
},
|
||||
showJsonEditor() {
|
||||
if ((this.form === true) & (this.jsonEditor === true)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getImageFile(fileObject) {
|
||||
this.fileObject = fileObject;
|
||||
},
|
||||
async getRecipeDetails() {
|
||||
this.recipeDetails = await api.recipes.requestDetails(this.CurrentRecipe);
|
||||
this.form = false;
|
||||
},
|
||||
getImage(image) {
|
||||
if (image) {
|
||||
return utils.getImageURL(image) + "?rnd=" + this.imageKey;
|
||||
}
|
||||
},
|
||||
deleteRecipe() {
|
||||
api.recipes.delete(this.recipeDetails.slug);
|
||||
},
|
||||
async saveRecipe() {
|
||||
await api.recipes.update(this.recipeDetails);
|
||||
|
||||
if (this.fileObject) {
|
||||
await api.recipes.updateImage(this.recipeDetails.slug, this.fileObject);
|
||||
}
|
||||
|
||||
this.form = false;
|
||||
this.imageKey += 1;
|
||||
},
|
||||
showForm() {
|
||||
this.form = true;
|
||||
this.jsonEditor = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-btn {
|
||||
margin-top: -10px;
|
||||
}
|
||||
.disabled-card {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
75
frontend/src/pages/SettingsPage.vue
Normal file
75
frontend/src/pages/SettingsPage.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-alert v-if="newVersion" color="green" type="success" outlined>
|
||||
A New Version of Mealie is Avaiable,
|
||||
<a href="https://github.com/hay-kot/mealie" class="green--text">
|
||||
Visit the Repo
|
||||
</a>
|
||||
</v-alert>
|
||||
<Theme />
|
||||
<Backup />
|
||||
<Webhooks />
|
||||
<Migration />
|
||||
<p class="text-center my-2">
|
||||
Version: {{ version }} | Latest: {{ latestVersion }} ·
|
||||
<a href="https://hay-kot.github.io/mealie/" target="_blank">
|
||||
Explore the Docs
|
||||
</a>
|
||||
·
|
||||
<a
|
||||
href="https://hay-kot.github.io/mealie/2.1%20-%20Contributions/"
|
||||
target="_blank"
|
||||
>
|
||||
Contribute
|
||||
</a>
|
||||
</p>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Backup from "../components/Settings/Backup";
|
||||
import Webhooks from "../components/Settings/Webhook";
|
||||
import Theme from "../components/Settings/Theme";
|
||||
import Migration from "../components/Settings/Migration";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Backup,
|
||||
Webhooks,
|
||||
Theme,
|
||||
Migration,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
latestVersion: null,
|
||||
version: "v0.0.1",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getVersion();
|
||||
},
|
||||
computed: {
|
||||
newVersion() {
|
||||
if ((this.latestVersion != null) & (this.latestVersion != this.version)) {
|
||||
console.log("New Version Avaiable");
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getVersion() {
|
||||
let response = await axios.get(
|
||||
"https://api.github.com/repos/hay-kot/mealie/releases/latest"
|
||||
);
|
||||
console.log(response);
|
||||
this.latestVersion = response.data.tag_name;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user