fix grafica frontend modulo presenze

public/css/calendar.css

@@ -0,0 +1,116 @@
+:root {
+    --fc-small-font-size: 0.85em;
+    --fc-page-bg-color: #fff;
+    --fc-neutral-bg-color: hsla(0, 0%, 82%, 0.3);
+    --fc-neutral-text-color: grey;
+    --fc-border-color: #ddd;
+    --fc-button-text-color: #fff;
+    --fc-button-bg-color: #0c6197;
+    --fc-button-border-color: #0c6197;
+    --fc-button-hover-bg-color: #0e70af;
+    --fc-button-hover-border-color: #0e70af;
+    --fc-button-active-bg-color: #a1a4a7;
+    --fc-button-active-border-color: #a1a4a7;
+    --fc-event-bg-color: #3788d8;
+    --fc-event-border-color: #3788d8;
+    --fc-event-text-color: #fff;
+    --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);
+    --fc-more-link-bg-color: #d0d0d0;
+    --fc-more-link-text-color: inherit;
+    --fc-event-resizer-thickness: 8px;
+    --fc-event-resizer-dot-total-width: 8px;
+    --fc-event-resizer-dot-border-width: 1px;
+    --fc-non-business-color: hsla(0, 0%, 84%, 0.3);
+    --fc-bg-event-color: #8fdf82;
+    --fc-bg-event-opacity: 0.3;
+    --fc-highlight-color: rgba(188, 232, 241, 0.3);
+    --fc-today-bg-color: rgba(255, 220, 40, 0.15);
+    --fc-now-indicator-color: red;
+
+    --bs-primary: #0c6197;
+    --bs-primary-rgb: 12, 97, 151;
+}
+
+body .fc .fc-col-header,
+body .fc .fc-daygrid-body,
+body .fc .fc-daygrid-body .fc-scrollgrid-sync-table,
+body .fc .fc-timegrid-body,
+body .fc .fc-timegrid-body .fc-timegrid-slots > table,
+body .fc .fc-timegrid-cols > table {
+    width: 100% !important;
+}
+
+body .fc .fc-view-harness {
+    height: calc(100dvh - 320px) !important;
+}
+
+body .fc table.fc-scrollgrid > thead {
+    position: sticky;
+    top: -10px;
+    z-index: 2;
+    background: white;
+}
+
+body .fc table.fc-scrollgrid > tbody > tr:first-child {
+    position: sticky;
+    top: 19px;
+    z-index: 2;
+    background: white;
+}
+
+body .fc .fc-toolbar.fc-header-toolbar {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+body .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
+    grid-row: 2;
+}
+
+body
+    .fc
+    .fc-toolbar.fc-header-toolbar
+    .fc-toolbar-chunk:has(.fc-toolbar-title) {
+    grid-row: 1;
+    text-align: center;
+    grid-column: 1 / span 2;
+}
+
+body .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child {
+    justify-self: end;
+}
+
+body .modal-backdrop.show {
+    opacity: 0.25;
+}
+
+body label.form-label {
+    margin-top: 10px;
+    margin-bottom: 0;
+}
+
+@media (max-width: 1024px) {
+    body .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk .fc-button {
+        font-size: 14px;
+    }
+}
+
+@media (max-width: 1024px) and (min-width: 500px) {
+    .tablesaw-stack thead th {
+        display: table-cell;
+    }
+
+    body .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk .fc-button {
+        font-size: 14px;
+    }
+
+    body .tablesaw-stack tbody tr {
+        display: table-row;
+    }
+
+    body .tablesaw-stack tbody td {
+        display: table-cell;
+        float: unset;
+        width: auto;
+    }
+}

public/css/style.css

@@ -16770,4 +16770,10 @@ div.dt-container div.dt-length label {
     top: unset;
     right: 60px;
   }
+
+  @media (max-width: 1024px) {
+    #card--dashboard {
+      margin-left: 0 !important;
+    }
+  }
   /* END CSS Ferrari - Modifiche UI */

resources/views/livewire/calendar.blade.php

@@ -6,9 +6,10 @@
         <div class="compare--chart_wrapper d-none"></div>
 
         <div class="row">
-            <div class="col-6 mt-2">
-                <div class="form--item">
-                    <label for="inputName" class="form-label">Tipologia</label>
+            <div class="col"></div>
+            <div class="col-auto text-end mt-2">
+                <div class="form--item d-flex align-items-center form--item gap-3">
+                    <label for="inputName" class="form-label mb-0">Tipologia</label>
                     <select class="form-select form-select-lg me-1" id="name_filter" onchange="reloadCalendar()">
                         <option value="">
                         @foreach($names as $n)
@@ -17,11 +18,14 @@
                     </select>
                 </div>
             </div>
-            <div class="col-6 text-end">
-                <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></a>
+            <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
+                </a>
             </div>
         </div>
-
+        <br>
         <div id='calendar'></div>
 
     </section>
@@ -29,27 +33,28 @@
     <a href="#" data-bs-toggle="modal" data-bs-target="#calendarModal" class="openModal"></a>
 
     <div  wire:ignore.self class="modal" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="calendarModalLabel">Dettaglio</h5>
+                    <h5 class="modal-title text-primary" id="calendarModalLabel">Dettaglio</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <div class="row">
-                        <div class="col-md-3">
-                            <label for="course_subscription_id" class="form-label">Ora inizio</label>
-                            <h3 class="time">ORA</h3>
+                    <div class="row align-items-center">
+                        <div class="col-auto">
+                            <label for="course_subscription_id" class="form-label text-primary">Ora inizio</label>
+                            <h3 class="time mb-0 text-primary">ORA</h3>
                         </div>
-                        <div class="col-md-1">
-                            <div style="border-left: 1px solid black;height: 100px;"></div>
+                        <div class="col-auto">
+                            <div style="border-left: 2px solid var(--bs-primary);height: 75px;"></div>
                         </div>
                         <div class="col-md-8">
-                            <label class="form-label date">Martdì aaa</label>
-                            <h3 class="title">Padel</h3>
+                            <label class="form-label date text-primary">Martdì aaa</label>
+                            <h3 class="title mb-0">Padel</h3>
                         </div>
                     </div>                    
                     <div class="row mt-2 showDelete" style="display:none">
+                        <br>
                         <div class="col-md-12">
                             <label for="newMotivation" class="form-label">Motivazione</label>
                             <select class="form-select form-select-lg me-1 " id="motivation_id">
@@ -58,13 +63,10 @@
                                     <option value="{{$m["id"]}}">{{$m["name"]}}</option>
                                 @endforeach
                             </select>
-                            <br>
-                            
                         </div>
-                        
                     </div>                
                 </div>
-                <div class="modal-footer mt-2">
+                <div class="modal-footer mt-2 justify-content-between">
                     <button class="btn--ui lightGrey hideDelete" onclick="showDelete()">Annulla Lezione</a>
                     <button type="button" class="btn--ui btn-primary hideDelete" onclick="goPresence()">Presenze</button>
                     <button type="button" class="btn--ui primary showDelete" onclick="deleteCalendar()" style="display:none">Annulla lezione</button>
@@ -79,10 +81,10 @@
     -->
 
     <div  wire:ignore.self class="modal" id="calendarNewModal" tabindex="-1" aria-labelledby="calendarNewModalLabel" aria-hidden="true">
-        <div class="modal-dialog">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="calendarNewModalLabel">Dettaglio</h5>
+                    <h5 class="modal-title text-primary" id="calendarNewModalLabel">Dettaglio</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
@@ -244,10 +246,10 @@
                 initialView: 'timeGridWeek',
                 slotMinTime: '06:00:00',
                 headerToolbar: {
-                    left: 'prevYear,prev,next,nextYear today',
+                    // left: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth',
+                    left: 'dayGridMonth,timeGridWeek',
                     center: 'title',
-                            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
-
+                    right: 'prevYear,prev,next,nextYear today',
                 },
                 dateClick: function(info) {
                     var x = info.dateStr.split("T");
@@ -306,3 +308,7 @@
         
     </script>
 @endpush
+
+@push("css")
+    <link href="/css/calendar.css" rel="stylesheet" />
+@endpush

resources/views/livewire/presence.blade.php

@@ -5,11 +5,16 @@
         <div class="compare--chart_wrapper d-none"></div>
 
         <div class="row">
-            <div class="col-md-6">
-                <h3>{{$calendar->course ? $calendar->course->name : $calendar->name}}</h3>
-            </div>
-            <div class="col-md-6">
-                <h3>{!!$this->getDateX()!!}, ora inizio {{date("H:i", strtotime($calendar->from))}}</h3>
+            <div class="col-sm-12">
+                <div class="row">
+                    <div class="col-auto">
+                        <h3 class="text-primary">{{$calendar->course ? $calendar->course->name : $calendar->name}}</h3>
+                    </div>
+                    <div class="col"></div>
+                    <div class="col-auto text-end">
+                        <h4>{!!$this->getDateX()!!}<br>ora inizio {{date("H:i", strtotime($calendar->from))}}</h4>
+                    </div>
+                </div>
             </div>
 
             @if($manual)
@@ -34,7 +39,7 @@
                         @endforeach
                     </select>
                 </div>
-                <div class="col-md-5">
+                <div class="col">
                     <label for="instructor_id" class="form-label">Istruttore</label>
                     <select class="form-select form-select-lg me-1 " wire:model="instructor_id">
                         <option value="">
@@ -43,7 +48,7 @@
                         @endforeach
                     </select>
                 </div>
-                <div class="col-md-1">
+                <div class="col-auto mt-2">
                     <br>
                     <button type="button" class="btn--ui primary" data-bs-toggle="modal" data-bs-target="#instructorModal" style="width:50px">&nbsp;<i class="fa-solid fa-plus"></i></button>
                 </div>
@@ -55,11 +60,14 @@
 
         </div>    
         
-        <section id="resume-table" class="mt-3"  style="margin-bottom:20px">
+        <section id="resume-table" class="mt-5"  style="margin-bottom:20px">
             <div class="compare--chart_wrapper d-none"></div>
-
-            <div class="input-group mb-3">
-                <input type="text" class="form-control" placeholder="Cerca utente" wire:model="filter">
+            
+            <div class="row">
+                <div class="col-md-8 col-sm-6"></div>
+                <div class="col-md-4 col-sm-6 mb-3">
+                    <input type="text" class="form-control" placeholder="Cerca utente" wire:model="filter">
+                </div>
             </div>
         
             <table class="table tablesaw tableHead tablesaw-stack" id="tablesaw-350" width="100%">
@@ -99,7 +107,7 @@
                                     @if ($record["presence"])
                                         @if ($record["my_presence"])
                                             @if($manual)
-                                                <a class="btn--ui primary" style="color:white;background-color:rgb(111, 31, 31) !important" onclick="removeSingle({{$record['id']}})">Elimina</a>
+                                                <a onclick="removeSingle({{$record['id']}})"><i class="fas fa-trash"></i></a>
                                             @else
                                                 <input class="member chkM" type="checkbox" value="{{$record["id"]}}" {{$record["presence"] ? 'checked' : ''}}>
                                             @endif
@@ -122,11 +130,18 @@
         </section>
 
         
+        <div class="row">
+            <div class="col">    
+                <button type="button" class="btn--ui primary btSave btAdd" data-bs-toggle="modal" data-bs-target="#userModal" >Aggiungi utente</button>
+            </div>
+        </div>
+        <br>
+        <br>
         <div class="row">
             @if($calendar->status == 0)
-                <div class="col-md-6">      
+                <div class="col">      
                     @if(!$manual)
-                        <div class="col-md-12 showDelete" style="display:none">
+                        <div class="col-lg-4 col-md-7 col-sm-12 showDelete" style="display:none">
                             <label for="newMotivation" class="form-label">Motivazione</label>
                             <select class="form-select form-select-lg me-1 " id="motivation_id">
                                 <option value="">
@@ -134,16 +149,18 @@
                                     <option value="{{$m["id"]}}">{{$m["name"]}}</option>
                                 @endforeach
                             </select>
-                            <div class="showDelete" style="float:left;display:none;"><br><button type="button" class="btn--ui " style="background-color:rgb(111, 31, 31)!important" onclick="cancel()">Annulla lezione selezionati</button>
-                            <button type="button" class="btn--ui " onclick="hideShowDelete()">Torna</button></div>
+                            <div class="showDelete" style="float:left;display:none;">
+                                <br>
+                                <button type="button" class="btn--ui lightGrey" onclick="hideShowDelete()">Indietro</button>
+                                <button type="button" class="btn--ui" {{-- style="background-color:rgb(111, 31, 31)!important" --}} onclick="cancel()">Conferma</button>
+                        </div>
                             
                         </div>
-                        <button type="button" class="btn--ui primary btSave" style="background-color:rgb(111, 31, 31) !important" onclick="showHideDelete()">Annulla lezione per selezionati</button>                    
+                        <button type="button" class="btn--ui lightGrey btSave" {{-- style="background-color:rgb(111, 31, 31) !important" --}} onclick="showHideDelete()">Annulla lezione per selezionati</button>                    
                         
                     @endif              
-                    <button type="button" class="btn--ui primary btSave btAdd" data-bs-toggle="modal" data-bs-target="#userModal" >Aggiungi utente</button>
                 </div>
-                <div class="col-md-6 text-end">
+                <div class="col-auto text-end">
                     @if(!$manual)
                         <button type="button" class="btn--ui btSave" onclick="save()">Salva</button>             
                     @endif
@@ -167,93 +184,95 @@
     <div  wire:ignore.self class="modal modal-lg fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="userModalLabel">Inserimento nuovo utente</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <h3>Utente presente</h3>
-                <div class="row mt-2">
-                    <div class="col-md-6">
-                        <label for="member_id" class="form-label">Aggiunge una o più persone</label>
-                        <select name="member_id" class="form-select memberClass" aria-label="Seleziona una persona" wire:model="member_ids" multiple>
-                            <option value="">--Seleziona--
-                            @foreach($members as $member)
-                                <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}} ({{$member->fiscal_code}})
-                            @endforeach
-                        </select>
-                    </div>
-                    <div class="col-md-6">
-                        <label for="newMotivation" class="form-label">Motivazione</label>
-                        <select class="form-select form-select-lg me-1 " wire:model="newMemberMotivationId">
-                            <option value="">
-                            @foreach($motivations_add as $m)
-                                <option value="{{$m["id"]}}">{{$m["name"]}}</option>
-                            @endforeach
-                        </select>
-                    </div>
+                <div class="modal-header">
+                    <h5 class="modal-title text-primary" id="userModalLabel">Inserimento nuovo utente</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <br><br>
-                <h3>Inserimento nuovo utente</h3>
-                <br>
-                <div class="row">
-                    <div class="col-md-6">
-                        <label for="newMemberFirstName" class="form-label">Nome</label>
-                        <input class="form-control @error('newMemberFirstName') is-invalid @enderror" type="text" id="newMemberFirstName" placeholder="Nome" wire:model="newMemberFirstName">
+                <div class="modal-body">
+                    <h3 class="text-primary">Utente già registrato</h3>
+                    <div class="row mt-2">
+                        <div class="col-md-6">
+                            <label for="member_id" class="form-label">Aggiunge una o più persone</label>
+                            <select name="member_id" class="form-select memberClass" aria-label="Seleziona una persona" wire:model="member_ids" multiple>
+                                <option value="">--Seleziona--
+                                @foreach($members as $member)
+                                    <option value="{{$member->id}}">{{$member->last_name}} {{$member->first_name}} ({{$member->fiscal_code}})
+                                @endforeach
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="newMotivation" class="form-label">Motivazione</label>
+                            <select class="form-select form-select-lg me-1 " wire:model="newMemberMotivationId">
+                                <option value="">
+                                @foreach($motivations_add as $m)
+                                    <option value="{{$m["id"]}}">{{$m["name"]}}</option>
+                                @endforeach
+                            </select>
+                        </div>
                     </div>
-                    <div class="col-md-6">
-                        <label for="newMemberLastName" class="form-label">Cognome</label>
-                        <input class="form-control @error('newMemberLastName') is-invalid @enderror" type="text" id="newMemberLastName" placeholder="Cognome" wire:model="newMemberLastName">
+                    <br>
+                    <hr>
+                    <br>
+                    <h3 class="text-primary">Inserimento nuovo utente</h3>
+                    <br>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label for="newMemberFirstName" class="form-label">Nome</label>
+                            <input class="form-control @error('newMemberFirstName') is-invalid @enderror" type="text" id="newMemberFirstName" placeholder="Nome" wire:model="newMemberFirstName">
+                        </div>
+                        <div class="col-md-6">
+                            <label for="newMemberLastName" class="form-label">Cognome</label>
+                            <input class="form-control @error('newMemberLastName') is-invalid @enderror" type="text" id="newMemberLastName" placeholder="Cognome" wire:model="newMemberLastName">
+                        </div>
                     </div>
-                </div>
-                <div class="row mt-2">
-                    <div class="col-md-6">
-                        <label for="newMemberEmail" class="form-label">Email</label>
-                        <input class="form-control @error('newMemberEmail') is-invalid @enderror" type="text" id="newMemberEmail" placeholder="Email" wire:model="newMemberEmail">
+                    <div class="row mt-2">
+                        <div class="col-md-6">
+                            <label for="newMemberEmail" class="form-label">Email</label>
+                            <input class="form-control @error('newMemberEmail') is-invalid @enderror" type="text" id="newMemberEmail" placeholder="Email" wire:model="newMemberEmail">
+                        </div>
+                        <div class="col-md-6">
+                            <label for="newMemberFiscalCode" class="form-label">Codice fiscale</label>
+                            <input class="form-control @error('newMemberFiscalCode') is-invalid @enderror" type="text" id="newMemberFiscalCode" placeholder="Codice fiscale" maxlength="16" wire:model="newMemberFiscalCode">                        
+                        </div>
                     </div>
-                    <div class="col-md-6">
-                        <label for="newMemberFiscalCode" class="form-label">Codice fiscale</label>
-                        <input class="form-control @error('newMemberFiscalCode') is-invalid @enderror" type="text" id="newMemberFiscalCode" placeholder="Codice fiscale" maxlength="16" wire:model="newMemberFiscalCode">                        
+                    <div class="row mt-2">
+                        <div class="col-md-6">
+                            <input type="checkbox" id="newMemberToComplete" wire:model="newMemberToComplete">
+                            <label for="newMemberToComplete" class="form-label">Tesserato</label>
+                        </div>
                     </div>
                 </div>
-                <div class="row mt-2">
-                    <div class="col-md-6">
-                        <input type="checkbox" id="newMemberToComplete" wire:model="newMemberToComplete">
-                        <label for="newMemberToComplete" class="form-label">Tesserato</label>
-                    </div>
+                <div class="modal-footer">
+                    <button class="btn--ui lightGrey" onclick="annulla()">annulla</a>
+                    <button type="button" class="btn--ui btn-primary" wire:click.prevent="createMember()">Salva</button>
                 </div>
             </div>
-            <div class="modal-footer">
-                <button class="btn--ui lightGrey" onclick="annulla()">annulla</a>
-                <button type="button" class="btn--ui btn-primary" wire:click.prevent="createMember()">Salva</button>
-            </div>
-            </div>
         </div>
     </div>
 
     <div  wire:ignore.self class="modal fade" id="instructorModal" tabindex="-1" aria-labelledby="instructorModalLabel" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="instructorModalLabel">Inserimento nuovo istruttore</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="row">
-                    <div class="col-md-6">
-                        <label for="userName" class="form-label">Nome</label>
-                        <input class="form-control @error('userName') is-invalid @enderror" type="text" id="userName" placeholder="Nome" wire:model="userName">
-                    </div>
-                    <div class="col-md-6">
-                        <label for="userEmail" class="form-label">Email</label>
-                        <input class="form-control @error('userEmail') is-invalid @enderror" type="text" id="userEmail" placeholder="Email" wire:model="userEmail">
+                <div class="modal-header">
+                    <h5 class="modal-title text-primary" id="instructorModalLabel">Inserimento nuovo istruttore</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <label for="userName" class="form-label">Nome</label>
+                            <input class="form-control @error('userName') is-invalid @enderror" type="text" id="userName" placeholder="Nome" wire:model="userName">
+                        </div>
+                        <div class="col-md-6">
+                            <label for="userEmail" class="form-label">Email</label>
+                            <input class="form-control @error('userEmail') is-invalid @enderror" type="text" id="userEmail" placeholder="Email" wire:model="userEmail">
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn--ui lightGrey" onclick="annulla()">annulla</a>
-                <button type="button" class="btn--ui btn-primary" wire:click.prevent="createInstructor()">Salva</button>
-            </div>
+                <div class="modal-footer">
+                    <button class="btn--ui lightGrey" onclick="annulla()">annulla</a>
+                    <button type="button" class="btn--ui btn-primary" wire:click.prevent="createInstructor()">Salva</button>
+                </div>
             </div>
         </div>
     </div>
@@ -457,3 +476,7 @@
         
     </script>
 @endpush
+
+@push("css")
+    <link href="/css/calendar.css" rel="stylesheet" />
+@endpush