File: resources/js/components/NewRecord.vue

Recommend this page to a friend!
  Classes of Edward Paul  >  Find PHP Service  >  resources/js/components/NewRecord.vue  >  Download  
File: resources/js/components/NewRecord.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Find PHP Service
Application to find services in a near location
Author: By
Last change:
Date: 6 months ago
Size: 7,328 bytes
 

Contents

Class file image Download
<template>
    <div class="card card-body bg-light text-center" >
        <form action="#" @submit.prevent="saveRecord">
            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">Title</label>
                <div class="col-sm-6" >
                    <input type="text"
                           class="form-control"
                           id="title"
                           v-model="creating.form.title"

                           :class="{ ' is-invalid' : creating.errors['title'] }"
                    >
                    <small id="emailHelp" v-if="creating.errors['title']" class="form-text text-muted">
                        {{ creating.errors['title'][0]}}
                    </small>
                </div>

            </div>

            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">Description</label>
                <div class="col-sm-6" >
                    <input type="text"
                           class="form-control"
                           id="description"
                           v-model="creating.form.description"

                           :class="{ ' is-invalid' : creating.errors['description'] }"
                    >
                    <small v-if="creating.errors['description']" class="form-text text-muted">
                        {{ creating.errors['description'][0]}}
                    </small>
                </div>

            </div>

            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">Address</label>
                <div class="col-sm-6" >
                    <vue-google-autocomplete
                        id="map"
                        ref="autocomplete"
                        classname="form-control"
                        placeholder="Start typing"
                        v-on:placechanged="getAddressData"
                        :class="{ ' is-invalid' : creating.errors['address'] }"
                        v-on:inputChange="checking"
                    >
                    </vue-google-autocomplete>
                    <small v-if="creating.errors['address']" class="form-text text-muted">
                        {{ creating.errors['address'][0]}}
                    </small>
                </div>

            </div>

            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">City</label>
                <div class="col-sm-6" >
                    <input type="text"
                           class="form-control"
                           id="city"
                           readonly
                           v-model="creating.form.city"

                           :class="{ ' is-invalid' : creating.errors['city'] }"
                    >
                    <small v-if="creating.errors['city']" class="form-text text-muted">
                        {{ creating.errors['city'][0]}}
                    </small>
                </div>

            </div>

            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">State</label>
                <div class="col-sm-6" >
                    <input type="text"
                           class="form-control"
                           id="state"
                           readonly
                           v-model="creating.form.state"

                           :class="{ ' is-invalid' : creating.errors['state'] }"
                    >
                    <small v-if="creating.errors['state']" class="form-text text-muted">
                        {{ creating.errors['state'][0]}}
                    </small>
                </div>

            </div>

            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">Zip Code</label>
                <div class="col-sm-6" >
                    <input type="text"
                           class="form-control"
                           id="zip_code"
                           readonly
                           v-model="creating.form.zip_code"

                           :class="{ ' is-invalid' : creating.errors['zip_code'] }"
                    >
                    <small v-if="creating.errors['zip_code']" class="form-text text-muted">
                        {{ creating.errors['zip_code'][0]}}
                    </small>
                </div>

            </div>

            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">Latitude</label>
                <div class="col-sm-6" >
                    <input type="text"
                           class="form-control"
                           id="latitude"
                           readonly
                           v-model="creating.form.latitude"

                           :class="{ ' is-invalid' : creating.errors['latitude'] }"
                    >
                    <small v-if="creating.errors['latitude']" class="form-text text-muted">
                        {{ creating.errors['latitude'][0]}}
                    </small>
                </div>

            </div>

            <div class="form-group row">
                <label for="title" class="col-sm-2 col-form-label">Longitude</label>
                <div class="col-sm-6" >
                    <input type="text"
                           class="form-control"
                           id="longitude"
                           readonly
                           v-model="creating.form.longitude"

                           :class="{ ' is-invalid' : creating.errors['longitude'] }"
                    >
                    <small v-if="creating.errors['longitude']" class="form-text text-muted">
                        {{ creating.errors['longitude'][0]}}
                    </small>
                </div>

            </div>


            <div class="form-group">
                <div class="col-md-6 col-md-offset-3">
                    <button type="submit" class="btn btn-primary" id="create">Create</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    import VueGoogleAutocomplete from 'vue-google-autocomplete'
    export default {
        props:['creating'],
        data(){
            return {
                placeInput:''
            }
        },
        name: "NewRecord",
        components:{
            VueGoogleAutocomplete
        },
        methods:{
            getAddressData(addressData, placeResultData, id){
                this.creating.form.city = addressData.country
                this.creating.form.latitude = addressData.latitude
                this.creating.form.longitude = addressData.longitude
                this.creating.form.zip_code = addressData.postal_code
                this.creating.form.state = addressData.administrative_area_level_1
                this.creating.form.address = addressData.street_number+' '+ addressData.route
                this.$refs.autocomplete.clear()
            },
            saveRecord(){
                this.$emit('save:record')
            },
            checking(val){
                this.placeInput = val.newVal
            }
        }
    }
</script>

<style scoped>

</style>

For more information send a message to info at phpclasses dot org.