From b86e69b60e9f1cb07a0040407638a9b18bc30f4a Mon Sep 17 00:00:00 2001
From: Aldarien <aldarien85@gmail.com>
Date: Tue, 13 Apr 2021 23:04:03 -0400
Subject: [PATCH] Alias UI

---
 ui/resources/views/currencies/show.blade.php | 118 ++++++++++++++++++-
 ui/setup/web/settings.php                    |   2 +-
 2 files changed, 118 insertions(+), 2 deletions(-)

diff --git a/ui/resources/views/currencies/show.blade.php b/ui/resources/views/currencies/show.blade.php
index 0a3d083..44ccb14 100644
--- a/ui/resources/views/currencies/show.blade.php
+++ b/ui/resources/views/currencies/show.blade.php
@@ -6,6 +6,15 @@
 
 @section('content')
   <h3 class="ui header c_code"></h3>
+  <table class="ui table">
+    <thead>
+      <th>Alias</th>
+      <th class="right aligned" id="add_alias">
+        <i class="plus icon"></i>
+      </th>
+    </thead>
+    <tbody id="aliases"></tbody>
+  </table>
   <table class="ui table">
     <thead>
       <th>Url</th>
@@ -87,10 +96,112 @@
       </form>
     </div>
   </div>
+  <div class="ui modal" id="add_aliases">
+    <div class="header">
+      Agregar Alias para <span class="c_name"></span>
+    </div>
+    <div class="content">
+      <form class="ui form">
+        <div class="inline field">
+          <label>Alias</label>
+          <input type="text" name="alias" />
+        </div>
+        <button class="ui button">Agregar</button>
+      </form>
+    </div>
+  </div>
 @endsection
 
 @push('scripts')
   <script type="text/javascript">
+    let aliases = {
+      id: '#aliases',
+      add_button: '#add_alias',
+      add_modal: '#add_aliases',
+      loading: '',
+      loaded: false,
+      aliases: [],
+      setup: function() {
+        $(this.id).hide()
+        $(this.add_button).css('cursor', 'pointer').click((e) => {
+          this.add()
+        })
+        this.buildModal()
+      },
+      get: function(currency_id, data) {
+        if (!this.loaded) {
+          this.aliases = data.aliases
+          this.populate(currency_id)
+          socket.sendMessage('currency.sources', {currency_id: currency_id})
+          return
+        }
+        var url = '{{$urls->api}}/currency/' + currency_id + '/aliases'
+        $.getJSON(url, (data) => {
+          this.aliases = data.aliases
+          this.populate(currency_id)
+        })
+      },
+      buildModal: function() {
+        $(this.add_modal).modal()
+        $(this.add_modal).find('form').submit((e) => {
+          e.preventDefault()
+          this.doAdd()
+          return false
+        })
+      },
+      populate: function(currency_id) {
+        $(this.id).html('')
+        $.each(this.aliases, (i, el) => {
+          let row = $('<tr></tr>').append(
+            $('<td></td>').html(el.alias)
+          ).append(
+            $('<td></td>').attr('class', 'remove_source right aligned').attr('data-id', el.id).append(
+              $('<i></i>').attr('class', 'minus icon')
+            ).css('cursor', 'pointer').click((e) => {
+              this.remove(currency_id, $(e.currentTarget).attr('data-id'))
+            })
+          )
+          $(this.id).append(row)
+        })
+        $(this.id).show()
+      },
+      add: function() {
+        $(this.add_modal).find('form').trigger('reset')
+        $(this.add_modal).modal('show')
+      },
+      doAdd: function() {
+        let form = $(this.add_modal).find('form')
+        let info = {
+          alias: form.find("[name='alias']").val()
+        }
+        var url = '{{$urls->api}}/currency/{{$currency_id}}/aliases/add'
+        $(this.add_modal).modal('hide')
+        $(this.loading).modal('show')
+        $.post(url, JSON.stringify(info), (data) => {
+          if (data.aliases[0].created) {
+            this.get('{{$currency_id}}')
+          }
+        }, 'json').then(() => {
+          $(this.loading).modal('hide')
+        })
+      },
+      remove: function(id) {
+        var url = '{{$urls->api}}/alias/' + id + '/delete'
+        $(this.loading).modal('show')
+        $.ajax({
+          url: url,
+          method: 'DELETE',
+          dataType: 'json',
+          success: (data) => {
+            if (data.deleted) {
+              this.get()
+            }
+          }
+        }).then(() => {
+          $(this.loading).modal('hide')
+        })
+      }
+    }
     let sources = {
       id: '#sources',
       add_button: '#add_source',
@@ -302,6 +413,8 @@
       },
       loading: '#loading',
       setup: function() {
+        aliases.loading = this.loading
+        aliases.setup()
         sources.loading = this.loading
         sources.setup()
         values.loading = this.loading
@@ -317,6 +430,9 @@
         if (response.request.action == 'currency') {
           currency.get(response.body)
         }
+        if (response.request.action == 'currency.aliases') {
+          aliases.get(response.request.body.currency_id, response.body)
+        }
         if (response.request.action == 'currency.sources') {
           sources.get(response.request.body.currency_id, response.body)
         }
@@ -331,7 +447,7 @@
         $.each(this.map, (i, el) => {
           $(el).html(data.currency[i])
         })
-        socket.sendMessage('currency.sources', {currency_id: '{{$currency_id}}'})
+        socket.sendMessage('currency.aliases', {currency_id: '{{$currency_id}}'})
       }
     }
     $(document).ready(() => {
diff --git a/ui/setup/web/settings.php b/ui/setup/web/settings.php
index f759b35..d186127 100644
--- a/ui/setup/web/settings.php
+++ b/ui/setup/web/settings.php
@@ -32,7 +32,7 @@ return [
     return (object) $arr;
   }),
   'urls' => function(Container $c) {
-    $arr = ['base' => ($c->has('base_url')) ? $c->get('base_url') : ''];
+    $arr = ['base' => ($c->has('base_url')) ? $c->get('base_url') : '/'];
     $arr['assets'] = implode('/', [
       $arr['base'],
       'assets'