HubertVanD

Member Since 10 Months Ago

Experience Points
23,590
Total
Experience

1,410 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
215
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.

  • Community Pillar

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

Level 5
23,590 XP
Mar
20
3 weeks ago
Activity icon

Replied to Z-index Problem With Gmap-vue

Tried it. Does not solve the problem. It has to do with the map-object. If I replace it with a rectangle, the dropdown menu is rendered in front of teh rectangle.

Mar
19
3 weeks ago
Activity icon

Started a new Conversation Z-index Problem With Gmap-vue

I have a Laravel 8 + Tailwind+Vue app with a menubar with dropdown submenus. In the body of the page I have a number of Vue components that render a title and then a google map. The dropdown menus are rendered over teh title (as I would expect) but under the google map. I have tried different combinations of z-index but none solves the problem. I am using gmap-vue to render the google maps in Vue.

Help would be appreciated.

My menu bar:

<nav class="container z-0 flex flex-col items-center justify-between px-4 py-6 mx-auto text-white bg-gray-800 lg:flex-row">
    <div class="flex flex-col items-center mt-6 lg:mt-0 lg:flex-row -bottom-0">

        <!-- Logo -->
        <a href="/">
            <img src="{{ asset('images/banner.png') }}" alt="de ijsmannetjes" class="flex-none w-32">
        </a>

        <!-- left menu -->
        <ul class="flex ml-0 space-x-8 lg:ml-16">

            <form method="GET" action="/gebieden" class="hover:text-gray-400">
                @csrf
                <button type="submit" class="hover:underline">Routes</button>
            </form>

            <form method="GET" action="/gebied/create" class="hover:text-gray-400">
                @csrf
                <button type="submit" class="hover:underline">Nieuwe route</button>
            </form>

            <form method="GET" action="/location" class="hover:text-gray-400">
                @csrf
                <button type="submit" class="hover:underline">Toon locatie kar</button>
            </form>


            <div class="relative inline-block dropdown">
                <button class="inline-flex inline-block ">
                    <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                    </svg>
                    <span class="mr-1">Op pad</span>
                </button>
                <ul class="absolute hidden pt-1 text-gray-700 dropdown-menu">
                    @foreach(App\Models\Area::all() as $area)
                    <li class=""><a class="block px-4 py-2 whitespace-no-wrap bg-gray-200 rounded-t hover:bg-gray-400"
                            href="/gebied/show/{{$area->id}}">{{ $area->name }}</a></li>
                    @endforeach
                </ul>
            </div>

And the html part of the Vue component:

<template>
  <div class="">
    <div class="flex-container">
      <gmap-map
        :center="reportedMapCenter"
        :zoom="13"
        ref="map"
        :options="mapOptions"
        class="map-container"
      >
        <gmap-polygon
          v-if="paths.length > 0"
          :paths="paths"
          :editable="editable"
          @paths_changed="updateEdited($event)"
          @rightclick="handleClickForDelete"
          :options="polygonOptions"
          ref="polygon"
        >
        </gmap-polygon>

        <!-- <gmap-cluster> -->
        <gmap-marker v-for="m in markers" :position="m.position" :key="m.id">
        </gmap-marker>
        <!-- </gmap-cluster> -->
      </gmap-map>
    </div>
    <div class="flex flex-row mt-4">
      <div class="pt-2" v-if="editbutton">
        <button
          v-if="editable"
          @click="savePath()"
          class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
        >
          Save path
        </button>
        <button
          v-if="!editable"
          @click="toggleEdit()"
          class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
        >
          Edit path
        </button>
      </div>
      <div class="ml-4 place-self-center">
        <p>Aantal aanmeldingen: {{ nClients }}</p>
      </div>
    </div>
  </div>
</template>
Mar
16
3 weeks ago
Activity icon

Replied to Add User By Admin In Laravel 8 Breeze

Thanx. Do you have a suggestion for a video?

Mar
15
3 weeks ago
Activity icon

Started a new Conversation Add User By Admin In Laravel 8 Breeze

I have a Laravel 8 project where I want to have 3 types of users: a. guests that do not have to register b. an admin with full rights c. an employee with restricted rights With Laravel Breeze a and b are easy, but how to do C?

As admin I want to to be able to add an employee with a default password. The employee can then afterwards log in and change his/her password. But the admin then has teh right to delete the use account.

How can I do this in the easiest way?

Kind regards,

Hubert

Mar
14
4 weeks ago
Activity icon

Replied to Vue Component Not (always) Showing

I just found it myself! Stupid mistake. Thanx anyhow.

Activity icon

Started a new Conversation Vue Component Not (always) Showing

In my application I have a vue component that shows a map. I am using this component in 2 different blade files. The strange thing is that in one case the map is showing, in the other it is not.

When I use the inspector, the Vue component is detected in both cases in the component data are identical.

The source of tha page on which the component is not showing:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Ijskar langs laten komen</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="http://ijskar.test/css/app.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>

    <style>
        body {
            font-family: 'Nunito';
        }
    </style>
    <script src="http://ijskar.test/js/app.js" defer></script>
</head>

<body >
    <div id="root" class="flex-wrap py-8 lg:w-auto lg:mx-96">


            
            <h1 class="text-3xl font-bold ">Waar bevindt onze ijskar zich nu</h1>
            <div>
                
                <view-cart ></view-cart>
            </div>





    </div>
</body>

</html>

The source of the page where the component does show:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>De IJsmannetjes</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">

    <link href="http://ijskar.test/css/app.css" rel="stylesheet">


    <style>
        body {
            font-family: 'Nunito';
        }
    </style>
    <style>
        .map-container {
            width: 400px;
            height: 400px;
        }

        .flex-test3-container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .flex-test3-container>div {
            display: flex;
            flex-direction: row;
        }

        .flex-test3-container>div>small {
            margin-right: .3rem;
            font-size: 16px;
            font-weight: bolder;
        }

        .dropdown:hover .dropdown-menu {
            display: block;
        }
    </style>
    <script src="http://ijskar.test/js/app.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>

</head>

<body>

    

    <div id="root" class="flex-wrap py-8 lg:w-auto lg:mx-96">

        <h1 class="text-3xl font-bold ">Waar bevindt onze ijskar zich nu</h1>
<div>
    <view-cart></view-cart>
</div>
    </div>



</body>

</html>

Any idea what I do wrong?

Kind regards,

Hubert

Mar
13
4 weeks ago
Activity icon

Replied to Problem Copying Object In Axios Closure

The second suggestion did it.

Activity icon

Started a new Conversation Problem Copying Object In Axios Closure

I have a Vue component. I define:

 data() {
    return {
      marker: {
        lat: 0,
        lng: 0,
      },

The I fetch new data through Axios and I want to update the marker-object:

 methods: {
    getLocation() {
      axios
        .get("/location/kar/" + this.area_id)
        .then(function(response) {
             console.log(response.data);
             this.marker=response.data;
             console.log(this.marker);
            })
        .catch(function (error) {
          console.log(error);
        });

But I get the error message:

app.js:4519 TypeError: Cannot set property 'marker' of undefined

Most likely I am making a stupid Javascript error. But what am I doing wrong?

Hubert

Mar
12
4 weeks ago
Activity icon

Replied to Problem Installing Breeze

Unfortunately it cleaned my routes file and my app.js ;-)

I am now re-creating them.

Mar
10
1 month ago
Activity icon

Replied to Problem Installing Breeze

I tried to install on an existing project.

Activity icon

Started a new Conversation Problem Installing Breeze

I was installing Breeze on a Laravel 8 project. When running npm run dev I got the error:

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin autoprefixer requires PostCSS 8.

My package.json

    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.1.0",
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss": "^8.2.1",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "^2.0.2",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "gmap-vue": "^1.5.0",
        "vue": "^2.6.12",
        "vue2-google-maps": "^0.10.7"
    }
}

Who can help me fix this error?

Hubert

Mar
09
1 month ago
Activity icon

Replied to Cannot Embed Image In Notification

This makes no difference.

The error message also says that the problem is that $message is unknown?

Activity icon

Started a new Conversation Cannot Embed Image In Notification

I am using notifications to send out emails. I want to use an image in the header of the email. I learned that I have to use $message->embed() to embed the image in the email. But I cannot get it to work. I get the error:

local.ERROR: Undefined variable: message (View: C:\xampp\htdocs\ijskar\resources\views\vendor\mail\html\header.blade.php) {"exception":"[object] (Facade\Ignition\Exceptions\ViewException(code: 0): Undefined variable: message (View: C:\xampp\htdocs\ijskar\
esources\views\vendor\mail\html\header.blade.php) at C:\xampp\htdocs\ijskar\
esources\views/vendor/mail/html/header.blade.php:6)

My header.blade.php:

<tr>
<td class="header">
<a href="{{ $url }}" style="display: inline-block;">

@if (trim($slot) === 'De IJsmannetjes')
    <img src="{{$message->embed('banner.png')}}" class="logo" alt="IJsmannetjes Logo">
@else
{{ $slot }}
@endif
</a>
</td>
</tr>

What am I doing wrong?

Kind regards,

Hubert

Jan
12
2 months ago
Activity icon

Replied to Cannot "get" Cached Data

Thanx for the advice: it solved the problem.

The Laravel documentation although clearly sates:

Cache::put('key', 'value', $seconds = 10);

And tinker does have access to the cache.

Kind regards,

HUbert

Jan
11
3 months ago
Activity icon

Started a new Conversation Cannot "get" Cached Data

It is the first time that I am using the cache in Laravel for an app. But I do not succeed in getting data out of teh cache.

My .env:

CACHE_DRIVER=file

The 2 methods in my controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Cache;

class LocationController extends Controller
{

    
    public function store(Request $request, $area_id, $location)
    {
        Cache::put('location', $location, $seconds = 36000);
        Cache::put('area', $area_id, $seconds = 36000);

        return [Cache::get('location')];
    }

    public function get(Request $request, $area_id)
    {

        $location = Cache::get('location');
        dd($location);

    }
}

When I use the store-method, the data seem to be stored in the cache: the return value is indeed the value to be stored in the cache. But when I use the get-method, dd($location) returns null. Also if I access the cache through php artisan tinker, I cannot find the data.

Any advice what I am doing wrong?

Kind reagrds,

Hubert

Jan
05
3 months ago
Activity icon

Replied to Problem Passing Collections To Vue Component

Clicked the wrong button. Sorry.

Jan
03
3 months ago
Activity icon

Replied to Problem Passing Collections To Vue Component

This was the cause of the error message! Thnx.

I must say that Vue eror messages are not always very helpfull.

Jan
02
3 months ago
Activity icon

Started a new Conversation Problem Passing Collections To Vue Component

I am building an application where I initially pass a collection of Areas to a vue component. Each Area contains a json encoded polygon with coordinates. The vue components renders the polygon on a (google) map. This works flawlessly. But then I want to add to each Area a number of Clients with their address information. If I do that, I get an error message from Vue:

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'leijgraaf&quot;,&quot;pivot&quot;:{&quot;area_id&quot;:3,&quot;client_id&quot;:7,&quot;created_at&quot;:&quot;2021-01-01t21:17:14.000000z&quot;,&quot;updated_at&quot;:&quot;2021-01-01t21:17:14.000000z&quot;}}]}' is not a valid attribute name.

I can't find anything on this error message that helps me. I tried al kinds of variations in the encoding of the collection, but nothing works. Hope someone can give some suggestions.

The collection of Areas that is passed:

  Illuminate\Database\Eloquent\Collection {#4351
     all: [
       App\Models\Area {#4307
         id: 2,
         name: "Hasselderheide",
         polygon: "[{"lat":51.42734401458352,"lng":6.170142758003911},{"lat":51.42338365925515,"lng":6.169198620430669},{"lat":51.4206807872797,"lng":6.1736618162314505},{"lat":51.422922041443705,"lng":6.176204550377569},{"lat":51.42553781401708,"lng":6.176515686623296}]",
         created_at: "2021-01-01 15:42:42",
         updated_at: "2021-01-01 15:42:42",
         clients: Illuminate\Database\Eloquent\Collection {#4335
           all: [
             App\Models\Client {#4358
               id: 2,
               name: "Jaspers",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4354
                 area_id: 2,
                 client_id: 2,
                 created_at: "2021-01-01 21:06:18",
                 updated_at: "2021-01-01 21:06:18",
               },
             },
             App\Models\Client {#4359
               id: 3,
               name: "Jasperen",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4357
                 area_id: 2,
                 client_id: 3,
                 created_at: "2021-01-01 21:06:18",
                 updated_at: "2021-01-01 21:06:18",
               },
             },
           ],
         },
       },
       App\Models\Area {#4300
         id: 3,
         name: "Velden",
         polygon: "[{"lat":51.43030379856803,"lng":6.1642523369595414},{"lat":51.404931819567686,"lng":6.151377733688057},{"lat":51.40418222166233,"lng":6.176182802657784},{"lat":51.4246311190432,"lng":6.1903448662564164}]",
         created_at: "2021-01-01 15:43:06",
         updated_at: "2021-01-01 21:17:14",
         clients: Illuminate\Database\Eloquent\Collection {#4344
           all: [
             App\Models\Client {#4360
               id: 2,
               name: "Jaspers",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4336
                 area_id: 3,
                 client_id: 2,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
             App\Models\Client {#4361
               id: 3,
               name: "Jasperen",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4342
                 area_id: 3,
                 client_id: 3,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
             App\Models\Client {#4362
               id: 7,
               name: "De Leijgraaf",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4152
                 area_id: 3,
                 client_id: 7,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
           ],
         },
       },
     ],
   }

The method in the controller that generates the collection:

public function index()
    {
        
        $areas = Area::with('clients:id,name')->get();
        return view('admin.index', ['areas' => $areas]);
    }

The relevant code in the Blade view:

    @foreach($areas as $area)
    <div class="m-8 ">
        <h1 class="text-xl font-bold">{{ $area->name }}</h1>
        <edit-polygon area={{ $area->toJson() }}></edit-polygon>
    </div>
    @endforeach

If I don't use the "->toJson()", the error stays the same

Finally the edit-polygon component:

template>
  <div>
    <div class="flex-container">
      <gmap-map
        :center="reportedMapCenter"
        :zoom="13"
        ref="map"
        :options="mapOptions"
        class="map-container"
      >
        <gmap-polygon
          v-if="paths.length > 0"
          :paths="paths"
          :editable="editable"
          @paths_changed="updateEdited($event)"
          @rightclick="handleClickForDelete"
          :options="polygonOptions"
          ref="polygon"
        >
        </gmap-polygon>
<!--
        <gmap-cluster>
            <gmap-marker
                v-for="m in markers"
                :position="m.position"
                :key="index">
            </gmap-marker>
        </gmap-cluster> -->

      </gmap-map>
    </div>
    <div class="pt-2">
      <button
        v-if="editable"
        @click="savePath()"
        class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
      >
        Save path
      </button>
      <button
        v-if="!editable"
        @click="toggleEdit()"
        class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
      >
        Edit path
      </button>

    </div>
  </div>
</template>

<script>
// import Vue from "vue";
// import * as VueGoogleMaps from "gmap-vue";

// Vue.use(VueGoogleMaps, {
//   load: {
//     key: "AIzaSyCSPDTifDu_qeYo8VfU0aGhGDnWXtf8f60",
//     libraries: "places", // This is required if you use the Autocomplete plugin
//   },

//   installComponents: true,
// });

function closeLoop(path) {
  return path.concat(path.slice(0, 1));
}

export default {
  props: ["area"],

  data() {
    return {
      reportedMapCenter: {
        lat: 51.33,
        lng: 6.14,
      },
      markers: [
        {
          position: {
            lat: 51.4236,
            lng: 6.1709,
          },
        },
        {
          position: {
            lat: 51.4336,
            lng: 6.1709,
          },
        }],
      edited: null,
      mvcPaths: null,
      editable: false,
      id: null,
      paths: [],
      polygonOptions: {
        strokeColor: "#FF00AA",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
      },
      mapOptions: {
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: true,
        disableDefaultUi: false,
        clickableIcons: false,
      },


    };
  },

  mounted() {
    this.paths = JSON.parse(JSON.parse(this.area).polygon);
    this.id = JSON.parse(this.area).id;
    // this.reportedMapcenter=this.polygonCenter();
    this.reportedMapCenter.lat = this.polygonCenter().lat;
    this.reportedMapCenter.lng = this.polygonCenter().lng;
  },

  watch: {
    polygonPaths: _.throttle(function (paths) {
      if (paths) {
        this.paths = paths.flat();
      }
    }, 1000),
  },

  computed: {
    polygonPaths: function () {
      if (!this.mvcPaths) return null;

      let paths = [];
      for (let i = 0; i < this.mvcPaths.getLength(); i++) {
        let path = [];
        for (let j = 0; j < this.mvcPaths.getAt(i).getLength(); j++) {
          let point = this.mvcPaths.getAt(i).getAt(j);
          path.push({ lat: point.lat(), lng: point.lng() });
        }
        paths.push(path);
      }

      return paths;
    },
  },

  methods: {
    mapCenter() {
      console.log(this.reportedMapCenter);
      return this.reportedMapcenter;
    },

    toggleEdit() {
      this.editable = true;
    },

    updateEdited: function (mvcPaths) {
      this.mvcPaths = mvcPaths;
    },

    addPath: function () {
      // obtain the bounds, so we can guess how big the polygon should be
      var bounds = this.$refs.map.$mapObject.getBounds();
      var northEast = bounds.getNorthEast();
      var southWest = bounds.getSouthWest();
      var center = bounds.getCenter();
      var degree = this.paths.length + 1;
      var f = Math.pow(0.66, degree);

      // Draw a triangle. Use f to control the size of the triangle.
      // i.e., every time we add a path, we reduce the size of the triangle
      var path = [
        {
          lng: center.lng(),
          lat: (1 - f) * center.lat() + f * northEast.lat(),
        },
        {
          lng: (1 - f) * center.lng() + f * southWest.lng(),
          lat: (1 - f) * center.lat() + f * southWest.lat(),
        },
        {
          lng: (1 - f) * center.lng() + f * northEast.lng(),
          lat: (1 - f) * center.lat() + f * southWest.lat(),
        },
      ];
      this.paths = path;
    },

    removePath: function () {
      this.paths = [];
      //   this.paths.splice(this.paths.length - 1, 1);
    },

    savePath() {
      axios
        .patch("/gebied/" + this.id, {
          id: this.id,
          polygon: JSON.stringify(this.paths),
        })
        .catch(function (error) {
          console.log(error);
        });
      this.editable = false;
    },

    handleClickForDelete($event) {
      if ($event.vertex) {
        this.$refs.polygon.$polygonObject
          .getPaths()
          .getAt($event.path)
          .removeAt($event.vertex);
      }
    },

    polygonCenter() {
      let top = 0;
      let bottom = 90;
      let left = 180;
      let right = 0;
      let center = {};

      for (let i = 0; i < this.paths.length; i++) {
        if (this.paths[i].lat > top) {
          top = this.paths[i].lat;
        }
        if (this.paths[i].lat < bottom) {
          bottom = this.paths[i].lat;
        }
        if (this.paths[i].lng > right) {
          right = this.paths[i].lng;
        }
        if (this.paths[i].lng < left) {
          left = this.paths[i].lng;
        }
      }

      center = {
        lat: (top + bottom) / 2,
        lng: (left + right) / 2,
      };

      return center;
    },
  },
};
</script>

Anyone suggestions? I do not have a lot of experience yet with passing clompex data to Vue.

Kind regards,

Hubert

Dec
31
3 months ago
Activity icon

Replied to Does Laravel Change Table Names By Itself??

I agree. I will read it, but for now the $table is a quick fix.

Activity icon

Replied to Does Laravel Change Table Names By Itself??

Although I thought I followed the documentation about many-to-many relationships, I now see that I didn't follow the naming conventions. I didn't read the piece about pivots. It looks complicated: I will study it at a later time.

Setting the $table proved to be a good fix though.

Thnx.

Hubert

Activity icon

Started a new Conversation Does Laravel Change Table Names By Itself??

I am building a project in Laravel 8.

I have a migration for a client_areas model that I use for a many-to-many relationship:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateClientAreasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('client_areas', function (Blueprint $table) {
            $table->unsignedBigInteger('clients_id')->constrained()->onDelete('cascade');
            $table->unsignedBigInteger('areas_id')->constrained()->onDelete('cascade');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('client_areas');
    }
}

My models: Client_Area.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Client_Area extends Model
{
    use HasFactory;

    protected $guarded = [];
}

Client.php

<?php

namespace App\Models;

use App\Models\Area;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Client extends Model
{
    use HasFactory;

    protected $guarded = [];


    public function areas()
    {
        return $this->belongsToMany(Area::class, 'client_areas', 'clients_id', 'areas_id');
    }
}

Area.php

<?php

namespace App\Models;

use App\Models\Area;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Client extends Model
{
    use HasFactory;

    protected $guarded = [];


    public function areas()
    {
        return $this->belongsToMany(Area::class, 'client_areas', 'clients_id', 'areas_id');
    }
}

The problem I run into is that when I call App\Models\Client_Area::all(); I get the error message

Base table or view not found: 1146 Table 'db_ijskar.client__areas' doesn't exist

It took me hours to find out that in the error message there is a double underscore in the table name. But I triplechecked my code and I cannot find that double underscore anywhere. Also the actual table in my database is called client_areas with a single underscore.

Can anyone give me advice what to do next?

Hubert

Dec
27
3 months ago
Activity icon

Awarded Best Reply on Uncaught ReferenceError: VueGoogleMaps Is Not Defined

Thanx for the reply again. Some answers:

  • My Laraval installation is fresh 8.0. Only changed the database data in .env. And installed Breeze.
  • The logfile is empty
  • vue2-google-maps forked into gmap-vue. I first used gmap-vue. Because of the error I changed to gmap-vue, but the error persisted. Then changed back.

Meanwhile I fixed the problem, although I do not understand exactly how!

  • I removed gmap-vue.
  • I selectively commented out lines in app.js to see what lines caused the problem. Uncommented them again
  • reinstalled gmap-vue
  • stared using gmap-vue again instead of vue2-google-maps. Then the error was gone!

Thanx anyway.

Regards,

Hubert

Activity icon

Replied to Uncaught ReferenceError: VueGoogleMaps Is Not Defined

Thanx for the reply again. Some answers:

  • My Laraval installation is fresh 8.0. Only changed the database data in .env. And installed Breeze.
  • The logfile is empty
  • vue2-google-maps forked into gmap-vue. I first used gmap-vue. Because of the error I changed to gmap-vue, but the error persisted. Then changed back.

Meanwhile I fixed the problem, although I do not understand exactly how!

  • I removed gmap-vue.
  • I selectively commented out lines in app.js to see what lines caused the problem. Uncommented them again
  • reinstalled gmap-vue
  • stared using gmap-vue again instead of vue2-google-maps. Then the error was gone!

Thanx anyway.

Regards,

Hubert

Dec
26
3 months ago
Activity icon

Replied to Uncaught ReferenceError: VueGoogleMaps Is Not Defined

I copied the code from another Laravel project where it worked flawlessly! So this is not the problem. Strangely enough that other project now also has the same problem.

One thing I changed is that I adapted Apache to use HTTPS. Could that be a problem?

Activity icon

Started a new Conversation Uncaught ReferenceError: VueGoogleMaps Is Not Defined

I ported some vue2-google-maps based components to a fresh Laravel project. But for some reason I keep getting this error and everything I tried didn't help. Hopefully someone has an advice. Most likely it is a very basic erro that I fail to see.

my app.js:

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
load: {
    key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    libraries: "places", // This is required if you use the Autocomplete plugin
},

installComponents: true,
});

Vue.component('edit-polygon', require('./components/EditPolygon.vue').default);
Vue.component('create-area', require('./components/CreateArea.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
   el: '#test1',
});

My bladefile:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">



        <style>
            body {
               font-family: 'Nunito';
            }
        </style>
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body class="antialiased">
         <div id="test1">
            <example-component></example-component>
        </div>

    </body>
</html>

My package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "npm:@tailwindcss/[email protected]^2.0.1",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "gmap-vue": "^1.5.0",
        "vue": "^2.6.12",
        "vue2-google-maps": "^0.10.7"
    }
}
Dec
14
3 months ago
Activity icon

Replied to 'cross-env' Is Not Recognized As An Internal Or External Command,

Thanx. I'll try it.

The worrying thing is of course that I have to do this anyhow. It already happened twice this week for the same Laravel project.

Any idea what I may be doing wrong?

Hubert

Dec
11
4 months ago
Activity icon

Replied to 'cross-env' Is Not Recognized As An Internal Or External Command,

Solved in meanwhile:

  • removes node_modules folder
  • removed package-lock.json
  • ran npm install
Activity icon

Started a new Conversation 'cross-env' Is Not Recognized As An Internal Or External Command,

I'm building a Laravel 8 project using Vue2. The initial problem was that Chrome dev tools did recognize Vue, but does not show the root component.

When I ran npm run dev in the root of my project, I got an error message:

> @ development C:\xampp\htdocs\api-frontend
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hubert\AppData\Roaming\npm-cache\_logs20-12-11T19_14_02_023Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hubert\AppData\Roaming\npm-cache\_logs20-12-11T19_14_02_042Z-debug.log

Most likely it is an obvious error I make, but I don't see it!

Any suggestions?

Hubert

Nov
13
4 months ago
Activity icon

Replied to Debug Blade Variables During Rendering

Thanx. I could have thought about it myself!

Thnx.

Activity icon

Started a new Conversation Debug Blade Variables During Rendering

My project crashes during rendering of Blade files, most likely due to the value of Blade variables. Is there an easy way to debug this? E.g. by dumping the value of the variables in a way equivalent to dd() or dump() in php?

HUbert

Nov
12
4 months ago
Activity icon

Commented on Search Dropdown Autocomplete With Livewire

Many older games in IGDB don't have a complete record: all kinds of keys are missing. I could only fix this with a bunch of isset()'s in formatGameForView and show.blade.php.

Am I the only one with this problem?

Nov
09
5 months ago
Activity icon

Replied to Livewire Components Don't Work Asynchronous

Clear. I've managed to set up a virual host in Xampp.

Nov
07
5 months ago
Activity icon

Started a new Conversation Livewire Components Don't Work Asynchronous

I'm following the videogame aggregator training currently. U have 4 Livewire components on a page that each make an HTTP-request. This is supposed to happen asynchronously.

But when I put asleep(3) in the first component to make it slower, all other 3 seem to wait for the first to finish. Apparently they are not working asynchronously.

Am I doing something wrong?

Hubert

Nov
06
5 months ago
Activity icon

Commented on Improve Performance

When I put the sleep(3) in the first component, all other 3 seem to wait for the first to finish. Apparently they are not working asynchronously.

Am I doing something wrong?

Hubert

Oct
23
5 months ago
Activity icon

Replied to Laracasts.test/api/stats Not Found

Does that mean that I have to create the api-site myself locally?

Activity icon

Started a new Conversation Laracasts.test/api/stats Not Found

I'm currently following the video series about VUE and SPA. In episode seven the use axios calls to a remote api: laracasts.test/api/stats.

I however get the error: net::ERR_NAME_NOT_RESOLVED

It looks like laracast.test doesn't exist?

Or am I doing something wrong?

HUbert

Oct
20
5 months ago
Activity icon

Replied to Npm Error: Failed At The @ Development Script.

Meanwhile I found the error, and it was dumb: the path to tailwind.config.js was wrong!

Thanx anyway.

Activity icon

Started a new Conversation Npm Error: Failed At The @ Development Script.

I am starting a new Laravel project with Vue and Vue-router and Tailwind (the Laravel, Vue, and SPA videos form Laracasts). However I keep getting the npm error written in the title of this discussion.

My webpack.mix.js:

let mix = require('laravel-mix');

const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .options({ processCssUrls: false, postCss: [tailwindcss('./path/to/your/tailwind.config.js')], });

My app.scss:

@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";

I tried a method described elsewhere in this form: removing node_modules and install npm again. But that didn't help.

Most likely I am making a stupid beginners error, but I can't find it.

Any suggestions?

Hubert

Oct
16
5 months ago
Activity icon

Commented on Refactoring To Custom Validation

In Laravel 7 only the second method works for me. And you have to import App\Rules\SpamFree.

Oct
12
5 months ago
Activity icon

Replied to How To Verify URI In Requests

Found it: A type : Middelware instead of Middleware!!

Thanx.

Hubert

Activity icon

Replied to How To Verify URI In Requests

[2020-10-12 20:24:40] local.ERROR: Method App\Http\Controllers\UserNotificationsController::middelware does not exist. {"exception":"[object] (BadMethodCallException(code: 0): Method App\Http\Controllers\UserNotificationsController::middelware does not exist. at C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Controller.php:68) [stacktrace] #0 C:\xampp\htdocs\forum-oude pc\app\Http\Controllers\UserNotificationsController.php(12): Illuminate\Routing\Controller->__call('middelware', Array) #1 [internal function]: App\Http\Controllers\UserNotificationsController->__construct() #2 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(849): ReflectionClass->newInstanceArgs(Array) #3 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(691): Illuminate\Container\Container->build('App\\Http\\Contro...') #4 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Application.php(796): Illuminate\Container\Container->resolve('App\\Http\\Contro...', Array, true) #5 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(637): Illuminate\Foundation\Application->resolve('App\\Http\\Contro...', Array) #6 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Application.php(781): Illuminate\Container\Container->make('App\\Http\\Contro...', Array) #7 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(253): Illuminate\Foundation\Application->make('App\\Http\\Contro...') #8 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(970): Illuminate\Routing\Route->getController() #9 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(931): Illuminate\Routing\Route->controllerMiddleware() #10 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(702): Illuminate\Routing\Route->gatherMiddleware() #11 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(678): Illuminate\Routing\Router->gatherRouteMiddleware(Object(Illuminate\Routing\Route)) #12 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(662): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request)) #13 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(628): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route)) #14 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(617): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request)) #15 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(165): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request)) #16 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(128): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request)) #17 C:\xampp\htdocs\forum-oude pc\vendor\barryvdh\laravel-debugbar\src\Middleware\InjectDebugbar.php(58): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #18 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Barryvdh\Debugbar\Middleware\InjectDebugbar->handle(Object(Illuminate\Http\Request), Object(Closure)) #19 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #20 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure)) #21 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #22 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure)) #23 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\ValidatePostSize.php(27): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #24 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure)) #25 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode.php(63): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #26 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure)) #27 C:\xampp\htdocs\forum-oude pc\vendor\fruitcake\laravel-cors\src\HandleCors.php(37): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #28 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Fruitcake\Cors\HandleCors->handle(Object(Illuminate\Http\Request), Object(Closure)) #29 C:\xampp\htdocs\forum-oude pc\vendor\fideloper\proxy\src\TrustProxies.php(57): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #30 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure)) #31 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(103): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #32 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(140): Illuminate\Pipeline\Pipeline->then(Object(Closure)) #33 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(109): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request)) #34 C:\xampp\htdocs\forum-oude pc\public\index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request)) #35 {main} "}

Activity icon

Started a new Conversation How To Verify URI In Requests

I'm following the Forum-videos. In video 44 I am running into a problem that I am unable to solve:

In a test I make a getJson request:

    $this->assertCount(
        1,
        $this->getJson("/profiles/" . auth()->user()->name . "/notifications")->json()
    );

In web.php I have the route:

Route::get('/profiles/{user}/notifications', '[email protected]');

phpunit gives green light, but the index method in the controller is never called. Also later, when I use an axios call from a Vue component to the same route, I get a 500 error.

Most likely it is a stupid error I am making somewhere.

Is there a way to show the request that is received by the backend and that is used to select the right route in web.php? At least I an then check whether the right URI is coming in.

Kind regards,

Hubert