mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-01-10 19:11:25 -05:00
Feature/improve error message on scrape (#476)
* add better feedback on failed scrape * fix json download link * add better recipe parser * dump deps * fix force open on mobile * formatting * rewrite scraper to use new library * fix failing tests * bookmarklet support * bookmarklet instructions * recipes changelog Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
@@ -3,9 +3,7 @@
|
||||
<v-dialog v-model="addRecipe" width="650" @click:outside="reset">
|
||||
<v-card :loading="processing">
|
||||
<v-app-bar dark color="primary mb-2">
|
||||
<v-icon large left v-if="!processing">
|
||||
mdi-link
|
||||
</v-icon>
|
||||
<v-icon large left v-if="!processing"> mdi-link </v-icon>
|
||||
<v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
|
||||
|
||||
<v-toolbar-title class="headline">
|
||||
@@ -28,19 +26,58 @@
|
||||
persistent-hint
|
||||
></v-text-field>
|
||||
|
||||
<v-alert v-if="error" color="red" outlined type="success">
|
||||
{{ $t("new-recipe.error-message") }}
|
||||
</v-alert>
|
||||
<v-expand-transition>
|
||||
<v-alert v-if="error" color="error" class="mt-6 white--text">
|
||||
<v-card-title class="ma-0 pa-0">
|
||||
<v-icon left color="white" x-large> mdi-robot </v-icon>
|
||||
{{ $t("new-recipe.error-title") }}
|
||||
</v-card-title>
|
||||
<v-divider class="my-3 mx-2"></v-divider>
|
||||
|
||||
<p>
|
||||
{{ $t("new-recipe.error-details") }}
|
||||
</p>
|
||||
<div class="d-flex row justify-space-around my-3 force-white">
|
||||
<a
|
||||
class="dark"
|
||||
href="https://developers.google.com/search/docs/data-types/recipe"
|
||||
target="_blank"
|
||||
rel="noreferrer nofollow"
|
||||
>
|
||||
Google ld+json Info
|
||||
</a>
|
||||
<a href="https://github.com/hay-kot/mealie/issues" target="_blank" rel="noreferrer nofollow">
|
||||
GitHub Issues
|
||||
</a>
|
||||
<a href="https://schema.org/Recipe" target="_blank" rel="noreferrer nofollow">
|
||||
Recipe Markup Specification
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex justify-end">
|
||||
<v-btn
|
||||
white
|
||||
outlined
|
||||
:to="{ path: '/recipes/debugger', query: { test_url: recipeURL } }"
|
||||
@click="addRecipe = false"
|
||||
>
|
||||
<v-icon> mdi-external-link </v-icon>
|
||||
View Scraped Data
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-alert>
|
||||
</v-expand-transition>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey" text @click="reset">
|
||||
<v-icon left> mdi-close </v-icon>
|
||||
{{ $t("general.close") }}
|
||||
</v-btn>
|
||||
<v-btn color="success" text type="submit" :loading="processing">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="success" type="submit" :loading="processing">
|
||||
<v-icon left> {{ $globals.icons.create }} </v-icon>
|
||||
{{ $t("general.submit") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
@@ -65,7 +102,6 @@
|
||||
|
||||
<script>
|
||||
import { api } from "@/api";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
absolute: {
|
||||
@@ -77,14 +113,32 @@ export default {
|
||||
error: false,
|
||||
fab: false,
|
||||
addRecipe: false,
|
||||
recipeURL: "",
|
||||
processing: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.$route.query.recipe_import_url) {
|
||||
this.addRecipe = true;
|
||||
this.createRecipe();
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
recipeURL: {
|
||||
set(recipe_import_url) {
|
||||
this.$router.replace({ query: { ...this.$route.query, recipe_import_url } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.recipe_import_url || "";
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
async createRecipe() {
|
||||
if (this.$refs.urlForm.validate()) {
|
||||
this.error = false;
|
||||
if (this.$refs.urlForm === undefined || this.$refs.urlForm.validate()) {
|
||||
this.processing = true;
|
||||
const response = await api.recipes.createByURL(this.recipeURL);
|
||||
this.processing = false;
|
||||
@@ -106,11 +160,20 @@ export default {
|
||||
this.processing = false;
|
||||
},
|
||||
isValidWebUrl(url) {
|
||||
let regEx = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,256}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/gm;
|
||||
let regEx =
|
||||
/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,256}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/gm;
|
||||
return regEx.test(url) ? true : "Must be a Valid URL";
|
||||
},
|
||||
|
||||
bookmark() {
|
||||
return `javascript:(function()%7Bvar url %3D document.URL %3B%0Avar mealie %3D "http%3A%2F%2Flocalhost%3A8080%2F%23"%0Avar dest %3D mealie %2B "%2F%3Frecipe_import_url%3D" %2B url%0Awindow.open(dest%2C '_blank')%7D)()%3B`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
.force-white > a {
|
||||
color: white !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,9 +6,7 @@
|
||||
|
||||
<v-list-item dense v-if="isLoggedIn" :to="`/user/${user.id}/favorites`">
|
||||
<v-list-item-icon>
|
||||
<v-icon>
|
||||
mdi-heart
|
||||
</v-icon>
|
||||
<v-icon> mdi-heart </v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title> Favorites </v-list-item-title>
|
||||
@@ -30,17 +28,13 @@
|
||||
<v-list nav dense class="fixedBottom" v-if="!isMain">
|
||||
<v-list-item href="https://github.com/sponsors/hay-kot" target="_target">
|
||||
<v-list-item-icon>
|
||||
<v-icon color="pink">
|
||||
mdi-heart
|
||||
</v-icon>
|
||||
<v-icon color="pink"> mdi-heart </v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title> {{ $t("about.support") }} </v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item to="/admin/about">
|
||||
<v-list-item-icon class="mr-3 pt-1">
|
||||
<v-icon :color="newVersionAvailable ? 'red--text' : ''">
|
||||
mdi-information
|
||||
</v-icon>
|
||||
<v-icon :color="newVersionAvailable ? 'red--text' : ''"> mdi-information </v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
@@ -86,7 +80,8 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getVersion();
|
||||
this.resetView();
|
||||
|
||||
this.showSidebar = !this.isMobile;
|
||||
},
|
||||
watch: {
|
||||
user() {
|
||||
@@ -98,7 +93,6 @@ export default {
|
||||
isMain() {
|
||||
const testVal = this.$route.path.split("/");
|
||||
if (testVal[1] === "recipe") this.closeSidebar();
|
||||
else this.resetView();
|
||||
|
||||
return !(testVal[1] === "admin");
|
||||
},
|
||||
@@ -135,7 +129,7 @@ export default {
|
||||
const pages = this.$store.getters.getCustomPages;
|
||||
if (pages.length > 0) {
|
||||
pages.sort((a, b) => a.position - b.position);
|
||||
return pages.map(x => ({
|
||||
return pages.map((x) => ({
|
||||
title: x.name,
|
||||
to: `/pages/${x.slug}`,
|
||||
icon: this.$globals.icons.pages,
|
||||
@@ -217,9 +211,7 @@ export default {
|
||||
resetImage() {
|
||||
this.hideImage == false;
|
||||
},
|
||||
resetView() {
|
||||
this.showSidebar = !this.isMobile;
|
||||
},
|
||||
|
||||
toggleSidebar() {
|
||||
this.showSidebar = !this.showSidebar;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user