PHP Classes

File: resources/js/components/Search.vue

Recommend this page to a friend!
  Classes of Edward Paul   Find PHP Service   resources/js/components/Search.vue   Download  
File: resources/js/components/Search.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: 3 years ago
Size: 3,825 bytes
 

Contents

Class file image Download
<template> <div class="row justify-content-center"> <div class="col-12 col-md-10 col-lg-8"> <form class="card card-sm" style="border: none; background-color: rgba(245, 245, 245, 0.4)"> <div class="card-body row no-gutters align-items-center"> <div class="col-auto"> <i class="fas fa-search h4 text-body"></i> </div> <!--end of col--> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ form.distance }} <span v-if="form.distance !== 'Distance' ">Km</span></button> <div class="dropdown-menu"> <a class="dropdown-item" v-for="(val, index) in distances" href="#" @click.prevent="form.distance = val" > <span v-if="index == distances.length - 1"> <div role="separator" class="dropdown-divider"></div> </span> {{ val }} <span v-if="val !== 'Anywhere'">Km</span> </a> </div> </div> <input type="text" class="form-control form-control-lg form-control-borderless" placeholder="Search Servives or keywords" v-model="form.keyword" :class="{ ' is-invalid' : errors['keyword'] }" > <div class="input-group-append"> <button class="btn btn-primary" type="button" @click="getResult">Search</button> </div> </div> <!--end of col--> </div> </form> </div> <search-result v-if="results.length" :results="results"></search-result> </div> </template> <script> import VueGeolocation from 'vue-browser-geolocation'; import SearchResult from './SearchResult.vue' Vue.use(VueGeolocation); export default { props:['endpoint'], name: "Search", data(){ return { distances: ['1', '2', '5', '10', '50', '100', 'Anywhere'], form:{ distance:'Distance', }, errors: [], results: {} } }, components:{ SearchResult }, methods:{ getLocation(){ this.$getLocation() .then(coordinates => { this.form.latitude = coordinates.lat; this.form.longitude = coordinates.lng; }) .catch((error)=>{ this.distances =['Anywhere'] this.form.distance = 'Anywhere'; }) }, getResult(){ axios.post(`${this.endpoint}`, this.form).then((response)=>{ this.errors = [] this.results = response.data.data }).catch((error) => { if(error.response.status === 422){ this.errors = error.response.data.errors } }) } }, mounted() { this.getLocation() } } </script> <style scoped> </style>