ui improvements
This commit is contained in:
Kaibu
@ -16,86 +16,112 @@
|
||||
<!-- URL -->
|
||||
<b-card no-body>
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-button block v-b-toggle.id_accordion_url variant="info">Website</b-button>
|
||||
<b-col cols="12" md="6" offset="0" offset-md="3">
|
||||
<b-button block v-b-toggle.id_accordion_url variant="info">Website</b-button>
|
||||
</b-col>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_url" visible accordion="url_import_accordion"
|
||||
role="tabpanel" v-model="collapse_visible.url">
|
||||
<b-card-body>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<b-checkbox v-model="import_multiple" switch><span
|
||||
v-if="import_multiple">Multiple Recipes</span><span
|
||||
v-if="!import_multiple">Single Recipe</span></b-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<b-input-group>
|
||||
<b-input v-model="website_url" placeholder="Website URL"></b-input>
|
||||
<b-input-group-append>
|
||||
<b-button variant="primary" @click="loadRecipe(false,undefined)"
|
||||
v-if="!import_multiple"><i
|
||||
class="fas fa-search fa-fw"></i>
|
||||
</b-button>
|
||||
<b-button variant="primary"
|
||||
@click="website_url_list.push(website_url); website_url=''"
|
||||
v-if="import_multiple"><i
|
||||
class="fas fa-plus fa-fw"></i>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
|
||||
</b-input-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<div v-if="!import_multiple">
|
||||
<a href="#" @click="clearRecentImports()">Clear recent imports</a>
|
||||
<ul>
|
||||
<li v-for="x in recent_urls" v-bind:key="x">
|
||||
<a href="#"
|
||||
@click="website_url=x; loadRecipe(false, undefined)">{{
|
||||
x
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="row justify-content-center p-2">
|
||||
<div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 justify-content-cente">
|
||||
<b-checkbox v-model="import_multiple" switch><span
|
||||
v-if="import_multiple">Multiple Recipes</span><span
|
||||
v-if="!import_multiple">Single Recipe</span></b-checkbox>
|
||||
</div>
|
||||
<div v-if="import_multiple">
|
||||
<a href="#" @click="website_url_list = []"
|
||||
v-if="website_url_list.length > 0">Clear import list</a>
|
||||
<ul>
|
||||
<li v-for="x in website_url_list" v-bind:key="x">
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<b-button :disabled="website_url_list.length < 1"
|
||||
@click="autoImport()">Import
|
||||
</div>
|
||||
<b-input-group class="mt-2" :class="{ bounce: empty_input }">
|
||||
<b-input
|
||||
class="form-control form-control-lg form-control-borderless form-control-search"
|
||||
v-model="website_url"
|
||||
placeholder="Website URL" @paste="onURLPaste"></b-input>
|
||||
<b-input-group-append>
|
||||
<b-button variant="primary" @click="loadRecipe(false,undefined)"
|
||||
v-if="!import_multiple"><i
|
||||
class="fas fa-search fa-fw"></i>
|
||||
</b-button>
|
||||
<b-button variant="primary"
|
||||
@click="addWebsiteToURLList(website_url); website_url=''"
|
||||
v-if="import_multiple"><i
|
||||
class="fas fa-plus fa-fw"></i>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col col-md-12">
|
||||
<div v-if="!import_multiple">
|
||||
<a href="#" @click="clearRecentImports()">Clear recent
|
||||
imports</a>
|
||||
<ul>
|
||||
<li v-for="x in recent_urls" v-bind:key="x">
|
||||
<a href="#"
|
||||
@click="website_url=x; loadRecipe(false, undefined)">{{
|
||||
x
|
||||
}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div v-if="import_multiple">
|
||||
<a href="#" @click="website_url_list = []"
|
||||
v-if="website_url_list.length > 0">Clear import list</a>
|
||||
<ul>
|
||||
<li v-for="x in website_url_list" v-bind:key="x">
|
||||
{{ x }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<b-button class="float-right"
|
||||
:disabled="website_url_list.length < 1"
|
||||
@click="autoImport()">Import
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</b-card-body>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
<!-- Loading -->
|
||||
<b-card no-body v-if="loading">
|
||||
<loading-spinner></loading-spinner>
|
||||
</b-card>
|
||||
|
||||
<!-- OPTIONS -->
|
||||
<b-card no-body>
|
||||
<b-card no-body v-if="recipe_json !== undefined">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-button block v-b-toggle.id_accordion_add_options variant="info"
|
||||
:disabled="recipe_json === undefined">Options
|
||||
</b-button>
|
||||
<b-col cols="12" md="6" offset="0" offset-md="3">
|
||||
<b-button block v-b-toggle.id_accordion_add_options variant="info"
|
||||
:disabled="recipe_json === undefined">Options
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_add_options" accordion="url_import_accordion"
|
||||
role="tabpanel" v-model="collapse_visible.options">
|
||||
<b-card-body v-if="recipe_json !== undefined">
|
||||
<b-card-body v-if="recipe_json !== undefined"
|
||||
class="p-1 pb-md-5 pr-md-5 pl-md-5 pt-md-2">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-8 offset-0 offset-md-2">
|
||||
<h4 class="text-center flex-grow-1" v-b-tooltip.hover.bottom :title="$t('Click_To_Edit')" v-if="!edit_name"
|
||||
@click="edit_name = true">{{
|
||||
recipe_json.name
|
||||
}} <span class="text-primary"><i class="fa fa-edit"></i> </span> </h4>
|
||||
<b-input-group v-if="edit_name" class="mb-2">
|
||||
<b-input
|
||||
class="form-control form-control-borderless form-control-search"
|
||||
v-model="recipe_json.name"></b-input>
|
||||
<b-input-group-append>
|
||||
<b-button variant="primary" @click="edit_name = false"><i
|
||||
class="fas fa-save fa-fw"></i>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-md-12 text-center">
|
||||
<b-img rounded fluid :src="recipe_json.image"
|
||||
@ -107,44 +133,54 @@
|
||||
<div class="col col-md-12 text-center">
|
||||
<small class="text-muted">Click the image you want to import for this
|
||||
recipe</small> <!-- TODO localize -->
|
||||
</div>
|
||||
<div class="col col-md-12 text-center">
|
||||
<span v-if="recipe_images.length === 0">No additional images found in source.</span>
|
||||
<b-img v-for="i in recipe_images" rounded thumbnail fluid :src="i"
|
||||
style="max-height: 10vh" v-bind:key="i"
|
||||
@click="recipe_json.image = i"></b-img>
|
||||
<div class="scrolling-wrapper-flexbox">
|
||||
<div class="wrapper-card" v-for="i in recipe_images"
|
||||
v-bind:key="i"
|
||||
@click="recipe_json.image = i">
|
||||
<b-img rounded thumbnail fluid :src="i"
|
||||
style="max-height: 10vh"
|
||||
></b-img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div class="col col-6">
|
||||
<b-card title="Used Keywords">
|
||||
|
||||
<b-list-group>
|
||||
<draggable :list="recipe_json.keywords" group="keywords"
|
||||
:empty-insert-threshold="10">
|
||||
<b-list-group-item v-for="k in recipe_json.keywords"
|
||||
v-bind:key="k.name">{{
|
||||
k.label
|
||||
}}
|
||||
<div class="row mt-2 mt-md-4">
|
||||
<div class="col-12 col-md-6 offset-0 offset-md-3">
|
||||
<b-card no-body>
|
||||
<b-card-title>
|
||||
<div class="clearfix">
|
||||
<span class="float-left h5">Keywords</span>
|
||||
<b-button-group class="float-right">
|
||||
<b-button class="float-right" variant="primary"
|
||||
@click="$set(recipe_json, 'keywords', recipe_json.keywords.map(x => {x.show = true; return x}))">
|
||||
<i
|
||||
class="fa fa-check-double"></i></b-button>
|
||||
<b-button class="float-right" variant="secondary"
|
||||
@click="$set(recipe_json, 'keywords', recipe_json.keywords.map(x => {x.show = false; return x}))">
|
||||
<i
|
||||
class="fa fa-times"></i></b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</b-card-title>
|
||||
<b-card-body class="m-0 p-0 p-md-5">
|
||||
<b-list-group>
|
||||
<b-list-group-item
|
||||
v-for="(k, index) in recipe_json.keywords"
|
||||
v-bind:key="k.name" style="cursor: pointer"
|
||||
v-hover v-bind:class="{ 'bg-success': k.show }"
|
||||
@click="k.show = (!k.show);$set(recipe_json.keywords, index, k)">
|
||||
<div class="clearfix">
|
||||
<span class="float-left">{{
|
||||
k.label
|
||||
}} </span>
|
||||
<b-checkbox class="float-right" v-model="k.show"
|
||||
disabled></b-checkbox>
|
||||
</div>
|
||||
</b-list-group-item>
|
||||
</draggable>
|
||||
|
||||
</b-list-group>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col col-6">
|
||||
<b-card title="Unused Keywords">
|
||||
<b-list-group>
|
||||
<draggable :list="recipe_json.unused_keywords" group="keywords"
|
||||
:empty-insert-threshold="10">
|
||||
<b-list-group-item v-for="k in recipe_json.unused_keywords"
|
||||
v-bind:key="k.name">{{
|
||||
k.label
|
||||
}}
|
||||
</b-list-group-item>
|
||||
</draggable>
|
||||
</b-list-group>
|
||||
</b-list-group>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -157,27 +193,35 @@
|
||||
</b-card>
|
||||
|
||||
<!-- IMPORT -->
|
||||
<b-card no-body>
|
||||
<b-card no-body v-if="recipe_json !== undefined">
|
||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||
<b-button block v-b-toggle.id_accordion_import variant="info"
|
||||
:disabled="recipe_json === undefined">Import
|
||||
</b-button>
|
||||
<b-col cols="12" md="6" offset="0" offset-md="3">
|
||||
<b-button block v-b-toggle.id_accordion_import variant="info"
|
||||
:disabled="recipe_json === undefined">Import
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-card-header>
|
||||
<b-collapse id="id_accordion_import" visible accordion="url_import_accordion"
|
||||
role="tabpanel" v-model="collapse_visible.import">
|
||||
<b-card-body class="text-center">
|
||||
|
||||
<b-row>
|
||||
<b-col cols="12" md="6" xl="4" offset="0" offset-md="3" offset-xl="4">
|
||||
<recipe-card :recipe="recipe_json" :detailed="false"
|
||||
:show_context_menu="false"></recipe-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
<b-card-footer class="text-center">
|
||||
<b-button-group>
|
||||
<b-button @click="importRecipe('view')">Import & View</b-button>
|
||||
<b-button @click="importRecipe('edit')">Import & Edit</b-button>
|
||||
<b-button @click="importRecipe('import')">Import & start new import
|
||||
<b-button @click="importRecipe('edit')" variant="success">Import & Edit
|
||||
</b-button>
|
||||
<b-button @click="importRecipe('import')">Import & Restart
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
|
||||
</b-card-body>
|
||||
</b-card-footer>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
|
||||
</b-tab>
|
||||
<!-- App Tab -->
|
||||
<b-tab v-bind:title="$t('App')">
|
||||
@ -250,9 +294,10 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
import {resolveDjangoStatic, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils";
|
||||
import axios from "axios";
|
||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||
import draggable from "vuedraggable";
|
||||
import {INTEGRATIONS} from "@/utils/integration";
|
||||
import ImportViewStepEditor from "@/apps/ImportView/ImportViewStepEditor";
|
||||
import RecipeCard from "@/components/RecipeCard";
|
||||
import LoadingSpinner from "@/components/LoadingSpinner";
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
@ -263,8 +308,9 @@ export default {
|
||||
ToastMixin,
|
||||
],
|
||||
components: {
|
||||
ImportViewStepEditor,
|
||||
draggable,
|
||||
LoadingSpinner,
|
||||
RecipeCard,
|
||||
ImportViewStepEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -295,7 +341,9 @@ export default {
|
||||
recipe_app: undefined,
|
||||
import_duplicates: false,
|
||||
recipe_files: [],
|
||||
// Bookmarklet
|
||||
loading: false,
|
||||
empty_input: false,
|
||||
edit_name: false,// Bookmarklet
|
||||
BOOKMARKLET_CODE: window.BOOKMARKLET_CODE
|
||||
}
|
||||
},
|
||||
@ -315,6 +363,8 @@ export default {
|
||||
* @param data: if parameter is passed ignore global application state and import form data variable
|
||||
*/
|
||||
importRecipe: function (action, data) {
|
||||
this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.show))
|
||||
|
||||
let apiFactory = new ApiApiFactory()
|
||||
let recipe_json = data !== undefined ? data : this.recipe_json
|
||||
apiFactory.createRecipe(recipe_json).then(response => { // save recipe
|
||||
@ -372,6 +422,16 @@ export default {
|
||||
window.localStorage.setItem(this.LS_IMPORT_RECENT, JSON.stringify(this.recent_urls))
|
||||
}
|
||||
|
||||
if (this.website_url === '') {
|
||||
this.empty_input = true
|
||||
setTimeout(() => {
|
||||
this.empty_input = false
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
|
||||
// reset all variables
|
||||
this.recipe_html = undefined
|
||||
this.recipe_json = undefined
|
||||
@ -389,10 +449,17 @@ export default {
|
||||
}
|
||||
|
||||
return axios.post(resolveDjangoUrl('api_recipe_from_source'), payload,).then((response) => {
|
||||
this.loading = false
|
||||
this.recipe_json = response.data['recipe_json'];
|
||||
|
||||
this.$set(this.recipe_json, 'unused_keywords', this.recipe_json.keywords.filter(k => k.id === undefined))
|
||||
this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.id !== undefined))
|
||||
this.recipe_json.keywords.map(x => {
|
||||
if (x.id === undefined) {
|
||||
x.show = false
|
||||
} else {
|
||||
x.show = true
|
||||
}
|
||||
return x
|
||||
})
|
||||
|
||||
this.recipe_tree = response.data['recipe_tree'];
|
||||
this.recipe_html = response.data['recipe_html'];
|
||||
@ -438,6 +505,22 @@ export default {
|
||||
})
|
||||
},
|
||||
/**
|
||||
* Adds Website to url list, prevents duplicates
|
||||
*/
|
||||
addWebsiteToURLList: function (url) {
|
||||
if (this.website_url_list.indexOf(url) === -1 && url !== '') {
|
||||
this.website_url_list.push(url)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Handles pasting URLs
|
||||
*/
|
||||
onURLPaste: function (evt) {
|
||||
this.website_url = evt.clipboardData.getData('text')
|
||||
this.loadRecipe(false, undefined)
|
||||
return true;
|
||||
},
|
||||
/**loadRecipe(false,undefined)
|
||||
* Clear list of recently imported recipe urls
|
||||
*/
|
||||
clearRecentImports: function () {
|
||||
@ -459,12 +542,62 @@ export default {
|
||||
`document.body.appendChild(document.createElement("script")).src="${localStorage.getItem('BASE_PATH')}${resolveDjangoStatic('/js/bookmarklet.js')}?r="+Math.floor(Math.random()*999999999)}` +
|
||||
`})()`
|
||||
}
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
hover: {
|
||||
inserted: function (el) {
|
||||
el.addEventListener("mouseenter", () => {
|
||||
el.classList.add("shadow")
|
||||
})
|
||||
el.addEventListener("mouseleave", () => {
|
||||
el.classList.remove("shadow")
|
||||
})
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.bounce {
|
||||
animation: bounce 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
10%,
|
||||
90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.scrolling-wrapper-flexbox {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.wrapper-card {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div v-if="recipe_json !== undefined">
|
||||
Steps
|
||||
<div v-if="recipe_json !== undefined" class="mt-2 mt-md-0">
|
||||
<h5>Steps</h5>
|
||||
<div class="row">
|
||||
<div class="col col-md-12 text-center">
|
||||
<b-button @click="splitAllSteps('\n')" variant="secondary"><i
|
||||
class="fas fa-expand-arrows-alt"></i> All
|
||||
<b-button @click="splitAllSteps('\n')" variant="secondary" v-b-tooltip.hover :title="$t('Split_All_Steps')"><i
|
||||
class="fas fa-expand-arrows-alt"></i> {{ $t('All') }}
|
||||
</b-button>
|
||||
<b-button @click="mergeAllSteps()" variant="primary" class="ml-1"><i
|
||||
class="fas fa-compress-arrows-alt"></i> All
|
||||
<b-button @click="mergeAllSteps()" variant="primary" class="ml-1" v-b-tooltip.hover :title="$t('Combine_All_Steps')"><i
|
||||
class="fas fa-compress-arrows-alt"></i> {{ $t('All') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-if="recipe.keywords.length > 0">
|
||||
<span :key="k.id" v-for="k in recipe.keywords" class="pl-1">
|
||||
<span :key="k.id" v-for="k in recipe.keywords.filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
|
||||
<a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"><b-badge pill variant="light"
|
||||
class="font-weight-normal">{{ k.label }}</b-badge></a>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<b-card no-body v-hover v-if="recipe">
|
||||
<a :href="clickUrl()">
|
||||
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
|
||||
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1">
|
||||
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1" v-if="show_context_menu">
|
||||
<a>
|
||||
<recipe-context-menu :recipe="recipe" class="float-right" v-if="recipe !== null"></recipe-context-menu>
|
||||
</a>
|
||||
@ -78,6 +78,7 @@ export default {
|
||||
footer_text: String,
|
||||
footer_icon: String,
|
||||
detailed: { type: Boolean, default: true },
|
||||
show_context_menu: { type: Boolean, default: true }
|
||||
},
|
||||
mounted() {},
|
||||
computed: {
|
||||
|
||||
Reference in New Issue
Block a user