213 lines
9.4 KiB
Plaintext
213 lines
9.4 KiB
Plaintext
@extends('indexlayout')
|
|
|
|
@section('title', 'Dinas')
|
|
@push('style')
|
|
@endpush
|
|
@section('content')
|
|
<main id="js-page-content" role="main" class="page-content">
|
|
<ol class="breadcrumb page-breadcrumb">
|
|
<li class="breadcrumb-item"><a href="javascript:void(0);">SmartAdmin</a></li>
|
|
<li class="breadcrumb-item">Datatables</li>
|
|
<li class="breadcrumb-item active">AltEditor (beta)</li>
|
|
<li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
|
|
</ol>
|
|
<div class="subheader">
|
|
<h1 class="subheader-title">
|
|
<i class='subheader-icon fal fa-table'></i> DataTables: <span class='fw-300'>AltEditor (beta)</span> <sup
|
|
class='badge badge-primary fw-500'>ADDON</sup>
|
|
<small>
|
|
Custom made editor plugin designed for Datatables
|
|
</small>
|
|
</h1>
|
|
</div>
|
|
<div class="alert alert-primary">
|
|
<div class="d-flex flex-start w-100">
|
|
<div class="mr-2 hidden-md-down">
|
|
<span class="icon-stack icon-stack-lg">
|
|
<i class="base base-2 icon-stack-3x opacity-100 color-primary-500"></i>
|
|
<i class="base base-2 icon-stack-2x opacity-100 color-primary-300"></i>
|
|
<i class="fal fa-info icon-stack-1x opacity-100 color-white"></i>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex flex-fill">
|
|
<div class="flex-fill">
|
|
<span class="h5">About</span>
|
|
<p>
|
|
DataTables AltEditor is a MIT licensed free editor. The plugin adds capabilities to add, edit
|
|
and delete rows in your datatables through the use of modals. We have modified the editor
|
|
extensively to be used with SmartAdmin WebApp and make your job a little easier. This current
|
|
version of AltEditor is exclusive to SmartAdmin and we intend to keep it up to date to be
|
|
compatible with DataTables.
|
|
</p>
|
|
<p class="m-0">
|
|
You can find the definitions of its elements on their <a
|
|
href="https://github.com/KasperOlesen/DataTable-AltEditor" target="_blank">official
|
|
github</a> page. Note: Only use the exclusive plugin included with this WebApp as the one on
|
|
github contains a lot of bugs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div id="panel-1" class="panel">
|
|
<div class="panel-hdr">
|
|
<h2>
|
|
Example <span class="fw-300"><i>Table</i></span>
|
|
</h2>
|
|
<div class="panel-toolbar">
|
|
<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip"
|
|
data-offset="0,10" data-original-title="Collapse"></button>
|
|
<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip"
|
|
data-offset="0,10" data-original-title="Fullscreen"></button>
|
|
<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10"
|
|
data-original-title="Close"></button>
|
|
</div>
|
|
</div>
|
|
<h2>Editable Table 1</h2>
|
|
<table id="table1">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Age</th>
|
|
<th>City</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>John Doe</td>
|
|
<td>30</td>
|
|
<td>New York</td>
|
|
<td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Jane Smith</td>
|
|
<td>25</td>
|
|
<td>Los Angeles</td>
|
|
<td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Editable Table 2</h2>
|
|
<table id="table2">
|
|
<thead>
|
|
<tr>
|
|
<th>Product</th>
|
|
<th>Price</th>
|
|
<th>Stock</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Apple</td>
|
|
<td>$1</td>
|
|
<td>100</td>
|
|
<td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Banana</td>
|
|
<td>$0.5</td>
|
|
<td>150</td>
|
|
<td><span class="edit-button" onclick="editRow(this)">Edit</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
@endsection
|
|
|
|
@push('script')
|
|
<script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
|
|
<script src="{{ asset('layout/dist/js/programanggaran.js') }}"></script>
|
|
<script>
|
|
function editRow(button) {
|
|
// Get the row containing the button
|
|
const row = button.parentNode.parentNode;
|
|
const cells = row.getElementsByTagName('td');
|
|
|
|
// Make cells editable
|
|
for (let i = 0; i < cells.length - 1; i++) { // Exclude the last cell (Action)
|
|
const cell = cells[i];
|
|
const currentValue = cell.innerText;
|
|
|
|
// Create an input element
|
|
const input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.value = currentValue;
|
|
|
|
// Replace cell content with the input
|
|
cell.innerHTML = '';
|
|
cell.appendChild(input);
|
|
}
|
|
|
|
// Change the button to Save
|
|
button.innerText = 'Save';
|
|
button.setAttribute('onclick', 'saveRow(this)');
|
|
}
|
|
|
|
function saveRow(button) {
|
|
// Get the row containing the button
|
|
const row = button.parentNode.parentNode;
|
|
const cells = row.getElementsByTagName('td');
|
|
|
|
// Save the edited values
|
|
for (let i = 0; i < cells.length - 1; i++) { // Exclude the last cell (Action)
|
|
const cell = cells[i];
|
|
const input = cell.getElementsByTagName('input')[0];
|
|
cell.innerText = input.value; // Save the value back to the cell
|
|
}
|
|
|
|
// Change the button back to Edit
|
|
button.innerText = 'Edit';
|
|
button.setAttribute('onclick', 'editRow(this)');
|
|
|
|
// Save the table data to local storage
|
|
saveTableData();
|
|
}
|
|
|
|
function saveTableData() {
|
|
const tables = document.querySelectorAll('table');
|
|
tables.forEach(table => {
|
|
const rows = Array.from(table.rows).map(row => {
|
|
return Array.from(row.cells).slice(0, -1).map(cell => cell.innerText);
|
|
});
|
|
localStorage.setItem(table.id, JSON.stringify(rows));
|
|
});
|
|
}
|
|
|
|
function loadTableData() {
|
|
const tables = document.querySelectorAll('table');
|
|
tables.forEach(table => {
|
|
const storedData = localStorage.getItem(table.id);
|
|
if (storedData) {
|
|
const rows = JSON.parse(storedData);
|
|
const tbody = table.querySelector('tbody');
|
|
tbody.innerHTML = ''; // Clear existing rows
|
|
rows.forEach(rowData => {
|
|
const row = document.createElement('tr');
|
|
rowData.forEach(cellData => {
|
|
const cell = document.createElement('td');
|
|
cell.innerText = cellData;
|
|
row.appendChild(cell);
|
|
});
|
|
const actionCell = document.createElement('td');
|
|
actionCell.innerHTML =
|
|
'<span class="edit-button" onclick="editRow(this)">Edit</span>';
|
|
row.appendChild(actionCell);
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Load table data when the page is loaded
|
|
window.onload = loadTableData;
|
|
</script>
|
|
@endpush
|