#124 Editable Tower height
This commit is contained in:
Keith Paterson
parent
92a39591b5
commit
21e27bf913
@ -6,7 +6,7 @@
|
||||
<span class="label">Latitude :</span>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-input placeholder="Please input" v-model="latitude" :disabled="!editing"
|
||||
<el-input placeholder="Please input" v-model="latitude" :disabled="true"
|
||||
@focus="coordFocussed = true"
|
||||
@blur="coordFocussed = false"></el-input>
|
||||
</el-col>
|
||||
@ -16,7 +16,7 @@
|
||||
<span class="label">Longitude :</span>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-input placeholder="Please input" v-model="longitude" :disabled="!editing"
|
||||
<el-input placeholder="Please input" v-model="longitude" :disabled="true"
|
||||
@focus="coordFocussed = true"
|
||||
@blur="coordFocussed = false"></el-input>
|
||||
</el-col>
|
||||
@ -26,9 +26,9 @@
|
||||
<span class="label">Height :</span>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<el-input placeholder="Please input" v-model="height" :disabled="!editing"
|
||||
<el-input-number placeholder="Please input" @change="handleChange" v-model="height" :disabled="!editing" :step="0.01"
|
||||
@focus="coordFocussed = true"
|
||||
@blur="coordFocussed = false"></el-input>
|
||||
@blur="coordFocussed = false"></el-input-number>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -59,12 +59,15 @@
|
||||
save () {
|
||||
var o = {latitude: this.latitude, longitude: this.longitude, height: this.height};
|
||||
writeTowerXML(this.$store.state.Settings.settings.airportsDirectory, this.$parent.$parent.$parent.icao, o)
|
||||
},
|
||||
handleChange (newValue) {
|
||||
this.$store.dispatch('setTowerHeight', newValue);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
editing: {
|
||||
get: function () {
|
||||
return false //this.$parent.$parent.$parent.$refs.editLayer.editing
|
||||
return this.$parent.$parent.$parent.$refs.editLayer.editing
|
||||
}
|
||||
},
|
||||
tower: function () {
|
||||
@ -77,8 +80,13 @@
|
||||
longitude: function () {
|
||||
return this.$store.state.Editable.data.tower.coords.longitude;
|
||||
},
|
||||
height: function () {
|
||||
return this.$store.state.Editable.data.tower.coords.height;
|
||||
height: {
|
||||
get: function () {
|
||||
return this.$store.state.Editable.data.tower.height;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$store.dispatch('setTowerHeight', newValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,16 @@ You should have received a copy of the GNU General Public License along with FG
|
||||
console.debug([LMap, LMarker, L, LEdit])
|
||||
},
|
||||
mounted () {
|
||||
|
||||
this.$store.watch(
|
||||
function (state) {
|
||||
return state.Editable.data.tower
|
||||
},
|
||||
() => { this.editedTower() }
|
||||
,
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.remove()
|
||||
@ -35,6 +44,15 @@ You should have received a copy of the GNU General Public License along with FG
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editedTower () {
|
||||
if (this.$store.state.Editable.data.tower) {
|
||||
this.layerGroup.eachLayer(l => {
|
||||
if (l instanceof L.TowerMarker) {
|
||||
l.setTowerHeight(this.$store.state.Editable.data.tower.height)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
getLayer () {
|
||||
return this.layerGroup
|
||||
},
|
||||
@ -71,7 +89,7 @@ You should have received a copy of the GNU General Public License along with FG
|
||||
if (this.layerGroup) {
|
||||
this.layerGroup.eachLayer(l => {
|
||||
if (l instanceof L.TowerMarker) {
|
||||
l.enableEdit(this.$parent.mapObject)
|
||||
l.setInteractive(true)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -80,7 +98,7 @@ You should have received a copy of the GNU General Public License along with FG
|
||||
if (this.layerGroup) {
|
||||
this.layerGroup.eachLayer(l => {
|
||||
if (l instanceof L.TowerMarker) {
|
||||
l.enableEdit(this.$parent.mapObject)
|
||||
l.setInteractive(false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ const store = require('../store');
|
||||
|
||||
L.TowerMarker = L.Marker.extend({
|
||||
options: {
|
||||
zIndexOffset: 10000,
|
||||
zIndexOffset: 10000, draggable: 'true'
|
||||
},
|
||||
stripSVG: function(fName) {
|
||||
var rx = /<\s*svg[^>]*>([\s\S]*)<\s*\/svg[^>]*>/gm;
|
||||
@ -44,6 +44,7 @@ L.TowerMarker = L.Marker.extend({
|
||||
className: 'threshold-marker-icon',
|
||||
html: `<div style=\'transform: translateX(${offset}px) translateY(${offset}px) scale(${scale}); border: 1px red\'>${this.svg}</div>`,
|
||||
}));
|
||||
this.setInteractive(this.interactive);
|
||||
|
||||
this.update(this.getLatLng());
|
||||
console.debug();
|
||||
@ -52,6 +53,18 @@ L.TowerMarker = L.Marker.extend({
|
||||
}
|
||||
}
|
||||
},
|
||||
setInteractive(interactive) {
|
||||
if (interactive) {
|
||||
if(this._icon) {
|
||||
L.DomUtil.addClass(this._icon, 'leaflet-interactive');
|
||||
}
|
||||
} else {
|
||||
if(this._icon) {
|
||||
L.DomUtil.removeClass(this._icon, 'leaflet-interactive');
|
||||
}
|
||||
}
|
||||
this.interactive = interactive;
|
||||
},
|
||||
metersPerPixel: function (latitude, zoomLevel) {
|
||||
var earthCircumference = 40075017;
|
||||
var latitudeRadians = latitude * (Math.PI / 180);
|
||||
@ -61,11 +74,21 @@ L.TowerMarker = L.Marker.extend({
|
||||
pixelValue: function (latitude, meters, zoomLevel) {
|
||||
return meters / metersPerPixel(latitude, zoomLevel);
|
||||
},
|
||||
setTowerHeight: function (height) {
|
||||
this.elev_m = height;
|
||||
}
|
||||
});
|
||||
|
||||
L.TowerMarker.addInitHook(function(){
|
||||
this.svg = this.stripSVG('tower.svg');
|
||||
this.iconSize = 32;
|
||||
this.on('click', function (event) {
|
||||
store.default.dispatch('setTowerCoords',
|
||||
event.target.getLatLng().lat.toFixed(6) + ' ' +
|
||||
event.target.getLatLng().lng.toFixed(6) + ' ' +
|
||||
event.target.elev_m);
|
||||
store.default.dispatch('setTowerHeight', event.target.elev_m );
|
||||
});
|
||||
this.on('dragstart', function (event) {
|
||||
console.debug("Drag Tower : ", event);
|
||||
});
|
||||
@ -75,6 +98,10 @@ L.TowerMarker.addInitHook(function(){
|
||||
event.target.getLatLng().lat.toFixed(6) + ' ' +
|
||||
event.target.getLatLng().lng.toFixed(6) + ' ' +
|
||||
event.target.elev_m);
|
||||
store.default.dispatch('setTowerHeight', event.target.elev_m );
|
||||
});
|
||||
this.on('add', function (event) {
|
||||
event.target.setInteractive(false);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ const state = {
|
||||
type: 'none',
|
||||
index: 'none',
|
||||
editing: false,
|
||||
data: {airports: {}, parking: {}, arc: {}, multiarc: {}, node: {}, runway: {}, threshold: {}}
|
||||
data: {airports: {}, parking: {}, arc: {}, multiarc: {}, node: {}, runway: {}, threshold: {}, tower: {}}
|
||||
}
|
||||
|
||||
const SET_EDIT_AIRPORT = 'SET_EDIT_AIRPORT'
|
||||
@ -38,7 +38,6 @@ const mutations = {
|
||||
state.type = 'airport'
|
||||
},
|
||||
SET_EDIT_PARKING (state, parking) {
|
||||
Vue.set(state, 'data', {})
|
||||
var p = Object.assign({}, parking)
|
||||
Vue.set(state.data, 'parking', p)
|
||||
Vue.set(state, 'index', p.index)
|
||||
@ -48,15 +47,11 @@ const mutations = {
|
||||
if (node === undefined) {
|
||||
return
|
||||
}
|
||||
if (!state.data || state.type !== 'node') {
|
||||
Vue.set(state, 'data', {})
|
||||
}
|
||||
Vue.set(state.data, 'node', node)
|
||||
Vue.set(state, 'index', node.index)
|
||||
Vue.set(state, 'type', 'node')
|
||||
},
|
||||
SET_EDIT_RUNWAY (state, runway) {
|
||||
Vue.set(state, 'data', {})
|
||||
Vue.set(state.data, 'node', runway)
|
||||
Vue.set(state, 'index', runway.index)
|
||||
Vue.set(state, 'type', 'runway')
|
||||
@ -65,9 +60,6 @@ const mutations = {
|
||||
if (arc === undefined) {
|
||||
return
|
||||
}
|
||||
if (!state.data || state.type !== 'arc') {
|
||||
Vue.set(state, 'data', {})
|
||||
}
|
||||
Vue.set(state.data, 'arc', arc)
|
||||
if (state.data.arc.name === undefined) {
|
||||
Vue.set(state.data.arc, 'name', '')
|
||||
@ -79,9 +71,6 @@ const mutations = {
|
||||
if (arc === undefined) {
|
||||
return
|
||||
}
|
||||
if (!state.data || state.type !== 'multiarc') {
|
||||
Vue.set(state, 'data', {multiarc: {}})
|
||||
}
|
||||
Vue.set(state.data.multiarc, 'isPushBackRoute', arc.isPushBackRoute)
|
||||
Vue.set(state.data.multiarc, 'direction', arc.direction)
|
||||
if (state.data.multiarc.name === undefined) {
|
||||
@ -163,10 +152,17 @@ const mutations = {
|
||||
},
|
||||
'SET_EDIT_TOWER_COORDS' (state, coords) {
|
||||
state.type = 'tower'
|
||||
state.data.tower = { coords: {} }
|
||||
if (!state.data.tower) {
|
||||
state.data.tower = {}
|
||||
}
|
||||
if (!state.data.tower.coords) {
|
||||
state.data.tower.coords = {}
|
||||
}
|
||||
Vue.set(state.data.tower.coords, 'latitude', coords.split(' ')[0])
|
||||
Vue.set(state.data.tower.coords, 'longitude', coords.split(' ')[1])
|
||||
Vue.set(state.data.tower.coords, 'height', coords.split(' ')[2])
|
||||
},
|
||||
'SET_EDIT_TOWER_HEIGHT' (state, height) {
|
||||
Vue.set(state.data.tower, 'height', height)
|
||||
},
|
||||
'SET_EDIT_THRESHOLD_COORDS' (state, threshold) {
|
||||
state.type = 'threshold'
|
||||
@ -219,6 +215,9 @@ const actions = {
|
||||
async setTowerCoords (context, node) {
|
||||
context.commit('SET_EDIT_TOWER_COORDS', node)
|
||||
},
|
||||
async setTowerHeight (context, height) {
|
||||
context.commit('SET_EDIT_TOWER_HEIGHT', height)
|
||||
},
|
||||
async setThreshold (context, node) {
|
||||
context.commit('SET_EDIT_THRESHOLD_COORDS', node)
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user