UI

ui/resources/assets/js/main.js

@@ -0,0 +1,4 @@
+global.$ = global.jQuery = require("jquery")
+// Loads all Semantic javascripts
+//= require semantic-ui
+require('fomantic-ui-sass')

ui/resources/assets/sass/_reset.scss

@@ -0,0 +1,46 @@
+*, *:before, *:after{
+    box-sizing: border-box;
+}
+
+html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video{
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: none;
+}
+
+footer, header, nav, section, main{
+    display: block;
+}
+
+body{
+    line-height: 1;
+}
+
+ol, ul{
+    list-style: none;
+}
+
+blockquote, q{
+    quotes: none;
+}
+
+blockquote:before, blockquote:after, q:before, q:after{
+    content: '';
+    content: none;
+}
+
+table{
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+input{
+    -webkit-appearance: none;
+    border-radius: 0;
+}

ui/resources/assets/sass/_variables.scss

@@ -0,0 +1,3 @@
+$page-background-color: rgb(20, 50, 20);
+$page-color: rgb(255, 255, 255);
+@text: $page-color;

ui/resources/assets/sass/main.scss

@@ -0,0 +1,12 @@
+@import "reset";
+@import "fomantic-ui-sass/src/build.scss";
+@import "variables";
+
+body {
+  //background-color: $page-background-color;
+  //color: $page-color !important;
+}
+
+a {
+  color: inherit;
+}

ui/resources/routes/currencies.php

@@ -0,0 +1,5 @@
+<?php
+use ProVM\Money\Common\Controller\Currencies;
+
+$app->get('/currencies', Currencies::class);
+$app->get('/currency/{currency_id}', [Currencies::class, 'show']);

ui/resources/routes/web.php

@@ -0,0 +1,6 @@
+<?php
+use ProVM\Money\Common\Controller\Home;
+
+include_once 'currencies.php';
+
+$app->get('/', Home::class);

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

@@ -0,0 +1,40 @@
+@extends('layout.base')
+
+@section('page_content')
+  <h2 class="ui header">
+    Monedas
+  </h2>
+  <div class="ui link list" id="currencies">
+  </div>
+@endsection
+
+@push('scripts')
+  <script type="text/javascript">
+    let currencies = {
+      id: '#currencies',
+      items: [],
+      setup: function() {
+        this.load().then((data) => {
+          this.build(data)
+        })
+      },
+      load: function() {
+        let url = '{{$urls->api}}/currencies'
+        return $.getJSON(url, (data) => {
+          this.items = data.currencies
+        })
+      },
+      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)
+          $(this.id).append(item)
+        })
+      }
+    }
+    $(document).ready(() => {
+      currencies.setup()
+    })
+  </script>
+@endpush

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

ui/resources/views/home.blade.php

@@ -0,0 +1,7 @@
+@extends('layout.base')
+
+@section('page_content')
+  <h2 class="ui header">
+    Inicio
+  </h2>
+@endsection

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

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

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

@@ -0,0 +1,8 @@
+<body>
+  <div class="ui container">
+    @include('layout.header')
+    @yield('page_content')
+    @include('layout.footer')
+  </div>
+  @include('layout.scripts')
+</body>

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

@@ -0,0 +1,5 @@
+<head>
+  <meta charset="utf-8" />
+  <title>Money</title>
+  @include('layout.styles')
+</head>

ui/resources/views/layout/header.blade.php

@@ -0,0 +1 @@
+@include('layout.menu')

ui/resources/views/layout/menu.blade.php

@@ -0,0 +1,4 @@
+<nav class="ui inverted green bottom attached borderless menu">
+  <a class="brand item" href="{{$urls->base}}">Money</a>
+  <a class="item" href="{{$urls->base}}/currencies">Monedas</a>
+</nav>

ui/resources/views/layout/scripts.blade.php

@@ -0,0 +1,3 @@
+<script type="text/javascript" src="{{$urls->scripts}}/main.min.js"></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>
+@stack('scripts')

ui/resources/views/layout/styles.blade.php

@@ -0,0 +1 @@
+<link rel="stylesheet" href="{{$urls->styles}}/main.min.css" />