first commit
This commit is contained in:
@ -11,48 +11,32 @@
|
||||
<div id="wrapper">
|
||||
<div class="main-content">
|
||||
<div class="row small-spacing">
|
||||
<div class="col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title" id="header_peta">Peta Absensi</h4>
|
||||
|
||||
<!-- /.dropdown js__dropdown -->
|
||||
<div class="form-group">
|
||||
<div id="map" style="width: 100%; height: 500px"></div>
|
||||
</div>
|
||||
<!-- /#flot-chart-1.flot-chart -->
|
||||
</div>
|
||||
<!-- /.box-content -->
|
||||
</div>
|
||||
<!-- /.col-xs-12 -->
|
||||
|
||||
<div class="col-xs-12">
|
||||
<div class="box-content">
|
||||
<h4 class="box-title" id="header_absensi">Absensi Karyawan</h4>
|
||||
<div class="box-content card">
|
||||
<h4 class="box-title" id="header_absensi">List Penduduk</h4>
|
||||
|
||||
<div class="card-content">
|
||||
<!-- create button for 'Tambah Penduduk' -->
|
||||
<button type="button" class="btn btn-primary btn-xs" onclick="tambah_penduduk()">
|
||||
<i class="fa fa-plus"></i> Tambah Penduduk
|
||||
</button>
|
||||
<br /> <br />
|
||||
<div style="overflow-x: auto">
|
||||
<table id="table_list_karyawan" class="table table-striped table-bordered display" style="width:100%">
|
||||
<table id="table_list_penduduk" class="table table-striped table-bordered display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>NIP</th>
|
||||
<th>NIK</th>
|
||||
<th>Nama</th>
|
||||
<th>Status</th>
|
||||
<th>Last Updated</th>
|
||||
<th>Umur</th>
|
||||
<th>No HP</th>
|
||||
<th>Jenis Kelamin</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
foreach ($list_karyawan as $key => $value) {
|
||||
?>
|
||||
<tr>
|
||||
<td><?=$value->nik?></td>
|
||||
<td><?=$value->nama?></td>
|
||||
<td id="status_<?=$value->nik?>"> <?=$value->status_kerja?> </td>
|
||||
<td id="lu_<?=$value->nik?>"> - </td>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@ -71,177 +55,285 @@
|
||||
<!-- /.main-content -->
|
||||
</div>
|
||||
|
||||
<!-- create modal for 'Tambah Penduduk' -->
|
||||
<div class="modal fade" id="modal_add_penduduk" tabindex="-1" role="dialog" aria-labelledby="modal_add_penduduk" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="modal_add_penduduk"></h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form id="form_add_penduduk" onsubmit="return tambah_edit_penduduk(event)">
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="form-group">
|
||||
<input type="hidden" id="status">
|
||||
<label for="nik">NIK</label>
|
||||
<input type="text" class="form-control" id="nik" name="nik" placeholder="Masukkan NIK" onkeypress="return isNumberKey(event)" minlength="16" maxlength="16" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nama">Nama</label>
|
||||
<input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan Nama" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="umur">Tanggal Lahir</label>
|
||||
<input type="date" class="form-control" id="tgl_lahir" name="tgl_lahir" placeholder="Masukkan Tanggal Lahir" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="jenis_kelamin">Jenis Kelamin</label>
|
||||
<select class="form-control" id="jenis_kelamin" name="jenis_kelamin" required>
|
||||
<option value="">Pilih Jenis Kelamin</option>
|
||||
<option value="Laki-laki">Laki-laki</option>
|
||||
<option value="Perempuan">Perempuan</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="alamat">Alamat</label>
|
||||
<textarea class="form-control" id="alamat" name="alamat" placeholder="Masukkan Alamat" style="resize :none;" required></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="no_hp">No HP</label>
|
||||
<input type="text" class="form-control" id="no_hp" name="no_hp" placeholder="Masukkan No HP" onkeypress="return isNumberKey(event)" minlength="9" maxlength="13" required>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary btn-xs" data-dismiss="modal">Batal</button>
|
||||
<button type="submit" class="btn btn-primary btn-xs" id="btn_add_penduduk">Simpan</button>
|
||||
<button type="submit" class="btn btn-primary btn-xs" id="btn_update_penduduk">Update</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<?php $this->load->view('admin/scripts') ?>
|
||||
<script src="<?= base_url() ?>assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
|
||||
<script src="<?= base_url() ?>assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
|
||||
<script src="<?= base_url() ?>assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
|
||||
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7B9RynI4hQM_Y4BG9GYxsTLWwYkGASRo&libraries=geometry,drawing,places&v=weekly®ion=ID&language=id"></script>
|
||||
|
||||
<script>
|
||||
$('#table_list_karyawan').DataTable({
|
||||
var data_lama;
|
||||
|
||||
})
|
||||
var id_dinas = <?= $id_dinas ?>;
|
||||
$("#header_peta").html(`Peta Absensi <i>(${getTodayDate()})</i>`)
|
||||
$("#header_absensi").html(`Absensi Karyawan <i>(${getTodayDate()})</i>`)
|
||||
function datatables() {
|
||||
table = $('#table_list_penduduk').DataTable({
|
||||
// "searching": false,
|
||||
"lengthMenu": [
|
||||
[5, 10, 15, -1],
|
||||
[5, 10, 15, "All"]
|
||||
],
|
||||
"pageLength": 10,
|
||||
"ordering": true,
|
||||
"processing": true,
|
||||
"serverSide": true,
|
||||
// "order": [[ 4, 'desc' ]],
|
||||
|
||||
let markersOverlay = [];
|
||||
"ajax": {
|
||||
"url": server_url + "admin/",
|
||||
"type": "POST",
|
||||
data: {
|
||||
proses: 'table_penduduk'
|
||||
},
|
||||
|
||||
function addInfoWindow(marker, message) {
|
||||
},
|
||||
|
||||
var infoWindow = new google.maps.InfoWindow({
|
||||
content: message
|
||||
});
|
||||
|
||||
google.maps.event.addListener(marker, 'click', function() {
|
||||
infoWindow.open(map, marker);
|
||||
"columnDefs": [{
|
||||
"targets": [5],
|
||||
"orderable": false,
|
||||
}, ],
|
||||
});
|
||||
}
|
||||
async function initMap() {
|
||||
map = new google.maps.Map(document.getElementById("map"), {
|
||||
zoom: 17.5,
|
||||
center: {
|
||||
lat: <?= $lat ?>,
|
||||
lng: <?= $lng ?>
|
||||
},
|
||||
mapTypeId: 'hybrid',
|
||||
streetViewControl: false,
|
||||
});
|
||||
datatables()
|
||||
|
||||
const cityCircle = new google.maps.Circle({
|
||||
strokeColor: "#FF0000",
|
||||
strokeOpacity: 0.3,
|
||||
strokeWeight: 0.3,
|
||||
fillColor: "#FF0000",
|
||||
fillOpacity: 0.3,
|
||||
map,
|
||||
center: {
|
||||
lat: <?= $lat ?>,
|
||||
lng: <?= $lng ?>
|
||||
},
|
||||
radius: <?= $radius ?>,
|
||||
});
|
||||
|
||||
const marker = new google.maps.Marker({
|
||||
position: {
|
||||
lat: <?= $lat ?>,
|
||||
lng: <?= $lng ?>
|
||||
},
|
||||
map: map,
|
||||
title: 'Center',
|
||||
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
||||
});
|
||||
|
||||
markersOverlay[0] = marker;
|
||||
|
||||
let dinas_html = `<div class="card-content">
|
||||
<div class="form-group>
|
||||
<label for="nik"><?= $dinas ?></label>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
addInfoWindow(marker, dinas_html);
|
||||
|
||||
setInterval(
|
||||
async function() {
|
||||
clearOverlays()
|
||||
markers = []
|
||||
markers = [{
|
||||
lat: <?= $lat ?>,
|
||||
lng: <?= $lng ?>
|
||||
|
||||
}]
|
||||
let all_data;
|
||||
try {
|
||||
const the_data = await $.ajax({
|
||||
url: server_url_api + "get_today_absensi?id_dinas=" + id_dinas,
|
||||
type: 'get',
|
||||
async: false,
|
||||
beforeSend: function(res) {
|
||||
// block_ui("Mengambil Data Karyawan");
|
||||
},
|
||||
});
|
||||
// console.log(the_data);
|
||||
all_data = the_data.data;
|
||||
|
||||
for (let i = 0; i < all_data.length; i++) {
|
||||
markers.push(all_data[i])
|
||||
// console.log(all_data)
|
||||
}
|
||||
|
||||
let arr = []
|
||||
for (let i = 0; i < markers.length; i++) {
|
||||
console.log(markers[i]['lat'])
|
||||
let latlng = new google.maps.LatLng(markers[i]['lat'], markers[i]['lng']);
|
||||
arr.push(latlng);
|
||||
let color = i > 0 ? 'blue' : 'green'
|
||||
|
||||
const marker = new google.maps.Marker({
|
||||
position: {
|
||||
lat: markers[i]['lat'],
|
||||
lng: markers[i]['lng']
|
||||
},
|
||||
map: map,
|
||||
title: 'Center',
|
||||
icon: `https://maps.google.com/mapfiles/ms/icons/${color}-dot.png`,
|
||||
});
|
||||
|
||||
markersOverlay[i] = marker;
|
||||
if (i > 0) {
|
||||
let html = `<div class="card-content">
|
||||
<div class="form-group>
|
||||
<label for="nik">NIK</label>
|
||||
<input type="text" class="form-control" value="${markers[i]['nik']}" disabled>
|
||||
</div>
|
||||
<div class="form-group>
|
||||
<label for="nik">Nama</label>
|
||||
<input type="text" class="form-control" value="${markers[i]['nama']}" disabled>
|
||||
</div>
|
||||
<div class="form-group>
|
||||
<label for="nik">Last Updated</label>
|
||||
<input type="text" class="form-control" value="${markers[i]['last_updated']}" disabled>
|
||||
</div>
|
||||
<div class="form-group>
|
||||
<label for="nik">Status</label>
|
||||
<input type="text" class="form-control" value="${markers[i]['status']}" disabled>
|
||||
</div>
|
||||
</div>`
|
||||
$("#lu_"+markers[i]['nik']).html(markers[i]['last_updated']);
|
||||
$("#status_"+markers[i]['nik']).html(markers[i]['status']);
|
||||
addInfoWindow(marker, html);
|
||||
} else {
|
||||
addInfoWindow(marker, dinas_html);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var bounds = new google.maps.LatLngBounds();
|
||||
|
||||
if (markers.length > 1) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
bounds.extend(arr[i]);
|
||||
}
|
||||
map.fitBounds(bounds);
|
||||
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}, 5000)
|
||||
function tambah_penduduk() {
|
||||
// enable nik
|
||||
$('#nik').prop('disabled', false);
|
||||
// hide button update
|
||||
$('#btn_update_penduduk').hide();
|
||||
// show button simpan
|
||||
$('#btn_add_penduduk').show();
|
||||
// clear all input in modal
|
||||
// status tambah
|
||||
$('#status').val('tambah');
|
||||
$('#form_add_penduduk').trigger('reset')
|
||||
$('#modal_add_penduduk').modal('show')
|
||||
$('#modal_add_penduduk').find('.modal-title').text('Tambah Penduduk')
|
||||
|
||||
}
|
||||
google.maps.event.addDomListener(window, 'load', initMap);
|
||||
|
||||
function clearOverlays() {
|
||||
if (markersOverlay) {
|
||||
for (i in markersOverlay) {
|
||||
markersOverlay[i].setMap(null);
|
||||
async function edit_penduduk(nik) {
|
||||
// disable nik
|
||||
$('#nik').attr('disabled', true)
|
||||
// show button update
|
||||
$('#btn_update_penduduk').show();
|
||||
// hide button simpan
|
||||
$('#btn_add_penduduk').hide();
|
||||
// clear all input in modal
|
||||
// status edit
|
||||
$('#status').val('edit');
|
||||
$('#form_add_penduduk').trigger('reset')
|
||||
$('#modal_add_penduduk').modal('show')
|
||||
$('#modal_add_penduduk').find('.modal-title').text('Edit Penduduk')
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = await $.ajax({
|
||||
url: server_url_api + "penduduk?nik=" + nik,
|
||||
type: 'get',
|
||||
async: false,
|
||||
beforeSend: function(res) {
|
||||
block_ui("Mengambil Data Penduduk");
|
||||
},
|
||||
});
|
||||
|
||||
data = data.data
|
||||
data_lama = data
|
||||
console.log(data)
|
||||
$('#nik').val(data.nik)
|
||||
$('#nama').val(data.nama)
|
||||
$('#tgl_lahir').val(data.tgl_lahir)
|
||||
$('#jenis_kelamin').val(data.jenis_kelamin)
|
||||
$('#alamat').val(data.alamat)
|
||||
$('#no_hp').val(data.no_hp)
|
||||
await $.unblockUI();
|
||||
} catch (error) {
|
||||
await $.unblockUI();
|
||||
const statusCode = error.status;
|
||||
console.log(error)
|
||||
console.log(statusCode)
|
||||
if (statusCode == 0 || statusCode == 500) return toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
|
||||
|
||||
const message = error.responseJSON.message
|
||||
toastr.error(message);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// tambah_edit_penduduk
|
||||
function tambah_edit_penduduk(e) {
|
||||
e.preventDefault();
|
||||
const status = $('#status').val();
|
||||
const nik = $('#nik').val();
|
||||
const nama = $('#nama').val();
|
||||
const tgl_lahir = $('#tgl_lahir').val();
|
||||
const jenis_kelamin = $('#jenis_kelamin').val();
|
||||
const alamat = $('#alamat').val();
|
||||
const no_hp = $('#no_hp').val();
|
||||
|
||||
console.log(status, nik, nama, tgl_lahir, jenis_kelamin, alamat, no_hp);
|
||||
|
||||
if (status == 'edit') {
|
||||
const data = {
|
||||
nik: nik,
|
||||
nama: nama,
|
||||
tgl_lahir: tgl_lahir,
|
||||
jenis_kelamin: jenis_kelamin,
|
||||
alamat: alamat,
|
||||
no_hp: no_hp,
|
||||
}
|
||||
if (JSON.stringify(data) === JSON.stringify(data_lama)) {
|
||||
return toastr.warning("Data tidak ada yang berubah");
|
||||
}
|
||||
}
|
||||
|
||||
// show swal before submit
|
||||
swal({
|
||||
title: "Apakah anda yakin?",
|
||||
text: "Data akan "+ ( status == 'tambah' ? 'ditambahkan' : 'diubah' ) +"!",
|
||||
icon: "info",
|
||||
buttons: true,
|
||||
dangerMode: false,
|
||||
}).then((willDelete) => {
|
||||
if (willDelete) {
|
||||
$.ajax({
|
||||
type: status == 'tambah' ? 'post' : 'put',
|
||||
url: server_url_api + "penduduk",
|
||||
data: {
|
||||
nik: nik,
|
||||
nama: nama,
|
||||
tgl_lahir: tgl_lahir,
|
||||
jenis_kelamin: jenis_kelamin,
|
||||
alamat: alamat,
|
||||
no_hp: no_hp
|
||||
},
|
||||
dataType: "JSON",
|
||||
beforeSend: function(res) {
|
||||
block_ui("Menyimpan Data Penduduk");
|
||||
},
|
||||
success: function(response) {
|
||||
|
||||
// close modal
|
||||
$('#modal_add_penduduk').modal('hide')
|
||||
$('#table_list_penduduk').dataTable().fnDestroy();
|
||||
datatables();
|
||||
toastr.success(response.message)
|
||||
$.unblockUI();
|
||||
|
||||
},
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
||||
const statusCode = XMLHttpRequest.status;
|
||||
const responseJSON = XMLHttpRequest.responseJSON;
|
||||
console.log(statusCode);
|
||||
console.log(responseJSON)
|
||||
if (statusCode != 500 || statusCode != 0) {
|
||||
toastr.error(responseJSON.message);
|
||||
} else {
|
||||
toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
|
||||
}
|
||||
$.unblockUI();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function hapus_penduduk(id) {
|
||||
swal({
|
||||
title: "Apakah anda yakin?",
|
||||
text: "Data akan dihapus!",
|
||||
icon: "warning",
|
||||
buttons: true,
|
||||
dangerMode: true,
|
||||
}).then((willDelete) => {
|
||||
if (willDelete) {
|
||||
$.ajax({
|
||||
type: 'delete',
|
||||
url: server_url_api + "penduduk/",
|
||||
data : {
|
||||
nik : id
|
||||
},
|
||||
dataType: "JSON",
|
||||
beforeSend: function(res) {
|
||||
block_ui("Menghapus Data Penduduk");
|
||||
},
|
||||
success: function(response) {
|
||||
console.log(response)
|
||||
$('#table_list_penduduk').dataTable().fnDestroy();
|
||||
datatables();
|
||||
toastr.success(response.message)
|
||||
$.unblockUI();
|
||||
},
|
||||
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
||||
const statusCode = XMLHttpRequest.status;
|
||||
const responseJSON = XMLHttpRequest.responseJSON;
|
||||
console.log(statusCode);
|
||||
console.log(responseJSON)
|
||||
if (statusCode != 500 || statusCode != 0) {
|
||||
toastr.error(responseJSON.message);
|
||||
} else {
|
||||
toastr.error("Jaringan atau server bermasalah, sila refresh kembali halaman");
|
||||
}
|
||||
$.unblockUI();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user