Se agrega funcionalidad de WebSockets
This commit is contained in:
34
ui/resources/assets/js/socket.js
Normal file
34
ui/resources/assets/js/socket.js
Normal file
@ -0,0 +1,34 @@
|
||||
let socket = {
|
||||
url: '',
|
||||
conn: null,
|
||||
connect: function(ready, getMessage) {
|
||||
this.conn = new WebSocket(this.url)
|
||||
this.conn.onopen = (e) => {
|
||||
console.debug(e)
|
||||
ready()
|
||||
}
|
||||
this.conn.onmessage = (e) => {
|
||||
console.debug(e)
|
||||
getMessage(e)
|
||||
}
|
||||
this.conn.onerror = (e) => {
|
||||
console.error(e)
|
||||
}
|
||||
this.conn.onclose = (e) => {
|
||||
if (e.code != 1000) {
|
||||
console.error(e)
|
||||
return
|
||||
}
|
||||
console.debug(e)
|
||||
}
|
||||
},
|
||||
sendMessage: function(action, data = null) {
|
||||
var msg = {
|
||||
action: action
|
||||
}
|
||||
if (data != null) {
|
||||
msg['data'] = data
|
||||
}
|
||||
this.conn.send(JSON.stringify(msg))
|
||||
}
|
||||
}
|
||||
@ -6,19 +6,28 @@
|
||||
|
||||
@section('content')
|
||||
<h3 class="ui header c_code"></h3>
|
||||
<table class="ui table">
|
||||
<thead>
|
||||
<th>Url</th>
|
||||
<th class="right aligned" id="add_source">
|
||||
<i class="plus icon"></i>
|
||||
</th>
|
||||
</thead>
|
||||
<tbody id="sources"></tbody>
|
||||
</table>
|
||||
<table class="ui table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Valor</th>
|
||||
<th id="add_value">
|
||||
<th class="right aligned" id="add_value">
|
||||
<i class="plus icon"></i>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="values"></tbody>
|
||||
</table>
|
||||
<div class="ui modal" id="add_modal">
|
||||
<div class="ui modal" id="add_values">
|
||||
<div class="header">
|
||||
Agregar Valor para <span class="c_name"></span>
|
||||
</div>
|
||||
@ -52,10 +61,202 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui modal" id="add_sources">
|
||||
<div class="header">
|
||||
Agregar Fuente para <span class="c_name"></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<form class="ui form">
|
||||
<div class="inline field">
|
||||
<label>Url</label>
|
||||
<input type="text" name="url" />
|
||||
</div>
|
||||
<button class="ui button">Agregar</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
let sources = {
|
||||
id: '#sources',
|
||||
add_button: '#add_source',
|
||||
add_modal: '#add_sources',
|
||||
loading: '',
|
||||
sources: [],
|
||||
setup: function() {
|
||||
$(this.id).hide()
|
||||
$(this.add_button).css('cursor', 'pointer').click((e) => {
|
||||
this.add()
|
||||
})
|
||||
},
|
||||
get: function(currency_id, data) {
|
||||
this.sources = data.sources
|
||||
this.populate(currency_id)
|
||||
socket.sendMessage('currency.values', {currency_id: '{{$currency_id}}'})
|
||||
},
|
||||
buildModal: function() {
|
||||
$(this.add_modal).modal()
|
||||
$(this.add_modal).find('form').submit((e) => {
|
||||
e.preventDefault()
|
||||
this.doAdd()
|
||||
return false
|
||||
})
|
||||
},
|
||||
populate: function(currency_id) {
|
||||
$(this.id).html('')
|
||||
$.each(this.sources, (i, el) => {
|
||||
let row = $('<tr></tr>').append(
|
||||
$('<td></td>').html(el.url)
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'remove_source right aligned').attr('data-url', el.url).append(
|
||||
$('<i></i>').attr('class', 'minus icon')
|
||||
).css('cursor', 'pointer').click((e) => {
|
||||
this.remove(currency_id, $(e.currentTarget).attr('data-url'))
|
||||
})
|
||||
)
|
||||
$(this.id).append(row)
|
||||
})
|
||||
$(this.id).show()
|
||||
},
|
||||
add: function() {
|
||||
$(this.add_modal).find('form').trigger('reset')
|
||||
$(this.add_modal).modal('show')
|
||||
},
|
||||
doAdd: function() {
|
||||
let form = $(this.add_modal).find('form')
|
||||
let info = {
|
||||
url: form.find("[name='url']").val()
|
||||
}
|
||||
var url = '{{$urls->api}}/currency/' + this.data.id + '/sources/add'
|
||||
$(this.add_modal).modal('hide')
|
||||
$(this.loading).modal('show')
|
||||
$.post(url, JSON.stringify(info), (data) => {
|
||||
if (data.sources[0].created) {
|
||||
this.get()
|
||||
}
|
||||
}, 'json').then(() => {
|
||||
$(this.loading).modal('hide')
|
||||
})
|
||||
},
|
||||
remove: function(currency_id, url) {
|
||||
var url = '{{$urls->api}}/source/' + currency_id + '/' + url + '/delete'
|
||||
$(this.loading).modal('show')
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: 'DELETE',
|
||||
dataType: 'json',
|
||||
success: (data) => {
|
||||
if (data.deleted) {
|
||||
this.get()
|
||||
}
|
||||
}
|
||||
}).then(() => {
|
||||
$(this.loading).modal('hide')
|
||||
})
|
||||
}
|
||||
}
|
||||
let values = {
|
||||
id: '#values',
|
||||
add_button: '#add_value',
|
||||
add_modal: '#add_values',
|
||||
loading: '',
|
||||
values: [],
|
||||
setup: function() {
|
||||
$(this.id).hide()
|
||||
this.buildModal()
|
||||
$(this.add_button).css('cursor', 'pointer').click((e) => {
|
||||
this.add()
|
||||
})
|
||||
},
|
||||
get: function(currency_id, data) {
|
||||
if (data.values.length > 0) {
|
||||
this.values = data.values
|
||||
this.populate(currency_id)
|
||||
}
|
||||
$(this.loading).modal('hide')
|
||||
socket.conn.close()
|
||||
},
|
||||
buildModal: function() {
|
||||
this.getCurrencies()
|
||||
$(this.add_modal).modal()
|
||||
$(this.add_modal).find('.ui.calendar').calendar()
|
||||
$(this.add_modal).find('form').submit((e) => {
|
||||
e.preventDefault()
|
||||
this.doAdd()
|
||||
return false
|
||||
})
|
||||
$(this.add_modal).find('.ui.dropdown').dropdown()
|
||||
},
|
||||
getCurrencies: function() {
|
||||
var url = '{{$urls->api}}/currencies'
|
||||
$.getJSON(url, (data) => {
|
||||
let dp = $(this.add_modal).find('.ui.dropdown')
|
||||
vals = []
|
||||
$.each(data.currencies, (i, el) => {
|
||||
vals.push({name: el.name, value: el.id, text: el.name})
|
||||
})
|
||||
dp.dropdown('setup menu', {values: vals})
|
||||
})
|
||||
},
|
||||
populate: function(currency_id) {
|
||||
$(this.id).html('')
|
||||
$.each(this.values, (i, el) => {
|
||||
let row = $('<tr></tr>').append(
|
||||
$('<td></td>').html(formatDate(new Date(el.date_time)))
|
||||
).append(
|
||||
$('<td></td>').html(formatValue(el.value, el.base.code))
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'remove_value right aligned').attr('data-base', el.base.id).attr('data-date_time', el.date_time).append(
|
||||
$('<i></i>').attr('class', 'minus icon')
|
||||
).css('cursor', 'pointer').click((e) => {
|
||||
this.remove(currency_id, $(e.currentTarget).attr('data-base'), $(e.currentTarget).attr('data-date_time'))
|
||||
})
|
||||
)
|
||||
$(this.id).append(row)
|
||||
})
|
||||
$(this.id).show()
|
||||
},
|
||||
add: function() {
|
||||
$(this.add_modal).find('form').trigger('reset')
|
||||
$(this.add_modal).modal('show')
|
||||
},
|
||||
doAdd: function() {
|
||||
let form = $(this.add_modal).find('form')
|
||||
let info = {
|
||||
date_time: readyDate(new Date(form.find('.ui.calendar').calendar('get date'))),
|
||||
value: form.find("[name='valor']").val(),
|
||||
base_id: form.find('.ui.dropdown').dropdown('get value')
|
||||
}
|
||||
var url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
|
||||
$(this.add_modal).modal('hide')
|
||||
$(this.loading).modal('show')
|
||||
$.post(url, JSON.stringify(info), (data) => {
|
||||
if (data.values[0].created) {
|
||||
this.get()
|
||||
}
|
||||
}, 'json').then(() => {
|
||||
$(this.loading).modal('hide')
|
||||
})
|
||||
},
|
||||
remove: function(currency_id, base_id, date_time) {
|
||||
var url = '{{$urls->api}}/value/' + currency_id + '/' + base_id + '/' + encodeURI(date_time) + '/delete'
|
||||
$(this.loading).modal('show')
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: 'DELETE',
|
||||
dataType: 'json',
|
||||
success: (data) => {
|
||||
if (data.deleted) {
|
||||
this.get().then(() => {
|
||||
$(this.loading).modal('hide')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
let currency = {
|
||||
id: {{$currency_id}},
|
||||
data: {
|
||||
@ -67,120 +268,38 @@
|
||||
name: '.c_name',
|
||||
code: '.c_code'
|
||||
},
|
||||
values_id: '#values',
|
||||
values: [],
|
||||
add_button: '#add_value',
|
||||
add_modal: '#add_modal',
|
||||
loading: '#loading',
|
||||
setup: function() {
|
||||
$(this.values_id).hide()
|
||||
this.buildModal()
|
||||
$(this.add_button).css('cursor', 'pointer').click((e) => {
|
||||
this.addValue()
|
||||
})
|
||||
this.getData().then(() => {
|
||||
this.getValues().then(() => {
|
||||
$(this.loading).modal('hide')
|
||||
})
|
||||
})
|
||||
sources.loading = this.loading
|
||||
sources.setup()
|
||||
values.loading = this.loading
|
||||
values.setup()
|
||||
socket.url = '{{$urls->ws}}'
|
||||
socket.connect(this.ready, this.getMessage)
|
||||
},
|
||||
buildModal: function() {
|
||||
this.getCurrencies()
|
||||
$(this.add_modal).modal()
|
||||
$(this.add_modal).find('.ui.calendar').calendar()
|
||||
$(this.add_modal).find('form').submit((e) => {
|
||||
e.preventDefault()
|
||||
this.doAddValue()
|
||||
return false
|
||||
})
|
||||
$(this.add_modal).find('.ui.dropdown').dropdown()
|
||||
ready: function() {
|
||||
socket.sendMessage('currency', {currency_id: '{{$currency_id}}'})
|
||||
},
|
||||
getData: function() {
|
||||
let url = '{{$urls->api}}/currency/' + this.id
|
||||
return $.getJSON(url, (data) => {
|
||||
$.each(this.data, (i, el) => {
|
||||
this.data[i] = data.currency[i]
|
||||
})
|
||||
$.each(this.map, (i, el) => {
|
||||
$(el).html(data.currency[i])
|
||||
})
|
||||
})
|
||||
},
|
||||
getValues: function() {
|
||||
let url = '{{$urls->api}}/currency/' + this.id + '/values'
|
||||
return $.getJSON(url, (data) => {
|
||||
if (data.values.length > 0) {
|
||||
this.values = data.values
|
||||
this.populateValues()
|
||||
}
|
||||
})
|
||||
},
|
||||
populateValues: function() {
|
||||
$(this.values_id).html('')
|
||||
$.each(this.values, (i, el) => {
|
||||
let row = $('<tr></tr>').append(
|
||||
$('<td></td>').html(formatDate(new Date(el.date_time)))
|
||||
).append(
|
||||
$('<td></td>').html(formatValue(el.value, el.base.code))
|
||||
).append(
|
||||
$('<td></td>').attr('class', 'remove_value').attr('data-base', el.base.id).attr('data-date_time', el.date_time).append(
|
||||
$('<i></i>').attr('class', 'minus icon')
|
||||
).css('cursor', 'pointer').click((e) => {
|
||||
this.removeValue($(e.currentTarget).attr('data-base'), $(e.currentTarget).attr('data-date_time'))
|
||||
})
|
||||
)
|
||||
$(this.values_id).append(row)
|
||||
})
|
||||
$(this.values_id).show()
|
||||
},
|
||||
getCurrencies: function() {
|
||||
let url = '{{$urls->api}}/currencies'
|
||||
$.getJSON(url, (data) => {
|
||||
let dp = $(this.add_modal).find('.ui.dropdown')
|
||||
values = []
|
||||
$.each(data.currencies, (i, el) => {
|
||||
values.push({name: el.name, value: el.id, text: el.name})
|
||||
})
|
||||
dp.dropdown('setup menu', {values: values})
|
||||
})
|
||||
},
|
||||
addValue: function() {
|
||||
$(this.add_modal).find('form').trigger('reset')
|
||||
$(this.add_modal).modal('show')
|
||||
},
|
||||
doAddValue: function() {
|
||||
let form = $(this.add_modal).find('form')
|
||||
let info = {
|
||||
date_time: readyDate(new Date(form.find('.ui.calendar').calendar('get date'))),
|
||||
value: form.find("[name='valor']").val(),
|
||||
base_id: form.find('.ui.dropdown').dropdown('get value')
|
||||
getMessage: function(e) {
|
||||
response = JSON.parse(e.data)
|
||||
if (response.request.action == 'currency') {
|
||||
currency.get(response.body)
|
||||
}
|
||||
if (response.request.action == 'currency.sources') {
|
||||
sources.get(response.request.body.currency_id, response.body)
|
||||
}
|
||||
if (response.request.action == 'currency.values') {
|
||||
values.get(response.request.body.currency_id, response.body)
|
||||
}
|
||||
let url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
|
||||
$(this.add_modal).modal('hide')
|
||||
$(this.loading).modal('show')
|
||||
$.post(url, JSON.stringify(info), (data) => {
|
||||
if (data.values[0].created) {
|
||||
this.getValues()
|
||||
}
|
||||
}, 'json').then(() => {
|
||||
$(this.loading).modal('hide')
|
||||
})
|
||||
},
|
||||
removeValue: function(base_id, date_time) {
|
||||
let url = '{{$urls->api}}/value/' + this.data.id + '/' + base_id + '/' + encodeURI(date_time) + '/delete'
|
||||
$(this.loading).modal('show')
|
||||
$.ajax({
|
||||
url: url,
|
||||
method: 'DELETE',
|
||||
dataType: 'json',
|
||||
success: (data) => {
|
||||
if (data.deleted) {
|
||||
this.getValues().then(() => {
|
||||
$(this.loading).modal('hide')
|
||||
})
|
||||
}
|
||||
}
|
||||
get: function(data) {
|
||||
$.each(this.data, (i, el) => {
|
||||
this.data[i] = data.currency[i]
|
||||
})
|
||||
$.each(this.map, (i, el) => {
|
||||
$(el).html(data.currency[i])
|
||||
})
|
||||
socket.sendMessage('currency.sources', {currency_id: '{{$currency_id}}'})
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
|
||||
@ -13,47 +13,76 @@
|
||||
let cards = {
|
||||
id: '#cards',
|
||||
setup: function() {
|
||||
this.getCurrencies()
|
||||
socket.url = '{{$urls->ws}}'
|
||||
socket.connect(this.socketReady, this.getMessage)
|
||||
},
|
||||
data: [],
|
||||
getCurrencies: function() {
|
||||
let url = '{{$urls->api}}/currencies'
|
||||
return $.getJSON(url, (data) => {
|
||||
let promises = []
|
||||
$.each(data.currencies, (i, el) => {
|
||||
this.data[el.id] = {'currency': el, 'value': null}
|
||||
promises.push(this.getValue(el.id))
|
||||
})
|
||||
Promise.all(promises).then(() => {
|
||||
this.buildCards()
|
||||
})
|
||||
socketReady: function() {
|
||||
socket.sendMessage('currencies')
|
||||
},
|
||||
getMessage: function(e) {
|
||||
response = JSON.parse(e.data)
|
||||
if (response.request.action == 'currencies') {
|
||||
cards.getCurrencies(response.body)
|
||||
}
|
||||
if (response.request.action == 'currency.values.latest') {
|
||||
cards.getValues(response.body)
|
||||
cards.buildCards()
|
||||
}
|
||||
},
|
||||
getCurrencies: function(data) {
|
||||
let promises = []
|
||||
$.each(data.currencies, (i, el) => {
|
||||
this.data[el.id] = {'currency': el, 'value': null}
|
||||
socket.sendMessage('currency.values.latest', {currency_id: el.id})
|
||||
})
|
||||
},
|
||||
getValue: function(currency_id) {
|
||||
let url = '{{$urls->api}}/currency/' + currency_id + '/values/latest'
|
||||
return $.getJSON(url, (data) => {
|
||||
if (data.value == null) {
|
||||
this.data = this.data.filter(function(item) {
|
||||
return item.currency.id != data.currency.id
|
||||
})
|
||||
return
|
||||
getMaxIdx: function() {
|
||||
keys = Object.keys(this.data)
|
||||
max = 0
|
||||
$.each(keys, (i, el) => {
|
||||
if (max < parseInt(el)) {
|
||||
max = parseInt(el)
|
||||
}
|
||||
idx = this.data.findIndex((item, i, arr) => item.currency.id == data.currency.id)
|
||||
if (idx < 0) {
|
||||
return
|
||||
}
|
||||
this.data[idx].value = data.value
|
||||
}).fail(() => {
|
||||
this.data = this.data.filter(function(item) {
|
||||
return item.currency.id == currency_id
|
||||
})
|
||||
})
|
||||
return max
|
||||
},
|
||||
getValues: function(data) {
|
||||
if (data.value == null) {
|
||||
this.data = this.data.filter(function(item) {
|
||||
return item.currency.id != data.currency.id
|
||||
})
|
||||
return
|
||||
}
|
||||
idx = this.data.findIndex((item, i, arr) => {
|
||||
if (typeof item == 'undefined') {
|
||||
return false
|
||||
}
|
||||
return item.currency.id == data.currency.id
|
||||
})
|
||||
if (idx < 0) {
|
||||
return
|
||||
}
|
||||
this.data[idx].value = data.value
|
||||
},
|
||||
buildCards: function() {
|
||||
$(this.id).html('')
|
||||
$.each(this.data, (i, el) => {
|
||||
if (typeof el == 'undefined') {
|
||||
return
|
||||
}
|
||||
if (el.value == null) {
|
||||
return
|
||||
}
|
||||
if (el.currency == null) {
|
||||
return
|
||||
}
|
||||
$(this.id).append(
|
||||
this.buildCard(el)
|
||||
)
|
||||
if (i == this.getMaxIdx()) {
|
||||
socket.conn.close()
|
||||
}
|
||||
})
|
||||
},
|
||||
buildCard: function(currency) {
|
||||
|
||||
Reference in New Issue
Block a user