518 lines
25 KiB
PHP
518 lines
25 KiB
PHP
@extends('layout.master-mhs')
|
|
|
|
@push('plugin-styles')
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<!-- Bootstrap CSS -->
|
|
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> -->
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
|
|
<style>
|
|
.form-control-select {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2rem;
|
|
font-size: 0.75rem;
|
|
padding: 0 1.375rem;;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
color: #495057;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 2px;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-lg-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<h4 class="card-title">Table Project</h4>
|
|
<div>
|
|
<button type="button" class="btn btn-success btn-fw" data-toggle="modal" data-target="#addProjectModal">
|
|
<i class="mdi mdi-plus"></i>Tambah
|
|
</button>
|
|
<button type="button" class="btn btn-success btn-fw" onclick="window.location.href='{{ route('projectprint') }}'">
|
|
<i class="mdi mdi-plus"></i>Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="card-description">Data Project Saya</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Nama Aplikasi</th>
|
|
<th>Semester</th>
|
|
<th>Angkatan</th>
|
|
<th>Golongan</th>
|
|
<th>Anggota</th>
|
|
<th>AKSI</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($projects as $project)
|
|
<tr>
|
|
<td>{{ $project->nama_aplikasi }}</td>
|
|
<td>{{ $project->semester }}</td>
|
|
<td>{{ $project->angkatan }}</td>
|
|
<td>{{ $project->golongan }}</td>
|
|
<td>
|
|
<ul>
|
|
@foreach($project->detail as $details)
|
|
<li>{{ $details->users->name }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-primary btn-sm edit-project-btn" data-toggle="modal" data-target="#editProjectModal{{ $project->id }}" data-project-id="{{ $project->id }}">
|
|
Edit
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tambah Proyek Modal -->
|
|
<div class="modal fade" id="addProjectModal" tabindex="-1" role="dialog" aria-labelledby="addProjectModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document" style="max-width: 90%">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addProjectModalLabel">Tambah Project</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="addProjectForm" action="{{ route('projects.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="modal-body">
|
|
<!-- Step 1: Pilih Kategori dan Semester -->
|
|
<div id="step-1">
|
|
<label for="kategori">Pilih Kategori Project</label>
|
|
<select id="kategori" name="kategori" required>
|
|
<option value="">Pilih Kategori</option>
|
|
<option value="Tugas Akhir">Tugas Akhir</option>
|
|
<option value="Workshop">Workshop</option>
|
|
</select>
|
|
<label for="semester">Pilih Semester</label>
|
|
<select id="semester" name="semester" required>
|
|
<option value="">Pilih Semester</option>
|
|
</select>
|
|
<button id="step-1-next-btn" type="button" class="btn btn-primary mt-3">Selanjutnya</button>
|
|
</div>
|
|
|
|
<!-- Step 2: Isi Data Proyek -->
|
|
<div id="step-2" style="display: none;">
|
|
<label for="nama_aplikasi">Nama Aplikasi</label>
|
|
<input type="text" class="form-control" id="nama_aplikasi" name="nama_aplikasi" placeholder="Nama Aplikasi" required>
|
|
<label for="angkatan">Angkatan</label>
|
|
<input type="text" class="form-control" id="angkatan" name="angkatan" placeholder="Angkatan" required>
|
|
<div class="form-group">
|
|
<label for="golongan">Golongan</label>
|
|
<select class="form-control-select" id="golongan" name="golongan" required style="color: #000000 !important;">
|
|
<option value="">Pilih Golongan</option>
|
|
<option value="A">A</option>
|
|
<option value="B">B</option>
|
|
<option value="C">C</option>
|
|
<option value="D">D</option>
|
|
<option value="E">E</option>
|
|
<option value="INTER">INTER</option>
|
|
</select>
|
|
</div>
|
|
<label for="link_website">Link Website</label>
|
|
<input type="text" class="form-control" id="link_website" name="link_website" placeholder="Link Website" required>
|
|
<!-- Input untuk link GitHub -->
|
|
<div id="link_github_input" style="display: none;">
|
|
<label for="link_github">Link GitHub/GIT/LinkTree</label>
|
|
<input type="text" class="form-control" id="link_github" name="link_github" placeholder="Link GitHub">
|
|
</div>
|
|
<!-- Input untuk ketua kelompok dan anggota kelompok hanya muncul jika kategori "Workshop" dipilih -->
|
|
<div id="workshop-inputs" style="display: none;">
|
|
<label for="ketua_kelompok">Ketua Kelompok</label>
|
|
<input type="text" class="form-control" id="ketua_kelompok" name="ketua_kelompok" placeholder="Ketua Kelompok" value="{{ Auth::user()->nim }}" readonly>
|
|
<label for="anggota">Anggota Kelompok (pisahkan dengan koma)</label>
|
|
<select class="form-control" id="anggota" name="anggota[]" multiple="multiple" style="width: 100%;">
|
|
<!-- Options akan ditambahkan secara dinamis menggunakan JavaScript -->
|
|
</select>
|
|
</div>
|
|
<label for="narasi">Narasi</label>
|
|
<textarea class="form-control" id="narasi" name="narasi" placeholder="Narasi" rows="3" required></textarea>
|
|
<button id="step-2-next-btn" type="button" class="btn btn-primary mt-3">Selanjutnya</button>
|
|
<button id="step-2-back-btn" type="button" class="btn btn-secondary mt-3">Kembali</button>
|
|
</div>
|
|
|
|
<!-- Step 3: Detail Proyek -->
|
|
<div id="step-3" style="display: none;">
|
|
<label for="link_youtube">Link Youtube</label>
|
|
<input type="text" class="form-control" id="link_youtube" name="link_youtube" placeholder="Link Youtube" required>
|
|
<label for="gambar_1">Banner</label>
|
|
<input type="file" class="form-control-file" id="gambar_1" name="gambar_1" required>
|
|
<label for="gambar_2">Gambar 1</label>
|
|
<input type="file" class="form-control-file" id="gambar_2" name="gambar_2" required>
|
|
<label for="gambar_3">Gambar 2</label>
|
|
<input type="file" class="form-control-file" id="gambar_3" name="gambar_3" required>
|
|
<label for="gambar_4">Gambar 3</label>
|
|
<input type="file" class="form-control-file" id="gambar_4" name="gambar_4" required>
|
|
<button id="step-3-next-btn" type="submit" class="btn btn-primary mt-3">Tambah</button>
|
|
<button id="step-3-back-btn" type="button" class="btn btn-secondary mt-3">Kembali</button>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@foreach($projects as $project)
|
|
|
|
<!-- Modal Edit Proyek -->
|
|
<div class="modal fade" id="editProjectModal{{ $project->id }}" tabindex="-1" role="dialog" aria-labelledby="editProjectModalLabel{{ $project->id }}" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document" style="max-width: 90%">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="editProjectModalLabel{{ $project->id }}">Edit Project</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="editProjectForm{{ $project->id }}" action="{{ route('projects.update', $project->id) }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT')
|
|
<div class="modal-body" style="max-height: 500px; overflow-y: auto;">
|
|
<label for="nama_aplikasi{{ $project->id }}">Nama Aplikasi</label>
|
|
<input type="text" class="form-control" id="nama_aplikasi{{ $project->id }}" name="nama_aplikasi" value="{{ $project->nama_aplikasi }}" required>
|
|
<label for="angkatan{{ $project->id }}">Angkatan</label>
|
|
<input type="text" class="form-control" id="angkatan{{ $project->id }}" name="angkatan" value="{{ $project->angkatan }}" required>
|
|
<label for="golongan{{ $project->id }}">Golongan</label>
|
|
<select class="form-control-select" id="golongan{{ $project->id }}" name="golongan" required>
|
|
<option value="">Pilih Golongan</option>
|
|
<option value="A" @if($project->golongan == 'A') selected @endif>A</option>
|
|
<option value="B" @if($project->golongan == 'B') selected @endif>B</option>
|
|
<option value="C" @if($project->golongan == 'C') selected @endif>C</option>
|
|
<option value="D" @if($project->golongan == 'D') selected @endif>D</option>
|
|
<option value="E" @if($project->golongan == 'E') selected @endif>E</option>
|
|
<option value="INTER" @if($project->golongan == 'INTER') selected @endif>INTER</option>
|
|
</select>
|
|
<label for="link_website{{ $project->id }}">Link Website</label>
|
|
<input type="text" class="form-control" id="link_website{{ $project->id }}" name="link_website" value="{{ $project->link_website }}" required>
|
|
<label for="link_github{{ $project->id }}">Link GitHub</label>
|
|
<input type="text" class="form-control" id="link_github{{ $project->id }}" name="link_github" value="{{ $project->link_github }}" required>
|
|
<label for="narasi{{ $project->id }}">Narasi</label>
|
|
<textarea type="text" class="form-control" id="narasi{{ $project->id }}" name="narasi" rows="3" required>{{ $project->narasi }}</textarea>
|
|
|
|
<!-- Menampilkan input ketua kelompok dan anggota kelompok jika kategori Workshop -->
|
|
@if($project->kategori === 'Workshop')
|
|
<label for="ketua_kelompok{{ $project->id }}">Ketua Kelompok</label>
|
|
<input type="text" class="form-control" id="ketua_kelompok{{ $project->id }}" name="ketua_kelompok" value="{{ $project->ketua_kelompok }}" required>
|
|
<label for="anggota{{ $project->id }}">Anggota Kelompok (pisahkan dengan koma)</label>
|
|
<select class="form-control" id="anggota{{ $project->id }}" name="anggota[]" multiple="multiple" style="width: 100%;">
|
|
</select>
|
|
@endif
|
|
|
|
<label for="edit_link_youtube{{ $project->id }}">Link Youtube</label>
|
|
<input type="text" class="form-control" id="edit_link_youtube{{ $project->id }}" name="link_youtube" value="{{ $project->link_youtube }}" required>
|
|
<label for="edit_gambar_1{{ $project->id }}">Banner</label>
|
|
<input type="file" class="form-control-file" id="edit_gambar_1{{ $project->id }}" name="gambar_1">
|
|
<label for="edit_gambar_2{{ $project->id }}">Gambar 1</label>
|
|
<input type="file" class="form-control-file" id="edit_gambar_2{{ $project->id }}" name="gambar_2">
|
|
<label for="edit_gambar_3{{ $project->id }}">Gambar 2</label>
|
|
<input type="file" class="form-control-file" id="edit_gambar_3{{ $project->id }}" name="gambar_3">
|
|
<label for="edit_gambar_4{{ $project->id }}">Gambar 3</label>
|
|
<input type="file" class="form-control-file" id="edit_gambar_4{{ $project->id }}" name="gambar_4">
|
|
|
|
<!-- Script JavaScript untuk inisialisasi Select2 dan memuat data anggota -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#anggota{{ $project->id }}').select2({
|
|
placeholder: "Pilih anggota",
|
|
tags: true,
|
|
tokenSeparators: [',', ' '],
|
|
ajax: {
|
|
url: '/searchs',
|
|
dataType: 'json',
|
|
delay: 250,
|
|
processResults: function(data) {
|
|
return {
|
|
results: data
|
|
};
|
|
},
|
|
cache: true
|
|
}
|
|
});
|
|
|
|
$.ajax({
|
|
url: '/get-members/{{ $project->id }}',
|
|
method: 'GET',
|
|
success: function(response) {
|
|
var anggotaSelect = $('#anggota{{ $project->id }}');
|
|
$.each(response.data, function(index, member) {
|
|
var option = new Option(member.name, member.id, true, true);
|
|
anggotaSelect.append(option).trigger('change');
|
|
});
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error(error);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
|
|
<!-- Success Modal -->
|
|
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="successModalLabel">Success</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Data project berhasil ditambahkan.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Error -->
|
|
<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="errorModalLabel">Error</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Pesan error akan ditampilkan di sini -->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
@endsection
|
|
|
|
<!-- JavaScript -->
|
|
@push('plugin-scripts')
|
|
<!-- jQuery library -->
|
|
<!-- Bootstrap JavaScript -->
|
|
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Event listener untuk pemilihan kategori
|
|
$('#kategori').change(function() {
|
|
var kategori = $(this).val();
|
|
|
|
// Menyembunyikan/menampilkan input sesuai dengan kategori yang dipilih
|
|
if (kategori === 'Tugas Akhir') {
|
|
$('#workshop-inputs').hide();
|
|
$('#link_github_input').show();
|
|
} else if (kategori === 'Workshop') {
|
|
$('#workshop-inputs').show();
|
|
$('#link_github_input').show();
|
|
}
|
|
|
|
// Menyesuaikan opsi semester sesuai dengan kategori yang dipilih
|
|
$('#semester').empty();
|
|
if (kategori === 'Tugas Akhir') {
|
|
for (var i = 6;i <= 6; i++) {
|
|
$('#semester').append('<option value="' + i + '">' + i + '</option>');
|
|
}
|
|
} else if (kategori === 'Workshop') {
|
|
for (var i = 1; i <= 4; i++) {
|
|
$('#semester').append('<option value="' + i + '">' + i + '</option>');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Event listener untuk tombol "Selanjutnya" pada Step 1
|
|
$('#step-1-next-btn').click(function() {
|
|
// Sembunyikan Step 1 dan tampilkan Step 2
|
|
$('#step-1').hide();
|
|
$('#step-2').show();
|
|
});
|
|
|
|
// Event listener untuk tombol "Kembali" pada Step 2
|
|
$('#step-2-back-btn').click(function() {
|
|
// Sembunyikan Step 2 dan tampilkan Step 1
|
|
$('#step-2').hide();
|
|
$('#step-1').show();
|
|
});
|
|
|
|
// Event listener untuk tombol "Selanjutnya" pada Step 2
|
|
$('#step-2-next-btn').click(function() {
|
|
// Sembunyikan Step 2 dan tampilkan Step 3
|
|
$('#step-2').hide();
|
|
$('#step-3').show();
|
|
});
|
|
|
|
// Event listener untuk tombol "Kembali" pada Step 3
|
|
$('#step-3-back-btn').click(function() {
|
|
// Sembunyikan Step 3 dan tampilkan Step 2
|
|
$('#step-3').hide();
|
|
$('#step-2').show();
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#anggota').select2({
|
|
placeholder: "Pilih anggota",
|
|
tags: true, // Memungkinkan tambahan opsi yang tidak ada dalam daftar
|
|
tokenSeparators: [',', ' '], // Pisahkan opsi yang dipilih dengan koma atau spasi
|
|
ajax: {
|
|
url: '/searchs', // Endpoint untuk mencari anggota
|
|
dataType: 'json',
|
|
delay: 250,
|
|
processResults: function(data) {
|
|
return {
|
|
results: data
|
|
};
|
|
},
|
|
cache: true
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// Event listener untuk submit form menggunakan Ajax
|
|
$('#addProjectForm').submit(function(e) {
|
|
e.preventDefault(); // Mencegah perilaku default form submit
|
|
|
|
// Mendapatkan URL form action
|
|
var url = $(this).attr('action');
|
|
|
|
// Menggunakan FormData untuk mengambil data form
|
|
var formData = new FormData($(this)[0]);
|
|
|
|
// Mengirim data form menggunakan Ajax
|
|
$.ajax({
|
|
url: url,
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
// Menyembunyikan modal tambah
|
|
$('#addProjectModal').modal('hide');
|
|
|
|
// Menampilkan modal pesan berhasil
|
|
$('#successModal').modal('show');
|
|
|
|
// Reset form setelah menampilkan modal
|
|
$('#successModal').on('hidden.bs.modal', function (e) {
|
|
$('#addProjectForm')[0].reset();
|
|
location.reload();
|
|
});
|
|
},
|
|
error: function(xhr, status, error) {
|
|
// Menyembunyikan modal tambah
|
|
$('#addProjectModal').modal('hide');
|
|
|
|
// Menampilkan modal pesan error
|
|
$('#errorModal').modal('show');
|
|
|
|
// Event listener untuk tombol close pada modal error
|
|
$('#errorModal').on('hidden.bs.modal', function (e) {
|
|
// Lakukan refresh halaman
|
|
location.reload();
|
|
});
|
|
|
|
// Memperbarui pesan error dengan pesan dari server
|
|
$('#errorModal .modal-body').html(xhr.responseText);
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Event listener untuk submit form edit menggunakan Ajax
|
|
$('[id^=editProjectForm]').submit(function(e) {
|
|
e.preventDefault(); // Mencegah perilaku default form submit
|
|
|
|
// Mendapatkan URL form action
|
|
var url = $(this).attr('action');
|
|
|
|
// Menggunakan FormData untuk mengambil data form
|
|
var formData = new FormData($(this)[0]);
|
|
|
|
// Mengirim data form menggunakan Ajax
|
|
$.ajax({
|
|
url: url,
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
// Menyembunyikan modal edit
|
|
$('[id^=editProjectModal]').modal('hide');
|
|
|
|
// Menampilkan modal pesan berhasil
|
|
$('#successModal').modal('show');
|
|
|
|
// Reset form setelah menampilkan modal
|
|
$('#successModal').on('hidden.bs.modal', function (e) {
|
|
location.reload();
|
|
});
|
|
},
|
|
error: function(xhr, status, error) {
|
|
// Menyembunyikan modal edit
|
|
$('[id^=editProjectModal]').modal('hide');
|
|
|
|
// Menampilkan modal pesan error
|
|
$('#errorModal').modal('show');
|
|
|
|
// Event listener untuk tombol close pada modal error
|
|
$('#errorModal').on('hidden.bs.modal', function (e) {
|
|
// Lakukan refresh halaman
|
|
location.reload();
|
|
});
|
|
|
|
// Memperbarui pesan error dengan pesan dari server
|
|
$('#errorModal .modal-body').html(xhr.responseText);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endpush
|