Se agrega funcionalidad de WebSockets

This commit is contained in:
2021-03-30 16:21:51 -03:00
parent 4a8ae50fdc
commit 70f8671c01
8 changed files with 358 additions and 141 deletions

View File

@ -12,3 +12,38 @@ function readyDate(date) {
+ ':' + date.getMinutes()
+ ':' + date.getSeconds()
}
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))
}
}

View File

@ -1,2 +1,2 @@
"use strict";function formatValue(t,e){return new Intl.NumberFormat("es-CL",{style:"currency",currency:e,minimumSignificantDigits:2}).format(t)}function formatDate(t){return new Intl.DateTimeFormat("es-CL",{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(t)}function readyDate(t){return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes()+":"+t.getSeconds()}
"use strict";function formatValue(n,e){return new Intl.NumberFormat("es-CL",{style:"currency",currency:e,minimumSignificantDigits:2}).format(n)}function formatDate(n){return new Intl.DateTimeFormat("es-CL",{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).format(n)}function readyDate(n){return n.getFullYear()+"-"+(n.getMonth()+1)+"-"+n.getDate()+" "+n.getHours()+":"+n.getMinutes()+":"+n.getSeconds()}var socket={url:"",conn:null,connect:function(e,t){this.conn=new WebSocket(this.url),this.conn.onopen=function(n){console.debug(n),e()},this.conn.onmessage=function(n){console.debug(n),t(n)},this.conn.onerror=function(n){console.error(n)},this.conn.onclose=function(n){1e3==n.code?console.debug(n):console.error(n)}},sendMessage:function(n){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:null,n={action:n};null!=e&&(n.data=e),this.conn.send(JSON.stringify(n))}};
//# sourceMappingURL=maps/main.min.js.map

View File

@ -1 +1 @@
{"version":3,"file":"../main.min.js","sources":["main.js"],"sourcesContent":["\"use strict\";\n\nfunction formatValue(value, base) {\n return new Intl.NumberFormat('es-CL', {\n style: 'currency',\n currency: base,\n minimumSignificantDigits: 2\n }).format(value);\n}\n\nfunction formatDate(date) {\n return new Intl.DateTimeFormat('es-CL', {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit'\n }).format(date);\n}\n\nfunction readyDate(date) {\n return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();\n}"],"names":["formatValue","value","base","Intl","NumberFormat","style","currency","minimumSignificantDigits","format","formatDate","date","DateTimeFormat","year","month","day","hour","minute","second","readyDate","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds"],"mappings":"aAEA,SAASA,YAAYC,EAAOC,GAC1B,OAAO,IAAIC,KAAKC,aAAa,QAAS,CACpCC,MAAO,WACPC,SAAUJ,EACVK,yBAA0B,IACzBC,OAAOP,GAGZ,SAASQ,WAAWC,GAClB,OAAO,IAAIP,KAAKQ,eAAe,QAAS,CACtCC,KAAM,UACNC,MAAO,UACPC,IAAK,UACLC,KAAM,UACNC,OAAQ,UACRC,OAAQ,YACPT,OAAOE,GAGZ,SAASQ,UAAUR,GACjB,OAAOA,EAAKS,cAAgB,KAAOT,EAAKU,WAAa,GAAK,IAAMV,EAAKW,UAAY,IAAMX,EAAKY,WAAa,IAAMZ,EAAKa,aAAe,IAAMb,EAAKc"}
{"version":3,"file":"../main.min.js","sources":["main.js"],"sourcesContent":["\"use strict\";\n\nfunction formatValue(value, base) {\n return new Intl.NumberFormat('es-CL', {\n style: 'currency',\n currency: base,\n minimumSignificantDigits: 2\n }).format(value);\n}\n\nfunction formatDate(date) {\n return new Intl.DateTimeFormat('es-CL', {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit'\n }).format(date);\n}\n\nfunction readyDate(date) {\n return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();\n}\n\nvar socket = {\n url: '',\n conn: null,\n connect: function connect(ready, getMessage) {\n this.conn = new WebSocket(this.url);\n\n this.conn.onopen = function (e) {\n console.debug(e);\n ready();\n };\n\n this.conn.onmessage = function (e) {\n console.debug(e);\n getMessage(e);\n };\n\n this.conn.onerror = function (e) {\n console.error(e);\n };\n\n this.conn.onclose = function (e) {\n if (e.code != 1000) {\n console.error(e);\n return;\n }\n\n console.debug(e);\n };\n },\n sendMessage: function sendMessage(action) {\n var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n var msg = {\n action: action\n };\n\n if (data != null) {\n msg['data'] = data;\n }\n\n this.conn.send(JSON.stringify(msg));\n }\n};"],"names":["formatValue","value","base","Intl","NumberFormat","style","currency","minimumSignificantDigits","format","formatDate","date","DateTimeFormat","year","month","day","hour","minute","second","readyDate","getFullYear","getMonth","getDate","getHours","getMinutes","getSeconds","socket","url","conn","connect","ready","getMessage","this","WebSocket","onopen","e","console","debug","onmessage","onerror","error","onclose","code","sendMessage","action","data","arguments","length","undefined","msg","send","JSON","stringify"],"mappings":"aAEA,SAASA,YAAYC,EAAOC,GAC1B,OAAO,IAAIC,KAAKC,aAAa,QAAS,CACpCC,MAAO,WACPC,SAAUJ,EACVK,yBAA0B,IACzBC,OAAOP,GAGZ,SAASQ,WAAWC,GAClB,OAAO,IAAIP,KAAKQ,eAAe,QAAS,CACtCC,KAAM,UACNC,MAAO,UACPC,IAAK,UACLC,KAAM,UACNC,OAAQ,UACRC,OAAQ,YACPT,OAAOE,GAGZ,SAASQ,UAAUR,GACjB,OAAOA,EAAKS,cAAgB,KAAOT,EAAKU,WAAa,GAAK,IAAMV,EAAKW,UAAY,IAAMX,EAAKY,WAAa,IAAMZ,EAAKa,aAAe,IAAMb,EAAKc,aAGhJ,IAAIC,OAAS,CACXC,IAAK,GACLC,KAAM,KACNC,QAAS,SAAiBC,EAAOC,GAC/BC,KAAKJ,KAAO,IAAIK,UAAUD,KAAKL,KAE/BK,KAAKJ,KAAKM,OAAS,SAAUC,GAC3BC,QAAQC,MAAMF,GACdL,KAGFE,KAAKJ,KAAKU,UAAY,SAAUH,GAC9BC,QAAQC,MAAMF,GACdJ,EAAWI,IAGbH,KAAKJ,KAAKW,QAAU,SAAUJ,GAC5BC,QAAQI,MAAML,IAGhBH,KAAKJ,KAAKa,QAAU,SAAUN,GACd,KAAVA,EAAEO,KAKNN,QAAQC,MAAMF,GAJZC,QAAQI,MAAML,KAOpBQ,YAAa,SAAqBC,GAChC,IAAIC,EAA0B,EAAnBC,UAAUC,aAA+BC,IAAjBF,UAAU,GAAmBA,UAAU,GAAK,KAC3EG,EAAM,CACRL,OAAQA,GAGE,MAARC,IACFI,EAAU,KAAIJ,GAGhBb,KAAKJ,KAAKsB,KAAKC,KAAKC,UAAUH"}

View 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))
}
}

View File

@ -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(() => {

View File

@ -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) {

View File

@ -26,7 +26,6 @@ $files = [
'settings',
'setups'
];
foreach ($files as $file) {
foreach ($folders as $folder) {
$filename = implode(DIRECTORY_SEPARATOR, [

View File

@ -50,6 +50,7 @@ return [
'images'
]);
$arr['api'] = 'http://localhost:8081';
$arr['ws'] = 'ws://localhost:8020';
return (object) $arr;
},
'format' => function(Container $c) {