99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<template>
|
|
<q-modal ref="modal" @open="startMap()">
|
|
<div class="card fit">
|
|
<div class="card-title bg-teal text-white">
|
|
Adress of {{user.name}}
|
|
</div>
|
|
<div class="card-content bg-white">
|
|
<div id="map"></div>
|
|
<div class="wrap gutter">
|
|
<div class="width-1of1">
|
|
<div class="floating-label">
|
|
<input required class="full-width" v-model="user.address.street">
|
|
<label>Street</label>
|
|
</div>
|
|
</div>
|
|
<div class="width-1of1">
|
|
<div class="floating-label">
|
|
<input required class="full-width" v-model="user.address.suite">
|
|
<label>Suite</label>
|
|
</div>
|
|
</div>
|
|
<div class="width-1of1">
|
|
<div class="floating-label">
|
|
<input required class="full-width" v-model="user.address.city">
|
|
<label>City</label>
|
|
</div>
|
|
</div>
|
|
<div class="width-1of1">
|
|
<div class="floating-label">
|
|
<input required class="full-width" v-model="user.address.zipcode">
|
|
<label>Zipcode</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions justify-center flex">
|
|
<div class="width-1of3 sm-width-3of3">
|
|
<button class="primary outline raised fit" @click="save()">Save</button>
|
|
</div>
|
|
<div class="width-1of3 sm-width-3of3">
|
|
<button class="teal outline raised fit" @click="$refs.modal.close()">Close</button>
|
|
</div>
|
|
</div>
|
|
</q-modal>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
/* eslint-disable */
|
|
//import { Toast } from 'quasar'
|
|
//import GMaps from 'gmaps'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
map: ''
|
|
}
|
|
},
|
|
props: ['user'],
|
|
methods: {
|
|
save () {
|
|
this.$http.jsonplaceholder
|
|
.patch(`users/${this.user.id}`, {address: this.user.address})
|
|
.then(response => {
|
|
|
|
})
|
|
},
|
|
startMap () {
|
|
let vm = this
|
|
/*
|
|
this.map = new GMaps({
|
|
el: '#map',
|
|
lat: parseFloat(this.user.address.geo.lat),
|
|
lng: parseFloat(this.user.address.geo.lng),
|
|
zoom: 3,
|
|
dblclick (e) {
|
|
vm.map.removeMarkers()
|
|
vm.addMarker(e.latLng.lat(), e.latLng.lng())
|
|
}
|
|
})
|
|
this.addMarker(this.user.address.geo.lat, this.user.address.geo.lng)
|
|
*/
|
|
},
|
|
addMarker (lat, lng) {
|
|
this.map.addMarker({
|
|
lat: parseFloat(lat),
|
|
lng: parseFloat(lng)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
#map {
|
|
width: 300px !important;
|
|
height: 300px !important;
|
|
}
|
|
</style>
|