v0.1.0

frontend/resources/routes/web.php

@@ -0,0 +1,12 @@
+<?php
+use ProVM\Crypto\Common\Controller\Home;
+
+$files = new DirectoryIterator(__DIR__ . DIRECTORY_SEPARATOR . 'web');
+foreach ($files as $file) {
+  if ($file->isDir()) {
+    continue;
+  }
+  include $file->getRealPath();
+}
+
+$app->get('/', Home::class);

frontend/resources/routes/web/coins.php

@@ -0,0 +1,11 @@
+<?php
+use ProVM\Crypto\Common\Controller\Coins;
+
+$app->group('/coins', function($app) {
+  $app->get('/add', [Coins::class, 'add']);
+  $app->get('[/]', Coins::class);
+});
+
+$app->group('/coin/{coin_id}', function($app) {
+  $app->get('[/]', [Coins::class, 'get']);
+});

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

@@ -0,0 +1,5 @@
+@extends('layout.base')
+
+@section('page_title')
+  Coins
+@endsection

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

@@ -0,0 +1,264 @@
+@extends('coins.base')
+
+@section('page_content')
+  <h3 class="ui basic segment header">Monedas</h3>
+  <table class="ui striped table" id="coins">
+    <thead>
+      <tr>
+        <th>
+          Moneda
+        </th>
+        <th>
+          Código
+        </th>
+        <th class="right aligned">
+          <i class="plus icon"></i>
+        </th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+  <div class="ui modal" id="coin_modal">
+    <div class="header"></div>
+    <div class="content"></div>
+    <div class="actions">
+      <div class="ui approve button"></div>
+    </div>
+  </div>
+@endsection
+
+@push('page_scripts')
+  <script type="text/javascript">
+    function reload() {
+      window.location.reload()
+    }
+    const coins = {
+      urls: {
+        api: '{{$urls->api}}',
+        base: '{{$urls->base}}'
+      },
+      modal: null,
+      setup: function(table, modal) {
+        this.modal = modal
+        table.find('plus icon').css('cursor', 'pointer').click(() => {
+          addCoin()
+        })
+        table.find('tbody').append($('<div></div>').attr('class', 'ui active dimmer').append(
+          $('<div></div>').attr('class', 'ui loader')
+        ))
+        table.find('.plus.icon').css('cursor', 'pointer').click((e) => {
+          this.add()
+        })
+        this.load(table)
+      },
+      load: function(table) {
+        const url = this.urls.api + '/coins'
+        const body = table.find('tbody')
+        $.getJSON(url, (data) => {
+          body.html('')
+          data.coins.forEach((v) => {
+            const u = this.urls.base + '/coin/' + v.id
+            const tr = $('<tr></tr>').append(
+              $('<td></td>').append($('<a></a>').attr('href', u).html(v.name))
+            ).append(
+              $('<td></td>').append($('<a></a>').attr('href', u).html(v.code))
+            ).append(
+              $('<td></td>').attr('class', 'right aligned').append(
+                $('<i></i>').attr('class', 'edit icon edit_coin').attr('data-id', v.id)
+              ).append(
+                $('<i></i>').attr('class', 'minus icon minus_coin').attr('data-id', v.id)
+              )
+            )
+            body.append(tr)
+          })
+          $('.edit_coin').css('cursor', 'pointer').click((e) => {
+            const elem = $(e.target)
+            const id = elem.attr('data-id')
+            this.edit(id)
+          })
+          $('.minus_coin').css('cursor', 'pointer').click((e) => {
+            const elem = $(e.target)
+            const id = elem.attr('data-id')
+            this.delete(id)
+          })
+        }).catch(() => {
+          body.html('')
+        })
+      },
+      add: function() {
+        this.modal.find('.header').html('Agregar')
+        this.modal.find('.actions .approve.button').html('Agregar')
+        this.modal.find('.content').html('')
+        const form = $('<form></form>').attr('class', 'ui form').append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Nombre')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'name')
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Código')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'code').attr('size', '5').attr('maxlength', '5')
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Prefijo')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'prefix')
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Sufijo')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'suffix')
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Decimales')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'decimals')
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Url')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'ref_url')
+            )
+        )
+        this.modal.find('.content').append(form)
+        this.modal.modal('show')
+        this.modal.modal({
+          onApprove: () => {
+            const url = this.urls.api + '/coins/add'
+            const fields = [
+              'name',
+              'code',
+              'prefix',
+              'suffix',
+              'decimals',
+              'ref_url'
+            ]
+            let data = {}
+            fields.forEach((k) => {
+              const val = form.find("[name='" + k + "']").val()
+              if (val != '') {
+                data[k] = val
+              }
+            })
+            data = JSON.stringify(data)
+            $.post(url, data, (response) => {
+              if (response.created === true) {
+                return reload()
+              }
+            }, 'json')
+          }
+        })
+      },
+      edit: function(id) {
+        const url = this.urls.api + '/coin/' + id
+        $.getJSON(url, (data) => {
+          const elem = data.coin
+          this.modal.find('.header').html('Editar')
+          this.modal.find('.actions .approve.button').html('Editar')
+          this.modal.find('.content').html('')
+          const form = $('<form></form>').attr('class', 'ui form').append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Nombre')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'name').attr('value', elem.name)
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Código')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'code').attr('size', '5').attr('maxlength', '5').attr('value', elem.code)
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Prefijo')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'prefix').attr('value', elem.prefix)
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Sufijo')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'suffix').attr('value', elem.suffix)
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Decimales')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'decimals').attr('value', elem.decimals)
+            )
+          ).append(
+            $('<div></div>').attr('class', 'field').append(
+              $('<label></label>').html('Url')
+            ).append(
+              $('<input />').attr('type', 'text').attr('name', 'ref_url').attr('value', elem.ref_url)
+            )
+          )
+          this.modal.find('.content').append(form)
+          this.modal.modal('show')
+          this.modal.find('.actions .approve.button').click(() => {
+            const url = this.urls.api + '/coin/' + id + '/edit'
+            const fields = [
+              'name',
+              'code',
+              'prefix',
+              'suffix',
+              'decimals',
+              'ref_url'
+            ]
+            let data = {}
+            fields.forEach((k) => {
+              const val = form.find("[name='" + k + "']").val()
+              if (val != '' && val != elem[k]) {
+                data[k] = val
+              }
+            })
+            data = JSON.stringify(data)
+            $.ajax(
+              {
+                url: url,
+                method: 'PUT',
+                data: data,
+                success: (response) => {
+                  if (response.edited === true) {
+                    return reload()
+                  }
+                },
+                dataType: 'json'
+              }
+            )
+          })
+        })
+      },
+      delete: function(id) {
+        const url = this.urls.api + '/coin/' + id + '/delete'
+        $.ajax(
+          {
+            url: url,
+            method: 'DELETE',
+            success: (response) => {
+              console.debug(response)
+              if (response.deleted === true) {
+                return reload()
+              }
+            },
+            dataType: 'json'
+          }
+        )
+      }
+    }
+    $(document).ready(() => {
+      const modal = $('#coin_modal')
+      modal.modal()
+      modal.modal('setting', 'closable', true)
+      const table = $('#coins')
+
+      coins.setup(table, modal)
+    })
+  </script>
+@endpush

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

@@ -0,0 +1,31 @@
+@extends('coins.base')
+
+@section('page_content')
+  <h3 class="ui header">Moneda - <span class="coin_name"></span></h3>
+  <div class="ui list" id="coin_data">
+  </div>
+@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)
+        $('#coin_data').append(
+          $('<div></div>').attr('class', 'item').html('Código: ' + data.coin.code)
+        ).append(
+          $('<div></div>').attr('class', 'item').html('Prefijo: ' + data.coin.prefix)
+        ).append(
+          $('<div></div>').attr('class', 'item').html('Sufijo: ' + data.coin.suffix)
+        ).append(
+          $('<div></div>').attr('class', 'item').html('Decimales: ' + data.coin.decimals)
+        ).append(
+          $('<div></div>').attr('class', 'item').html('Url: ' + data.coin.ref_url)
+        )
+      })
+    })
+  </script>
+@endpush

frontend/resources/views/home.blade.php

@@ -0,0 +1,5 @@
+@extends('layout.base')
+
+@section('page_content')
+  Home
+@endsection

frontend/resources/views/layout/base.blade.php

@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="es">
+@include('layout.head')
+@include('layout.body')
+</html>

frontend/resources/views/layout/body.blade.php

@@ -0,0 +1,16 @@
+<body>
+  @include('layout.body.header')
+  <div class="ui attached segment" id="page_content">
+    @hasSection('page_sidebar')
+      <div class="ui visible sidebar inverted vertical labeled icon menu" id="page_sidebar">
+        @yield('page_sidebar')
+      </div>
+      <div class="pusher">
+    @endif
+    @yield('page_content')
+    @hasSection('page_sidebar')
+      </div>
+    @endif
+  </div>
+  @include('layout.body.footer')
+</body>

frontend/resources/views/layout/body/footer.blade.php

@@ -0,0 +1,4 @@
+<footer>
+
+</footer>
+@include('layout.body.scripts')

frontend/resources/views/layout/body/header.blade.php

@@ -0,0 +1,6 @@
+<header class="ui top attached menu">
+  <h1 class="brand item">
+    <a href="{{$urls->base}}">Cryptos</a>
+  </h1>
+  <a class="item" href="{{$urls->base}}/coins">Monedas</a>
+</header>

frontend/resources/views/layout/body/scripts.blade.php

@@ -0,0 +1,15 @@
+@if (isset($page_scripts))
+  @foreach ($page_scripts as $script)
+    @if (isset($script->url))
+      <script src="{{$script->url}}"></script>
+    @elseif (isset($script->full))
+      {!!$script->full!!}
+    @endif
+  @endforeach
+@endif
+
+@stack('page_scripts')
+
+<script type="text/javascript">
+  @stack('global_script')
+</script>

frontend/resources/views/layout/head.blade.php

@@ -0,0 +1,11 @@
+<head>
+  <meta charset="utf8" />
+  <title>
+    Crypto
+    @hasSection('page_title')
+      -
+      @yield('page_title')
+    @endif
+  </title>
+  @include('layout.head.styles')
+</head>

frontend/resources/views/layout/head/styles.blade.php

@@ -0,0 +1,11 @@
+@if (isset($page_styles))
+  @foreach ($page_styles as $style)
+    @if (isset($style->url))
+      <link href="{{$style->url}}" />
+    @elseif (isset($style->link))
+      {!!$style->link!!}
+    @endif
+  @endforeach
+@endif
+
+@stack('page_styles')