vincentsanity

vincentsanity

Member Since 1 Year Ago

Experience Points
1,600
Total
Experience

3,400 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
0
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
1,600 XP
Jun
28
4 months ago
Activity icon

Started a new Conversation Google Maps Markers Wont Show And Loop Is Not Working. I Am Using Vue/Nuxt.js

I have a function that loops over an object to populate the markers. But when I do run the code, the loop is not working and also when I do console.log it is not showing me anything even in my vue devtools. Can someone tell me what did I miss? I am not using any vue package for the google map. I just followed the documentation and write the vanilla javascript functions.

Here is the whole function

export default {
    layout:'adminLte',
    data(){
        return{
            address:{
                lat:7.0650673,
                lng:125.5961476
            },
            clinic:[],
            markersInfo:[],
        }
    },
    methods:{
        loadScript() {
            if (window.google && window.google.maps) {
                this.initMap();
                return;
            }
            var self = this;
            var script = document.createElement("script");
            script.onload = function() {
                if (!window.google && !window.google.maps)
                    return void(console.error("no google maps script included"));
                self.initMap();
            };
            script.async = true;
            script.defer = true;
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCZS1-x2tYC7qwUoiCsy3pJdezTeo2O6xA&libraries=geometry";
            document.getElementsByTagName("head")[0].appendChild(script);
        },
        initMap(){

            var center = new google.maps.LatLng(this.address.lat, this.address.lng)
            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: center
            })
    
            //this are for the markers. even if i console log below. it wont show anything
            for (var i = 0; i < this.clinic.length; i++) {
                var clinicLat = this.clinic.data[i].lat;
                var clinicLng = this.clinic.data[i].lng;
                var details = this.clinic.data[i].name;
                var latLng = new google.maps.LatLng(clinicLat,clinicLng);
                console.log(details)
                var markers = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    icon: {
                        url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
                    },
                    size: new google.maps.Size(20, 20),
                });
                const contentString = '<div id="content"><p>' + details + '</p></div>';
                //for Info windows function
                console.log('Markers' + markers)
                this.infoWindowShow(markers, contentString);
                this.markersInfo.push(markers)
            }
      
        },
        infoWindowShow(markers, contentString) {
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            markers.addListener('click', function() {
                infowindow.open(markers.get('map'), markers);
            });
        },
        showMarker(id) {
            google.maps.event.trigger(this.markersInfo[id], 'click');
        },
        getClinicsList(){
              firebase.database().ref('clinics').on('value',(snapshot)=>{
                this.clinic = snapshot.val()
                console.log(snapshot.val())
                this.loadScript()
            })
        },
    },
    created(){
        console.log('created')
        this.getClinicsList()
 
        if (localStorage.getItem("user-email") === null) {
         this.$router.push('/login')
        }
    },
    mounted(){
        this.loadScript()
    }
}

The HTML element

   <div class="card-body table-responsive">
          <div id="map"  style="width: 1200px; height: 600px">
                                    
           </div>
   </div>

Sometimes when I refresh the page I get this kind of error

message: "Map: Expected mapDiv of type Element but was passed null.", 
name: "InvalidValueError", stack: "Error↵    
at new ne (https://maps.googleapis.com/m…les/@firebase/database/dist/index.cjs.js:9641:41)"}

Here is my vue devtools. The markers array is empty but the clinics has values in it https://i.stack.imgur.com/gYirZ.png

Jun
24
4 months ago
Activity icon

Replied to Laravel Socialite Login After Successful Auth Not Redirecting

I tried it @yezawhein and still not working for my end. Why is this happening?

Activity icon

Replied to Laravel Socialite Login After Successful Auth Not Redirecting

@yezawhein okay sir will try. but whats the difference from your suggestion into my code? can i know? thanks

Jun
23
4 months ago
Activity icon

Started a new Conversation Laravel Socialite Login After Successful Auth Not Redirecting

I have a laravel project that uses google to login. I am using socialite package from laravel. I can save the user's info in my database after they confirm in the google auth screen, but after that it will redirect to login always. It seems the Auth::login($user) is not working. Did I miss something?

Here is my Login controller

public function redirectToProvider()
{
    return Socialite::driver('google')->redirect();
}


public function handleProviderCallback()
{
    try {
        $user = Socialite::driver('google')->user();
    } catch (\Exception $e) {
        return redirect('/login');
    }

    $existingUser = User::where('email', $user->email)->first();
    if($existingUser){
        //login the user
        \Auth::login($existingUser,true);
        return redirect('/home');
    } else {
        // create a new user
        $newUser                  = new User;
        $newUser->name            = $user->name;
        $newUser->email           = $user->email;
        $newUser->google_id       = $user->id;
        $newUser->avatar          = $user->avatar;
        $newUser->avatar_original = $user->avatar_original;
        $newUser->save();

        \Auth::login($newUser,true);
    }
    return redirect('/home');
}

Route

Route::get('/redirect', 'Auth\[email protected]');
Route::get('/callback', 'Auth\[email protected]');

Authorized redirect URI's from google console

http://localhost:8000/callback
http://localhost:8000/home

Reference in laravel login with google using socialite: https://medium.com/employbl/add-login-with-google-to-your-laravel-app-d2205f01b895

Also when i check the network. the /home path is written as response 302. https://i.stack.imgur.com/2lvL4.png

May
15
5 months ago
Activity icon

Started a new Conversation Laravel Malformed UTF-8 Characters, Possibly Incorrectly Encoded Using Image Intervention

I have a laravel project that has a image upload. I used image intervention library for uploading. The problem is i got a 500 error and saying Malformed UTF-8 characters, possibly incorrectly encoded. But when I look my directory for saving, the image was saved but the data was not saved to the database. Only the image was saved. Seems like the image save was successful but the request is not. What seems to be the problem?

Controller

public function store(Request $request)
    {
        $product = new Product;
        $validator = \Validator::make($request->all(), [
            'product_name' => 'required',
            'barcode' => 'required|unique:products',
            'price'=> 'required',
            'category' => 'required',
            'supplier' => 'required',
            // 'image' => 'required|image64:jpeg,jpg,png'
        ]);

        if ($validator->fails()) {
            $errors = json_encode($validator->errors());
            return response()->json([
                'success' => false,
                'message' => $errors
            ],422);
        } else {
        $product->barcode = $request->barcode;
        $product->product_name = $request->product_name;
        $product->price = $request->price;
        $product->quantity = 0;
        $product->category = $request->category;
        $product->supplier_id = $request->supplier;

            //image
        $imageData = $request->image;
        $fileName = time().'.'. explode('/', explode(':', substr($imageData, 0, strpos($imageData, ';'))) [1])[1];
        $product->image = \Image::make($request->image)->save(public_path('img/').$fileName);

        $product->save();

        broadcast(new ProductsEvent(\Auth::user()->name, 'add', $product))->toOthers();
        }
    }

Vue component event when form is changed

onFileChange(e) {
                let file = e.target.files[0];
                console.log(file);
                var reader = new FileReader();
                reader.onloadend = (file)=>{this.image = reader.result}
                reader.readAsDataURL(file);
            },  
Apr
26
6 months ago
Activity icon

Started a new Conversation Vuejs Google Map Show Marker/coordinates Inside In The Center Circle

How can I show the markers that are inside my center radius? I need to show the places based on the radius because this will be my basis in making a function in finding such places based on km radius of a place.

Here is my map https://i.stack.imgur.com/sGUOo.png

As you can see i have many markers. that is coming from my database by calling axios request.

here is my code snippet

 data() {
         return {
            clinics: [],
            points: '',
            property: {
               lat: 1.28237,
               lng: 103.783098
            },
            diameter: 5000
         }
      },
      methods: {
         initMap() {
            //center marker from circle
            const map = new google.maps.Map(document.getElementById('map'), {
               zoom: 13,
               center: this.property
            })
            const circle = new google.maps.Circle({
               map: map,
               trokeColor: '#FF0000',
               strokeOpacity: 0.8,
               strokeWeight: 2,
               fillColor: '#FF0000',
               fillOpacity: 0.35,
               radius: this.diameter,
               center: this.property
            });
            const marker = new google.maps.Marker({
               position: this.property,
               map: map
            });

            //other Markers
            for (var i = 0; i < this.clinics.data.length; i++) {
               var coords = this.clinics.data[i].coord;
               var details = this.clinics.data[i].clinic;
               var latLng = new google.maps.LatLng(coords['lat'], coords['lng']);
               var markers = new google.maps.Marker({
                  position: latLng,
                  map: map,
               });
               const contentString = '<div id="content"><p>' + details + '</p></div>';
               //for Info window function
               this.infoWindowShow(markers, contentString);
            }
         }