265 lines
12 KiB
PHP
265 lines
12 KiB
PHP
@extends('layouts.draft')
|
|
|
|
@section('content')
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="row justify-content-between align-items-center">
|
|
<div class="col">
|
|
<h3 class="card-title">Pilih Pengguna</h3>
|
|
</div>
|
|
<div class="col-auto">
|
|
<input type="text" id="searchInput" class="form-control" placeholder="Search....">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<a class="btn btn-primary text-white text-decoration-none mb-4"
|
|
href="{{ route('pasien.create') }}">Tambah Pengguna</a>
|
|
<table class="table table-striped text-center" id="pasienTable">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama</th>
|
|
<th>Usia</th>
|
|
<th class="d-none d-md-table-cell">No Tlp</th>
|
|
<th class="d-none d-md-table-cell">Alamat</th>
|
|
<th class="d-none d-md-table-cell">Dibuat</th>
|
|
<th>Opsi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($pasien as $p)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td>{{ $p->name }}</td>
|
|
<td>{{ $p->age }}</td>
|
|
<td class="d-none d-md-table-cell">{{ $p->phone }}</td>
|
|
<td class="d-none d-md-table-cell">{{ $p->alamat }}</td>
|
|
<td class="d-none d-md-table-cell">{{ $p->created_at }}</td>
|
|
<td class="">
|
|
<a href="{{ route('penyakit.show', ['id' => $p->id]) }}"
|
|
class="btn btn-primary btn-sm btn-select"
|
|
data-id="{{ $p->id }}">Pilih</a>
|
|
<a href="{{ route('pasien.show', ['id' => $p->id]) }}"
|
|
class="btn btn-warning btn-sm">Edit</a> <!-- Tombol untuk edit -->
|
|
<form action="{{ route('pasien.destroy', ['id' => $p->id]) }}" method="POST"
|
|
style="display: inline;">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-danger btn-sm"
|
|
onclick="return confirm('Are you sure you want to delete this item?')">Delete</button>
|
|
<!-- Tombol untuk delete -->
|
|
</form>
|
|
</td>
|
|
{{-- <td>
|
|
<a href="{{ route('penyakit.show', ['id' => $p->id]) }}"
|
|
class="btn btn-primary btn-sm btn-select"
|
|
data-id="{{ $p->id }}">Pilih</a>
|
|
</td> --}}
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="inputModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="inputModalLabel">Inputkan Id Pengguna Terlebih Dahulu</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="inputForm">
|
|
@csrf
|
|
<div class="form-group">
|
|
<label for="value">Input Id</label>
|
|
<input type="number" class="form-control" id="value" name="value" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="name">Nama</label>
|
|
<input type="text" class="form-control" id="name" name="name" required readonly>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const btnSelects = document.querySelectorAll('.btn-select');
|
|
const inputModal = $('#inputModal');
|
|
const inputForm = document.getElementById('inputForm');
|
|
let selectedLink;
|
|
|
|
btnSelects.forEach(btn => {
|
|
btn.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
const id = btn.getAttribute('data-id');
|
|
document.getElementById('value').value = id;
|
|
|
|
// Ambil nama pasien dari kolom kedua di tabel (asumsi kolom kedua adalah nama)
|
|
const row = btn.closest('tr');
|
|
const name = row.querySelector('td:nth-child(2)').textContent;
|
|
document.getElementById('name').value = name;
|
|
|
|
selectedLink = btn.getAttribute('href');
|
|
inputModal.modal('show');
|
|
});
|
|
});
|
|
|
|
inputForm.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const value = document.getElementById('value').value;
|
|
const name = document.getElementById('name').value;
|
|
|
|
if (value && name) {
|
|
const formData = new FormData(inputForm);
|
|
fetch('/send-data', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
|
|
.content,
|
|
},
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.error) {
|
|
alert('Error: ' + data.error);
|
|
} else {
|
|
alert('Data successfully sent to ESP8266.');
|
|
inputModal.modal('hide');
|
|
window.location.href = selectedLink;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Search function
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('input', function() {
|
|
const filter = searchInput.value.toLowerCase();
|
|
const rows = document.querySelectorAll('#pasienTable tbody tr');
|
|
|
|
rows.forEach(row => {
|
|
const cells = row.querySelectorAll('td');
|
|
let match = false;
|
|
|
|
cells.forEach(cell => {
|
|
if (cell.textContent.toLowerCase().includes(filter)) {
|
|
match = true;
|
|
}
|
|
});
|
|
|
|
if (match) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{-- <script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const btnSelects = document.querySelectorAll('.btn-select');
|
|
const inputModal = $('#inputModal');
|
|
const inputForm = document.getElementById('inputForm');
|
|
let selectedLink;
|
|
|
|
btnSelects.forEach(btn => {
|
|
btn.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
const id = btn.getAttribute('data-id');
|
|
document.getElementById('value').value = id;
|
|
selectedLink = btn.getAttribute('href'); // Tambahkan
|
|
inputModal.modal('show');
|
|
});
|
|
});
|
|
|
|
inputForm.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const value = document.getElementById('value').value;
|
|
|
|
if (value) {
|
|
const formData = new FormData(inputForm);
|
|
fetch('/send-data', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
|
|
.content,
|
|
},
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.error) {
|
|
alert('Error: ' + data.error);
|
|
} else {
|
|
alert('Data successfully sent to ESP8266.');
|
|
inputModal.modal('hide');
|
|
window.location.href = selectedLink;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
});
|
|
|
|
// Search function
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('input', function() {
|
|
const filter = searchInput.value.toLowerCase();
|
|
const rows = document.querySelectorAll('#pasienTable tbody tr');
|
|
|
|
rows.forEach(row => {
|
|
const cells = row.querySelectorAll('td');
|
|
let match = false;
|
|
|
|
cells.forEach(cell => {
|
|
if (cell.textContent.toLowerCase().includes(filter)) {
|
|
match = true;
|
|
}
|
|
});
|
|
|
|
if (match) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script> --}}
|
|
@endsection
|