mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-04 05:39:00 -05:00
redirect export using djangoResolveUrl
This commit is contained in:
smilerz
@@ -1,145 +1,126 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<br/>
|
<br />
|
||||||
|
|
||||||
<template v-if="export_info !== undefined">
|
<template v-if="export_info !== undefined">
|
||||||
|
<template v-if="export_info.running">
|
||||||
|
<h5 style="text-align: center">{{ $t("Exporting") }}...</h5>
|
||||||
|
|
||||||
<template v-if="export_info.running">
|
<b-progress :max="export_info.total_recipes">
|
||||||
<h5 style="text-align: center">{{ $t('Exporting') }}...</h5>
|
<b-progress-bar :value="export_info.exported_recipes" :label="`${export_info.exported_recipes}/${export_info.total_recipes}`"></b-progress-bar>
|
||||||
|
</b-progress>
|
||||||
|
|
||||||
<b-progress :max="export_info.total_recipes">
|
<loading-spinner :size="25"></loading-spinner>
|
||||||
<b-progress-bar :value="export_info.exported_recipes" :label="`${export_info.exported_recipes}/${export_info.total_recipes}`"></b-progress-bar>
|
</template>
|
||||||
</b-progress>
|
|
||||||
|
|
||||||
<loading-spinner :size="25"></loading-spinner>
|
<div class="row">
|
||||||
</template>
|
<div class="col col-md-12" v-if="!export_info.running">
|
||||||
|
<span>{{ $t("Export_finished") }}! </span> <a :href="`${resolveDjangoUrl('viewExport')}`">{{ $t("Return to export") }} </a><br /><br />
|
||||||
|
|
||||||
<div class="row">
|
{{ $t("If download did not start automatically: ") }}
|
||||||
<div class="col col-md-12" v-if="!export_info.running">
|
|
||||||
<span>{{ $t('Export_finished') }}! </span> <a :href="`${resolveDjangoUrl('viewExport') }`">{{ $t('Return to export') }} </a><br><br>
|
|
||||||
|
|
||||||
{{ $t('If download did not start automatically: ') }}
|
<template v-if="export_info.expired">
|
||||||
|
<a disabled
|
||||||
<template v-if="export_info.expired">
|
><del>{{ $t("Download") }}</del></a
|
||||||
<a disabled><del>{{ $t('Download') }}</del></a> ({{ $t('Expired') }})
|
>
|
||||||
</template>
|
({{ $t("Expired") }})
|
||||||
<a v-else :href="`/export-file/${export_id}/`" ref="downloadAnchor" >{{ $t('Download') }}</a>
|
</template>
|
||||||
|
<a v-else :href="`${resolveDjangoUrl('view_export_file', export_id)}`" ref="downloadAnchor">{{ $t("Download") }}</a>
|
||||||
|
|
||||||
<br>
|
<br />
|
||||||
{{ $t('The link will remain active for') }}
|
{{ $t("The link will remain active for") }}
|
||||||
|
|
||||||
<template v-if="export_info.cache_duration > 3600">
|
|
||||||
{{ export_info.cache_duration/3600 }}{{ $t('hr') }}
|
|
||||||
</template>
|
|
||||||
<template v-else-if="export_info.cache_duration > 60">
|
|
||||||
{{ export_info.cache_duration/60 }}{{ $t('min') }}
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
{{ export_info.cache_duration }}{{ $t('sec') }}
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
<template v-if="export_info.cache_duration > 3600"> {{ export_info.cache_duration / 3600 }}{{ $t("hr") }} </template>
|
||||||
|
<template v-else-if="export_info.cache_duration > 60"> {{ export_info.cache_duration / 60 }}{{ $t("min") }} </template>
|
||||||
|
<template v-else> {{ export_info.cache_duration }}{{ $t("sec") }} </template>
|
||||||
|
|
||||||
<br>
|
<br />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<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="export_info.msg"
|
|
||||||
disabled></textarea>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
<br/>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<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="export_info.msg" disabled></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Vue from 'vue'
|
import Vue from "vue"
|
||||||
import {BootstrapVue} from 'bootstrap-vue'
|
import { BootstrapVue } from "bootstrap-vue"
|
||||||
|
|
||||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
import "bootstrap-vue/dist/bootstrap-vue.css"
|
||||||
|
|
||||||
import {ResolveUrlMixin, makeToast, ToastMixin} from "@/utils/utils";
|
import { ResolveUrlMixin, makeToast, ToastMixin } from "@/utils/utils"
|
||||||
|
|
||||||
import LoadingSpinner from "@/components/LoadingSpinner";
|
import LoadingSpinner from "@/components/LoadingSpinner"
|
||||||
|
|
||||||
import {ApiApiFactory} from "@/utils/openapi/api.ts";
|
import { ApiApiFactory } from "@/utils/openapi/api.ts"
|
||||||
|
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ExportResponseView',
|
name: "ExportResponseView",
|
||||||
mixins: [
|
mixins: [ResolveUrlMixin, ToastMixin],
|
||||||
ResolveUrlMixin,
|
components: {
|
||||||
ToastMixin,
|
LoadingSpinner,
|
||||||
],
|
},
|
||||||
components: {
|
data() {
|
||||||
LoadingSpinner
|
return {
|
||||||
},
|
export_id: window.EXPORT_ID,
|
||||||
data() {
|
export_info: undefined,
|
||||||
return {
|
}
|
||||||
export_id: window.EXPORT_ID,
|
},
|
||||||
export_info: undefined,
|
mounted() {
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.refreshData()
|
|
||||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
|
||||||
|
|
||||||
this.dynamicIntervalTimeout = 250 //initial refresh rate
|
|
||||||
this.run = setTimeout(this.dynamicInterval.bind(this), this.dynamicIntervalTimeout)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
dynamicInterval: function(){
|
|
||||||
|
|
||||||
//update frequently at start but slowdown as it takes longer
|
|
||||||
this.dynamicIntervalTimeout = Math.round(this.dynamicIntervalTimeout*((1+Math.sqrt(5))/2))
|
|
||||||
if(this.dynamicIntervalTimeout > 5000) this.dynamicIntervalTimeout = 5000
|
|
||||||
clearInterval(this.run);
|
|
||||||
this.run = setInterval(this.dynamicInterval.bind(this), this.dynamicIntervalTimeout);
|
|
||||||
|
|
||||||
if ((this.export_id !== null) && window.navigator.onLine && this.export_info.running) {
|
|
||||||
this.refreshData()
|
this.refreshData()
|
||||||
let el = this.$refs.output_text
|
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||||
el.scrollTop = el.scrollHeight;
|
|
||||||
|
|
||||||
if(this.export_info.expired)
|
this.dynamicIntervalTimeout = 250 //initial refresh rate
|
||||||
makeToast(this.$t("Error"), this.$t("The download link is expired!"), "danger")
|
this.run = setTimeout(this.dynamicInterval.bind(this), this.dynamicIntervalTimeout)
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
dynamicInterval: function () {
|
||||||
|
//update frequently at start but slowdown as it takes longer
|
||||||
|
this.dynamicIntervalTimeout = Math.round(this.dynamicIntervalTimeout * ((1 + Math.sqrt(5)) / 2))
|
||||||
|
if (this.dynamicIntervalTimeout > 5000) this.dynamicIntervalTimeout = 5000
|
||||||
|
clearInterval(this.run)
|
||||||
|
this.run = setInterval(this.dynamicInterval.bind(this), this.dynamicIntervalTimeout)
|
||||||
|
|
||||||
startDownload: function(){
|
if (this.export_id !== null && window.navigator.onLine && this.export_info.running) {
|
||||||
this.$refs['downloadAnchor'].click()
|
this.refreshData()
|
||||||
|
let el = this.$refs.output_text
|
||||||
|
el.scrollTop = el.scrollHeight
|
||||||
|
|
||||||
|
if (this.export_info.expired) makeToast(this.$t("Error"), this.$t("The download link is expired!"), "danger")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
startDownload: function () {
|
||||||
|
this.$refs["downloadAnchor"].click()
|
||||||
|
},
|
||||||
|
|
||||||
|
refreshData: function () {
|
||||||
|
let apiClient = new ApiApiFactory()
|
||||||
|
|
||||||
|
apiClient.retrieveExportLog(this.export_id).then((result) => {
|
||||||
|
this.export_info = result.data
|
||||||
|
this.export_info.expired = !this.export_info.possibly_not_expired
|
||||||
|
|
||||||
|
if (!this.export_info.running)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.startDownload()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
refreshData: function () {
|
|
||||||
let apiClient = new ApiApiFactory()
|
|
||||||
|
|
||||||
apiClient.retrieveExportLog(this.export_id).then(result => {
|
|
||||||
this.export_info = result.data
|
|
||||||
this.export_info.expired = !this.export_info.possibly_not_expired
|
|
||||||
|
|
||||||
if(!this.export_info.running)
|
|
||||||
this.$nextTick(()=>{ this.startDownload(); } )
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style></style>
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user