UI

2021-03-19 22:48:24 -03:00
parent 4ed9c834eb
commit ec44b0281e
13 changed files with 295 additions and 10945 deletions
--- a/ui/resources/views/currencies/base.blade.php
+++ b/ui/resources/views/currencies/base.blade.php
@ -0,0 +1,24 @@
+@extends('layout.base')
+
+@section('page_content')
+  <h2 class="ui header">
+    @yield('title')
+  </h2>
+  @yield('content')
+  <div class="ui basic modal" id="loading">
+    <div class="ui active dimmer">
+      <div class="ui elastic loader"></div>
+    </div>
+  </div>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    $(document).ready(() => {
+      $('#loading').modal({
+        blurring: true
+      }).modal('show')
+        .find('.dimmer').css('background-color', 'transparent')
+    })
+  </script>
+@endpush
--- a/ui/resources/views/currencies/list.blade.php
+++ b/ui/resources/views/currencies/list.blade.php
@ -1,10 +1,34 @@
-@extends('layout.base')
+@extends('currencies.base')

-@section('page_content')
-  <h2 class="ui header">
-    Monedas
-  </h2>
-  <div class="ui link list" id="currencies">
+@section('title')
+  Monedas
+@endsection
+
+@section('content')
+  <table class="ui collapsing table">
+    <thead>
+      <tr>
+        <th>C&oacute;digo</td>
+        <th>Moneda</td>
+        <th id="add_currency"><i class="plus icon"></i></td>
+      </tr>
+    </thead>
+    <tbody id="currencies"></tbody>
+  </table>
+  <div class="ui modal" id="add_modal">
+    <div class="content">
+      <form class="ui form">
+        <div class="inline field">
+          <label>C&oacute;digo</label>
+          <input type="text" name="code" />
+        </div>
+        <div class="inline field">
+          <label>Nombre</label>
+          <input type="text" name="name" />
+        </div>
+        <button class="ui button">Agregar</button>
+      </form>
+    </div>
  </div>
@endsection

@ -12,10 +36,18 @@
  <script type="text/javascript">
    let currencies = {
      id: '#currencies',
+      loading: '#loading',
+      add_button: '#add_currency',
+      add_modal: '#add_modal',
      items: [],
      setup: function() {
+        $(this.add_modal).modal()
+        $(this.add_button).css('cursor', 'pointer').click((e) => {
+          this.add()
+        })
        this.load().then((data) => {
          this.build(data)
+          $(this.loading).modal('hide')
        })
      },
      load: function() {
@ -27,10 +59,68 @@
      build: function() {
        $(this.id).html('')
        $.each(this.items, (i, el) => {
-          let item = $('<a></a>').attr('class', 'item').attr('href', '{{$urls->base}}/currency/' + el.id)
-            .html(el.name)
+          let item = $('<tr></tr>').append(
+            $('<td></td>').append(
+              $('<a></a>').attr('href', '{{$urls->base}}/currency/' + el.id)
+                .html(el.code)
+            )
+          ).append(
+            $('<td></td>').append(
+              $('<a></a>').attr('href', '{{$urls->base}}/currency/' + el.id)
+                .html(el.name)
+            )
+          ).append(
+            $('<td></td>').attr('class', 'remove_currency').attr('data-id', el.id).append(
+              $('<i></i>').attr('class', 'small minus icon')
+            ).css('cursor', 'pointer').click((e) => {
+              this.remove($(e.currentTarget).attr('data-id'))
+            })
+          )
          $(this.id).append(item)
        })
+      },
+      add: function() {
+        $(this.add_modal).find('form').trigger('reset').submit((e) => {
+          e.preventDefault()
+          this.doAdd()
+          return false
+        })
+        $(this.add_modal).modal('show')
+      },
+      doAdd: function() {
+        let url = '{{$urls->api}}/currencies/add'
+        let form = $(this.add_modal).find('form')
+        let info = {
+          code: form.find("[name='code']").val(),
+          name: form.find("[name='name']").val()
+        }
+        $(this.add_modal).modal('hide')
+        $(this.loading).modal('show')
+        $.post(url, JSON.stringify(info), (data) => {
+          if (data.currencies[0].created) {
+            this.load().then((data) => {
+              this.build(data)
+              $(this.loading).modal('hide')
+            })
+          }
+        }, 'json')
+      },
+      remove: function(currency_id) {
+        let url = '{{$urls->api}}/currency/' + currency_id + '/delete'
+        $(this.loading).modal('show')
+        $.ajax({
+          url: url,
+          method: 'DELETE',
+          dataType: 'json',
+          success: (data) => {
+            if (data.deleted) {
+              this.load().then((data) => {
+                this.build(data)
+                $(this.loading).modal('hide')
+              })
+            }
+          }
+        })
      }
    }
    $(document).ready(() => {
--- a/ui/resources/views/currencies/show.blade.php
+++ b/ui/resources/views/currencies/show.blade.php
@ -1,8 +1,11 @@
-@extends('layout.base')
+@extends('currencies.base')

-@section('page_content')
-  <h2 class="ui header">Moneda - <span class="name"></span></h2>
-  <h3 class="ui header" class="code"></h3>
+@section('title')
+  Moneda - <span class="c_name"></span>
+@endsection
+
+@section('content')
+  <h3 class="ui header c_code"></h3>
  <table class="ui table">
    <thead>
      <tr>
@ -17,7 +20,7 @@
  </table>
  <div class="ui modal" id="add_modal">
    <div class="header">
-      Agregar Valor para <span class="name"></span>
+      Agregar Valor para <span class="c_name"></span>
    </div>
    <div class="content">
      <form class="ui form">
@ -53,12 +56,6 @@

@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: {
@ -67,33 +64,36 @@
        code: ''
      },
      map: {
-        name: '.name',
-        code: '.code'
+        name: '.c_name',
+        code: '.c_code'
      },
      values_id: '#values',
      values: [],
      add_button: '#add_value',
-      modal: '#add_modal',
+      add_modal: '#add_modal',
+      loading: '#loading',
      setup: function() {
-        $(this.values_id).parent().hide()
+        $(this.values_id).hide()
        this.buildModal()
        $(this.add_button).css('cursor', 'pointer').click((e) => {
          this.addValue()
        })
        this.getData().then(() => {
-          this.getValues()
+          this.getValues().then(() => {
+            $(this.loading).modal('hide')
+          })
        })
      },
      buildModal: function() {
        this.getCurrencies()
-        $(this.modal).modal()
-        $(this.modal).find('.ui.calendar').calendar()
-        $(this.modal).find('form').submit((e) => {
+        $(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.modal).find('.ui.dropdown').dropdown()
+        $(this.add_modal).find('.ui.dropdown').dropdown()
      },
      getData: function() {
        let url = '{{$urls->api}}/currency/' + this.id
@ -119,20 +119,24 @@
        $(this.values_id).html('')
        $.each(this.values, (i, el) => {
          let row = $('<tr></tr>').append(
-            $('<td></td>').html(formatDate(el.fecha))
+            $('<td></td>').html(formatDate(new Date(el.date_time)))
          ).append(
            $('<td></td>').html(formatValue(el.value, el.base.code))
          ).append(
-            $('<td></td>')
+            $('<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).parent().show()
+        $(this.values_id).show()
      },
      getCurrencies: function() {
        let url = '{{$urls->api}}/currencies'
        $.getJSON(url, (data) => {
-          let dp = $(this.modal).find('.ui.dropdown')
+          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})
@ -141,25 +145,42 @@
        })
      },
      addValue: function() {
-        $(this.modal).find('form').trigger('reset')
-        $(this.modal).modal('show')
+        $(this.add_modal).find('form').trigger('reset')
+        $(this.add_modal).modal('show')
      },
      doAddValue: function() {
-        let form = $(this.modal).find('form')
-        info = {
-          date_time: (new Date(form.find('.ui.calendar').calendar('get date'))),
+        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')
        }
        let url = '{{$urls->api}}/currency/' + this.data.id + '/values/add'
-        $.post(url, info, (data) => {
-          console.debug(data)
+        $(this.add_modal).modal('hide')
+        $(this.loading).modal('show')
+        $.post(url, JSON.stringify(info), (data) => {
          if (data.values[0].created) {
-            window.location.reload()
-            return false
+            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')
+              })
+            }
          }
        })
-        $(this.modal).modal('hide')
      }
    }
    $(document).ready(() => {
--- a/ui/resources/views/home.blade.php
+++ b/ui/resources/views/home.blade.php
@ -2,6 +2,79 @@

@section('page_content')
  <h2 class="ui header">
-    Inicio
+    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
--- a/ui/resources/views/layout/scripts.blade.php
+++ b/ui/resources/views/layout/scripts.blade.php
@ -1,3 +1,4 @@
-<script type="text/javascript" src="{{$urls->scripts}}/main.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js" integrity="sha512-1Nyd5H4Aad+OyvVfUOkO/jWPCrEvYIsQENdnVXt1+Jjc4NoJw28nyRdrpOCyFH4uvR3JmH/5WmfX1MJk2ZlhgQ==" crossorigin="anonymous"></script>
+<script type="text/javascript" src="{{$urls->scripts}}/main.min.js"></script>
@stack('scripts')