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() {
        this.getCurrencies()
      },
      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()
          })
        })
      },
      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
          }
          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
          })
        })
      },
      buildCards: function() {
        $.each(this.data, (i, el) => {
          $(this.id).append(
            this.buildCard(el)
          )
        })
      },
      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