Added modal to whiteboard view + corresponding jquery to send data to…

app/Http/Controllers/WhiteboardController.php

@@ -37,11 +37,15 @@ public function index()
             ->with('announcements', $announcements);
     }
 
-    public function signUp(User $user, Category $category)
+    public function signUp(User $user, Category $category, $description)
     {
         if (Gate::allows('edit-own', $user) && $category->published)
         {
-            $result = $user->categories()->syncWithoutDetaching($category);
+            $result = $user->categories()->syncWithoutDetaching([
+                $category->id => [
+                    'description' => $description
+                ]
+            ]);
 
             if($result['attached'])
             {
@@ -53,7 +57,7 @@ public function signUp(User $user, Category $category)
                         'time' => date('d/m H:i')
                     )
                 ));
-                
+
                 $user->pushes++;
                 $user->save();
             }

resources/views/layouts/app.blade.php

@@ -7,6 +7,9 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 
+	<!-- include jquery V3.4.1 -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+
     <!-- (fav)icons -->
     <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
 	<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
@@ -58,5 +61,8 @@
     	<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
   		<script src="{{ asset('js/websockets.js') }}"></script>
     @endif
+
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
 </body>
 </html>

resources/views/layouts/whiteboard.blade.php

@@ -34,7 +34,7 @@
                             <a class="btn btn-danger" href="{{ route('categories.toggle', $category->id) }}">Uitschakelen</a>
                         </div>
                     @endif
-                    <a class="btn btn-primary" href="/signup/user/{{ Auth::user()->id }}/category/{{ $category->id }}">Voeg mij toe</a>
+                    <a class="btn btn-primary" href="#" data-toggle="modal" data-target="#descriptionModal">Voeg mij toe</a>
                 </div>
             </div>
             <ul id="category-{{ $category->id }}">
@@ -56,4 +56,34 @@
         </div>
         @endforeach
     </div>
-@endsection
+
+    <div class="modal fade in" id="descriptionModal">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Beschrijf kort je vraag</h5>
+                </div>
+                <div class="modal-body">
+                    <textarea name="modalInput" id="modalInput" cols="75" rows="10" placeholder="Beschrijving"></textarea>
+                    <input type="hidden" id="user" value="{{ Auth::user()->id }}">
+                    <input type="hidden" id="category" value="{{ $category->id }}">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" id="btnSubmit">Voeg mij toe</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        $('#btnSubmit').click( function() {
+            var user = $('#user').val();
+            var category = $('#category').val();
+            var description = $('#modalInput').val();
+
+            window.location.href = '/signup/user/'+ user +'/category/'+ category +'/description/' + description;
+        });
+    </script>
+@endsection
+

routes/web.php

@@ -14,7 +14,7 @@
 Route::group(['middleware' => 'auth'], function() {
 
 	Route::get('/', 'WhiteboardController@index')->name('home');
-	Route::get('signup/user/{user}/category/{category}', 'WhiteboardController@signUp');
+    Route::get('signup/user/{user}/category/{category}/description/{description}', 'WhiteboardController@signUp');
 	Route::get('signoff/user/{user}/category/{category}', 'WhiteboardController@signOff');
 
 	Route::group(['middleware' => 'admin'], function() {