Mercurial > gemma

comparison client/src/fairway/Fairwayprofile.vue @ 1018:ab64c76af1b0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
additional survey selection for 2nd crossprofile added
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 24 Oct 2018 09:12:51 +0200
parents d2f30a784fb3
children ca628dce90dd
comparison
equal deleted inserted replaced
1017:a244b18cb916 1018:ab64c76af1b0
2 <div class="profiledisplay d-flex flex-row"> 2 <div class="profiledisplay d-flex flex-row">
3 <div class="fairwayprofile"> 3 <div class="fairwayprofile">
4 </div> 4 </div>
5 <div class="additionalsurveys d-flex flex-column"> 5 <div class="additionalsurveys d-flex flex-column">
6 <small class="label">Available Additional Surveys</small> 6 <small class="label">Available Additional Surveys</small>
7 <select> 7 <select v-model="additionalSurvey" @change="selectAdditionalSurveyData">
8 <option value="">None</option> 8 <option value="">None</option>
9 <option v-for="survey in additionalSurveys" :key="survey.date_info"> 9 <option v-for="survey in additionalSurveys" :key="survey.date_info">
10 {{survey.date_info}} 10 {{survey.date_info}}
11 </option> 11 </option>
12 </select> 12 </select>
48 } 48 }
49 </style> 49 </style>
50 50
51 <script> 51 <script>
52 import * as d3 from "d3"; 52 import * as d3 from "d3";
53 import { mapState } from "vuex";
53 54
54 const GROUND_COLOR = "#4A2F06"; 55 const GROUND_COLOR = "#4A2F06";
55 56
56 export default { 57 export default {
57 name: "fairwayprofile", 58 name: "fairwayprofile",
70 "minAlt", 71 "minAlt",
71 "maxAlt", 72 "maxAlt",
72 "additionalSurveys" 73 "additionalSurveys"
73 ], 74 ],
74 computed: { 75 computed: {
76 ...mapState("fairwayprofile", ["startPoint", "endPoint"]),
75 waterColor() { 77 waterColor() {
76 const result = this.waterLevels.find( 78 const result = this.waterLevels.find(
77 x => x.level === this.selectedWaterLevel 79 x => x.level === this.selectedWaterLevel
78 ); 80 );
79 return result.color; 81 return result.color;
80 } 82 }
81 }, 83 },
82 data() { 84 data() {
83 return {}; 85 return {
86 additionalSurvey: ""
87 };
84 }, 88 },
85 watch: { 89 watch: {
86 data() { 90 data() {
87 this.drawDiagram(); 91 this.drawDiagram();
88 }, 92 },
101 fairwayCoordinates() { 105 fairwayCoordinates() {
102 this.drawDiagram(); 106 this.drawDiagram();
103 } 107 }
104 }, 108 },
105 methods: { 109 methods: {
106 selectAdditionalSurveyData(e) { 110 selectAdditionalSurveyData() {
107 console.log(e); 111 //
108 }, 112 },
109 drawDiagram() { 113 drawDiagram() {
110 const chartDiv = document.querySelector(".fairwayprofile"); 114 const chartDiv = document.querySelector(".fairwayprofile");
111 d3.select("svg").remove(); 115 d3.select("svg").remove();
112 let svg = d3.select(chartDiv).append("svg"); 116 let svg = d3.select(chartDiv).append("svg");