mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-04 21:58:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/keywords-rework' into feature/fulltext-search

Browse Source 
# Conflicts:
#	cookbook/admin.py
#	cookbook/helper/recipe_search.py
#	cookbook/models.py
#	cookbook/static/vue/js/import_response_view.js
#	cookbook/static/vue/js/offline_view.js
#	cookbook/static/vue/js/recipe_search_view.js
#	cookbook/static/vue/js/recipe_view.js
#	cookbook/static/vue/js/supermarket_view.js
#	cookbook/templates/sw.js
#	cookbook/views/api.py
#	cookbook/views/views.py
#	vue/src/locales/en.json
#	vue/webpack-stats.json
#	vue/yarn.lock
This commit is contained in:
vabene1111
2021-06-30 15:06:03 +02:00
parent a6d7105587 28b67a2ba5
commit 5c0bdce37d
183 changed files with 32502 additions and 13884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
vue/src/apps/ImportResponseView/ImportResponseView.vue
View File

@@ -1,54 +1,42 @@
<template>
<div id="app">
<div class="row">
<div class="col col-md-12">
<h2>{{ $t('Import') }}</h2>
</div>
</div>
<br/>
<br/>
<template v-if="import_info !== undefined">
<template v-if="import_info.running" style="text-align: center;">
<div class="row">
<div class="col col-md-12">
</div>
</div>
<loading-spinner></loading-spinner>
<br/>
<br/>
<template v-if="import_info.running">
<h5 style="text-align: center">{{ $t('Importing') }}...</h5>
<b-progress :max="import_info.total_recipes">
<b-progress-bar :value="import_info.imported_recipes" :label="`${import_info.imported_recipes}/${import_info.total_recipes}`"></b-progress-bar>
</b-progress>
<loading-spinner :size="25"></loading-spinner>
</template>
<template v-else>
<div class="row">
<div class="col col-md-12">
<span>{{ $t('Import_finished') }}! </span>
<a :href="`${resolveDjangoUrl('view_search') }?keywords=${import_info.keyword.id}`"
v-if="import_info.keyword !== null">{{ $t('View_Recipes') }}</a>
</div>
<div class="row">
<div class="col col-md-12" v-if="!import_info.running">
<span>{{ $t('Import_finished') }}! </span>
<a :href="`${resolveDjangoUrl('view_search') }?keyword=${import_info.keyword.id}`"
v-if="import_info.keyword !== null">{{ $t('View_Recipes') }}</a>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col col-md-12">
<label for="id_textarea">{{ $t('Information') }}</label>
<textarea id="id_textarea" class="form-control" style="height: 50vh" v-html="import_info.msg"
disabled></textarea>
<div class="row">
<div class="col col-md-12">
<label for="id_textarea">{{ $t('Information') }}</label>
<textarea id="id_textarea" ref="output_text" class="form-control" style="height: 50vh"
v-html="import_info.msg"
disabled></textarea>
</div>
</div>
</template>
</div>
<br/>
<br/>
</template>
</div>
@@ -90,6 +78,8 @@ export default {
setInterval(() => {
if ((this.import_id !== null) && window.navigator.onLine && this.import_info.running) {
this.refreshData()
let el = this.$refs.output_text
el.scrollTop = el.scrollHeight;
}
}, 5000)
@@ -100,6 +90,7 @@ export default {
apiClient.retrieveImportLog(this.import_id).then(result => {
this.import_info = result.data
})
}
}

617
vue/src/apps/KeywordListView/KeywordListView.vue Normal file
View File

@@ -0,0 +1,617 @@
<template>
<div id="app" style="margin-bottom: 4vh">
<div class="row">
<div class="col-md-2 d-none d-md-block">
</div>
<div class="col-xl-8 col-12">
<!-- TODO only show scollbars in split mode, but this doesn't interact well with infinite scroll, maybe a different componenet? -->
<div class="container-fluid d-flex flex-column flex-grow-1" :class="{'vh-100' : show_split}">
<!-- <div class="container-fluid d-flex flex-column flex-grow-1 vh-100"> -->
<!-- expanded options box -->
<div class="row flex-shrink-0">
<div class="col col-md-12">
<b-collapse id="collapse_advanced" class="mt-2" v-model="advanced_visible">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-3" style="margin-top: 1vh">
<div class="btn btn-primary btn-block text-uppercase" @click="startAction({'action':'new'})">
{{ this.$t('New_Keyword') }}
</div>
</div>
<div class="col-md-3" style="margin-top: 1vh">
<button class="btn btn-primary btn-block text-uppercase" @click="resetSearch">
{{ this.$t('Reset_Search') }}
</button>
</div>
<div class="col-md-3" style="position: relative; margin-top: 1vh">
<b-form-checkbox v-model="show_split" name="check-button"
class="shadow-none"
style="position:relative;top: 50%; transform: translateY(-50%);" switch>
{{ this.$t('show_split_screen') }}
</b-form-checkbox>
</div>
</div>
</div>
</div>
</b-collapse>
</div>
</div>
<div class="row flex-shrink-0">
<!-- search box -->
<div class="col col-md">
<b-input-group class="mt-3">
<b-input class="form-control" v-model="search_input"
v-bind:placeholder="this.$t('Search')"></b-input>
<b-input-group-append>
<b-button v-b-toggle.collapse_advanced variant="primary" class="shadow-none">
<i class="fas fa-caret-down" v-if="!advanced_visible"></i>
<i class="fas fa-caret-up" v-if="advanced_visible"></i>
</b-button>
</b-input-group-append>
</b-input-group>
</div>
<!-- split side search -->
<div class="col col-md" v-if="show_split">
<b-input-group class="mt-3">
<b-input class="form-control" v-model="search_input2"
v-bind:placeholder="this.$t('Search')"></b-input>
</b-input-group>
</div>
</div>
<!-- only show scollbars in split mode, but this doesn't interact well with infinite scroll, maybe a different componenet? -->
<div class="row" :class="{'overflow-hidden' : show_split}" style="margin-top: 2vh">
<div class="col col-md" :class="{'mh-100 overflow-auto' : show_split}">
<keyword-card
v-for="k in keywords"
v-bind:key="k.id"
:keyword="k"
:draggable="true"
@item-action="startAction($event, 'left')"
></keyword-card>
<infinite-loading
:identifier='left'
@infinite="infiniteHandler($event, 'left')"
spinner="waveDots">
</infinite-loading>
</div>
<!-- right side keyword cards -->
<div class="col col-md mh-100 overflow-auto " v-if="show_split">
<keyword-card
v-for="k in keywords2"
v-bind:key="k.id"
:keyword="k"
draggable="true"
@item-action="startAction($event, 'right')"
></keyword-card>
<infinite-loading
:identifier='right'
@infinite="infiniteHandler($event, 'right')"
spinner="waveDots">
</infinite-loading>
</div>
</div>
</div>
</div>
<div class="col-md-2 d-none d-md-block">
</div>
</div>
<!-- TODO Modals can probably be made generic and moved to component -->
<!-- edit modal -->
<b-modal class="modal"
:id="'id_modal_keyword_edit'"
@shown="prepareEmoji"
:title="this.$t('Edit_Keyword')"
:ok-title="this.$t('Save')"
:cancel-title="this.$t('Cancel')"
@ok="saveKeyword">
<form>
<label for="id_keyword_name_edit">{{ this.$t('Name') }}</label>
<input class="form-control" type="text" id="id_keyword_name_edit" v-model="this_item.name">
<label for="id_keyword_description_edit">{{ this.$t('Description') }}</label>
<input class="form-control" type="text" id="id_keyword_description_edit" v-model="this_item.description">
<label for="id_keyword_icon_edit">{{ this.$t('Icon') }}</label>
<twemoji-textarea
id="id_keyword_icon_edit"
ref="_edit"
:emojiData="emojiDataAll"
:emojiGroups="emojiGroups"
triggerType="hover"
recentEmojisFeat="true"
recentEmojisStorage="local"
@contentChanged="setIcon"
/>
</form>
</b-modal>
<!-- delete modal -->
<b-modal class="modal"
:id="'id_modal_keyword_delete'"
:title="this.$t('Delete_Keyword')"
:ok-title="this.$t('Delete')"
:cancel-title="this.$t('Cancel')"
@ok="delKeyword(this_item.id)">
{{this.$t("delete_confimation", {'kw': this_item.name})}} {{this_item.name}}
</b-modal>
<!-- move modal -->
<b-modal class="modal"
:id="'id_modal_keyword_move'"
:title="this.$t('Move_Keyword')"
:ok-title="this.$t('Move')"
:cancel-title="this.$t('Cancel')"
@ok="moveKeyword(this_item.id, this_item.target.id)">
{{ this.$t("move_selection", {'child': this_item.name}) }}
<generic-multiselect
@change="this_item.target=$event.val"
label="name"
search_function="listKeywords"
:multiple="false"
:sticky_options="[{'id': 0,'name': $t('Root')}]"
:tree_api="true"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="this.$t('Search')">
</generic-multiselect>
</b-modal>
<!-- merge modal -->
<b-modal class="modal"
:id="'id_modal_keyword_merge'"
:title="this.$t('Merge_Keyword')"
:ok-title="this.$t('Merge')"
:cancel-title="this.$t('Cancel')"
@ok="mergeKeyword(this_item.id, this_item.target.id)">
{{ this.$t("merge_selection", {'source': this_item.name, 'type': this.$t('keyword')}) }}
<generic-multiselect
@change="this_item.target=$event.val"
label="name"
search_function="listKeywords"
:multiple="false"
:tree_api="true"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="this.$t('Search')">
</generic-multiselect>
</b-modal>
</div>
</template>
<script>
import axios from "axios";
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import _debounce from 'lodash/debounce'
import {ResolveUrlMixin} from "@/utils/utils";
import {ApiApiFactory} from "@/utils/openapi/api.ts";
import KeywordCard from "@/components/KeywordCard";
import GenericMultiselect from "@/components/GenericMultiselect";
import InfiniteLoading from 'vue-infinite-loading';
// would move with modals if made generic
import {TwemojiTextarea} from '@kevinfaguiar/vue-twemoji-picker';
// TODO add localization
import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-all-groups.json';
import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
// end move with generic modals
Vue.use(BootstrapVue)
export default {
name: 'KeywordListView',
mixins: [ResolveUrlMixin],
components: {TwemojiTextarea, KeywordCard, GenericMultiselect, InfiniteLoading},
computed: {
// move with generic modals
emojiDataAll() {
return EmojiAllData;
},
emojiGroups() {
return EmojiGroups;
}
// end move with generic modals
},
data() {
return {
keywords: [],
keywords2: [],
show_split: false,
search_input: '',
search_input2: '',
advanced_visible: false,
right_page: 0,
right: +new Date(),
isDirtyRight: false,
left_page: 0,
left: +new Date(),
isDirtyLeft: false,
this_item: {
'id': -1,
'name': '',
'description': '',
'icon': '',
'target': {
'id': -1,
'name': ''
},
},
}
},
watch: {
search_input: _debounce(function() {
this.left_page = 0
this.keywords = []
this.left += 1
}, 700),
search_input2: _debounce(function() {
this.right_page = 0
this.keywords2 = []
this.right += 1
}, 700)
},
methods: {
makeToast: function (title, message, variant = null) {
//TODO remove duplicate function in favor of central one
this.$bvToast.toast(message, {
title: title,
variant: variant,
toaster: 'b-toaster-top-center',
solid: true
})
},
resetSearch: function () {
if (this.search_input !== '') {
this.search_input = ''
} else {
this.left_page = 0
this.keywords = []
this.left += 1
}
if (this.search_input2 !== '') {
this.search_input2 = ''
} else {
this.right_page = 0
this.keywords2 = []
this.right += 1
}
},
// TODO should model actions be included with the context menu? the card? a seperate mixin avaible to all?
startAction: function(e, col) {
let target = e.target || null
let source = e.source || null
if (e.action == 'delete') {
this.this_item = source
this.$bvModal.show('id_modal_keyword_delete')
} else if (e.action == 'new') {
this.this_item = {}
this.$bvModal.show('id_modal_keyword_edit')
} else if (e.action == 'edit') {
this.this_item = source
this.$bvModal.show('id_modal_keyword_edit')
} else if (e.action === 'move') {
this.this_item = source
if (target == null) {
this.$bvModal.show('id_modal_keyword_move')
} else {
this.moveKeyword(source.id, target.id)
}
} else if (e.action === 'merge') {
this.this_item = source
if (target == null) {
this.$bvModal.show('id_modal_keyword_merge')
} else {
this.mergeKeyword(e.source.id, e.target.id)
}
} else if (e.action === 'get-children') {
if (source.expanded) {
Vue.set(source, 'expanded', false)
} else {
this.this_item = source
this.getChildren(col, source)
}
} else if (e.action === 'get-recipes') {
if (source.show_recipes) {
Vue.set(source, 'show_recipes', false)
} else {
this.this_item = source
this.getRecipes(col, source)
}
}
},
saveKeyword: function () {
let apiClient = new ApiApiFactory()
let kw = {
name: this.this_item.name,
description: this.this_item.description,
icon: this.this_item.icon,
}
if (!this.this_item.id) { // if there is no item id assume its a new item
apiClient.createKeyword(kw).then(result => {
// place all new keywords at the top of the list - could sort instead
this.keywords = [result.data].concat(this.keywords)
// this creates a deep copy to make sure that columns stay independent
if (this.show_split){
this.keywords2 = [JSON.parse(JSON.stringify(result.data))].concat(this.keywords2)
} else {
this.keywords2 = []
}
this.this_item={}
}).catch((err) => {
console.log(err)
this.this_item = {}
})
} else {
apiClient.partialUpdateKeyword(this.this_item.id, kw).then(result => {
this.refreshCard(this.this_item.id)
this.this_item={}
}).catch((err) => {
console.log(err)
this.this_item = {}
})
}
},
delKeyword: function (id) {
let apiClient = new ApiApiFactory()
let p_id = null
apiClient.destroyKeyword(id).then(response => {
this.destroyCard(id)
}).catch((err) => {
console.log(err)
this.this_item = {}
})
},
moveKeyword: function (source_id, target_id) {
let apiClient = new ApiApiFactory()
apiClient.moveKeyword(String(source_id), String(target_id)).then(result => {
if (target_id === 0) {
let kw = this.findKeyword(this.keywords, source_id) || this.findKeyword(this.keywords2, source_id)
kw.parent = null
if (this.show_split){
this.destroyCard(source_id) // order matters, destroy old card before adding it back in at root
this.keywords = [kw].concat(this.keywords)
this.keywords2 = [JSON.parse(JSON.stringify(kw))].concat(this.keywords2)
} else {
this.destroyCard(source_id)
this.keywords = [kw].concat(this.keywords)
this.keywords2 = []
}
} else {
this.destroyCard(source_id)
this.refreshCard(target_id)
}
}).catch((err) => {
// TODO none of the error checking works because the openapi generated functions don't throw an error?
// or i'm capturing it incorrectly
console.log(err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
mergeKeyword: function (source_id, target_id) {
let apiClient = new ApiApiFactory()
apiClient.mergeKeyword(String(source_id), String(target_id)).then(result => {
this.destroyCard(source_id)
this.refreshCard(target_id)
}).catch((err) => {
console.log('Error', err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
// TODO: DRY the listKeyword functions (refresh, get children, infinityHandler ) can probably all be consolidated into a single function
getChildren: function(col, kw){
let apiClient = new ApiApiFactory()
let parent = {}
let query = undefined
let page = undefined
let root = kw.id
let tree = undefined
let pageSize = 200
apiClient.listKeywords(query, root, tree, page, pageSize).then(result => {
if (col == 'left') {
parent = this.findKeyword(this.keywords, kw.id)
} else if (col == 'right'){
parent = this.findKeyword(this.keywords2, kw.id)
}
if (parent) {
Vue.set(parent, 'children', result.data.results)
Vue.set(parent, 'expanded', true)
Vue.set(parent, 'show_recipes', false)
}
}).catch((err) => {
console.log(err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
getRecipes: function(col, kw){
let apiClient = new ApiApiFactory()
let parent = {}
let pageSize = 200
let keyword = String(kw.id)
apiClient.listRecipes(
undefined, keyword, undefined, undefined, undefined, undefined,
undefined, undefined, undefined, undefined, pageSize
).then(result => {
if (col == 'left') {
parent = this.findKeyword(this.keywords, kw.id)
} else if (col == 'right'){
parent = this.findKeyword(this.keywords2, kw.id)
}
if (parent) {
Vue.set(parent, 'recipes', result.data.results)
Vue.set(parent, 'show_recipes', true)
Vue.set(parent, 'expanded', false)
}
}).catch((err) => {
console.log(err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
refreshCard: function(id){
let target = {}
let apiClient = new ApiApiFactory()
let idx = undefined
let idx2 = undefined
apiClient.retrieveKeyword(id).then(result => {
target = this.findKeyword(this.keywords, id) || this.findKeyword(this.keywords2, id)
if (target.parent) {
let parent = this.findKeyword(this.keywords, target.parent)
let parent2 = this.findKeyword(this.keywords2, target.parent)
if (parent) {
if (parent.expanded){
idx = parent.children.indexOf(parent.children.find(kw => kw.id === target.id))
Vue.set(parent.children, idx, result.data)
}
}
if (parent2){
if (parent2.expanded){
idx2 = parent2.children.indexOf(parent2.children.find(kw => kw.id === target.id))
// deep copy to force columns to be indepedent
Vue.set(parent2.children, idx2, JSON.parse(JSON.stringify(result.data)))
}
}
} else {
idx = this.keywords.indexOf(this.keywords.find(kw => kw.id === target.id))
idx2 = this.keywords2.indexOf(this.keywords2.find(kw => kw.id === target.id))
Vue.set(this.keywords, idx, result.data)
Vue.set(this.keywords2, idx2, JSON.parse(JSON.stringify(result.data)))
}
})
},
findKeyword: function(kw_list, id){
if (kw_list.length == 0) {
return false
}
let keyword = kw_list.filter(kw => kw.id == id)
if (keyword.length == 1) {
return keyword[0]
} else if (keyword.length == 0) {
for (const k of kw_list.filter(kw => kw.expanded == true)) {
keyword = this.findKeyword(k.children, id)
if (keyword) {
return keyword
}
}
} else {
console.log('something terrible happened')
}
},
// this would move with modals with mixin?
prepareEmoji: function() {
this.$refs._edit.addText(this.this_item.icon || '');
this.$refs._edit.blur()
document.getElementById('btn-emoji-default').disabled = true;
},
// this would move with modals with mixin?
setIcon: function(icon) {
this.this_item.icon = icon
},
infiniteHandler: function($state, col) {
let apiClient = new ApiApiFactory()
let query = (col==='left') ? this.search_input : this.search_input2
let page = (col==='left') ? this.left_page + 1 : this.right_page + 1
let root = undefined
let tree = undefined
let pageSize = undefined
if (query === '') {
query = undefined
root = 0
}
apiClient.listKeywords(query, root, tree, page, pageSize).then(result => {
if (result.data.results.length){
if (col ==='left') {
this.left_page+=1
this.keywords = this.keywords.concat(result.data.results)
$state.loaded();
if (this.keywords.length >= result.data.count) {
$state.complete();
}
} else if (col ==='right') {
this.right_page+=1
this.keywords2 = this.keywords2.concat(result.data.results)
$state.loaded();
if (this.keywords2.length >= result.data.count) {
$state.complete();
}
}
} else {
console.log('no data returned')
$state.complete();
}
}).catch((err) => {
console.log(err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
$state.complete();
})
},
destroyCard: function(id) {
let kw = this.findKeyword(this.keywords, id)
let kw2 = this.findKeyword(this.keywords2, id)
let p_id = undefined
if (kw) {
p_id = kw.parent
} else if (kw2) {
p_id = kw2.parent
}
if (p_id) {
let parent = this.findKeyword(this.keywords, p_id)
let parent2 = this.findKeyword(this.keywords2, p_id)
if (parent){
Vue.set(parent, 'numchild', parent.numchild - 1)
if (parent.expanded) {
let idx = parent.children.indexOf(parent.children.find(kw => kw.id === id))
Vue.delete(parent.children, idx)
}
}
if (parent2){
Vue.set(parent2, 'numchild', parent2.numchild - 1)
if (parent2.expanded) {
let idx = parent2.children.indexOf(parent2.children.find(kw => kw.id === id))
Vue.delete(parent2.children, idx)
}
}
}
this.keywords = this.keywords.filter(kw => kw.id != id)
this.keywords2 = this.keywords2.filter(kw => kw.id != id)
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
</style>

10
vue/src/apps/KeywordListView/main.js Normal file
View File

@@ -0,0 +1,10 @@
import Vue from 'vue'
import App from './KeywordListView'
import i18n from '@/i18n'
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')

114
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@@ -15,7 +15,9 @@
<b-input-group class="mt-3">
<b-input class="form-control" v-model="settings.search_input" v-bind:placeholder="$t('Search')"></b-input>
<b-input-group-append>
<b-button v-b-toggle.collapse_advanced_search variant="primary" class="shadow-none"><i
<b-button v-b-toggle.collapse_advanced_search
v-bind:class="{'btn-primary': !isAdvancedSettingsSet(), 'btn-danger': isAdvancedSettingsSet()}"
class="shadow-none btn"><i
class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i><i class="fas fa-caret-up"
v-if="settings.advanced_search_visible"></i>
</b-button>
@@ -37,20 +39,16 @@
:href="resolveDjangoUrl('data_import_url')">{{ $t('Import') }}</a>
</div>
<div class="col-md-3" style="margin-top: 1vh">
<button class="btn btn-primary btn-block text-uppercase" @click="resetSearch">
{{ $t('Reset_Search') }}
<button class="btn btn-block text-uppercase" v-b-tooltip.hover :title="$t('show_only_internal')"
v-bind:class="{'btn-success':settings.search_internal, 'btn-primary':!settings.search_internal}"
@click="settings.search_internal = !settings.search_internal;refreshData()">
{{ $t('Internal') }}
</button>
</div>
<div class="col-md-2" style="position: relative; margin-top: 1vh">
<b-form-checkbox v-model="settings.search_internal" name="check-button" @change="refreshData"
class="shadow-none"
style="position:relative;top: 50%; transform: translateY(-50%);" switch>
{{ $t('show_only_internal') }}
</b-form-checkbox>
</div>
<div class="col-md-1" style="position: relative; margin-top: 1vh">
<button id="id_settings_button" class="btn btn-primary btn-block"><i class="fas fa-cog"></i>
<div class="col-md-3" style="position: relative; margin-top: 1vh">
<button id="id_settings_button" class="btn btn-primary btn-block text-uppercase"><i
class="fas fa-cog"></i>
</button>
</div>
@@ -110,12 +108,13 @@
<generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords"
:initial_selection="settings.search_keywords"
search_function="listKeywords" label="label"
:tree_api="true"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Keywords')"></generic-multiselect>
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="settings.search_keywords_or" name="check-button"
@change="refreshData"
@change="refreshData(false)"
class="shadow-none" switch>
<span class="text-uppercase" v-if="settings.search_keywords_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-else>{{ $t('and') }}</span>
@@ -137,7 +136,7 @@
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="settings.search_foods_or" name="check-button"
@change="refreshData"
@change="refreshData(false)"
class="shadow-none" switch>
<span class="text-uppercase" v-if="settings.search_foods_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-else>{{ $t('and') }}</span>
@@ -159,7 +158,7 @@
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="settings.search_books_or" name="check-button"
@change="refreshData"
@change="refreshData(false)"
class="shadow-none" tyle="width: 100%" switch>
<span class="text-uppercase" v-if="settings.search_books_or">{{ $t('or') }}</span>
<span class="text-uppercase" v-else>{{ $t('and') }}</span>
@@ -179,7 +178,16 @@
</div>
</div>
<div class="row" style="margin-top: 2vh">
<div class="row">
<div class="col col-md-12 text-right" style="margin-top: 2vh">
<span class="text-muted">
{{ $t('Page') }} {{ settings.pagination_page }}/{{ pagination_count }} <a href="#" @click="resetSearch"><i
class="fas fa-times-circle"></i> {{ $t('Reset') }}</a>
</span>
</div>
</div>
<div class="row">
<div class="col col-md-12">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
@@ -200,18 +208,17 @@
<div class="row" style="margin-top: 2vh">
<div class="col col-md-12">
<b-pagination
v-model="pagination_page"
:total-rows="pagination_count"
per-page="25"
@change="pageChange"
align="center">
<b-pagination pills
v-model="settings.pagination_page"
:total-rows="pagination_count"
per-page="25"
@change="pageChange"
align="center">
</b-pagination>
</div>
</div>
</div>
<div class="col-md-2 d-none d-md-block">
@@ -244,6 +251,8 @@ import GenericMultiselect from "@/components/GenericMultiselect";
Vue.use(BootstrapVue)
let SETTINGS_COOKIE_NAME = 'search_settings'
export default {
name: 'RecipeSearchView',
mixins: [ResolveUrlMixin],
@@ -254,6 +263,7 @@ export default {
meal_plans: [],
last_viewed_recipes: [],
settings_loaded: false,
settings: {
search_input: '',
search_internal: false,
@@ -267,21 +277,50 @@ export default {
advanced_search_visible: false,
show_meal_plan: true,
recently_viewed: 5,
pagination_page: 1,
},
pagination_count: 0,
pagination_page: 1,
}
},
mounted() {
this.$nextTick(function () {
if (this.$cookies.isKey('search_settings_v2')) {
this.settings = this.$cookies.get("search_settings_v2")
if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) {
let cookie_val = this.$cookies.get(SETTINGS_COOKIE_NAME)
for (let i of Object.keys(cookie_val)) {
this.$set(this.settings, i, cookie_val[i])
}
//TODO i have no idea why the above code does not suffice to update the
//TODO pagination UI element as $set should update all values reactively but it does not
setTimeout(function () {
this.$set(this.settings, 'pagination_page', 0)
}.bind(this), 50)
setTimeout(function () {
this.$set(this.settings, 'pagination_page', cookie_val['pagination_page'])
}.bind(this), 51)
}
let urlParams = new URLSearchParams(window.location.search);
let apiClient = new ApiApiFactory()
if (urlParams.has('keyword')) {
this.settings.search_keywords = []
for (let x of urlParams.getAll('keyword')) {
let keyword = {id: x, name: 'loading'}
this.settings.search_keywords.push(keyword)
apiClient.retrieveKeyword(x).then(result => {
this.$set(this.settings.search_keywords, this.settings.search_keywords.indexOf(keyword), result.data)
})
}
}
this.loadMealPlan()
this.loadRecentlyViewed()
this.refreshData()
this.refreshData(false)
})
this.$i18n.locale = window.CUSTOM_LOCALE
@@ -289,7 +328,7 @@ export default {
watch: {
settings: {
handler() {
this.$cookies.set("search_settings_v2", this.settings, -1)
this.$cookies.set(SETTINGS_COOKIE_NAME, this.settings, -1)
},
deep: true
},
@@ -300,11 +339,11 @@ export default {
this.loadRecentlyViewed()
},
'settings.search_input': _debounce(function () {
this.refreshData()
this.refreshData(false)
}, 300),
},
methods: {
refreshData: function () {
refreshData: function (page_load) {
let apiClient = new ApiApiFactory()
apiClient.listRecipes(
this.settings.search_input,
@@ -323,10 +362,11 @@ export default {
this.settings.search_internal,
undefined,
this.pagination_page,
this.settings.pagination_page,
).then(result => {
this.recipes = result.data.results
window.scrollTo(0, 0);
this.pagination_count = result.data.count
this.recipes = result.data.results
})
},
loadMealPlan: function () {
@@ -360,7 +400,7 @@ export default {
},
genericSelectChanged: function (obj) {
this.settings[obj.var] = obj.val
this.refreshData()
this.refreshData(false)
},
resetSearch: function () {
this.settings.search_input = ''
@@ -368,11 +408,15 @@ export default {
this.settings.search_keywords = []
this.settings.search_foods = []
this.settings.search_books = []
this.refreshData()
this.settings.pagination_page = 1
this.refreshData(false)
},
pageChange: function (page) {
this.pagination_page = page
this.settings.pagination_page = page
this.refreshData()
},
isAdvancedSettingsSet() {
return ((this.settings.search_keywords.length + this.settings.search_foods.length + this.settings.search_books.length) > 0)
}
}
}

28
vue/src/apps/RecipeView/RecipeView.vue
View File

@@ -11,6 +11,13 @@
</div>
</div>
<div class="row text-center">
<div class="col col-md-12">
<recipe-rating :recipe="recipe"></recipe-rating> <br/>
<last-cooked :recipe="recipe"></last-cooked>
</div>
</div>
<div class="my-auto">
<div class="col-12" style="text-align: center">
<i>{{ recipe.description }}</i>
@@ -47,7 +54,7 @@
</div>
</div>
<div class="col col-md-4 col-10">
<div class="col col-md-4 col-10 mt-2 mt-md-0 mt-lg-0 mt-xl-0">
<div class="row d-flex" style="padding-left: 16px">
<div class="my-auto" style="padding-right: 4px">
<i class="fas fa-pizza-slice fa-2x text-primary"></i>
@@ -57,8 +64,8 @@
value="1" maxlength="3" min="0"
type="number" class="form-control form-control-lg" v-model.number="servings"/>
</div>
<div class="my-auto">
<b><template v-if="recipe.servings_text === ''">{{ $t('Servings') }}</template><template v-else>{{recipe.servings_text}}</template></b>
<div class="my-auto ">
<span class="text-primary"><b><template v-if="recipe.servings_text === ''">{{ $t('Servings') }}</template><template v-else>{{recipe.servings_text}}</template></b></span>
</div>
</div>
</div>
@@ -134,6 +141,14 @@
</div>
<add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
<div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'">
<div class="col col-md-12">
<a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)" >{{$t('Report Abuse')}}</a>
</div>
</div>
</div>
</template>
@@ -158,6 +173,8 @@ import moment from 'moment'
import Keywords from "@/components/Keywords";
import LoadingSpinner from "@/components/LoadingSpinner";
import AddRecipeToBook from "@/components/AddRecipeToBook";
import RecipeRating from "@/components/RecipeRating";
import LastCooked from "@/components/LastCooked";
Vue.prototype.moment = moment
@@ -170,6 +187,8 @@ export default {
ToastMixin,
],
components: {
LastCooked,
RecipeRating,
PdfViewer,
ImageViewer,
Ingredient,
@@ -191,7 +210,8 @@ export default {
recipe: undefined,
ingredient_count: 0,
servings: 1,
start_time: ""
start_time: "",
share_uid: window.SHARE_UID
}
},
mounted() {

111
vue/src/apps/UserFileView/UserFileView.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<div id="app">
<div class="row">
<div class="col col-md-12">
<h3>{{ $t('Files') }} <span class="float-right"><file-editor @change="loadInitial()"></file-editor></span>
</h3>
</div>
</div>
<div class="row" style="margin-top: 2vh">
<div class="col col-md-12">
<b-progress :max="max_file_size_mb">
<b-progress-bar :value="current_file_size_mb">
<span><strong class="text-dark ">{{ current_file_size_mb.toFixed(2) }} / {{ max_file_size_mb }} MB</strong></span>
</b-progress-bar>
</b-progress>
</div>
</div>
<div class="row" style="margin-top: 2vh">
<div class="col col-md-12">
<table class="table">
<thead>
<tr>
<th>{{ $t('Name') }}</th>
<th>{{ $t('Size') }} (MB)</th>
<th>{{ $t('Download') }}</th>
<th>{{ $t('Edit') }}</th>
</tr>
</thead>
<tr v-for="f in files" v-bind:key="f.id">
<td>{{ f.name }}</td>
<td>{{ f.file_size_kb / 1000 }}</td>
<td><a :href="f.file" target="_blank" rel="noreferrer nofollow">{{ $t('Download') }}</a></td>
<td>
<file-editor @change="loadInitial()" :file_id="f.id"></file-editor>
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import {ResolveUrlMixin, ToastMixin} from "@/utils/utils";
import {ApiApiFactory} from "@/utils/openapi/api.ts";
Vue.use(BootstrapVue)
// import draggable from 'vuedraggable'
import axios from 'axios'
import FileEditor from "@/components/FileEditor";
// import Multiselect from "vue-multiselect";
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.defaults.xsrfCookieName = 'csrftoken'
export default {
name: 'UserFileView',
mixins: [
ResolveUrlMixin,
ToastMixin,
],
components: {
FileEditor
},
data() {
return {
files: [],
current_file_size_mb: window.CURRENT_FILE_SIZE_MB,
max_file_size_mb: window.MAX_FILE_SIZE_MB
}
},
mounted() {
this.$i18n.locale = window.CUSTOM_LOCALE
this.loadInitial()
},
methods: {
loadInitial: function () {
let apiClient = new ApiApiFactory()
apiClient.listUserFiles().then(results => {
this.files = results.data
})
},
}
}
</script>
<style>
</style>

10
vue/src/apps/UserFileView/main.js Normal file
View File

@@ -0,0 +1,10 @@
import Vue from 'vue'
import App from './UserFileView.vue'
import i18n from '@/i18n'
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')

3
vue/src/components/AddRecipeToBook.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<b-modal class="modal" id="id_modal_add_book" :title="$t('Add_to_Book')" :ok-title="$t('Add')"
<b-modal class="modal" :id="`id_modal_add_book_${modal_id}`" :title="$t('Add_to_Book')" :ok-title="$t('Add')"
:cancel-title="$t('Close')" @ok="addToBook()">
<multiselect
@@ -42,6 +42,7 @@ export default {
},
props: {
recipe: Object,
modal_id: Number
},
data() {
return {

3
vue/src/components/CookLog.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<b-modal class="modal" id="id_modal_cook_log" :title="$t('Log_Recipe_Cooking')" :ok-title="$t('Save')"
<b-modal class="modal" :id="`id_modal_cook_log_${modal_id}`" :title="$t('Log_Recipe_Cooking')" :ok-title="$t('Save')"
:cancel-title="$t('Close')" @ok="logCook()">
<p>{{ $t('all_fields_optional') }}</p>
@@ -38,6 +38,7 @@ export default {
name: 'CookLog',
props: {
recipe: Object,
modal_id: Number
},
data() {
return {

122
vue/src/components/FileEditor.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<div>
<b-button v-b-modal="'modal-file-editor'+file_id" v-bind:class="{'btn-success': (file_id === undefined)}">
<template v-if="this.file_id">{{ $t('Edit') }}</template>
<template v-else>{{ $t('New') }}</template>
</b-button>
<b-modal :id="'modal-file-editor'+file_id" v-bind:title="$t('File')" @ok="modalOk()">
<template v-if="file!==undefined">
{{ $t('Name') }}
<b-input v-model="file.name"></b-input>
<br/>
{{ $t('File') }}
<b-form-file v-model="file.file"></b-form-file>
</template>
<br/>
<br/>
<template #modal-footer="">
<b-button size="sm" variant="success" @click="modalOk()">
{{ $t('Ok') }}
</b-button>
<b-button size="sm" variant="secondary" @click="$bvModal.hide('modal-file-editor'+file_id)">
{{ $t('Cancel') }}
</b-button>
<b-button size="sm" variant="danger" @click="deleteFile()">
{{ $t('Delete') }}
</b-button>
</template>
</b-modal>
</div>
</template>
<script>
import {ApiApiFactory} from "@/utils/openapi/api";
import {makeToast} from "@/utils/utils";
export default {
name: "FileEditor",
data() {
return {
file: undefined
}
},
props: {
file_id: Number,
},
mounted() {
if (this.file_id !== undefined) {
this.loadFile(this.file_id.toString())
} else {
this.file = {
name: '',
file: undefined
}
}
},
methods: {
loadFile: function (id) {
let apiClient = new ApiApiFactory()
apiClient.retrieveUserFile(id).then(result => {
this.file = result.data
})
},
modalOk: function () {
if (this.file_id === undefined) {
console.log('CREATING')
this.createFile()
} else {
console.log('UPDATING')
this.updateFile()
}
},
updateFile: function () {
let apiClient = new ApiApiFactory()
let passedFile = undefined
if (!(typeof this.file.file === 'string' || this.file.file instanceof String)) { // only update file if it was changed
passedFile = this.file.file
}
apiClient.updateUserFile(this.file.id, this.file.name, passedFile).then(request => {
makeToast(this.$t('Success'), this.$t('success_updating_resource'), 'success')
this.$emit('change',)
}).catch(err => {
makeToast(this.$t('Error'), this.$t('err_updating_resource') + '\n' + err.response.data, 'danger')
console.log(err.request, err.response)
})
},
createFile: function () {
let apiClient = new ApiApiFactory()
apiClient.createUserFile(this.file.name, this.file.file).then(request => {
makeToast(this.$t('Success'), this.$t('success_creating_resource'), 'success')
this.$emit('change',)
this.file = {
name: '',
file: undefined
}
}).catch(err => {
makeToast(this.$t('Error'), this.$t('err_creating_resource') + '\n' + err.response.data, 'danger')
console.log(err.request, err.response)
})
},
deleteFile: function () {
let apiClient = new ApiApiFactory()
apiClient.destroyUserFile(this.file.id).then(results => {
makeToast(this.$t('Success'), this.$t('success_deleting_resource'), 'success')
this.$emit('change',)
}).catch(err => {
makeToast(this.$t('Error'), this.$t('err_deleting_resource') + '\n' + err.response.data, 'danger')
console.log(err.request, err.response)
})
}
}
}
</script>

38
vue/src/components/GenericContextMenu.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div>
<b-dropdown variant="link" toggle-class="text-decoration-none" no-caret>
<template #button-content>
<i class="fas fa-ellipsis-v" ></i>
</template>
<b-dropdown-item v-on:click="$emit('item-action', 'edit')" v-if="show_edit">
<i class="fas fa-pencil-alt fa-fw"></i> {{ $t('Edit') }}
</b-dropdown-item>
<b-dropdown-item v-on:click="$emit('item-action', 'delete')" v-if="show_delete">
<i class="fas fa-trash-alt fa-fw"></i> {{ $t('Delete') }}
</b-dropdown-item>
<b-dropdown-item v-on:click="$emit('item-action', 'move')" v-if="show_move">
<i class="fas fa-trash-alt fa-fw"></i> {{ $t('Move') }}
</b-dropdown-item>
<b-dropdown-item v-if="show_merge" v-on:click="$emit('item-action', 'merge')">
<i class="fas fa-trash-alt fa-fw"></i> {{ $t('Merge') }}
</b-dropdown-item>
</b-dropdown>
</div>
</template>
<script>
export default {
name: 'KeywordContextMenu',
props: {
show_edit: {type: Boolean, default: true},
show_delete: {type: Boolean, default: true},
show_move: {type: Boolean, default: false},
show_merge: {type: Boolean, default: false},
}
}
</script>

38
vue/src/components/GenericContextMenu.vue~working Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div>
<b-dropdown variant="link" toggle-class="text-decoration-none" no-caret>
<template #button-content>
<i class="fas fa-ellipsis-v" ></i>
</template>
<b-dropdown-item v-on:click="$emit('item-action', 'edit')" v-if="show_edit">
<i class="fas fa-pencil-alt fa-fw"></i> {{ $t('Edit') }}
</b-dropdown-item>
<b-dropdown-item v-on:click="$emit('item-action', 'delete')" v-if="show_delete">
<i class="fas fa-trash-alt fa-fw"></i> {{ $t('Delete') }}
</b-dropdown-item>
<b-dropdown-item v-on:click="$emit('item-action', 'move')" v-if="show_move">
<i class="fas fa-trash-alt fa-fw"></i> {{ $t('Move') }}
</b-dropdown-item>
<b-dropdown-item v-if="show_merge" v-on:click="$emit('item-action', 'merge')">
<i class="fas fa-trash-alt fa-fw"></i> {{ $t('Merge') }}
</b-dropdown-item>
</b-dropdown>
</div>
</template>
<script>
export default {
name: 'KeywordContextMenu',
props: {
show_edit: {type: Boolean, default: true},
show_delete: {type: Boolean, default: true},
show_move: {type: Boolean, default: false},
show_merge: {type: Boolean, default: false},
}
}
</script>

30
vue/src/components/GenericMultiselect.vue
View File

@@ -9,7 +9,7 @@
:placeholder="placeholder"
:label="label"
track-by="id"
:multiple="true"
:multiple="multiple"
:loading="loading"
@search-change="search"
@input="selectionChanged">
@@ -35,13 +35,16 @@ export default {
placeholder: String,
search_function: String,
label: String,
parent_variable: String,
initial_selection: Array,
parent_variable: {type: String, default: undefined},
sticky_options: {type:Array, default(){return []}},
initial_selection: {type:Array, default(){return []}},
multiple: {type: Boolean, default: true},
tree_api: {type: Boolean, default: false} // api requires params that are unique to TreeMixin
},
watch: {
initial_selection: function (newVal, oldVal) { // watch it
this.selected_objects = newVal
}
},
},
mounted() {
this.search('')
@@ -49,10 +52,23 @@ export default {
methods: {
search: function (query) {
let apiClient = new ApiApiFactory()
if (this.tree_api) {
let page = 1
let root = undefined
let tree = undefined
let pageSize = 10
apiClient[this.search_function]({query: {query: query, limit: 10}}).then(result => {
this.objects = result.data
})
if (query === '') {
query = undefined
}
apiClient[this.search_function](query, root, tree, page, pageSize).then(result => {
this.objects = this.sticky_options.concat(result.data.results)
})
} else {
apiClient[this.search_function]({query: {query: query, limit: 10}}).then(result => {
this.objects = this.sticky_options.concat(result.data)
})
}
},
selectionChanged: function () {
this.$emit('change', {var: this.parent_variable, val: this.selected_objects})

4
vue/src/components/Ingredient.vue
View File

@@ -7,7 +7,7 @@
</td>
</template>
<template v-else>
<td>
<td class="d-print-none">
<i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
<i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
</td>
@@ -31,7 +31,7 @@
</span>
<div class="d-none d-print-block">
<i class="far fa-comment-alt"></i> {{ ingredient.note }}
<i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}
</div>
</div>
</td>

213
vue/src/components/KeywordCard.vue Normal file
View File

@@ -0,0 +1,213 @@
<template>
<div row>
<b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
refs="keywordCard"
style="height: 10vh;" :style="{'cursor:grab' : draggle}"
@dragover.prevent
@dragenter.prevent
:draggable="draggable"
@dragstart="handleDragStart($event)"
@dragenter="handleDragEnter($event)"
@dragleave="handleDragLeave($event)"
@drop="handleDragDrop($event)">
<b-row no-gutters style="height:inherit;">
<b-col no-gutters md="3" style="justify-content: center; height:inherit;">
<b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="keyword_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
</b-col>
<b-col no-gutters md="9" style="height:inherit;">
<b-card-body class="m-0 py-0" style="height:inherit;">
<b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
<h5 class="m-0 mt-1 text-truncate">{{ keyword.name }}</h5>
<div class= "m-0 text-truncate">{{ keyword.description }}</div>
<div class="mt-auto mb-1 d-flex flex-row justify-content-end">
<div v-if="keyword.numchild !=0" class="mx-2 btn btn-link btn-sm"
style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':keyword})">
<div v-if="!keyword.expanded">{{keyword.numchild}} {{$t('Keywords')}}</div>
<div v-else>{{$t('Hide Keywords')}}</div>
</div>
<div class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
v-on:click="$emit('item-action',{'action':'get-recipes','source':keyword})">
<div v-if="!keyword.show_recipes">{{keyword.numrecipe}} {{$t('Recipes')}}</div>
<div v-else>{{$t('Hide Recipes')}}</div>
</div>
</div>
</b-card-text>
</b-card-body>
</b-col>
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
<generic-context-menu style="float:right"
:show_merge="true"
:show_move="true"
@item-action="$emit('item-action', {'action': $event, 'source': keyword})">
</generic-context-menu>
</div>
</b-row>
</b-card>
<!-- recursively add child keywords -->
<div class="row" v-if="keyword.expanded">
<div class="col-md-11 offset-md-1">
<keyword-card v-for="child in keyword.children"
:keyword="child"
v-bind:key="child.id"
draggable="true"
@item-action="$emit('item-action', $event)">
</keyword-card>
</div>
</div>
<!-- conditionally view recipes -->
<div class="row" v-if="keyword.show_recipes">
<div class="col-md-11 offset-md-1">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
<recipe-card v-for="r in keyword.recipes"
v-bind:key="r.id"
:recipe="r">
</recipe-card>
</div>
</div>
</div>
<!-- this should be made a generic component, would also require mixin for functions that generate the popup and put in parent container-->
<b-list-group ref="tooltip" variant="light" v-show="show_menu" v-on-clickaway="closeMenu" style="z-index:999; cursor:pointer">
<b-list-group-item action v-on:click="$emit('item-action',{'action': 'move', 'target': keyword, 'source': source}); closeMenu()">
{{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':keyword.name})}}
</b-list-group-item>
<b-list-group-item action v-on:click="$emit('item-action',{'action': 'merge', 'target': keyword, 'source': source}); closeMenu()">
{{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':keyword.name}) }}
</b-list-group-item>
<b-list-group-item action v-on:click="closeMenu()">
{{$t('Cancel')}}
</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
import GenericContextMenu from "@/components/GenericContextMenu";
import RecipeCard from "@/components/RecipeCard";
import { mixin as clickaway } from 'vue-clickaway';
import { createPopper } from '@popperjs/core';
export default {
name: "KeywordCard",
components: { GenericContextMenu, RecipeCard },
mixins: [clickaway],
props: {
keyword: Object,
draggable: {type: Boolean, default: false}
},
data() {
return {
keyword_image: '',
over: false,
show_menu: false,
dragMenu: undefined,
isError: false,
source: {},
target: {}
}
},
mounted() {
if (this.keyword == null || this.keyword.image == null) {
this.keyword_image = window.IMAGE_PLACEHOLDER
} else {
this.keyword_image = this.keyword.image
}
this.dragMenu = this.$refs.tooltip
},
methods: {
handleDragStart: function(e) {
this.isError = false
e.dataTransfer.setData('source', JSON.stringify(this.keyword))
},
handleDragEnter: function(e) {
if (!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget != null) {
this.over = true
}
},
handleDragLeave: function(e) {
if (!e.currentTarget.contains(e.relatedTarget)) {
this.over = false
}
},
handleDragDrop: function(e) {
let source = JSON.parse(e.dataTransfer.getData('source'))
if (source.id != this.keyword.id){
this.source = source
let menuLocation = {getBoundingClientRect: this.generateLocation(e.pageX, e.pageY),}
this.show_menu = true
let popper = createPopper(
menuLocation,
this.dragMenu,
{
placement: 'bottom-start',
modifiers: [
{
name: 'preventOverflow',
options: {
rootBoundary: 'document',
},
},
{
name: 'flip',
options: {
fallbackPlacements: ['bottom-end', 'top-start', 'top-end', 'left-start', 'right-start'],
rootBoundary: 'document',
},
},
],
})
popper.update()
this.over = false
this.$emit({'action': 'drop', 'target': this.keyword, 'source': this.source})
} else {
this.isError = true
}
},
generateLocation: function (x = 0, y = 0) {
return () => ({
width: 0,
height: 0,
top: y,
right: x,
bottom: y,
left: x,
});
},
closeMenu: function(){
this.show_menu = false
}
}
}
</script>
<style scoped>
.shake {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
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);
}
}
</style>

4
vue/src/components/Keywords.vue
View File

@@ -1,8 +1,8 @@
<template>
<div v-if="recipe.keywords.length > 0">
<small :key="k.id" v-for="k in recipe.keywords" style="padding: 2px">
<span :key="k.id" v-for="k in recipe.keywords" style="padding: 2px">
<b-badge pill variant="light">{{k.label}}</b-badge>
</small>
</span>
</div>
</template>

28
vue/src/components/LastCooked.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<span>
<b-badge pill variant="primary" v-if="recipe.last_cooked !== null"><i class="fas fa-utensils"></i> {{
formatDate(recipe.last_cooked)
}}</b-badge>
</span>
</template>
<script>
import moment from "moment/moment";
export default {
name: "LastCooked",
props: {
recipe: Object
},
methods: {
formatDate: function (datetime) {
moment.locale(window.navigator.language);
return moment(datetime).format('L')
}
}
}
</script>
<style scoped>
</style>

12
vue/src/components/LoadingSpinner.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="row">
<div class="col" style="text-align: center">
<img class="spinner-tandoor" alt="loading spinner" src="" style="height: 30vh"/>
</div>
<div class="row">
<div class="col" style="text-align: center">
<img class="spinner-tandoor" alt="loading spinner" src="" v-bind:style="{ height: size + 'vh' }"/>
</div>
</div>
</template>
<script>
@@ -12,6 +12,10 @@ export default {
name: 'LoadingSpinner',
props: {
recipe: Object,
size: {
type: Number,
default: 30
},
},
}
</script>

44
vue/src/components/RecipeCard.vue
View File

@@ -5,26 +5,44 @@
<a :href="clickUrl()">
<b-card-img-lazy style="height: 15vh; object-fit: cover" :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"
style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
<recipe-context-menu :recipe="recipe" style="float:right" v-if="recipe !== null"></recipe-context-menu>
<a>
<recipe-context-menu :recipe="recipe" style="float:right" v-if="recipe !== null"></recipe-context-menu>
</a>
</div>
</a>
<b-card-body>
<h5><a :href="clickUrl()">
<b-card-body style="padding: 16px">
<h6><a :href="clickUrl()">
<template v-if="recipe !== null">{{ recipe.name }}</template>
<template v-else>{{ meal_plan.title }}</template>
</a></h5>
</a></h6>
<b-card-text style="text-overflow: ellipsis">
<b-card-text style="text-overflow: ellipsis;">
<template v-if="recipe !== null">
<recipe-rating :recipe="recipe"></recipe-rating>
<template v-if="recipe.description !== null">
<span v-if="recipe.description.length > 120">
{{ recipe.description.substr(0, 120) + "\u2026" }}
</span>
<span v-if="recipe.description.length <= 120">
{{ recipe.description }}
</span>
</template>
<br/> <!-- TODO UGLY! -->
<last-cooked :recipe="recipe"></last-cooked>
<keywords :recipe="recipe" style="margin-top: 4px"></keywords>
<b-badge pill variant="info" v-if="!recipe.internal">{{ $t('External') }}</b-badge>
<b-badge pill variant="success" v-if="Date.parse(recipe.created_at) > new Date(Date.now() - (7 * (1000 * 60 * 60 * 24)))">{{ $t('New') }}</b-badge>
<b-badge pill variant="success"
v-if="Date.parse(recipe.created_at) > new Date(Date.now() - (7 * (1000 * 60 * 60 * 24)))">
{{ $t('New') }}
</b-badge>
</template>
<template v-else>{{ meal_plan.note }}</template>
</b-card-text>
@@ -42,13 +60,19 @@
import RecipeContextMenu from "@/components/RecipeContextMenu";
import Keywords from "@/components/Keywords";
import {resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
import RecipeRating from "@/components/RecipeRating";
import moment from "moment/moment";
import Vue from "vue";
import LastCooked from "@/components/LastCooked";
Vue.prototype.moment = moment
export default {
name: "RecipeCard",
mixins: [
ResolveUrlMixin,
],
components: {Keywords, RecipeContextMenu},
components: {LastCooked, RecipeRating, Keywords, RecipeContextMenu},
props: {
recipe: Object,
meal_plan: Object,
@@ -82,4 +106,4 @@ export default {
<style scoped>
</style>
</style>

93
vue/src/components/RecipeContextMenu.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<div class="dropdown">
<div class="dropdown d-print-none">
<a class="btn shadow-none" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
<i class="fas fa-ellipsis-v fa-lg"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
@@ -15,9 +15,11 @@
<a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)" v-if="!recipe.internal"><i
class="fas fa-exchange-alt fa-fw"></i> {{ $t('convert_internal') }}</a>
<button class="dropdown-item" @click="$bvModal.show('id_modal_add_book')">
<i class="fas fa-bookmark fa-fw"></i> {{ $t('Add_to_Book') }}
</button>
<a href="#">
<button class="dropdown-item" @click="$bvModal.show(`id_modal_add_book_${modal_id}`)">
<i class="fas fa-bookmark fa-fw"></i> {{ $t('Add_to_Book') }}
</button>
</a>
<a class="dropdown-item" :href="`${resolveDjangoUrl('view_shopping') }?r=[${recipe.id},${servings_value}]`"
v-if="recipe.internal" target="_blank" rel="noopener noreferrer">
@@ -29,33 +31,60 @@
class="fas fa-calendar fa-fw"></i> {{ $t('Add_to_Plan') }}
</a>
<a href="#">
<button class="dropdown-item" @click="$bvModal.show(`id_modal_cook_log_${modal_id}`)"><i
class="fas fa-clipboard-list fa-fw"></i> {{ $t('Log_Cooking') }}
</button>
</a>
<button class="dropdown-item" @click="$bvModal.show('id_modal_cook_log')"><i
class="fas fa-clipboard-list fa-fw"></i> {{ $t('Log_Cooking') }}
</button>
<button class="dropdown-item" onclick="window.print()"><i
class="fas fa-print fa-fw"></i> {{ $t('Print') }}
</button>
<a href="#">
<button class="dropdown-item" onclick="window.print()"><i
class="fas fa-print fa-fw"></i> {{ $t('Print') }}
</button>
</a>
<a class="dropdown-item" :href="resolveDjangoUrl('view_export') + '?r=' + recipe.id" target="_blank"
rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ $t('Export') }}</a>
<a class="dropdown-item" :href="resolveDjangoUrl('new_share_link', recipe.id)" target="_blank"
rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{ $t('Share') }}</a>
<a href="#">
<button class="dropdown-item" @click="createShareLink()" v-if="recipe.internal"><i
class="fas fa-share-alt fa-fw"></i> {{ $t('Share') }}
</button>
</a>
</div>
</div>
<cook-log :recipe="recipe"></cook-log>
<cook-log :recipe="recipe" :modal_id="modal_id"></cook-log>
<add-recipe-to-book :recipe="recipe" :modal_id="modal_id"></add-recipe-to-book>
<b-modal :id="`modal-share-link_${modal_id}`" v-bind:title="$t('Share')" hide-footer>
<div class="row">
<div class="col col-md-12">
<label v-if="recipe_share_link !== undefined">{{ $t('Public share link') }}</label>
<input ref="share_link_ref" class="form-control" v-model="recipe_share_link"/>
<b-button class="mt-2 mb-3 d-none d-md-inline" variant="secondary"
@click="$bvModal.hide(`modal-share-link_${modal_id}`)">{{ $t('Close') }}
</b-button>
<b-button class="mt-2 mb-3 ml-md-2" variant="primary" @click="copyShareLink()">{{ $t('Copy') }}</b-button>
<b-button class="mt-2 mb-3 ml-2 float-right" variant="success" @click="shareIntend()">{{ $t('Share') }} <i
class="fa fa-share-alt"></i></b-button>
</div>
</div>
</b-modal>
</div>
</template>
<script>
import {ResolveUrlMixin} from "@/utils/utils";
import {makeToast, resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
import CookLog from "@/components/CookLog";
import axios from "axios";
import AddRecipeToBook from "./AddRecipeToBook";
export default {
name: 'RecipeContextMenu',
@@ -63,11 +92,14 @@ export default {
ResolveUrlMixin
],
components: {
AddRecipeToBook,
CookLog
},
data() {
return {
servings_value: 0
servings_value: 0,
recipe_share_link: undefined,
modal_id: this.recipe.id + Math.round(Math.random() * 100000)
}
},
props: {
@@ -79,6 +111,33 @@ export default {
},
mounted() {
this.servings_value = ((this.servings === -1) ? this.recipe.servings : this.servings)
},
methods: {
createShareLink: function () {
axios.get(resolveDjangoUrl('api_share_link', this.recipe.id)).then(result => {
this.$bvModal.show(`modal-share-link_${this.modal_id}`)
this.recipe_share_link = result.data.link
}).catch(err => {
if (err.response.status === 403) {
makeToast(this.$t('Share'), this.$t('Sharing is not enabled for this space.'), 'danger')
}
})
},
copyShareLink: function () {
let share_input = this.$refs.share_link_ref;
share_input.select();
document.execCommand("copy");
},
shareIntend: function () {
let shareData = {
title: this.recipe.name,
text: `${this.$t('Check out this recipe: ')} ${this.recipe.name}`,
url: this.recipe_share_link
}
navigator.share(shareData)
}
}
}
</script>

25
vue/src/components/RecipeRating.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div>
<span class="d-inline" v-if="recipe.rating > 0">
<i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>
<i class="fas fa-star-half-alt fa-xs text-primary" v-if="recipe.rating % 1 > 0"></i>
<i class="far fa-star fa-xs text-secondary" v-for="i in (5 - Math.ceil(recipe.rating))" v-bind:key="i + 10"></i>
</span>
</div>
</template>
<script>
export default {
name: "RecipeRating",
props: {
recipe: Object
}
}
</script>
<style scoped>
</style>

33
vue/src/components/Step.vue
View File

@@ -22,7 +22,7 @@
</div>
<div class="col col-md-4" style="text-align: right">
<b-button @click="details_visible = !details_visible" style="border: none; background: none"
class="shadow-none" :class="{ 'text-primary': details_visible, 'text-success': !details_visible}">
class="shadow-none d-print-none" :class="{ 'text-primary': details_visible, 'text-success': !details_visible}">
<i class="far fa-check-circle"></i>
</b-button>
</div>
@@ -34,19 +34,21 @@
<table class="table table-sm">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="i in step.ingredients">
<Ingredient v-bind:ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
<Ingredient v-bind:ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
@checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
</div>
<div class="col" :class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1,}">
<compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
<compile-component :code="step.ingredients_markdown"
:ingredient_factor="ingredient_factor"></compile-component>
</div>
</div>
</b-collapse>
</template>
<template v-if="step.type === 'TIME'">
<template v-if="step.type === 'TIME' || step.type === 'FILE'">
<div class="row">
<div class="col-md-8 offset-md-2" style="text-align: center">
<h4 class="text-primary">
@@ -55,14 +57,15 @@
</h4>
<span style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fa fa-stopwatch"></i>
{{ step.time }} {{ $t('min') }}</span>
<b-link class="d-print-none" :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#" v-if="start_time !== ''">
<b-link class="d-print-none" :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#"
v-if="start_time !== ''">
{{ moment(start_time).add(step.time_offset, 'minutes').format('HH:mm') }}
</b-link>
</div>
<div class="col-md-2" style="text-align: right">
<b-button @click="details_visible = !details_visible" style="border: none; background: none"
class="shadow-none" :class="{ 'text-primary': details_visible, 'text-success': !details_visible}">
class="shadow-none d-print-none" :class="{ 'text-primary': details_visible, 'text-success': !details_visible}">
<i class="far fa-check-circle"></i>
</b-button>
</div>
@@ -71,12 +74,28 @@
<b-collapse id="collapse-1" v-model="details_visible">
<div class="row" v-if="step.instruction !== ''">
<div class="col col-md-12" style="text-align: center">
<compile-component :code="step.ingredients_markdown" :ingredient_factor="ingredient_factor"></compile-component>
<compile-component :code="step.ingredients_markdown"
:ingredient_factor="ingredient_factor"></compile-component>
</div>
</div>
</b-collapse>
</template>
<div class="row" style="text-align: center">
<div class="col col-md-12">
<template v-if="step.file !== null">
<div
v-if="step.file.file.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
<img :src="step.file.file" style="max-width: 50vw; max-height: 50vh">
</div>
<div v-else>
<a :href="step.file.file" target="_blank" rel="noreferrer nofollow">{{ $t('Download') }} {{ $t('File') }}</a>
</div>
</template>
</div>
</div>
<div v-if="start_time !== ''">
<b-popover
:target="`id_reactive_popover_${step.id}`"

29
vue/src/locales/de.json
View File

@@ -1,5 +1,5 @@
{
"Import": "Import",
"Import": "Importieren",
"import_running": "Import läuft, bitte warten!",
"Import_finished": "Import fertig",
"View_Recipes": "Rezepte Ansehen",
@@ -27,7 +27,7 @@
"min": "Min",
"Servings": "Portionen",
"Waiting": "Wartezeit",
"Preparation": "Zubereitung",
"Preparation": "Vorbereitung",
"Edit": "Bearbeiten",
"Open": "Öffnen",
"Save": "Speichern",
@@ -48,5 +48,28 @@
"Export": "Exportieren",
"Rating": "Bewertung",
"Close": "Schließen",
"Add": "Hinzufügen"
"Add": "Hinzufügen",
"Copy": "Kopieren",
"New": "Neu",
"Categories": "Kategorien",
"Category": "Kategorie",
"Selected": "Ausgewählt",
"Supermarket": "Supermarkt",
"Files": "Dateien",
"Size": "Größe",
"success_fetching_resource": "Ressource erfolgreich abgerufen!",
"Download": "Herunterladen",
"Success": "Erfolgreich",
"err_fetching_resource": "Ein Fehler trat während dem Abrufen einer Ressource auf!",
"err_creating_resource": "Ein Fehler trat während dem Erstellen einer Ressource auf!",
"err_updating_resource": "Ein Fehler trat während dem Aktualisieren einer Ressource auf!",
"success_creating_resource": "Ressource erfolgreich erstellt!",
"success_updating_resource": "Ressource erfolgreich aktualisiert!",
"File": "Datei",
"Delete": "Löschen",
"err_deleting_resource": "Ein Fehler trat während dem Löschen einer Ressource auf!",
"Cancel": "Abbrechen",
"success_deleting_resource": "Ressource erfolgreich gelöscht!",
"Load_More": "Mehr laden",
"Ok": "Öffnen"
}

46
vue/src/locales/en.json
View File

@@ -1,10 +1,18 @@
{
"err_fetching_resource": "There was an error fetching a resource!",
"err_creating_resource": "There was an error creating a resource!",
"err_updating_resource": "There was an error updating a resource!",
"err_deleting_resource": "There was an error deleting a resource!",
"success_fetching_resource": "Successfully fetched a resource!",
"success_creating_resource": "Successfully created a resource!",
"success_updating_resource": "Successfully updated a resource!",
"success_deleting_resource": "Successfully deleted a resource!",
"import_running": "Import running, please wait!",
"all_fields_optional": "All fields are optional and can be left empty.",
"convert_internal": "Convert to internal recipe",
"show_only_internal": "Show only internal recipes",
"show_split_screen": "Show split view",
"Log_Recipe_Cooking": "Log Recipe Cooking",
"External_Recipe_Image": "External Recipe Image",
@@ -23,6 +31,14 @@
"Url_Import": "Url Import",
"Reset_Search": "Reset Search",
"Recently_Viewed": "Recently Viewed",
"Load_More": "Load More",
"New_Keyword": "New Keyword",
"Delete_Keyword": "Delete Keyword",
"Edit_Keyword": "Edit Keyword",
"Move_Keyword": "Move Keyword",
"Merge_Keyword": "Merge Keyword",
"Hide_Keywords": "Hide Keywords",
"Hide_Recipes": "Hide Recipes",
"Keywords": "Keywords",
"Books": "Books",
@@ -34,10 +50,14 @@
"Date": "Date",
"Share": "Share",
"Export": "Export",
"Copy": "Copy",
"Rating": "Rating",
"Close": "Close",
"Cancel": "Cancel",
"Link": "Link",
"Add": "Add",
"New": "New",
"Success": "Success",
"Ingredients": "Ingredients",
"Supermarket": "Supermarket",
"Categories": "Categories",
@@ -48,8 +68,13 @@
"Waiting": "Waiting",
"Preparation": "Preparation",
"External": "External",
"Size": "Size",
"Files": "Files",
"File": "File",
"Edit": "Edit",
"Delete": "Delete",
"Open": "Open",
"Ok": "Open",
"Save": "Save",
"Step": "Step",
"Search": "Search",
@@ -59,5 +84,18 @@
"or": "or",
"and": "and",
"Information": "Information",
"Advanced Search Settings": "Advanced Search Settings"
}
"Advanced Search Settings": "Advanced Search Settings",
"View": "View",
"Recipes": "Recipes",
"Move": "Move",
"Merge": "Merge",
"Parent": "Parent",
"delete_confimation": "Are you sure that you want to delete {kw} and all of it's children?",
"move_confirmation": "Move {child} to parent {parent}",
"merge_confirmation": "Replace {source} with {target}",
"move_selection": "Select a parent to move {child} to.",
"merge_selection": "Replace all occurences of {source} with the selected {type}.",
"Advanced Search Settings": "Advanced Search Settings",
"Download": "Download",
"Root": "Root"
}

76
vue/src/locales/hy.json Normal file
View File

@@ -0,0 +1,76 @@
{
"err_fetching_resource": "",
"err_creating_resource": "",
"err_updating_resource": "",
"err_deleting_resource": "",
"success_fetching_resource": "",
"success_creating_resource": "",
"success_updating_resource": "",
"success_deleting_resource": "",
"import_running": "",
"all_fields_optional": "",
"convert_internal": "",
"show_only_internal": "",
"Log_Recipe_Cooking": "",
"External_Recipe_Image": "",
"Add_to_Book": "",
"Add_to_Shopping": "",
"Add_to_Plan": "",
"Step_start_time": "",
"Meal_Plan": "",
"Select_Book": "",
"Recipe_Image": "",
"Import_finished": "",
"View_Recipes": "",
"Log_Cooking": "",
"New_Recipe": "",
"Url_Import": "",
"Reset_Search": "",
"Recently_Viewed": "",
"Load_More": "",
"Keywords": "",
"Books": "",
"Proteins": "",
"Fats": "",
"Carbohydrates": "",
"Calories": "",
"Nutrition": "",
"Date": "",
"Share": "",
"Export": "",
"Copy": "",
"Rating": "",
"Close": "",
"Link": "",
"Add": "",
"New": "",
"Success": "",
"Ingredients": "",
"Supermarket": "",
"Categories": "",
"Category": "",
"Selected": "",
"min": "",
"Servings": "",
"Waiting": "",
"Preparation": "",
"External": "",
"Size": "",
"Files": "",
"File": "",
"Edit": "",
"Cancel": "",
"Delete": "",
"Open": "",
"Ok": "",
"Save": "",
"Step": "",
"Search": "",
"Import": "",
"Print": "",
"Settings": "",
"or": "",
"and": "",
"Information": "",
"Download": ""
}

6
vue/src/locales/nl.json
View File

@@ -49,5 +49,9 @@
"External": "Externe",
"Settings": "Instellingen",
"Meal_Plan": "Maaltijdplan",
"New": "Nieuw"
"New": "Nieuw",
"Supermarket": "Supermarkt",
"Categories": "Categorieën",
"Category": "Categorie",
"Selected": "Geselecteerd"
}

5
vue/src/sw.js
View File

@@ -6,7 +6,8 @@ import {ExpirationPlugin} from 'workbox-expiration';
const OFFLINE_CACHE_NAME = 'offline-html';
const OFFLINE_PAGE_URL = '/offline/';
let script_name = typeof window !== 'undefined' ? localStorage.getItem('SCRIPT_NAME') : '/'
var OFFLINE_PAGE_URL = script_name + 'offline/';
self.addEventListener('install', async (event) => {
event.waitUntil(
@@ -44,7 +45,7 @@ registerRoute(
);
registerRoute(
({request}) => request.destination === 'script' || request.destination === 'style',
({request}) => (request.destination === 'script' || request.destination === 'style'),
new StaleWhileRevalidate({
cacheName: 'assets'
})

933
vue/src/utils/openapi/api.ts
View File

File diff suppressed because it is too large Load Diff

7
vue/src/utils/openapi/base.ts
View File

@@ -10,15 +10,16 @@
* NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
* https://openapi-generator.tech
* Do not edit the class manually.
*/
*/
import { Configuration } from "./configuration";
// Some imports not used depending on template conditions
// Some imports not used depending on template conditions
// @ts-ignore
import globalAxios, { AxiosPromise, AxiosInstance } from 'axios';
export const BASE_PATH = location.protocol + '//' + location.host; //TODO manually edited. Find good solution to automate later, remove from openapi-generator-ignore afterwards
//export const BASE_PATH = location.protocol + '//' + location.host; //TODO manually edited. Find good solution to automate later, remove from openapi-generator-ignore afterwards
export let BASE_PATH = typeof window !== 'undefined' ? localStorage.getItem('BASE_PATH') || '' : location.protocol + '//' + location.host;
/**
*

14
vue/src/utils/utils.js
View File

@@ -60,10 +60,18 @@ export const ResolveUrlMixin = {
}
export function resolveDjangoUrl(url, params = null) {
if (params !== null) {
return window.Urls[url](params)
} else {
if (params == null) {
return window.Urls[url]()
} else if (typeof(params) != "object") {
return window.Urls[url](params)
} else if (typeof(params) == "object") {
if (params.length === 1) {
return window.Urls[url](params)
} else if (params.length === 2) {
return window.Urls[url](params[0],params[1])
} else if (params.length === 3) {
return window.Urls[url](params[0],params[1],params[2])
}
}
}