133 lines
3.8 KiB
PHP
133 lines
3.8 KiB
PHP
@extends('coins.base')
|
|
|
|
@section('page_content')
|
|
<h3 class="ui header">Moneda - <span class="coin_name"></span></h3>
|
|
<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">
|
|
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: ' + this.data.code)
|
|
).append(
|
|
$('<div></div>').attr('class', 'item').html('Prefijo: ' + this.data.prefix)
|
|
).append(
|
|
$('<div></div>').attr('class', 'item').html('Sufijo: ' + this.data.suffix)
|
|
).append(
|
|
$('<div></div>').attr('class', 'item').html('Decimales: ' + this.data.decimals)
|
|
).append(
|
|
$('<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
|