AJAX filtering reservations on admin panel...

5 files changed, 141 insertions, 47 deletions

diff --git a/app/Http/Controllers/ReservationsController.php b/app/Http/Controllers/ReservationsController.php
index b347409..2a46343 100644
--- a/app/Http/Controllers/ReservationsController.php
+++ b/app/Http/Controllers/ReservationsController.php
@@ -128,8 +128,41 @@ class ReservationsController extends Controller
     // Administration
     public function edit(Request $request)
     {
-        $data = Reservation::orderBy('id', 'desc')->get();
-        return view('pages.reservations', compact('data'));
+        if ($request->isMethod('post')) {
+
+            $request->validate([
+                'call-sign' => 'required|alphanum'
+            ]);
+
+            if ($request->input('call-sign') == 'all') {
+                $activities = Reservation::orderBy('id', 'desc')
+                    ->get()
+                    ->toArray();
+                $data = [
+                    'status' => 'OK',
+                    'data' => $activities
+                ];
+
+                return response($data);
+            } else {
+                $activities = Reservation::where('specialCall', $request->input('call-sign'))
+                    ->orderBy('id', 'desc')
+                    ->get()
+                    ->toArray();
+                $data = [
+                    'status' => 'OK',
+                    'data' => $activities
+                ];
+
+                return response($data);
+            }
+            
+        }
+        else {
+            //$data = Reservation::orderBy('id', 'desc')->get();
+            $signs = SpecialCall::all(); 
+            return view('pages.reservations', compact('signs'));
+        }
     }
 
     public function update(Request $request)
diff --git a/public/js/reservations.js b/public/js/reservations.js
index 94bee2d..65b2e2e 100644
--- a/public/js/reservations.js
+++ b/public/js/reservations.js
@@ -9,30 +9,52 @@ jQuery(document).ready(fillTable);
 
 function fillTable() {
     tableData = jQuery('table#ajax-table>tbody').first();
-    tableData.html('<tr><td class="font-weight-bold text-center" colspan="6">Loading...</td></tr>');
+    tableData.html('<tr><td class="font-weight-bold text-center" colspan="13">Loading...</td></tr>');
 
     sign = jQuery('select#call-sign').first().val();
 
-    jQuery.post('/api/activities', {'call-sign': sign}, function (data, status) {
+    jQuery.post('/special-calls/reservations', {'call-sign': sign}, function (data, status) {
         if (status === 'success') {
             if (data.data.length > 0) {
                 tableData.empty();
                 for (var i = 0, len = data.data.length; i < len; i++) {
-                    tr = '<tr><td>' + data.data[i].operatorCall + '</td>' +
-                        '<td>' + data.data[i].fromTime + '</td>' +
-                        '<td>' + data.data[i].toTime + '</td>' +
-                        '<td>' + data.data[i].specialCall + '</td>' +
-                        '<td>' + data.data[i].frequencies + '</td>' +
-                        '<td>' + data.data[i].qso + '</td></tr>';
+                    tr = '<tr>';
+                    tr += '<td>' + data.data[i].id + '</td>';
+                    if (data.data[i].approved === 1)
+                        tr += '<td class="text-center"><input type="checkbox" checked></td>';
+                    else
+                        tr += '<td class="text-center"><input type="checkbox"></td>';
+
+                    tr +=
+                        '<td contenteditable="true">' + data.data[i].operatorCall + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].qso + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].fromTime + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].toTime + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].specialCall + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].frequencies + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].modes + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].operatorName + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].operatorEmail + '</td>' +
+                        '<td contenteditable="true">' + data.data[i].operatorPhone + '</td>';
+                    tr += '<td>';
+                    tr += "<button class=\"btn btn-primary mr-2\" onclick=\"btnAction('update', this)\">Update</button>";
+                    tr += "<button class=\"btn btn-warning mr-2\" onclick=\"btnAction('restore', this)\">Restore</button>";
+                    tr += "<button class=\"btn btn-danger\" onclick=\"btnAction('delete', this)\">Delete</button>";
+                    tr += '</td>';
+                    tr += '</tr>';
                     tableData.append(tr);
                 }
             }
             else {
-                tableData.html('<tr><td class="font-weight-bold text-center" colspan="6">No data...</td></tr>');
+                tableData.html('<tr><td class="font-weight-bold text-center" colspan="13">No data...</td></tr>');
             }
         }
         else {
-            tableData.html('<tr><td class="font-weight-bold text-center" colspan="6">Error!</td></tr>');
+            tableData.html('<tr><td class="font-weight-bold text-center" colspan="13">Error!</td></tr>');
         }
     });
 }
+
+function btnAction(action, btn) {
+    console.log(action);
+}
diff --git a/resources/views/pages/reservations.blade.php b/resources/views/pages/reservations.blade.php
index 66b4d7e..06c0335 100644
--- a/resources/views/pages/reservations.blade.php
+++ b/resources/views/pages/reservations.blade.php
@@ -4,10 +4,24 @@
 
 @section('navbar', View::make('inc.navbar'))
 
+@section('scripts')
+    <script src="{{ asset('js/reservations.js') }}"></script>
+@endsection
+
 @section('content')
-@if (count($data) > 0)
-<div class="table-responsive">
-    <table class="table table-striped table-bordered" style="white-space:nowrap;"><!-- table-hover -->
+<input type="hidden" name="csrf-token" content="{{ csrf_token() }}">
+<label for="call-sign">Filter by special callsign: </label>
+<select id="call-sign">
+    <option value="all">All</option>
+    @if (count($signs) > 0)
+        @foreach ($signs as $sign)
+            <option value="{{ $sign->sign }}">{{ $sign->sign }}</option>
+        @endforeach
+    @endif
+</select>
+
+<div class="table-responsive mt-2">
+    <table id="ajax-table" class="table table-striped table-bordered" style="white-space:nowrap;"><!-- table-hover -->
         <thead class="thead-dark">
             <tr>
                 <th>ID</th>
@@ -16,47 +30,71 @@
                 <th>QSO</th>
                 <th>From</th>
                 <th>To</th>
+                <th>Special Callsign</th>
                 <th>Frequencies</th>
                 <th>Modes</th>
-                <th>Special Callsign</th>
                 <th>Operator Name</th>
                 <th>Operator Email</th>
                 <th>Operator Phone</th>
                 <th>Actions</th>
             </tr>
-            @foreach ($data as $row)
-                <tr>
-                    <td class="align-middle">{{ $row->id }}</td>
-                    @if ($row->approved)
-                       <td class="align-middle"><input type="checkbox" checked></td> 
-                    @else
-                       <td class="align-middle"><input type="checkbox"></td> 
-                    @endif
-                    <td class="align-middle">{{ $row->operatorCall }}</td>
-                    <td class="align-middle">{{ $row->qso }}</td>
-                    <td class="align-middle">{{ $row->fromTime }}</td>
-                    <td class="align-middle">{{ $row->toTime }}</td>
-                    <td class="align-middle">{{ $row->frequencies }}</td>
-                    <td class="align-middle">{{ $row->modes }}</td>
-                    <td class="align-middle">{{ $row->specialCall }}</td>
-                    <td class="align-middle">{{ $row->operatorName }}</td>
-                    <td class="align-middle">{{ $row->operatorEmail }}</td>
-                    <td class="align-middle">{{ $row->operatorPhone }}</td>
-                    <td>
-                        <button class="btn btn-primary">Update</button>
-                        <button class="btn btn-warning">Restore</button>
-                        <button class="btn btn-danger">Delete</button>
-                    </td>
-                </tr>
-            @endforeach
         </thead>
         <tbody>
         </tbody>
     </table>
 </div>
-@else
-<div class="text-center">
-    <strong>There are currently no reservations.</strong>
-</div>
-@endif
+{{--@if (count($data) > 0)--}}
+{{--<div class="table-responsive">--}}
+    {{--<table class="table table-striped table-bordered" style="white-space:nowrap;"><!-- table-hover -->--}}
+        {{--<thead class="thead-dark">--}}
+            {{--<tr>--}}
+                {{--<th>ID</th>--}}
+                {{--<th>Approved</th>--}}
+                {{--<th>Operator Callsign</th>--}}
+                {{--<th>QSO</th>--}}
+                {{--<th>From</th>--}}
+                {{--<th>To</th>--}}
+                {{--<th>Frequencies</th>--}}
+                {{--<th>Modes</th>--}}
+                {{--<th>Special Callsign</th>--}}
+                {{--<th>Operator Name</th>--}}
+                {{--<th>Operator Email</th>--}}
+                {{--<th>Operator Phone</th>--}}
+                {{--<th>Actions</th>--}}
+            {{--</tr>--}}
+        {{--</thead>--}}
+        {{--<tbody>--}}
+            {{--@foreach ($data as $row)--}}
+                {{--<tr>--}}
+                    {{--<td class="align-middle">{{ $row->id }}</td>--}}
+                    {{--@if ($row->approved)--}}
+                       {{--<td class="align-middle"><input type="checkbox" checked></td> --}}
+                    {{--@else--}}
+                       {{--<td class="align-middle"><input type="checkbox"></td> --}}
+                    {{--@endif--}}
+                    {{--<td class="align-middle">{{ $row->operatorCall }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->qso }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->fromTime }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->toTime }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->frequencies }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->modes }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->specialCall }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->operatorName }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->operatorEmail }}</td>--}}
+                    {{--<td class="align-middle">{{ $row->operatorPhone }}</td>--}}
+                    {{--<td>--}}
+                        {{--<button class="btn btn-primary">Update</button>--}}
+                        {{--<button class="btn btn-warning">Restore</button>--}}
+                        {{--<button class="btn btn-danger">Delete</button>--}}
+                    {{--</td>--}}
+                {{--</tr>--}}
+            {{--@endforeach--}}
+        {{--</tbody>--}}
+    {{--</table>--}}
+{{--</div>--}}
+{{--@else--}}
+{{--<div class="text-center">--}}
+    {{--<strong>There are currently no reservations.</strong>--}}
+{{--</div>--}}
+{{--@endif--}}
 @endsection()
diff --git a/routes/api.php b/routes/api.php
index d85ea7a..413ea33 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -21,3 +21,4 @@ Route::middleware('auth:api')->get('/user', function (Request $request) {
 });
 
 Route::post('activities', [ReservationsController::class, 'index']);
+Route::post('reservations', [ReservationsController::class, 'update'])->middleware(['auth']);
diff --git a/routes/web.php b/routes/web.php
index bba3ab5..393b226 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -41,7 +41,7 @@ Route::get('/special-calls', [ReservationsController::class, 'index'])->name('ac
 Route::get('/special-calls/reserve', [ReservationsController::class, 'create'])->name('reserve');
 Route::post('/special-calls/reserve', [ReservationsController::class, 'store'])->name('reserveForm');
 Route::get('/special-calls/reservations', [ReservationsController::class, 'edit'])->name('reservations')->middleware(['auth']);
-Route::post('/special-calls/reservations', [ReservationsController::class, 'update'])->name('reservationsForm')->middleware(['auth']);
+Route::post('/special-calls/reservations', [ReservationsController::class, 'edit'])->name('reservationsForm')->middleware(['auth']);
 
 
 Route::get('/special-calls/add', [SpecialCallsController::class, 'create'])->name('addSign')->middleware(['auth']);