Frontend coins and charts

frontend/resources/views/coins/show.blade.php

@@ -2,30 +2,131 @@
 
 @section('page_content')
   <h3 class="ui header">Moneda - <span class="coin_name"></span></h3>
-  <div class="ui list" id="coin_data">
-  </div>
+  <div class="ui list" id="coin_data"></div>
+  <canvas id="coin_graph" width="400" height="200"></canvas>
+  <table class="ui table" id="coin_values">
+    <thead>
+      <tr>
+        <th>
+          Fecha
+        </th>
+        <th>
+          Valor
+        </th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
 @endsection
 
 @push('page_scripts')
   <script type="text/javascript">
-    $(document).ready(() => {
-      const id = '{{$coin_id}}'
-      const api_url = '{{$urls->api}}'
-      const url = api_url + '/coin/' + id
-      $.getJSON(url, (data) => {
-        $('.coin_name').html(data.coin.name)
+    const coin = {
+      id: {{$coin_id}},
+      urls: {
+        api: '{{$urls->api}}'
+      },
+      data: {},
+      values: {},
+      draw: function() {
+        $('.coin_name').html(this.data.name)
         $('#coin_data').append(
-          $('<div></div>').attr('class', 'item').html('Código: ' + data.coin.code)
+          $('<div></div>').attr('class', 'item').html('Código: ' + this.data.code)
         ).append(
-          $('<div></div>').attr('class', 'item').html('Prefijo: ' + data.coin.prefix)
+          $('<div></div>').attr('class', 'item').html('Prefijo: ' + this.data.prefix)
         ).append(
-          $('<div></div>').attr('class', 'item').html('Sufijo: ' + data.coin.suffix)
+          $('<div></div>').attr('class', 'item').html('Sufijo: ' + this.data.suffix)
         ).append(
-          $('<div></div>').attr('class', 'item').html('Decimales: ' + data.coin.decimals)
+          $('<div></div>').attr('class', 'item').html('Decimales: ' + this.data.decimals)
         ).append(
-          $('<div></div>').attr('class', 'item').html('Url: ' + data.coin.ref_url)
+          $('<div></div>').attr('class', 'item').html('Url: ' + this.data.ref_url)
         )
-      })
+      },
+      loading: function(elem) {
+        elem.html('')
+        elem.append(
+          $('<div></div>').attr('class', 'ui active dimmer').append(
+            $('<div></div>').attr('class', 'ui indeterminate elastic text loader').html('Cargando los datos.')
+          )
+        )
+      },
+      getData: function() {
+        const elem_id = '#coin_data'
+        this.loading($(elem_id))
+        const url = this.urls.api + '/coin/' + this.id
+        $.getJSON(url, (data) => {
+          $(elem_id).html('')
+          this.data = data.coin
+          this.draw()
+          this.getValues()
+        })
+      },
+      getValues: function() {
+        /*const elem_id = '#coin_values'
+        $(elem_id).show()
+        this.loading($(elem_id).find('tbody'))*/
+        this.loading($('#coin_graph'))
+        const url = this.urls.api + '/coin/' + this.id + '/values'
+        $.getJSON(url, (data) => {
+          //$(elem_id).find('tbody').html('')
+          this.values = data.values
+          this.graphValues()
+        })
+      },
+      showValues: function() {
+        const list_id = '#coin_values'
+        list = $(list_id).find('tbody')
+        const f = Intl.DateTimeFormat('es-CL', {dateStyle: 'medium', timeStyle: 'long'})
+        $.each(this.values, (i, elem) => {
+          const d = new Date(elem.date_time)
+          list.append(
+            $('<tr></tr>').append(
+              $('<td></td>').html(f.format(d))
+            ).append(
+              $('<td></td>').html(elem.formatted)
+            )
+          )
+        })
+      },
+      graphValues: function() {
+        const ctx = document.getElementById('coin_graph').getContext('2d')
+        let labels = []
+        let values = []
+        const f = Intl.DateTimeFormat('es-CL', {dateStyle: 'medium'})
+        $.each(this.values, (i, el) => {
+          const d = new Date(el.date_time)
+          labels.push(f.format(d))
+          values.push(el.value)
+        })
+        const chart = new Chart(ctx, {
+          type: 'line',
+          data: {
+            labels: labels,
+            datasets: [{
+              label: this.data.name,
+              data: values,
+              fill: false,
+              borderWidth: 1,
+              tension: 0.1
+            }]
+          },
+          options: {
+            responsive: true,
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            }
+          }
+        })
+      },
+      setup: function() {
+        this.getData()
+        $('#coin_values').hide()
+      }
+    }
+    $(document).ready(() => {
+      coin.setup()
     })
   </script>
 @endpush