Mercurial > gemma
changeset 1208:8df4ebbc5c3f
staging area
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Mon, 19 Nov 2018 13:22:19 +0100 |
| parents | 70116d392387 |
| children | 4f666dbb9abd |
| files | client/src/App.vue client/src/application/Sidebar.vue client/src/application/assets/application.sass client/src/bottlenecks/Bottlenecks.vue client/src/staging/Staging.vue client/src/store/application.js |
| diffstat | 6 files changed, 106 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Mon Nov 19 13:02:48 2018 +0100 +++ b/client/src/App.vue Mon Nov 19 13:22:19 2018 +0100 @@ -9,6 +9,7 @@ <Search v-if="routeName == 'mainview'"></Search> <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks> <Imports v-if="routeName == 'mainview'"></Imports> + <Staging v-if="routeName == 'mainview'"></Staging> </div> </div> <div class="ml-auto d-flex"> @@ -99,7 +100,8 @@ Sidebar: () => import("./application/Sidebar"), Search: () => import("./application/Search"), Bottlenecks: () => import("./bottlenecks/Bottlenecks"), - Imports: () => import("./imports/Imports.vue") + Imports: () => import("./imports/Imports.vue"), + Staging: () => import("./staging/Staging.vue") } }; </script>
--- a/client/src/application/Sidebar.vue Mon Nov 19 13:02:48 2018 +0100 +++ b/client/src/application/Sidebar.vue Mon Nov 19 13:22:19 2018 +0100 @@ -33,6 +33,14 @@ @click="toggleImportSoundingResults" >Import soundingresults</a> </div> + <div v-if="routeName == 'mainview'" class="d-flex flex-row nav-link"> + <i class="fa fa-list-ol align-self-center navicon"></i> + <a + href="#" + class="text-body" + @click="$store.commit('application/showStagingArea', !showStagingArea);" + >Staging area</a> + </div> <!-- <router-link class="text-body d-flex flex-row nav-link" to="imports"> <i class="fa fa-upload align-self-center navicon"></i>Imports </router-link>--> @@ -90,6 +98,7 @@ "showSidebar", "showBottlenecks", "showImportSoundingResults", + "showStagingArea", "showSearchbarLastState" ]), menuStyle() { @@ -123,7 +132,10 @@ if (this.showBottlenecks) { this.$store.commit("application/showSearchbar", true); } else { - this.$store.commit("application/showSearchbar", this.showSearchbarLastState); + this.$store.commit( + "application/showSearchbar", + this.showSearchbarLastState + ); } }, toggleImportSoundingResults() {
--- a/client/src/application/assets/application.sass Mon Nov 19 13:02:48 2018 +0100 +++ b/client/src/application/assets/application.sass Mon Nov 19 13:22:19 2018 +0100 @@ -23,7 +23,7 @@ $identify-height: 20rem $identify-width: 20rem $offset: 1rem -$sidebar-height: 32rem +$sidebar-height: 35rem $sidebar-width: 15rem $slight-transparent: 0.96 $small-offset: 0.5rem
--- a/client/src/bottlenecks/Bottlenecks.vue Mon Nov 19 13:02:48 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Mon Nov 19 13:22:19 2018 +0100 @@ -3,7 +3,6 @@ <div @click="closeBottlenecks" class="ui-element close-bottlenecks"> <i class="fa fa-close"></i> </div> - <h4>Bottlenecks</h4> <hr class="mb-0"> <div class="row p-2 text-left small"> @@ -12,7 +11,11 @@ <i :class="sortClass" v-if="sortColumn === 'name'"></i> </div> <div class="col-2"> - <a href="#" @click="sortBy('latestMeasurement')" class="sort-link">Latest Measurement</a> + <a + href="#" + @click="sortBy('latestMeasurement')" + class="sort-link" + >Latest Measurement</a> <i :class="sortClass" v-if="sortColumn === 'latestMeasurement'"></i> </div> <div class="col-3"> @@ -22,27 +25,41 @@ <div class="col-2"></div> </div> <div class="bottleneck-list small text-left"> - <div v-for="bottleneck in filteredAndSortedBottlenecks()" :key="bottleneck.properties.name" class="border-top row mx-0 py-2"> + <div + v-for="bottleneck in filteredAndSortedBottlenecks()" + :key="bottleneck.properties.name" + class="border-top row mx-0 py-2" + > <div class="col-5 text-left"> - <a href="#" class="d-block" @click="moveToBottleneck(bottleneck)"> - {{ bottleneck.properties.name }} - </a> + <a + href="#" + class="d-block" + @click="moveToBottleneck(bottleneck)" + >{{ bottleneck.properties.name }}</a> </div> - <div class="col-2"> - {{ displayCurrentSurvey(bottleneck.properties.current) }} - </div> - <div class="col-3"> - {{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }} - </div> + <div class="col-2">{{ displayCurrentSurvey(bottleneck.properties.current) }}</div> + <div + class="col-3" + >{{ displayCurrentChainage(bottleneck.properties.from, bottleneck.properties.from) }}</div> <div class="col-2 text-right"> - <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleBottleneck(bottleneck.properties.name)"> + <button + type="button" + class="btn btn-sm btn-outline-secondary" + @click="toggleBottleneck(bottleneck.properties.name)" + > <i class="fa fa-angle-down"></i> </button> </div> - <div :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]"> - <a href="#" class="d-block p-2" v-for="(survey, index) in openBottleneckSurveys" :key="index" @click="selectSurvey(survey, bottleneck)"> - {{ survey.date_info }} - </a> + <div + :class="['col-12', 'surveys', {open: openBottleneck === bottleneck.properties.name}]" + > + <a + href="#" + class="d-block p-2" + v-for="(survey, index) in openBottleneckSurveys" + :key="index" + @click="selectSurvey(survey, bottleneck)" + >{{ survey.date_info }}</a> </div> </div> </div> @@ -199,7 +216,10 @@ }, closeBottlenecks() { this.$store.commit("application/showBottlenecks", false); - this.$store.commit("application/showSearchbar", this.showSearchbarLastState); + this.$store.commit( + "application/showSearchbar", + this.showSearchbarLastState + ); }, displayCurrentSurvey(current) { return current ? current.substr(0, current.length - 1) : "";
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/staging/Staging.vue Mon Nov 19 13:22:19 2018 +0100 @@ -0,0 +1,47 @@ +<template> + <div v-if="showStagingArea" class="card staging-card"> + <div class="card-body staging-card-body"> + <div + @click="$store.commit('application/showStagingArea', !showStagingArea);" + class="ui-element close-showStagingArea" + > + <i class="fa fa-close"></i> + </div> + <div class="card-title mb-4 headline"> + <h4>Staging area</h4> + <hr> + </div> + <div class="d-flex flex-row input-group mb-4"></div> + </div> + </div> +</template> + +<script> +import { mapState } from "vuex"; +export default { + computed: { + ...mapState("application", ["showStagingArea"]) + } +}; +</script> + +<style lang="sass" scoped> +.close-showStagingArea + position: absolute + z-index: 2 + right: 0 + top: 7px + border-radius: $border-radius + height: $icon-width + width: $icon-height + +.staging-card + position: relative + background-color: white + width: 30rem + height: 28rem + margin-left: auto + margin-right: auto + border-radius: $border-radius + opacity: $slight-transparent +</style>
--- a/client/src/store/application.js Mon Nov 19 13:02:48 2018 +0100 +++ b/client/src/store/application.js Mon Nov 19 13:22:19 2018 +0100 @@ -31,6 +31,7 @@ showLayers: true, showPdfTool: false, showImportSoundingResults: false, + showStagingArea: false, countries: ["AT", "SK", "HU", "HR", "RS", "BiH", "BG", "RO", "UA"], searchQuery: "", version @@ -83,6 +84,9 @@ showImportSoundingResults: (state, show) => { state.showImportSoundingResults = show; }, + showStagingArea: (state, show) => { + state.showStagingArea = show; + }, searchQuery: (state, searchQuery) => { state.searchQuery = searchQuery; }