Parking List

This commit is contained in:
portree_kid 2020-04-24 21:19:05 +02:00
parent af2578cc36
commit 9065ae75f9
9 changed files with 165 additions and 15 deletions

View File

@ -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",

View File

@ -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)

View File

@ -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: {

View File

@ -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>

View File

@ -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>

View File

@ -89,11 +89,16 @@ L.ParkingSpot = L.Circle.extend({
this.direction.setLatLngs([start, end]);
}
},
highlight() {
select() {
var style = {};
style['color'] = 'red';
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;

View File

@ -42,7 +42,7 @@ L.RunwayNode = L.Marker.extend({
});
},
highlight() {
select() {
try {
this._icon.style['color'] = 'red';
} catch (error) {

View File

@ -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;

View File

@ -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])
}
}