MIF_E31212366/resources/views/data.blade.php

113 lines
4.2 KiB
PHP

@extends('layouts.master')
@section('content')
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Data Demam Berdarah Dungue (DBD)</h1>
<button type="button" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" data-toggle="modal" data-target="#uploadModal"><i
class="fas fa-download fa-sm text-white-50"></i> Unggah File</button>
</div>
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered data-table" id="data-table" width="100%" cellspacing="0">
<thead>
<tr>
<th>Kecamatan</th>
<th>Bulan</th>
<th>Tahun</th>
<th>Jumlah Kasus</th>
</tr>
</thead>
<tbody>
@foreach ($dataDBD as $data)
<tr>
<td>{{ $data->kecamatan->nama_kecamatan }}</td>
<td>{{ $data->bulan }}</td>
<td>{{ $data->tahun }}</td>
<td>{{ $data->jumlah_kasus }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="uploadModalLabel">Unggah File</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Formulir Unggah File -->
<form id="uploadForm" method="POST" action="{{ route('upload.data') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="file">Pilih File</label>
<input type="file" class="form-control-file" id="file" name="file" required>
</div>
<button type="submit" class="btn btn-primary">Unggah</button>
</form>
<!-- Akhir Formulir Unggah File -->
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script>
$(document).ready(function() {
@if (session('success'))
alert('File berhasil diunggah');
@elseif (session('error'))
alert('Terjadi kesalahan saat mengunggah file. Silakan coba lagi.');
@endif
// Tambahkan event listener untuk submit form
$(document).on('submit', '#uploadForm', function(e) {
e.preventDefault(); // Mencegah pengiriman form bawaan
var formData = new FormData($(this)[0]);
$.ajax({
url: '{{ route('upload.data') }}',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
if (response.success) {
// Tampilkan modal upload berhasil
console.log();
// TODO: Lakukan pengolahan data Excel dan tampilkan di tabel
} else {
// Tampilkan modal upload gagal
console.log();
}
},
error: function(xhr, status, error) {
// Tampilkan modal upload gagal
console.log();
}
});
});
});
</script>
@endpush
@push('custom-scripts')
@endpush