275 lines
9.0 KiB
PHP
275 lines
9.0 KiB
PHP
@extends('coins.base')
|
|
|
|
@section('page_content')
|
|
<h3 class="ui basic segment header">Monedas</h3>
|
|
<table class="ui striped table" id="coins">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Moneda
|
|
</th>
|
|
<th>
|
|
Código
|
|
</th>
|
|
<th class="right aligned">
|
|
<i class="plus icon"></i>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<div class="ui modal" id="coin_modal">
|
|
<div class="header"></div>
|
|
<div class="content"></div>
|
|
<div class="actions">
|
|
<div class="ui approve button"></div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('page_scripts')
|
|
<script type="text/javascript">
|
|
function reload() {
|
|
window.location.reload()
|
|
}
|
|
const coins = {
|
|
urls: {
|
|
api: '{{$urls->api}}',
|
|
base: '{{$urls->base}}'
|
|
},
|
|
table: null,
|
|
modal: null,
|
|
setup: function(table, modal) {
|
|
this.table = table
|
|
this.modal = modal
|
|
table.find('plus icon').css('cursor', 'pointer').click(() => {
|
|
addCoin()
|
|
})
|
|
table.find('.plus.icon').css('cursor', 'pointer').click((e) => {
|
|
this.add()
|
|
})
|
|
this.load()
|
|
},
|
|
load: function() {
|
|
const url = this.urls.api + '/coins'
|
|
const table = this.table
|
|
const body = table.find('tbody')
|
|
table.find('tbody').append($('<div></div>').attr('class', 'ui active dimmer').append(
|
|
$('<div></div>').attr('class', 'ui loader')
|
|
))
|
|
$.getJSON(url, (data) => {
|
|
body.html('')
|
|
data.coins.forEach((v) => {
|
|
const u = this.urls.base + '/coin/' + v.id
|
|
const tr = $('<tr></tr>').append(
|
|
$('<td></td>').append($('<a></a>').attr('href', u).html(v.name))
|
|
).append(
|
|
$('<td></td>').append($('<a></a>').attr('href', u).html(v.code))
|
|
).append(
|
|
$('<td></td>').attr('class', 'right aligned').append(
|
|
$('<i></i>').attr('class', 'edit icon edit_coin').attr('data-id', v.id)
|
|
).append(
|
|
$('<i></i>').attr('class', 'minus icon minus_coin').attr('data-id', v.id)
|
|
)
|
|
)
|
|
body.append(tr)
|
|
})
|
|
$('.edit_coin').css('cursor', 'pointer').click((e) => {
|
|
const elem = $(e.target)
|
|
const id = elem.attr('data-id')
|
|
this.edit(id)
|
|
})
|
|
$('.minus_coin').css('cursor', 'pointer').click((e) => {
|
|
const elem = $(e.target)
|
|
const id = elem.attr('data-id')
|
|
this.delete(id)
|
|
})
|
|
}).catch(() => {
|
|
body.html('')
|
|
})
|
|
},
|
|
add: function() {
|
|
this.modal.find('.header').html('Agregar')
|
|
this.modal.find('.actions .approve.button').html('Agregar')
|
|
this.modal.find('.content').html('')
|
|
const form = $('<form></form>').attr('class', 'ui form').append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Nombre')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'name')
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Identificador')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'identifier')
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Código')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'code').attr('size', '5').attr('maxlength', '5')
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Prefijo')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'prefix')
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Sufijo')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'suffix')
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Decimales')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'decimals')
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Url')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'ref_url')
|
|
)
|
|
)
|
|
this.modal.find('.content').append(form)
|
|
this.modal.modal('show')
|
|
this.modal.modal({
|
|
onApprove: () => {
|
|
const url = this.urls.api + '/coins/add'
|
|
const fields = [
|
|
'name',
|
|
'code',
|
|
'identifier',
|
|
'prefix',
|
|
'suffix',
|
|
'decimals',
|
|
'ref_url'
|
|
]
|
|
let data = {}
|
|
fields.forEach((k) => {
|
|
const val = form.find("[name='" + k + "']").val()
|
|
if (val != '') {
|
|
data[k] = val
|
|
}
|
|
})
|
|
data = JSON.stringify(data)
|
|
$.post(url, data, (response) => {
|
|
if (response.created === true) {
|
|
return this.load()
|
|
}
|
|
}, 'json')
|
|
}
|
|
})
|
|
},
|
|
edit: function(id) {
|
|
const url = this.urls.api + '/coin/' + id
|
|
$.getJSON(url, (data) => {
|
|
const elem = data.coin
|
|
this.modal.find('.header').html('Editar')
|
|
this.modal.find('.actions .approve.button').html('Editar')
|
|
this.modal.find('.content').html('')
|
|
const form = $('<form></form>').attr('class', 'ui form').append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Nombre')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'name').attr('value', elem.name)
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Código')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'code').attr('size', '5').attr('maxlength', '5').attr('value', elem.code)
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Prefijo')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'prefix').attr('value', elem.prefix)
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Sufijo')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'suffix').attr('value', elem.suffix)
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Decimales')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'decimals').attr('value', elem.decimals)
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'field').append(
|
|
$('<label></label>').html('Url')
|
|
).append(
|
|
$('<input />').attr('type', 'text').attr('name', 'ref_url').attr('value', elem.ref_url)
|
|
)
|
|
)
|
|
this.modal.find('.content').append(form)
|
|
this.modal.modal('show')
|
|
this.modal.find('.actions .approve.button').click(() => {
|
|
const url = this.urls.api + '/coin/' + id + '/edit'
|
|
const fields = [
|
|
'name',
|
|
'code',
|
|
'prefix',
|
|
'suffix',
|
|
'decimals',
|
|
'ref_url'
|
|
]
|
|
let data = {}
|
|
fields.forEach((k) => {
|
|
const val = form.find("[name='" + k + "']").val()
|
|
if (val != '' && val != elem[k]) {
|
|
data[k] = val
|
|
}
|
|
})
|
|
data = JSON.stringify(data)
|
|
$.ajax(
|
|
{
|
|
url: url,
|
|
method: 'PUT',
|
|
data: data,
|
|
success: (response) => {
|
|
if (response.edited === true) {
|
|
return this.load()
|
|
}
|
|
},
|
|
dataType: 'json'
|
|
}
|
|
)
|
|
})
|
|
})
|
|
},
|
|
delete: function(id) {
|
|
const url = this.urls.api + '/coin/' + id + '/delete'
|
|
$.ajax(
|
|
{
|
|
url: url,
|
|
method: 'DELETE',
|
|
success: (response) => {
|
|
console.debug(response)
|
|
if (response.deleted === true) {
|
|
return this.load()
|
|
}
|
|
},
|
|
dataType: 'json'
|
|
}
|
|
)
|
|
}
|
|
}
|
|
$(document).ready(() => {
|
|
const modal = $('#coin_modal')
|
|
modal.modal()
|
|
modal.modal('setting', 'closable', true)
|
|
const table = $('#coins')
|
|
|
|
coins.setup(table, modal)
|
|
})
|
|
</script>
|
|
@endpush
|