money/ui/resources/views/home.blade.php

@extends('layout.base')

@section('page_content')
  <h2 class="ui header">
    Monedas
  </h2>
  <div class="ui cards" id="cards">
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
    let cards = {
      id: '#cards',
      setup: function() {
        socket.url = '{{$urls->ws}}'
        socket.connect(this.socketReady, this.getMessage)
      },
      data: [],
      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})
        })
      },
      getMaxIdx: function() {
        keys = Object.keys(this.data)
        max = 0
        $.each(keys, (i, el) => {
          if (max < parseInt(el)) {
            max = parseInt(el)
          }
        })
        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) {
        let card = $('<div></div>').attr('class', 'card').append(
          $('<div></div>').attr('class', 'content').append(
            $('<a></a>').attr('class', 'center aligned header').attr('href', '{{$urls->base}}/value/' + currency.currency.id + '/' + currency.value.base.id + '/' + encodeURI(readyDate(new Date(currency.value.date_time))))
              .html(formatValue(currency.value.value, currency.value.base.code))
          ).append(
            $('<div></div>').attr('class', 'center aligned description').append(
              $('<a></a>').attr('href', '{{$urls->base}}/value/' + currency.currency.id + '/' + currency.value.base.id + '/' + encodeURI(readyDate(new Date(currency.value.date_time))))
                .html(formatDate(new Date(currency.value.date_time)))
            )
          )
        ).append(
          $('<a></a>').attr('class', 'center aligned extra content').attr('href', '{{$urls->base}}/currency/' + currency.currency.id).html(currency.currency.name)
        )
        return card
      }
    }
    $(document).ready(() => {
      cards.setup()
    })
  </script>
@endpush