cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added basic support for files

Browse Source
This commit is contained in:
vabene1111
2021-06-08 20:17:48 +02:00
parent c71a7dad24
commit 9eb17df575
17 changed files with 383 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,93 @@
<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>
{{ $t('File') }}
<b-form-file v-model="file.file"></b-form-file>
</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
}
console.log(passedFile)
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'), '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',)
}).catch(err => {
makeToast(this.$t('Error'), this.$t('err_creating_resource'), 'danger')
console.log(err.request, err.response)
})
}
}
}
</script>

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

@ -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,7 +57,8 @@
</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>
@ -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}`"