v0.1.0
This commit is contained in:
264
frontend/resources/views/coins/list.blade.php
Normal file
264
frontend/resources/views/coins/list.blade.php
Normal file
@ -0,0 +1,264 @@
|
||||
@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}}'
|
||||
},
|
||||
modal: null,
|
||||
setup: function(table, modal) {
|
||||
this.modal = modal
|
||||
table.find('plus icon').css('cursor', 'pointer').click(() => {
|
||||
addCoin()
|
||||
})
|
||||
table.find('tbody').append($('<div></div>').attr('class', 'ui active dimmer').append(
|
||||
$('<div></div>').attr('class', 'ui loader')
|
||||
))
|
||||
table.find('.plus.icon').css('cursor', 'pointer').click((e) => {
|
||||
this.add()
|
||||
})
|
||||
this.load(table)
|
||||
},
|
||||
load: function(table) {
|
||||
const url = this.urls.api + '/coins'
|
||||
const body = table.find('tbody')
|
||||
$.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('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',
|
||||
'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 reload()
|
||||
}
|
||||
}, '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 reload()
|
||||
}
|
||||
},
|
||||
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 reload()
|
||||
}
|
||||
},
|
||||
dataType: 'json'
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
const modal = $('#coin_modal')
|
||||
modal.modal()
|
||||
modal.modal('setting', 'closable', true)
|
||||
const table = $('#coins')
|
||||
|
||||
coins.setup(table, modal)
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user