init title lokasi, dan penambahan api
This commit is contained in:
@@ -0,0 +1,160 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
$(document).on('click', '.hardware-button', function () {
|
||||
let row = $(this).closest('tr');
|
||||
|
||||
// kalau sudah ada baris edit, hapus dulu
|
||||
$('.edit-row').remove();
|
||||
|
||||
let id = $(this).data('id');
|
||||
let nama = $(this).data('nama');
|
||||
$.ajax({
|
||||
url: "{{ route('hardware.show', '') }}/" + id,
|
||||
type: 'GET',
|
||||
success: function (r) {
|
||||
console.log(r);
|
||||
|
||||
let colSpan = row.children('td').length;
|
||||
|
||||
// Field yang mau ditampilkan (pilih sendiri mau yang mana)
|
||||
let fields = [
|
||||
['printer1_avail', 'Printer Status'],
|
||||
['printer1_conn', 'Printer Connection'],
|
||||
['printer1_spd', 'Printer Speed/Baudrate'],
|
||||
['video1_avail', 'Kamera Status'],
|
||||
['video1_conn', 'Kamera URL/Path'],
|
||||
['sound_avail', 'Sound Status'],
|
||||
['bg_avail', 'BGate Status'],
|
||||
['bg_conn', 'BGate Connection'],
|
||||
['bank_reader_avail', 'Reader BANK Status'],
|
||||
['bank_reader_comm', 'Reader BANK Connection'],
|
||||
['bank_reader_key', 'Reader BANK Key/Parameter'],
|
||||
];
|
||||
|
||||
let rows = '';
|
||||
|
||||
for (let i = 0; i < fields.length; i ++) {
|
||||
|
||||
let f1 = fields[i];
|
||||
|
||||
rows += `
|
||||
<tr>
|
||||
<td class="fw-semibold text-muted text-label"><strong>${f1[1]}</strong></td>
|
||||
<td>
|
||||
<span class="view-mode">${formatValue(f1[0], r[f1[0]])}</span>
|
||||
<input type="text"
|
||||
class="form-control form-control-sm edit-mode d-none"
|
||||
data-key="${f1[0]}"
|
||||
value="${r[f1[0]] ?? ''}">
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
let editHtml = `
|
||||
<tr class="edit-row" data-id="${id}">
|
||||
<td colspan="${colSpan}">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<strong>Hardware Configuration</strong>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-primary btn-edit">Edit</button>
|
||||
<button class="btn btn-sm btn-success btn-save d-none">Save</button>
|
||||
<button class="btn btn-sm btn-secondary btn-cancel d-none">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<table class="table table-bordered table-sm align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th width="15%">Setting</th>
|
||||
<th width="85%">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${rows}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
row.after(editHtml);
|
||||
},
|
||||
error: function (xhr) {
|
||||
console.error(xhr.responseText);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// MODE EDIT
|
||||
$(document).on('click', '.btn-edit', function () {
|
||||
|
||||
$('.view-mode').addClass('d-none');
|
||||
$('.edit-mode').removeClass('d-none');
|
||||
|
||||
$('.btn-edit').addClass('d-none');
|
||||
$('.btn-save, .btn-cancel').removeClass('d-none');
|
||||
});
|
||||
|
||||
// CANCEL
|
||||
$(document).on('click', '.btn-cancel', function () {
|
||||
|
||||
$('.edit-mode').addClass('d-none');
|
||||
$('.view-mode').removeClass('d-none');
|
||||
|
||||
$('.btn-save, .btn-cancel').addClass('d-none');
|
||||
$('.btn-edit').removeClass('d-none');
|
||||
});
|
||||
|
||||
// SAVE
|
||||
$(document).on('click', '.btn-save', function () {
|
||||
|
||||
let dataToSend = {};
|
||||
|
||||
$('.edit-mode').each(function () {
|
||||
let key = $(this).data('key');
|
||||
dataToSend[key] = $(this).val();
|
||||
});
|
||||
|
||||
console.log(dataToSend);
|
||||
let gateId = $('.edit-row').data('id');
|
||||
|
||||
$.ajax({
|
||||
url: "{{ route('hardware.update', '') }}/" + gateId,
|
||||
type: "PUT",
|
||||
data: {
|
||||
_token: "{{ csrf_token() }}",
|
||||
data: dataToSend
|
||||
},
|
||||
success: function () {
|
||||
|
||||
$('.edit-mode').each(function () {
|
||||
let val = $(this).val();
|
||||
$(this).siblings('.view-mode').text(val);
|
||||
});
|
||||
|
||||
$('.btn-cancel').click();
|
||||
alert('Berhasil disimpan 🔥');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function formatValue(key, value) {
|
||||
|
||||
// kalau field *_avail kita kasih badge
|
||||
if (key.includes('_avail')) {
|
||||
|
||||
if (value == 1) {
|
||||
return `<span class="badge rounded-pill bg-success px-3">ON</span>`;
|
||||
} else {
|
||||
return `<span class="badge rounded-pill bg-danger px-3">OFF</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
// default
|
||||
return value ?? '-';
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
$.validator.addClassRules('no-spinner-time', {
|
||||
required: true,
|
||||
min: 1
|
||||
});
|
||||
|
||||
$.validator.messages.min = "Nilai tidak boleh 0";
|
||||
|
||||
$('#show-tarif').validate({
|
||||
errorClass: 'text-danger',
|
||||
|
||||
highlight: function(element) {
|
||||
$(element).addClass('is-invalid');
|
||||
},
|
||||
|
||||
unhighlight: function(element) {
|
||||
$(element).removeClass('is-invalid');
|
||||
},
|
||||
|
||||
errorPlacement: function(error, element) {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.vehicle-price', function () {
|
||||
|
||||
|
||||
let id = $(this).data('id');
|
||||
let nama = $(this).data('nama');
|
||||
console.log(id);
|
||||
|
||||
let url = "{{ route('vehicle-price.show',':id') }}";
|
||||
url = url.replace(':id', id);
|
||||
|
||||
$.ajax({
|
||||
url: '/setup/master/price/' + id,
|
||||
type: 'GET',
|
||||
success: function (r) {
|
||||
console.log(r);
|
||||
$('#id_mobil').val(r.id_mobil);
|
||||
$('.title').text('Ubah Tarif Kendaraan ' + nama);
|
||||
$('#waktu_gratis').val(r.waktu_gratis); // waktu kurang dari n pertama
|
||||
$('#tarif_period').val(r.tarif_period); // adalah
|
||||
$('#frek_interval').val(r.frek_interval); // 1
|
||||
$('#interval').val(r.interval); // X n menit pertama
|
||||
$('#tarif_interval').val(r.tarif_interval); // adalah Rp.
|
||||
$('#bayar_dimuka').val(r.bayar_dimuka).trigger('change');
|
||||
$('#asuransi_incl').val(r.asuransi_incl);
|
||||
$('#frek_waktu2').val(r.frek_waktu2); // waktu 1
|
||||
$('#waktu2').val(r.waktu2); // xn menit berikutnya
|
||||
$('#tarif2').val(r.tarif2); // adalah Rp.
|
||||
$('#tarif').val(r.tarif); // tarif berikut nya
|
||||
$('#waktu_tarif').val(r.waktu_tarif); // per n menit
|
||||
$('#maksimum').val(r.maksimum);
|
||||
if(r.time_base == 1) {
|
||||
$('#maks_cond').val(r.time_base_maks).show();
|
||||
$('#maksimum-cond').val(0).trigger('change');
|
||||
$('.maks_cond_day').hide();
|
||||
$('#maks_cond_day').hide();
|
||||
} else {
|
||||
$('#maks_cond').hide();
|
||||
$('#maksimum-cond').val(1).trigger('change');
|
||||
$('.maks_cond_day').show();
|
||||
$('#maks_cond_day').val(r.min_per_hari).show();
|
||||
}
|
||||
$('#denda').val(r.denda);
|
||||
$('#denda_member').val(r.denda_member);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#maksimum-cond').on('change', function() {
|
||||
let selectMaxCond = $(this).val();
|
||||
if (selectMaxCond == 0 ) {
|
||||
$('#maks_cond').show().val(24);
|
||||
$('.maks_cond_day').hide();
|
||||
$('#maks_cond_day').val(1).hide();
|
||||
} else if (selectMaxCond == 1) {
|
||||
$('#maks_cond').hide();
|
||||
$('.maks_cond_day').show();
|
||||
$('#maks_cond_day').show().val(60);
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$('.simpan').on('click', function () {
|
||||
|
||||
if (!$('#show-tarif').valid()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let vehicleRate = $('#show-tarif').serialize();
|
||||
|
||||
let id = $('#id_mobil').val();
|
||||
// let url = "{{ route('vehicle.update',':id') }}";
|
||||
let url = $(this).data('url');
|
||||
url = url.replace(':id', id);
|
||||
console.log(url);
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'PUT',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
data: vehicleRate,
|
||||
success: function(r) {
|
||||
console.log(r);
|
||||
|
||||
$('#modal-vehicle').modal('hide');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user