Skip to content

K
kalendar-unesa
Commit 6cad3ea8 by f3brysan
Options

build: #13: Tampilan kalender dengan data dummy

parent 18b769ed
Showing with 119 additions and 92 deletions
app/Http/Controllers/User/AgendaController.php
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
use App\Http\Controllers\Controller; use App\Http\Controllers\Controller;
use App\Models\Agenda; use App\Models\Agenda;
use App\Models\Kategori; use App\Models\Kategori;
use App\Models\UserAgenda;
use Exception; use Exception;
use Illuminate\Console\View\Components\Alert; use Illuminate\Console\View\Components\Alert;
use Illuminate\Http\Request; use Illuminate\Http\Request;
...@@ -14,11 +15,17 @@ ...@@ -14,11 +15,17 @@
class AgendaController extends Controller class AgendaController extends Controller
{ {
public function index() public function index(Request $request)
{ {
if($request->ajax())
$data = Agenda::with(['rPegawai', 'rKategori', 'rAttachment']) {
->with() $data = UserAgenda::whereDate('start', '>=', $request->start)
->whereDate('end', '<=', $request->end)
->get(['id', 'title', 'start', 'end']);
return response()->json($data);
}
// $data = UserAgenda::all();
// return $data;
return view('user.index'); return view('user.index');
} }
......
app/Models/UserAgenda.php
...@@ -14,15 +14,8 @@ class UserAgenda extends Model ...@@ -14,15 +14,8 @@ class UserAgenda extends Model
protected $keyType = 'string'; protected $keyType = 'string';
protected $table = 'tr_agenda_pegawai'; protected $table = 'tr_agenda_pegawai';
protected $fillable = [ protected $guarded = [
'id', 'id'
'idpegawai',
'idagenda',
'statuskehadiran',
'created_at',
'updated_at',
'deleted_at',
'idattachmenet'
]; ];
// public function rPegawai() // public function rPegawai()
......
database/seeders/DatabaseSeeder.php
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
namespace Database\Seeders; namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents; // use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use App\Models\UserAgenda;
use Faker\Factory; use Faker\Factory;
use App\Models\Users;
use Illuminate\Database\Seeder; use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash; use Illuminate\Support\Facades\Hash;
...@@ -21,14 +22,22 @@ public function run() ...@@ -21,14 +22,22 @@ public function run()
// \App\Models\User::factory(10)->create(); // \App\Models\User::factory(10)->create();
$faker = Factory::create(); $faker = Factory::create();
// generate data by calling methods // generate data by calling methods
for($i = 1; $i <= 10; $i++){
for($i = 1; $i <= 10; $i++) {
// random waktu
$start_date = $faker->dateTimeBetween('+0 days', '+1 month');
$start_date_clone = clone $start_date;
$hours = rand(1,6);
$end_date = $faker->dateTimeBetween($start_date, $start_date_clone->modify('+'.$hours.' hours'));
// insert data ke table pegawai menggunakan Faker // insert data ke table pegawai menggunakan Faker
Users::create([ UserAgenda::create([
'nama' => $faker->name, 'idpegawai' => '40a1618d-e46a-4b7f-a730-cfee894c69d2',
'email' => $faker->email, 'idagenda' => '6a0304c4-5635-4d0d-8371-d5c89b7d41ff',
'password' => Hash::make('password') 'nama_agenda' => $faker->sentence,
]); 'start' => $start_date,
} 'end' => $end_date
]);
}
} }
} }
resources/views/User/index.blade.php
...@@ -12,82 +12,29 @@ ...@@ -12,82 +12,29 @@
<div class="col-12"> <div class="col-12">
<div class="breadcrumb-wrapper col-12"> <div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb p-0 mb-0"> <ol class="breadcrumb p-0 mb-0">
<li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}"><i class="bx bx-home-alt"></i></a></li> <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}"><i
<li class="breadcrumb-item"><a href="#">Agenda</a></li> class="bx bx-home-alt"></i></a></li>
<li class="breadcrumb-item"><a href="#">Agenda</a></li>
</ol> </ol>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="content-body"> <div class="content-body">
<div class="pb-1"> <div class="pb-1">
<a class="btn btn-primary btn-sm" id="tambah-agenda" href="{{ route('user.tambah-agenda') }}">Tambah Agenda</a> <a class="btn btn-primary btn-sm" id="tambah-agenda" href="{{ route('user.tambah-agenda') }}">Tambah
</div> Agenda</a>
</div>
<!-- Basic Tables start --> <!-- Basic Tables start -->
<div class="row" id="basic-table"> <div class="row" id="basic-table">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<!-- Table with outer spacing -->
<div class="table-responsive"> <div id="calendar"></div>
<table class="table"> </div>
<thead>
<tr>
<th>Nama Agenda</th>
<th>Tanggal</th>
<th>Pukul</th>
<th>Tempat</th>
<th>LOCATION</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-bold-500">Michael Right</td>
<td>$15/hr</td>
<td class="text-bold-500">UI/UX</td>
<td>Remote</td>
<td>Austin,Taxes</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Morgan Vanblum</td>
<td>$13/hr</td>
<td class="text-bold-500">Graphic concepts</td>
<td>Remote</td>
<td>Shangai,China</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Tiffani Blogz</td>
<td>$15/hr</td>
<td class="text-bold-500">Animation</td>
<td>Remote</td>
<td>Austin,Texas</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Ashley Boul</td>
<td>$15/hr</td>
<td class="text-bold-500">Animation</td>
<td>Remote</td>
<td>Austin,Texas</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Mikkey Mice</td>
<td>$15/hr</td>
<td class="text-bold-500">Animation</td>
<td>Remote</td>
<td>Austin,Texas</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -96,4 +43,73 @@ ...@@ -96,4 +43,73 @@
</div> </div>
</div> </div>
</div> </div>
@endsection
\ No newline at end of file <div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span
class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endsection
@push('custom-js')
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<script>
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#calendar').fullCalendar({
timeZone: 'Asia/Jakarta',
// editable: true,
eventColor: '#378006',
eventTextColor: '#ffffff',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: '/agenda',
timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
selectable: true,
// selectHelper: true,
select: function(start, end, allDay) {
// var title = prompt('Event Title:');
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
},
eventDidMount: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
});
});
</script>
@endpush
resources/views/layouts/main.blade.php
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
<!-- BEGIN: Theme CSS--> <!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/bootstrap-extended.css"> <link rel="stylesheet" type="text/css" href="/app-assets/css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/colors.css"> {{-- <link rel="stylesheet" type="text/css" href="/app-assets/css/colors.css"> --}}
<link rel="stylesheet" type="text/css" href="/app-assets/css/components.css"> <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/themes/dark-layout.css"> {{-- <link rel="stylesheet" type="text/css" href="/app-assets/css/themes/dark-layout.css"> --}}
<link rel="stylesheet" type="text/css" href="/app-assets/css/themes/semi-dark-layout.css"> {{-- <link rel="stylesheet" type="text/css" href="/app-assets/css/themes/semi-dark-layout.css"> --}}
<!-- END: Theme CSS--> <!-- END: Theme CSS-->
<!-- BEGIN: Page CSS--> <!-- BEGIN: Page CSS-->
...@@ -46,6 +46,9 @@ ...@@ -46,6 +46,9 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">
<!-- END: Sweet Alert--> <!-- END: Sweet Alert-->
{{-- FULL CALENDAR --}}
</head> </head>
<!-- END: Head--> <!-- END: Head-->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment