Mercurial > gemma

comparison client/src/components/fairway/Profiles.vue @ 3146:b6cc4838d2c0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: implemented pane mechanic for diagrams regressions: diagrams are currently not collapsible anymore, animations were removed
author Markus Kottlaender <markus@intevation.de>
date Fri, 03 May 2019 10:33:51 +0200
parents adca192a4070
children f91df0bc4986
comparison
equal deleted inserted replaced
3145:d33a5c1522dc 3146:b6cc4838d2c0
105 <translate v-else key="showdifferences" 105 <translate v-else key="showdifferences"
106 >Show differences</translate 106 >Show differences</translate
107 > 107 >
108 </button> 108 </button>
109 <button 109 <button
110 v-if="!paneSetup.includes('FAIRWAYPROFILE')"
110 class="btn btn-info btn-xs ml-2" 111 class="btn btn-info btn-xs ml-2"
111 @click="$store.commit('application/paneRotate')" 112 @click="$store.commit('application/paneRotate')"
112 v-tooltip="rotatePanesTooltip" 113 v-tooltip="rotatePanesTooltip"
113 > 114 >
114 <font-awesome-icon icon="redo" fixed-width /> 115 <font-awesome-icon icon="redo" fixed-width />
269 import { mapState, mapGetters } from "vuex"; 270 import { mapState, mapGetters } from "vuex";
270 import Feature from "ol/Feature"; 271 import Feature from "ol/Feature";
271 import LineString from "ol/geom/LineString"; 272 import LineString from "ol/geom/LineString";
272 import { displayError, displayInfo } from "@/lib/errors"; 273 import { displayError, displayInfo } from "@/lib/errors";
273 import { HTTP } from "@/lib/http"; 274 import { HTTP } from "@/lib/http";
275 import { COMPARESURVEYS } from "@/components/paneSetups";
274 276
275 export default { 277 export default {
276 name: "profiles", 278 name: "profiles",
277 data() { 279 data() {
278 return { 280 return {
279 coordinatesInput: "", 281 coordinatesInput: "",
280 cutLabel: "", 282 cutLabel: "",
281 showLabelInput: false, 283 showLabelInput: false
282 comparePaneId: "compare-sounding-results"
283 }; 284 };
284 }, 285 },
285 computed: { 286 computed: {
286 ...mapState("application", ["showProfiles"]), 287 ...mapState("application", ["showProfiles", "paneSetup"]),
287 ...mapState("map", ["openLayersMaps", "syncedMaps", "cutToolEnabled"]), 288 ...mapState("map", ["openLayersMaps", "syncedMaps", "cutToolEnabled"]),
288 ...mapState("bottlenecks", [ 289 ...mapState("bottlenecks", [
289 "bottlenecksList", 290 "bottlenecksList",
290 "surveys", 291 "surveys",
291 "surveysLoading" 292 "surveysLoading"
294 "previousCuts", 295 "previousCuts",
295 "startPoint", 296 "startPoint",
296 "endPoint", 297 "endPoint",
297 "profileLoading", 298 "profileLoading",
298 "differencesLoading", 299 "differencesLoading",
299 "waterLevels" 300 "waterLevels",
301 "currentProfile"
300 ]), 302 ]),
301 ...mapGetters("map", ["openLayersMap"]), 303 ...mapGetters("map", ["openLayersMap"]),
302 orderedBottlenecks() { 304 orderedBottlenecks() {
303 let groupedBottlenecks = {}, 305 let groupedBottlenecks = {},
304 orderedGroups = {}; 306 orderedGroups = {};
398 .filter(c => Number(c) === c); 400 .filter(c => Number(c) === c);
399 return coordinates.length === 4; 401 return coordinates.length === 4;
400 }, 402 },
401 differencesVisible() { 403 differencesVisible() {
402 return ( 404 return (
403 this.openLayersMap(this.comparePaneId) && 405 this.openLayersMap(COMPARESURVEYS.compare.id) &&
404 !this.openLayersMap(this.comparePaneId) 406 !this.openLayersMap(COMPARESURVEYS.compare.id)
405 .getLayer("BOTTLENECKISOLINE") 407 .getLayer("BOTTLENECKISOLINE")
406 .getVisible() && 408 .getVisible() &&
407 this.openLayersMap(this.comparePaneId) 409 this.openLayersMap(COMPARESURVEYS.compare.id)
408 .getLayer("DIFFERENCES") 410 .getLayer("DIFFERENCES")
409 .getVisible() 411 .getVisible()
410 ); 412 );
411 }, 413 },
412 rotatePanesTooltip() { 414 rotatePanesTooltip() {
416 return this.$gettext( 418 return this.$gettext(
417 this.mapsAreSynced ? "Unsynchronize Maps" : "Synchronize Maps" 419 this.mapsAreSynced ? "Unsynchronize Maps" : "Synchronize Maps"
418 ); 420 );
419 }, 421 },
420 mapsAreSynced() { 422 mapsAreSynced() {
421 return this.syncedMaps.includes(this.comparePaneId); 423 return this.syncedMaps.includes(COMPARESURVEYS.compare.id);
422 } 424 }
423 }, 425 },
424 watch: { 426 watch: {
425 selectedBottleneck() { 427 selectedBottleneck() {
426 this.$store.dispatch("fairwayprofile/previousCuts"); 428 this.$store.dispatch("fairwayprofile/previousCuts");
431 this.loadProfile(survey); 433 this.loadProfile(survey);
432 }, 434 },
433 additionalSurvey(survey) { 435 additionalSurvey(survey) {
434 if (survey) { 436 if (survey) {
435 this.loadDifferences(); 437 this.loadDifferences();
436 this.$store.commit("map/syncedMaps", [this.comparePaneId]); 438 this.$store.commit(
437 this.$store.commit("application/addPane", { 439 "application/paneSetup",
438 id: this.comparePaneId, 440 Object.keys(this.currentProfile).length
439 component: "Map" 441 ? "COMPARESURVEYS_FAIRWAYPROFILE"
440 }); 442 : "COMPARESURVEYS"
441 this.$store.commit("application/paneRotate", 4); 443 );
444 this.$store.commit("map/syncedMaps", [COMPARESURVEYS.compare.id]);
442 } else { 445 } else {
443 this.$store.commit("application/removePane", this.comparePaneId); 446 this.$store.commit(
444 this.$store.commit("application/paneRotate", 1); 447 "application/paneSetup",
448 Object.keys(this.currentProfile).length ? "FAIRWAYPROFILE" : "DEFAULT"
449 );
445 this.$store.commit("map/syncedMaps", []); 450 this.$store.commit("map/syncedMaps", []);
446 } 451 }
447 this.loadProfile(survey); 452 this.loadProfile(survey);
448 }, 453 },
449 selectedCut(cut) { 454 selectedCut(cut) {
455 methods: { 460 methods: {
456 toggleSyncMaps() { 461 toggleSyncMaps() {
457 if (this.mapsAreSynced) { 462 if (this.mapsAreSynced) {
458 this.$store.commit( 463 this.$store.commit(
459 "map/syncedMaps", 464 "map/syncedMaps",
460 this.syncedMaps.filter(m => m !== this.comparePaneId) 465 this.syncedMaps.filter(m => m !== COMPARESURVEYS.compare.id)
461 ); 466 );
462 } else { 467 } else {
463 this.$store.commit("map/syncedMaps", [this.comparePaneId]); 468 this.$store.commit("map/syncedMaps", [COMPARESURVEYS.compare.id]);
464 } 469 }
465 }, 470 },
466 loadDifferences() { 471 loadDifferences() {
467 this.$store.commit("fairwayprofile/setDifferencesLoading", true); 472 this.$store.commit("fairwayprofile/setDifferencesLoading", true);
468 HTTP.post( 473 HTTP.post(
488 .finally(() => { 493 .finally(() => {
489 this.$store.commit("fairwayprofile/setDifferencesLoading", false); 494 this.$store.commit("fairwayprofile/setDifferencesLoading", false);
490 }); 495 });
491 }, 496 },
492 showDifferences() { 497 showDifferences() {
493 this.openLayersMap(this.comparePaneId) 498 this.openLayersMap(COMPARESURVEYS.compare.id)
494 .getLayer("BOTTLENECKISOLINE") 499 .getLayer("BOTTLENECKISOLINE")
495 .setVisible(false); 500 .setVisible(false);
496 this.openLayersMap(this.comparePaneId) 501 this.openLayersMap(COMPARESURVEYS.compare.id)
497 .getLayer("DIFFERENCES") 502 .getLayer("DIFFERENCES")
498 .setVisible(true); 503 .setVisible(true);
499 }, 504 },
500 showSurvey() { 505 showSurvey() {
501 this.openLayersMap(this.comparePaneId) 506 this.openLayersMap(COMPARESURVEYS.compare.id)
502 .getLayer("BOTTLENECKISOLINE") 507 .getLayer("BOTTLENECKISOLINE")
503 .setVisible(true); 508 .setVisible(true);
504 this.openLayersMap(this.comparePaneId) 509 this.openLayersMap(COMPARESURVEYS.compare.id)
505 .getLayer("DIFFERENCES") 510 .getLayer("DIFFERENCES")
506 .setVisible(false); 511 .setVisible(false);
507 }, 512 },
508 close() { 513 close() {
509 this.$store.commit("application/showProfiles", false); 514 this.$store.commit("application/showProfiles", false);
510 }, 515 },
511 loadProfile(survey) { 516 loadProfile(survey) {
512 if (survey) { 517 if (survey) {
513 this.$store.commit("fairwayprofile/profileLoading", true); 518 this.$store.commit("fairwayprofile/profileLoading", true);
514 this.$store.commit("application/splitscreenLoading", true);
515 this.$store 519 this.$store
516 .dispatch("fairwayprofile/loadProfile", survey) 520 .dispatch("fairwayprofile/loadProfile", survey)
517 .finally(() => { 521 .finally(() => {
518 this.$store.commit("fairwayprofile/profileLoading", false); 522 this.$store.commit("fairwayprofile/profileLoading", false);
519 this.$store.commit("application/splitscreenLoading", false);
520 }); 523 });
521 } 524 }
522 }, 525 },
523 toggleCutTool() { 526 toggleCutTool() {
524 this.$store.commit("map/cutToolEnabled", !this.cutToolEnabled); 527 this.$store.commit("map/cutToolEnabled", !this.cutToolEnabled);