Parking List
This commit is contained in:
parent
af2578cc36
commit
9065ae75f9
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "flightgear-airports",
|
||||
"version": "0.0.6",
|
||||
"version": "0.0.7",
|
||||
"author": "portree_kid <keith.paterson@gmx.de>",
|
||||
"description": "An software to design Flightgear groundnets",
|
||||
"license": "GPL v3",
|
||||
|
@ -15,6 +15,8 @@
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
|
||||
var selectedItem
|
||||
|
||||
// import {LSymbol} from 'leaflet-polylinedecorator'
|
||||
|
||||
export default {
|
||||
@ -64,6 +66,16 @@
|
||||
deep: true //add this if u need to watch object properties change etc.
|
||||
}
|
||||
);
|
||||
this.$store.watch(
|
||||
function (state) {
|
||||
return state.Parkings.items;
|
||||
},
|
||||
() => { this.editedParkings() }
|
||||
,
|
||||
{
|
||||
deep: true //add this if u need to watch object properties change etc.
|
||||
}
|
||||
);
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.remove()
|
||||
@ -135,6 +147,9 @@
|
||||
showCheck() {
|
||||
Vue.set(this, 'checking', true)
|
||||
},
|
||||
getEditing () {
|
||||
return this.editing;
|
||||
},
|
||||
enableEdit () {
|
||||
this.editable = true
|
||||
this.editing = true
|
||||
@ -245,14 +260,22 @@
|
||||
var latlng = {};
|
||||
latlng.lat = element._latlng.lat;
|
||||
latlng.lng = element._latlng.lng;
|
||||
element.highlight();
|
||||
if (this.selectedItem != null) {
|
||||
this.selectedItem.deselect();
|
||||
}
|
||||
this.selectedItem = element;
|
||||
element.select();
|
||||
this.$store.dispatch('setCenter', latlng);
|
||||
} else if (element instanceof L.ParkingSpot) {
|
||||
console.log(element);
|
||||
var latlng = {};
|
||||
latlng.lat = element._latlng.lat;
|
||||
latlng.lng = element._latlng.lng;
|
||||
element.highlight();
|
||||
if (this.selectedItem != null) {
|
||||
this.selectedItem.deselect();
|
||||
}
|
||||
this.selectedItem = element;
|
||||
element.select();
|
||||
this.$store.dispatch('setCenter', latlng);
|
||||
}
|
||||
});
|
||||
@ -439,6 +462,30 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
editedParkings() {
|
||||
console.log('Edited Parkings : ' + this.$store.state.Parkings.items)
|
||||
this.$store.state.Parkings.items.forEach( newElement => {
|
||||
console.log(newElement);
|
||||
this.featureLookup[newElement.index].forEach((element,index) => {
|
||||
if (element instanceof L.ParkingSpot) {
|
||||
element.options.attributes.name = newElement.name
|
||||
element.options.attributes.number = newElement.number
|
||||
element.options.attributes.type = newElement.type
|
||||
//element.updateVertexFromDirection();
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/*
|
||||
this.$store.dispatch('updatedParking', this.$store.state.Editable.data.parking);
|
||||
this.featureLookup[this.$store.state.Editable.index].forEach((element,index) => {
|
||||
if (element instanceof L.ParkingSpot) {
|
||||
element.options.attributes = Object.assign({}, this.$store.state.Editable.data.parking)
|
||||
element.updateVertexFromDirection();
|
||||
}
|
||||
})
|
||||
*/
|
||||
},
|
||||
editedArc() {
|
||||
console.log('Edited Arc : ' + this.$store.state.Editable.index);
|
||||
if (!this.groundnetLayerGroup)
|
||||
|
@ -16,13 +16,13 @@
|
||||
<span class="demo-input-label">Name :</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-input placeholder="Please input" v-model="name"></el-input>
|
||||
<el-input placeholder="Name" v-model="name"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<span class="demo-input-label">Number :</span>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-input placeholder="Please input" v-model="number"></el-input>
|
||||
<el-input placeholder="Number" v-model="number"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
@ -232,7 +232,7 @@
|
||||
{value: 'cargo', label: 'cargo'},
|
||||
{value: 'gate', label: 'commercial passenger traffic'},
|
||||
{value: 'mil-fighter', label: 'military fighter'},
|
||||
{value: 'mil-cargo', label: 'commercial passenger traffic'}
|
||||
{value: 'mil-cargo', label: 'military cargo'}
|
||||
]
|
||||
},
|
||||
parking_type: {
|
||||
|
@ -1,5 +1,17 @@
|
||||
<template>
|
||||
<el-link type="primary" @click="show(parking.index)">{{parking.name}} {{parking.number}} {{parking.type}}</el-link>
|
||||
<div>
|
||||
<el-link v-if="!editing" type="primary" @click="show(parking.index)">{{parking.name}} {{parking.number}} {{parking.type}}</el-link>
|
||||
<el-input @focus="show(parking.index)" v-if="editing" placeholder="Name" v-model="name" class="wide"></el-input>
|
||||
<el-input @focus="show(parking.index)" v-if="editing" placeholder="Number" v-model="number" class="narrow"></el-input>
|
||||
<el-select @focus="show(parking.index)" v-if="editing" v-model="parking_type" placeholder="Select">
|
||||
<el-option
|
||||
v-for="type in options"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="js">
|
||||
@ -18,9 +30,72 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
options: function () {
|
||||
return [{value: 'none', label: 'none'},
|
||||
{value: 'ga', label: 'general aviation'},
|
||||
{value: 'cargo', label: 'cargo'},
|
||||
{value: 'gate', label: 'commercial passenger traffic'},
|
||||
{value: 'mil-fighter', label: 'military fighter'},
|
||||
{value: 'mil-cargo', label: 'military cargo'}
|
||||
]
|
||||
},
|
||||
editing: {
|
||||
// getter
|
||||
get: function () {
|
||||
return this.$parent.$parent.$parent.$parent.$parent.$refs.editLayer.getEditing()
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
}
|
||||
},
|
||||
name: {
|
||||
// getter
|
||||
get: function () {
|
||||
return this.parking.name
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.$store.commit('SET_EDIT_PARKING_ITEM_NAME', [this.parking.index, newValue])
|
||||
}
|
||||
},
|
||||
number: {
|
||||
// getter
|
||||
get: function () {
|
||||
return this.parking.number
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.$store.commit('SET_EDIT_PARKING_ITEM_NUMBER', [this.parking.index, newValue])
|
||||
}
|
||||
},
|
||||
parking_type: {
|
||||
// getter
|
||||
get: function () {
|
||||
if (this.parking.type === undefined) {
|
||||
return 'none'
|
||||
}
|
||||
return this.parking.type
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
this.$store.commit('SET_EDIT_PARKING_ITEM_TYPE', [this.parking.index, newValue])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
div.wide {
|
||||
width: 40%;
|
||||
}
|
||||
div.narrow {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
@ -7,9 +7,9 @@
|
||||
</div>
|
||||
</h1>
|
||||
<el-container direction="vertical">
|
||||
<li v-for="p in parkings" v-bind:key="p.index">
|
||||
<div v-for="p in parkings" v-bind:key="p.index" class="row">
|
||||
<ParkingItem :parking="p"></ParkingItem>
|
||||
</li>
|
||||
</div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
@ -34,8 +34,18 @@
|
||||
},
|
||||
// setter
|
||||
set: function (newValue) {
|
||||
console.log(newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div.row.div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
@ -89,11 +89,16 @@ L.ParkingSpot = L.Circle.extend({
|
||||
this.direction.setLatLngs([start, end]);
|
||||
}
|
||||
},
|
||||
highlight() {
|
||||
select() {
|
||||
var style = {};
|
||||
style['color'] = 'red';
|
||||
this.setStyle(style);
|
||||
this.setStyle(style);
|
||||
},
|
||||
deselect() {
|
||||
var style = {};
|
||||
style['color'] = '#3388ff';
|
||||
this.setStyle(style);
|
||||
},
|
||||
addListeners: function () {
|
||||
this.on('editable:drawing:move', function (event) {
|
||||
console.log("Move : ", event);
|
||||
@ -117,7 +122,7 @@ L.ParkingSpot = L.Circle.extend({
|
||||
this.on('click', function (event) {
|
||||
console.log("Click : " + event.target);
|
||||
store.default.dispatch('setParking', event.target.options.attributes);
|
||||
this.highlight();
|
||||
this.select();
|
||||
this.unwatch = store.default.watch(
|
||||
function (state) {
|
||||
return state.Editable.data.parking;
|
||||
@ -139,6 +144,7 @@ L.ParkingSpot = L.Circle.extend({
|
||||
if(event.target.editor._resizeLatLng.__vertex._icon !== event.sourceTarget._element){
|
||||
event.vertex._icon.style['background-color'] = 'red';
|
||||
store.default.dispatch('setParking', event.target.options.attributes);
|
||||
this.select();
|
||||
this.unwatch = store.default.watch(
|
||||
function (state) {
|
||||
return state.Editable.data.parking;
|
||||
|
@ -42,7 +42,7 @@ L.RunwayNode = L.Marker.extend({
|
||||
|
||||
});
|
||||
},
|
||||
highlight() {
|
||||
select() {
|
||||
try {
|
||||
this._icon.style['color'] = 'red';
|
||||
} catch (error) {
|
||||
|
@ -7,7 +7,7 @@ const store = require('../store');
|
||||
|
||||
var $ = require('jquery');
|
||||
L.Threshold = L.Circle.extend({
|
||||
highlight() {
|
||||
select() {
|
||||
var style = {};
|
||||
style['color'] = 'red';
|
||||
this.setStyle(style);
|
||||
@ -35,7 +35,7 @@ L.Threshold = L.Circle.extend({
|
||||
this.on('click', function (event) {
|
||||
console.log("Click : " + event.target);
|
||||
store.default.dispatch('setParking', event.target.options.attributes);
|
||||
this.highlight();
|
||||
this.select();
|
||||
this.unwatch = store.default.watch(
|
||||
function (state) {
|
||||
return state.Editable.data.parking;
|
||||
|
@ -14,6 +14,18 @@ const mutations = {
|
||||
},
|
||||
SET_PARKINGS (state, parkings) {
|
||||
Vue.set(state, 'items', parkings)
|
||||
},
|
||||
'SET_EDIT_PARKING_ITEM_NAME' (state, value) {
|
||||
const existingItem = state.items.find((i) => i.index === value[0])
|
||||
Vue.set(existingItem, 'name', value[1])
|
||||
},
|
||||
'SET_EDIT_PARKING_ITEM_NUMBER' (state, value) {
|
||||
const existingItem = state.items.find((i) => i.index === value[0])
|
||||
Vue.set(existingItem, 'number', value[1])
|
||||
},
|
||||
'SET_EDIT_PARKING_ITEM_TYPE' (state, value) {
|
||||
const existingItem = state.items.find((i) => i.index === value[0])
|
||||
Vue.set(existingItem, 'type', value[1])
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user