ProVM/crypto
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Frontend coins and charts

Browse Source
This commit is contained in:
Aldarien
2021-07-14 10:12:22 -04:00
parent 4a321b4105
commit 2859574848
5 changed files with 368 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/resources/views/coins/list.blade.php
View File

@ -37,23 +37,26 @@
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('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)
this.load()
},
load: function(table) {
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) => {
@ -95,6 +98,12 @@
).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')
@ -134,6 +143,7 @@
const fields = [
'name',
'code',
'identifier',
'prefix',
'suffix',
'decimals',
@ -149,7 +159,7 @@
data = JSON.stringify(data)
$.post(url, data, (response) => {
if (response.created === true) {
return reload()
return this.load()
}
}, 'json')
}
@ -226,7 +236,7 @@
data: data,
success: (response) => {
if (response.edited === true) {
return reload()
return this.load()
}
},
dataType: 'json'
@ -244,7 +254,7 @@
success: (response) => {
console.debug(response)
if (response.deleted === true) {
return reload()
return this.load()
}
},
dataType: 'json'

129
frontend/resources/views/coins/show.blade.php
View File

@ -2,30 +2,131 @@
@section('page_content')
<h3 class="ui header">Moneda - <span class="coin_name"></span></h3>
<div class="ui list" id="coin_data">
</div>
<div class="ui list" id="coin_data"></div>
<canvas id="coin_graph" width="400" height="200"></canvas>
<table class="ui table" id="coin_values">
<thead>
<tr>
<th>
Fecha
</th>
<th>
Valor
</th>
</tr>
</thead>
<tbody></tbody>
</table>
@endsection
@push('page_scripts')
<script type="text/javascript">
$(document).ready(() => {
const id = '{{$coin_id}}'
const api_url = '{{$urls->api}}'
const url = api_url + '/coin/' + id
$.getJSON(url, (data) => {
$('.coin_name').html(data.coin.name)
const coin = {
id: {{$coin_id}},
urls: {
api: '{{$urls->api}}'
},
data: {},
values: {},
draw: function() {
$('.coin_name').html(this.data.name)
$('#coin_data').append(
$('<div></div>').attr('class', 'item').html('Código: ' + data.coin.code)
$('<div></div>').attr('class', 'item').html('Código: ' + this.data.code)
).append(
$('<div></div>').attr('class', 'item').html('Prefijo: ' + data.coin.prefix)
$('<div></div>').attr('class', 'item').html('Prefijo: ' + this.data.prefix)
).append(
$('<div></div>').attr('class', 'item').html('Sufijo: ' + data.coin.suffix)
$('<div></div>').attr('class', 'item').html('Sufijo: ' + this.data.suffix)
).append(
$('<div></div>').attr('class', 'item').html('Decimales: ' + data.coin.decimals)
$('<div></div>').attr('class', 'item').html('Decimales: ' + this.data.decimals)
).append(
$('<div></div>').attr('class', 'item').html('Url: ' + data.coin.ref_url)
$('<div></div>').attr('class', 'item').html('Url: ' + this.data.ref_url)
)
})
},
loading: function(elem) {
elem.html('')
elem.append(
$('<div></div>').attr('class', 'ui active dimmer').append(
$('<div></div>').attr('class', 'ui indeterminate elastic text loader').html('Cargando los datos.')
)
)
},
getData: function() {
const elem_id = '#coin_data'
this.loading($(elem_id))
const url = this.urls.api + '/coin/' + this.id
$.getJSON(url, (data) => {
$(elem_id).html('')
this.data = data.coin
this.draw()
this.getValues()
})
},
getValues: function() {
/*const elem_id = '#coin_values'
$(elem_id).show()
this.loading($(elem_id).find('tbody'))*/
this.loading($('#coin_graph'))
const url = this.urls.api + '/coin/' + this.id + '/values'
$.getJSON(url, (data) => {
//$(elem_id).find('tbody').html('')
this.values = data.values
this.graphValues()
})
},
showValues: function() {
const list_id = '#coin_values'
list = $(list_id).find('tbody')
const f = Intl.DateTimeFormat('es-CL', {dateStyle: 'medium', timeStyle: 'long'})
$.each(this.values, (i, elem) => {
const d = new Date(elem.date_time)
list.append(
$('<tr></tr>').append(
$('<td></td>').html(f.format(d))
).append(
$('<td></td>').html(elem.formatted)
)
)
})
},
graphValues: function() {
const ctx = document.getElementById('coin_graph').getContext('2d')
let labels = []
let values = []
const f = Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'})
$.each(this.values, (i, el) => {
const d = new Date(el.date_time)
labels.push(f.format(d))
values.push(el.value)
})
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: this.data.name,
data: values,
fill: false,
borderWidth: 1,
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
})
},
setup: function() {
this.getData()
$('#coin_values').hide()
}
}
$(document).ready(() => {
coin.setup()
})
</script>
@endpush