calendar_remove - modifiche grafiche

app/Http/Livewire/CalendarRemove.php

@@ -8,10 +8,11 @@ class CalendarRemove extends Component
 {
     public $records;
     public $groups = [];
+    
+    public $data = [];
 
     public function render()
     {
-        
         $this->records = [];
         $this->groups = [];
 
@@ -44,14 +45,38 @@ class CalendarRemove extends Component
 
                 $x = ($calendar->course ? ($calendar->course->name . " ") : "") . $d . " " . $hour;
                 
-                if (!in_array($x, $this->groups))
+                if (!in_array($x, $this->groups)) {
                     $this->groups[] = $x;
 
+                    if ($calendar->course) {
+                        if (!isset($this->data[$calendar->course->name])) {
+                            $this->data[$calendar->course->name] = [];
+                        }
+                        $this->data[$calendar->course->name][$dow][] = [
+                            'calendar_id' => $calendar->id,
+                            'grp' => $x,
+                            'hour' => $hour,
+                        ];
+                    }
+                }
+
                 $this->records[] = array('id' => $calendar->id, 'date' => date("d/m/Y", strtotime($calendar->from)), "name" => $calendar->name, "hour" => $hour, "day" => $d);
             }
 
         }
 
+        // ordinamento corsi/giorni/ore
+        ksort($this->data, SORT_STRING);
+        foreach ($this->data as &$days) {
+            ksort($days, SORT_NUMERIC);
+            foreach($days as &$times) {
+                usort($times, function ($a, $b) {
+                    return strtotime($a['hour']) <=> strtotime($b['hour']);
+                });
+            }
+        }
+        unset($days, $times);
+
         return view('livewire.calendar_remove');
     }
 

public/css/style.css

@@ -16851,4 +16851,16 @@ button.download-png {
 #btnArchive:hover,
 #btnRestore:hover {
     background-color: #0e70af !important;
+}
+
+.lessons-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
+  gap: 20px;
+}
+
+.lessons-hour-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
+  gap: 20px;
 }

resources/views/layouts/app.blade.php

@@ -172,6 +172,10 @@
                 print "Iscritti corsi";
             if (Request::is('calendar'))
                 print "Calendario";
+            if (Request::is('calendar_remove'))
+                print "Elimina lezioni";
+            if (Request::is('calendar_settings'))
+                print "Impostazioni calendario";
             if (Request::is('course_list'))
                 print "Pagamento corsi";
             if (Request::is('reminders'))
@@ -342,7 +346,7 @@
                                     Corsi
                                 </button>
                             </h2>
-                            <div id="collapseThree" class="accordion-collapse collapse {{Request::is('course_list') || Request::is('course_member') || Request::is('calendar') || Request::is('presence_reports') || Request::is('absence_reports') ? 'show' : ''}}" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                            <div id="collapseThree" class="accordion-collapse collapse {{Request::is('course_list') || Request::is('course_member') || Request::is('calendar') || Request::is('calendar_remove') || Request::is('calendar_settings') || Request::is('presence_reports') || Request::is('absence_reports') ? 'show' : ''}}" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                 <div class="accordion-body">
                                     <ul class="nav nav-pills flex-column align-items-center align-items-sm-start w-100" id="menu-contabilita" style="margin-top:0px;">
                                         <li class="nav-item" style="{{Request::is('course_member') ? 'background-color: #c5d9e6;' : ''}}">
@@ -355,7 +359,7 @@
                                                 <span class="ms-3 d-md-inline">Pagamenti</span>
                                             </a>
                                         </li>
-                                        <li class="nav-item" style="{{Request::is('calendar') ? 'background-color: #c5d9e6;' : ''}}">
+                                        <li class="nav-item" style="{{Request::is('calendar') || Request::is('calendar_remove') || Request::is('calendar_settings') ? 'background-color: #c5d9e6;' : ''}}">
                                             <a href="/calendar" class="nav-link d-flex align-items-center linkMenu">
                                                 <span class="ms-3 d-md-inline">Calendario</span>
                                             </a>

resources/views/livewire/calendar.blade.php

@@ -26,14 +26,20 @@
             </div>
             <div class="col-auto mt-2">
                 <a style="cursor:pointer" href="#" data-bs-toggle="modal" data-bs-target="#calendarNewModal" class="openNewModal addData btn--ui">
-                    {{-- <i class="fa-solid fa-plus"></i> --}}
-                    Aggiungi lezione
+                    <i class="fa-solid fa-plus"></i>
+                    {{-- Aggiungi lezione --}}
                 </a>
             </div>
             <div class="col-auto mt-2">
-                <a style="cursor:pointer" href="/calendar_remove">
-                    {{-- <i class="fa-solid fa-plus"></i> --}}
-                    Lezioni da eliminare
+                <a style="cursor:pointer" href="/calendar_remove" class="btn--ui">
+                    <i class="fa-solid fa-trash"></i>
+                    {{-- Lezioni da eliminare --}}
+                </a>
+            </div>
+            <div class="col-auto mt-2">
+                <a style="cursor:pointer" href="/calendar_settings" class="btn--ui">
+                    <i class="fa-solid fa-gear"></i>
+                    {{-- Impostazioni calendario --}}
                 </a>
             </div>
         </div>

resources/views/livewire/calendar_remove.blade.php

@@ -1,6 +1,6 @@
 <div class="col card--ui" id="card--dashboard">
 
-    <a class="btn--ui lightGrey" href="/presence_reports"><i class="fa-solid fa-arrow-left"></i></a><br>
+    <a class="btn--ui lightGrey" href="/calendar"><i class="fa-solid fa-arrow-left"></i></a><br>
 
     <header id="title--section" style="display:none !important" class="d-flex align-items-center justify-content-between">
         <div class="title--section_name d-flex align-items-center justify-content-between">
@@ -9,19 +9,61 @@
         </div>
     </header>
 
-    <br>
-
     <div class="row">
         <div class="col-12 mb-3">
-            <h3 class="primary">Lezioni inserite senza nessun iscritto</h3>
+            <div class="row">
+                <div class="col">
+                    <h3 class="primary">Lezioni senza iscritti nel calendario</h3>
+                </div>
+                <div class="col-auto">
+                    <span id="deleting" style="display:none">Eliminazione in corso...</span>
+                    <input type="button" class="btDelete btn--ui" value="Elimina selezionati">
+                </div>
+            </div>
+        </div>
+    </div>
+    @foreach ($data as $course => $days)
+    <div class="row mb-4">
+        <div class="col-12 mb-3">
+            <h4 class="primary">{{$course}}</h4>
+        </div>
+        @foreach ($days as $day => $times)
+        <div class="col-1"></div>
+        <div class="col-11 mb-4">
+            <h5 class="primary text-capitalize">{{Illuminate\Support\Carbon::create()->startOfWeek()->addDays($day - 1)->locale('it')->dayName}}</h5>
+            <div class="lessons-hour-grid">
+                @foreach ($times as $time)
+                    <a onclick="checkAll('{{$time['grp']}}', {{$time['calendar_id']}})" class="btn btn-light bt{{$time['calendar_id']}}">{{$time['hour']}}</a>
+                @endforeach
+            </div>
+            @if ($loop->last)
+                <hr>
+            @endif
+        </div>
+        @endforeach
+        {{-- <div class="col-12 mb-5">
+            <div class="lessons-grid">
+                @foreach($groups as $idx => $grp)
+                    <a onclick="checkAll('{{$grp}}', {{$idx}})" class="btn btn-light bt{{$idx}}">{{$grp}}</a>
+                @endforeach
+            </div>
+        </div> --}}
+    </div>
+    @endforeach
+
+    <div class="row">
+        <div class="col"></div>
+        <div class="col-auto">
+            <input type="button" class="btn--ui" onclick="toggleSingleLessons()" value="Visualizza slot singoli">
         </div>
-        <div class="col-12">
-            @foreach($groups as $idx => $grp)
-                <a onclick="checkAll('{{$grp}}', {{$idx}})" class="btn btn-light bt{{$idx}}">{{$grp}}</a>
-            @endforeach
+    </div>
+
+    <div class="row" id="single-lessons" style="display: none">
+        <div class="col-12 mb-3">
+            <h3 class="primary">Slot singoli</h3>
         </div>
-        <div class="col-12">
-            <table class="report-table">
+        <div class="col-12 mb-5">
+            <table class="report-table" id="lessons-table">
                 <thead>
                     <tr>
                         <td></td>
@@ -42,8 +84,6 @@
                     </tr>
                     @endforeach
                 </tbody>
-                <span id="deleting" style="display:none">Eliminazione in corso...</span>
-                <input type="button" class="btDelete btn--ui" value="Elimina selezionati">
             </table>
         </div>
     </div>
@@ -51,6 +91,11 @@
 
 @push('css')
 <link href="/css/presence_report.css" rel="stylesheet" />
+<style>
+    .report-table {
+        width: 100% !important;
+    }
+</style>
 @endpush
 
 @push('scripts')
@@ -136,4 +181,57 @@
         }).get();
     }
 </script>
+@endpush
+
+@push('scripts')
+<script src="/assets/js/datatables.js"></script>
+<script src="https://cdn.datatables.net/buttons/3.0.2/js/buttons.dataTables.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+
+<script>
+
+function toggleSingleLessons() {
+    let lessons_wrapper = document.querySelector('#single-lessons');
+    if (lessons_wrapper) {
+        if (lessons_wrapper.style.display == 'none')
+            lessons_wrapper.style.display = 'block';
+        else
+            lessons_wrapper.style.display = 'none';
+    }
+}
+    
+$(document).ready(function() {
+    loadDataTable();
+});
+
+function loadDataTable(){
+    if ( $.fn.DataTable.isDataTable('#lessons-table') ) {
+        $('#lessons-table').DataTable().destroy();
+    }
+
+    $('#lessons-table').DataTable({
+        fixedHeader: false,
+        order: [
+            [1, 'asc']
+        ],
+        layout: {
+            topStart : null,
+            topEnd : null,
+            top1A: null,
+            top1B : {
+                pageLength: {
+                    menu: [[10, 25, 50, 100, 100000], [10, 25, 50, 100, "Tutti"]]
+                }
+            },
+            top1C :'search',
+        },
+        pagingType: 'numbers',
+        language: {
+            url: "/assets/js/Italian.json"
+        }
+    });
+}
+</script>
 @endpush