first commit

This commit is contained in:
Kicap Karan
2022-10-29 04:16:53 +08:00
parent 369e9b7829
commit 522ee5201d
18 changed files with 1411 additions and 3272 deletions

View File

@ -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">&times;</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&region=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>