Mercurial > gemma
changeset 1348:c539cb678c5b
import soundingresults: closing contextbox clears uploaded tempdata
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Mon, 26 Nov 2018 11:50:48 +0100 |
| parents | 594f3f1e45aa |
| children | 6720d683f7ca |
| files | client/src/components/map/contextbox/ImportSoundingresults.vue |
| diffstat | 1 files changed, 76 insertions(+), 80 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Nov 26 11:35:30 2018 +0100 +++ b/client/src/components/map/contextbox/ImportSoundingresults.vue Mon Nov 26 11:50:48 2018 +0100 @@ -1,87 +1,76 @@ <template> - <div> - <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> - <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>Import Soundingresults - </h6> - <div v-if="editState" class="ml-auto mr-auto mt-4 w-95"> - <div class="d-flex flex-row input-group mb-4"> - <div class="offset-r"> - <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label> - </div> - <input - id="bottleneck" - type="text" - class="form-control" - placeholder="Name of Bottleneck" - aria-label="bottleneck" - aria-describedby="bottlenecklabel" - v-model="bottleneck" - > - </div> - <div class="d-flex flex-row input-group mb-4"> - <div class="offset-r"> - <label class="label-text" for="importdate" id="importdatelabel">Date</label> - </div> - <input - id="importdate" - type="date" - class="form-control" - placeholder="Date of import" - aria-label="bottleneck" - aria-describedby="bottlenecklabel" - v-model="importDate" - > - <div class="offset-r"> - <label - class="label-text w-100 depthreferencelabel" - for="depthreference" - >Depthreference</label> - </div> - <select v-model="depthReference" class="custom-select" id="depthreference"> - <option - v-for="option in this.$options.depthReferenceOptions" - :key="option" - >{{option}}</option> - </select> - </div> - <div class="text-left"> - <small v-for="(message, index) in messages" :key="index">{{message}}</small> - </div> + <div> + <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> + <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>Import Soundingresults + </h6> + <div v-if="editState" class="ml-auto mr-auto mt-4 w-95"> + <div class="d-flex flex-row input-group mb-4"> + <div class="offset-r"> + <label for="bottleneck" class="label-text" id="bottlenecklabel">Bottleneck</label> + </div> + <input + id="bottleneck" + type="text" + class="form-control" + placeholder="Name of Bottleneck" + aria-label="bottleneck" + aria-describedby="bottlenecklabel" + v-model="bottleneck" + > + </div> + <div class="d-flex flex-row input-group mb-4"> + <div class="offset-r"> + <label class="label-text" for="importdate" id="importdatelabel">Date</label> + </div> + <input + id="importdate" + type="date" + class="form-control" + placeholder="Date of import" + aria-label="bottleneck" + aria-describedby="bottlenecklabel" + v-model="importDate" + > + <div class="offset-r"> + <label class="label-text w-100 depthreferencelabel" for="depthreference">Depthreference</label> </div> - <div class="w-95 ml-auto mr-auto mt-4 mb-4"> - <div v-if="uploadState" class="d-flex flex-row input-group mb-4"> - <div class="custom-file"> - <input - type="file" - @change="fileSelected" - class="custom-file-input" - id="uploadFile" - > - <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label> - </div> - </div> - <div class="buttons text-right"> - <a - v-if="editState" - download="meta.json" - :href="dataLink " - class="btn btn-outline-info pull-left" - >Download Meta.json</a> - <button - v-if="editState" - @click="deleteTempData" - class="btn btn-danger" - type="button" - >Cancel Upload</button> - <button - :disabled="disableUpload" - @click="submit" - class="btn btn-info" - type="button" - >{{uploadState?"Upload":"Confirm"}}</button> - </div> + <select v-model="depthReference" class="custom-select" id="depthreference"> + <option v-for="option in this.$options.depthReferenceOptions" :key="option">{{option}}</option> + </select> + </div> + <div class="text-left"> + <small v-for="(message, index) in messages" :key="index">{{message}}</small> + </div> + </div> + <div class="w-95 ml-auto mr-auto mt-4 mb-4"> + <div v-if="uploadState" class="d-flex flex-row input-group mb-4"> + <div class="custom-file"> + <input type="file" @change="fileSelected" class="custom-file-input" id="uploadFile"> + <label class="custom-file-label" for="uploadFile">{{uploadLabel}}</label> </div> + </div> + <div class="buttons text-right"> + <a + v-if="editState" + download="meta.json" + :href="dataLink " + class="btn btn-outline-info pull-left" + >Download Meta.json</a> + <button + v-if="editState" + @click="deleteTempData" + class="btn btn-danger" + type="button" + >Cancel Upload</button> + <button + :disabled="disableUpload" + @click="submit" + class="btn btn-info" + type="button" + >{{uploadState?"Upload":"Confirm"}}</button> + </div> </div> + </div> </template> <script> @@ -101,6 +90,7 @@ */ import { HTTP } from "../../../lib/http"; import { displayError, displayInfo } from "../../../lib/errors.js"; +import { mapState } from "vuex"; const defaultLabel = "Choose .zip-file"; const IMPORTSTATE = { UPLOAD: "UPLOAD", EDIT: "EDIT" }; @@ -222,7 +212,13 @@ }); } }, + watch: { + showContextBox() { + if (!this.showContextBox && this.token) this.deleteTempData(); + } + }, computed: { + ...mapState("application", ["showContextBox"]), editState() { return this.importState === IMPORTSTATE.EDIT; },