UI

ui/resources/views/currencies/show.blade.php

@@ -0,0 +1,169 @@
+@extends('layout.base')
+
+@section('page_content')
+  <h2 class="ui header">Moneda - <span class="name"></span></h2>
+  <h3 class="ui header" class="code"></h3>
+  <table class="ui table">
+    <thead>
+      <tr>
+        <th>Fecha</th>
+        <th>Valor</th>
+        <th 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="header">
+      Agregar Valor para <span class="name"></span>
+    </div>
+    <div class="content">
+      <form class="ui form">
+        <div class="inline field">
+          <label>Fecha</label>
+          <div class="ui calendar">
+            <div class="ui input left icon">
+              <i class="calendar icon"></i>
+              <input type="text" placeholder="Fecha/Hora" name="fecha" />
+            </div>
+          </div>
+        </div>
+        <div class="inline field">
+          <label>Valor</label>
+          <input type="text" name="valor" />
+        </div>
+        <div class="inline field">
+          <label>Cambio con</label>
+          <div class="ui dropdown">
+            <input type="hidden" name="base" />
+            <div class="default text">
+              Cambio
+            </div>
+            <i class="dropdown icon"></i>
+            <div class="menu"></div>
+          </div>
+        </div>
+        <button class="ui button">Agregar</button>
+      </form>
+    </div>
+  </div>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    function formatDate(date) {
+      return (new Intl.DateTimeFormat('es-CL', {year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'})).format(date)
+    }
+    function formatValue(value, base) {
+      return (new Intl.NumberFormat('es-CL', {style: 'currency', currency: base, minimumSignificantDigits: 2})).format(value)
+    }
+    let currency = {
+      id: {{$currency_id}},
+      data: {
+        id: 0,
+        name: '',
+        code: ''
+      },
+      map: {
+        name: '.name',
+        code: '.code'
+      },
+      values_id: '#values',
+      values: [],
+      add_button: '#add_value',
+      modal: '#add_modal',
+      setup: function() {
+        $(this.values_id).parent().hide()
+        this.buildModal()
+        $(this.add_button).css('cursor', 'pointer').click((e) => {
+          this.addValue()
+        })
+        this.getData().then(() => {
+          this.getValues()
+        })
+      },
+      buildModal: function() {
+        this.getCurrencies()
+        $(this.modal).modal()
+        $(this.modal).find('.ui.calendar').calendar()
+        $(this.modal).find('form').submit((e) => {
+          e.preventDefault()
+          this.doAddValue()
+          return false
+        })
+        $(this.modal).find('.ui.dropdown').dropdown()
+      },
+      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(el.fecha))
+          ).append(
+            $('<td></td>').html(formatValue(el.value, el.base.code))
+          ).append(
+            $('<td></td>')
+          )
+          $(this.values_id).append(row)
+        })
+        $(this.values_id).parent().show()
+      },
+      getCurrencies: function() {
+        let url = '{{$urls->api}}/currencies'
+        $.getJSON(url, (data) => {
+          let dp = $(this.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.modal).find('form').trigger('reset')
+        $(this.modal).modal('show')
+      },
+      doAddValue: function() {
+        let form = $(this.modal).find('form')
+        info = {
+          date_time: (new Date(form.find('.ui.calendar').calendar('get date'))),
+          value: form.find("[name='valor']").val(),
+          base_id: form.find('.ui.dropdown').dropdown('get value')
+        }
+        let url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
+        $.post(url, info, (data) => {
+          console.debug(data)
+          if (data.values[0].created) {
+            window.location.reload()
+            return false
+          }
+        })
+        $(this.modal).modal('hide')
+      }
+    }
+    $(document).ready(() => {
+      currency.setup()
+    })
+  </script>
+@endpush