@extends("admin.layout.base") @extends("admin.layout.header") @section("title") Aktiviteter - Vis @endsection @section("path") <a href="" class="text-white">Vis Aktiviteter</a> / @endsection @section("content") <?php date_default_timezone_set('Europe/Copenhagen'); ?> <style> .letterSpaceTable{ letter-spacing: 1.2px; } #table_id2_wrapper { margin-top: 3rem; } </style> <div class="row align-items-center"> @if(auth()->user()->can('event.show')) <a class="btn btn-inline btn-sde-blue mb-0" href="{{ route('events.create') }}"><img src="{{ asset('/images/icons/plus.svg') }}" alt="Create">Opret Aktivitet</a> <a class="btn btn-inline btn-sde-blue mb-0 ml-1" href="{{ route('multiple-events.create') }}"><img src="{{ asset('/images/icons/plus.svg') }}" alt="Create">Opret ugentligt aktivitet</a> @endif </div> <table class="tbl mt-2 letterSpaceTable fixOverflow" id="table_id"> <thead> <th>Aktivitets Navn</th> <th>Aktivitets Ansvarlig</th> <th>Aktivitets Dato</th> <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/eye.svg') }}" alt="Show"></th> <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/preview.svg') }}" alt="preview"></th> @if(auth()->user()->can('event.edit')) <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/pencil.svg') }}" alt="Update"></th> @endif @if(auth()->user()->can('event.delete')) <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/trashcan.svg') }}" alt="Delete"></th> @endif </thead> <tbody> @foreach($events as $event) @if (date('Y-m-d H:i', strtotime('-1 day')) < date('Y-m-d H:i', strtotime($event->date))) <tr id="row_{{ $event->id }}"> <td>{{ $event->name }}</td> <td>{{ $event->accountable }}</td> <td>{{ \Illuminate\Support\Facades\Date::createFromTimeStamp(strtotime($event->date))->format('d/m/Y \k\l\. H:i') }}</td> <td><a href="{{ route("events.signups", [ "event" => $event ]) }}"><img class="w-100" src="{{ asset('/images/icons/eye-dark.svg') }}" alt="Show"></a></td> <td><a id="preview" onclick="modalEventContent({{$event->id}})" style="cursor: pointer" ><img class="w-100" src="{{ asset('/images/icons/preview-dark.svg') }}" alt="preview"></a></td> @if(auth()->user()->can('event.edit')) <td><a href="{{ route("events.edit", [ "event" => $event ]) }}"><img class="w-100" src="{{ asset('/images/icons/pencil-dark.svg') }}" alt="Update"></a></td> @endif @if(auth()->user()->can('event.delete')) <td> @csrf <a class="w-100 nostyle" onclick="delete_event({{ $event->id }})"><img class="w-100 cursor-pointer" src="{{ asset('/images/icons/trashcan-dark.svg') }}" alt="Delete"></a> </td> @endif </tr> @endif @endforeach </tbody> </table> <table class="tbl mt-2 letterSpaceTable fixOverflow" id="table_id2"> <thead> <th>Uge</th> <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/eye.svg') }}" alt="Show"></th> <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/preview.svg') }}" alt="preview"></th> @if(auth()->user()->can('event.edit')) <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/print-hvid.svg') }}" alt="Print"></th> <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/pencil.svg') }}" alt="Update"></th> @endif @if(auth()->user()->can('event.delete')) <th class="w-1em"><img class="w-100" src="{{ asset('/images/icons/trashcan.svg') }}" alt="Delete"></th> @endif </thead> <tbody> @foreach(\App\MultipleEventsParent::query()->orderBY('id' , 'desc')->get() as $event) <tr id="row2_{{ $event->id }}"> <td>{{ $event->week}}</td> <td><a href="{{ route("multiple-events.signups", ["multipleEvent" => $event->id]) }}"><img class="w-100" src="{{ asset('/images/icons/eye-dark.svg') }}" alt="Show"></a></td> <td><a id="preview" onclick="modalMultiEventContent({{$event->id}})" style="cursor: pointer"><img class="w-100" src="{{ asset('/images/icons/preview-dark.svg') }}" alt="preview"></a></td> <td><a href="{{ route("multiPdf.genPDF", [ "multiEvent" => $event->id ]) }}" target="_blank"><img class="w-100" src="{{ asset('/images/icons/print.svg') }}" alt="Print"></a></td> @if(auth()->user()->can('event.edit')) <td><a href="{{ route("multiple-events.edit", $event->id) }}"><img class="w-100" src="{{ asset('/images/icons/pencil-dark.svg') }}" alt="Update"></a></td> @endif @if(auth()->user()->can('event.delete')) <td> @csrf <a class="w-100 nostyle" onclick="delete_multievent({{ $event->id }})"><img class="w-100 cursor-pointer" src="{{ asset('/images/icons/trashcan-dark.svg') }}" alt="Delete"></a> </td> @endif </tr> @endforeach </tbody> </table> <div id="eventModal" class="modal zindex-100"> <div id="modal-content" class="modal-content text-black d-block w-50"> <span class="close" onclick="closeModal()">×</span> <center> <h1 id="name"></h1> <hr> <strong><label for="date">Aktivitets dato</label></strong> <p id="date"></p> <strong><label for="accountable">Aktivitets ansvarlig</label></strong> <p id="accountable"></p> <hr> <img id="eventimg"> <p id="description"></p> </center> </div> </div> <div id="eventMultiModal" class="modal zindex-100"> <div id="modal-content" class="modal-content text-black d-block w-50"> <span class="close" onclick="closeModal()">×</span> <center> <h1 id="week"></h1> <hr> <img id="eventmultiimg"> <p id="events"></p> </center> </div> </div> @endsection @section('scripts') <script src="{{ asset("/js/moment-with-locales.min.js") }}"></script> <script> var modalEvent = document.getElementById("eventModal"); var modalMultiEvent = document.getElementById("eventMultiModal"); function modalEventContent(id) { $.ajax({ type: 'get', url: '{{route('events.preview')}}', data: {'preview':id}, success:function (data) { modalEvent.style.display = "flex"; var l = JSON.parse(data); $("#name").html(l.name); $("#date").html(l.date); $("#accountable").html(l.accountable); $("#description").html(l.description); console.log(l); if (l.filename) $("#eventimg").attr('src', l.filename); }, error:function (data) { console.log(data); } }); } function modalMultiEventContent(id) { $.ajax({ type: 'get', url: '{{route('multiple-events.preview')}}', data: {'preview':id}, dataType: 'JSON', success:function (data) { modalMultiEvent.style.display = "flex"; $("#week").html('Uge: '+data[0].week); if (data[0].resource_id != null) $("#eventmultiimg").attr('src', data[0].filename); for (var i = 0; i < data[1].length; i++) { var d = new Date(data[1][i].date); var day = moment().lang("da").day(d.getDay()).format("dddd"); $("#events").append("<div class='container text-center'><div class='row justify-content-center'><div class='col'><h1 class='mb-0'>"+data[1][i].name+"</h1>" + "<h3 class='mt-0 mb-0'>"+d.getDate()+"/"+(d.getMonth()+1)+"/"+d.getFullYear()+" "+d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })+" ["+ day.charAt(0).toUpperCase() + day.slice(1) +"]</h3>" + "<h3 class='mt-0'>Tovholder: "+data[1][i].accountable+"</h3>" + "<h3 class='mb-0'>Beskrivelse:</h3>" + "<p class='mt-0'>"+data[1][i].description+"</p>" + "</div>" + "</div>" + "</div><hr>"); } }, error:function (data) { console.log(data); } }); } function closeModal() { modalEvent.style.display = "none"; modalMultiEvent.style.display = "none"; $("#name").html(''); $("#date").html(''); $("#accountable").html(''); $("#description").html(''); $("#eventimg").attr('src', ''); $("#eventmultiimg").attr('src', ''); $("#week").html(''); $("#events").html(''); } window.onmousedown = function(event) { if (event.target == modalEvent || event.target == modalMultiEvent) { modalEvent.style.display = "none"; modalMultiEvent.style.display = "none"; $("#name").html(''); $("#date").html(''); $("#accountable").html(''); $("#description").html(''); $("#eventimg").attr('src', ''); $("#eventmultiimg").attr('src', ''); $("#week").html(''); $("#events").html(''); } } </script> <script> $(document).ready( function () { $('#table_id').DataTable({ columnDefs: [ { orderable: false, targets: [-1, -2, -3, -4] } ] }); $('#table_id2').DataTable({ columnDefs: [ { orderable: false, targets: [-1, -2, -3, -4, -5] } ] }); }); function delete_event(id) { var token = $("input[name='_token']").val(); Swal.fire({ title: 'Er du sikker?', text: "Dette kan ikke blive ændret tilbage!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Slet Aktiviteten', cancelButtonText: 'Annuller' }).then((result) => { if (result.isConfirmed) { $.ajax({ type: "POST", url: "events/"+id, data:{'_token':token, _method: 'DELETE'}, success: function () { $('#table_id').DataTable().row($('#row_'+id)[0]).remove().draw(); Swal.fire( 'Aktiviteten er slettet!', '', 'success' ) }, error:function (data) { console.log(data); } }); } }) } function delete_multievent(id) { var token = $("input[name='_token']").val(); Swal.fire({ title: 'Er du sikker?', text: "Dette kan ikke blive ændret tilbage!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Slet Ugentlig Aktivitet', cancelButtonText: 'Annuller' }).then((result) => { if (result.isConfirmed) { $.ajax({ type: "POST", url: "multiple-events/"+id, data:{'_token':token, _method: 'DELETE'}, success: function () { $('#table_id2').DataTable().row($('#row2_'+id)[0]).remove().draw(); Swal.fire( 'Den ugentlige aktivitet er slettet!', '', 'success' ) }, error:function (data) { console.log(data); } }); } }) } </script> @endsection