Se avanza en la pagina de inicio, falta los indicadores

2020-05-12 11:07:58 -04:00
parent fbe1e4f7e5
commit 9084ea5edb
39 changed files with 1027 additions and 45 deletions
--- a/resources/assets/sass/home.scss
+++ b/resources/assets/sass/home.scss
@ -0,0 +1,134 @@
+.header {
+  color: inherit !important;
+  font-family: inherit !important;
+}
+
+#banner {
+  padding-top: 12rem;
+  padding-bottom: 12rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1920px auto;
+  background-blend-mode: multiply;
+
+  #mensaje {
+    margin-bottom: 2rem;
+    color: white;
+    font-weight: 300;
+    font-size: 1.6rem;
+
+    .header {
+      font-weight: 900 !important;
+      font-size: 1.9rem;
+    }
+  }
+  .button {
+    font-family: inherit;
+    font-weight: 900;
+  }
+}
+
+#aviso {
+  color: white;
+  background-color: #429ab7;
+  padding-top: 5rem;
+  padding-bottom: 3rem;
+  font-size: 1.6rem;
+  font-weight: 300;
+
+  .header {
+    font-weight: 900;
+  }
+}
+
+#destacados {
+  padding-top: 3rem;
+  padding-bottom: 5rem;
+  background-color: #a7a9ab;
+  min-height: 40rem;
+
+  .header {
+    color: #0d103c !important;
+    font-weight: 600;
+  }
+  .titulo {
+    font-size: 1.6rem;
+    font-weight: 900;
+    padding-bottom: 1rem;
+  }
+  .ficha {
+    border-radius: 0;
+    border: 0;
+    box-shadow: none !important;
+
+    .content {
+      .segment {
+        background-color: #e6e6e7 !important;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        font-weight: 300;
+      }
+      .button {
+        font-family: inherit !important;
+        font-weight: 900;
+        padding-top: 0.3rem !important;
+        padding-bottom: 0.3rem !important;
+        background-color: #0d103c !important;
+      }
+    }
+    .image {
+      overflow: hidden;
+    }
+    .overlay {
+      background-color: #0d103c;
+      color: white;
+      opacity: 0.8;
+      text-align: center;
+      position: absolute;
+      z-index: 999;
+      top: 1.9rem;
+      right: -2.2rem;
+      width: 10rem;
+      padding-top: .3rem;
+      padding-bottom: .3rem;
+      -webkit-transform: rotate(45deg);
+      -moz-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+    }
+  }
+  .active {
+    font-weight: 900;
+  }
+}
+
+#segmentos {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+#resumen {
+  background-position: center;
+  background-position-y: -60rem;
+  background-repeat: no-repeat;
+  background-size: 2600px auto;
+  min-height: 20rem;
+  padding-top: 3rem;
+
+  .inverted.circular.segment {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+}
+
+#indicadores {
+  background-color: #bbbdc0;
+
+  .column {
+    background-color: white;
+    padding: 0;
+    margin: 1rem;
+    width: 8rem !important;
+  }
+}
--- a/resources/assets/sass/main.scss
+++ b/resources/assets/sass/main.scss
@ -0,0 +1,71 @@
+body {
+  font-family: Roboto, sans-serif !important;
+}
+
+.brand {
+  color: #000070 !important;
+}
+.inverted.brand {
+  background-color: #000070 !important;
+  color: white !important;
+}
+.button.brand {
+  box-shadow: none !important;
+}
+
+.title.image {
+  width: 15rem;
+}
+
+header {
+  #franja {
+    background-color: #707070;
+    color: white !important;
+
+    .menu {
+      color: inherit !important;
+
+      .spacer {
+        width: 3rem;
+      }
+      .input {
+        height: 1.3rem !important;
+      }
+    }
+  }
+  .menu {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+
+    .logo {
+      font-size: 2rem;
+      font-weight: 900;
+    }
+  }
+}
+
+a {
+  color: inherit !important;
+}
+
+.menu {
+  font-family: inherit !important;
+}
+.item {
+  font-family: inherit !important;
+  color: inherit !important;
+}
+
+footer {
+  background-color: #429ab7;
+  color: white;
+
+  .menu {
+    margin: 0 !important;
+
+    .label {
+      background-color: white !important;
+      color: #429ab7 !important;
+    }
+  }
+}
--- a/resources/routes/web.php
+++ b/resources/routes/web.php
@ -15,4 +15,5 @@ if (file_exists($folder)) {
  }
 }

-$app->get('/', Base::class);
+$app->get('/', Base::class)
+  ->add(new ProVM\KI\Common\Middleware\Visits($app->getContainer()->get('file.visits'), $app->getContainer()->get('visits.time')));
--- a/resources/routes/web/indicadores.php
+++ b/resources/routes/web/indicadores.php
@ -0,0 +1,4 @@
+<?php
+use ProVM\KI\Common\Controller\Web\Indicadores;
+
+$app->get('/indicador/{indicador}', [Indicadores::class, 'get']);
--- a/resources/routes/web/proyectos.php
+++ b/resources/routes/web/proyectos.php
@ -0,0 +1,9 @@
+<?php
+use ProVM\KI\Common\Controller\Web\Proyectos;
+
+$app->group('/proyectos', function($app) {
+  $app->get('/destacados/{page}', [Proyectos::class, 'destacados']);
+});
+$app->group('/proyecto/{proyecto}', function($app) {
+  $app->get('/ficha', [Proyectos::class, 'ficha']);
+});
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@ -2,9 +2,14 @@

@section('page_content')
  @include('home.banner')
-  @include('home.segmentos')
+  @include('home.aviso')
  @include('home.destacados')
+  @include('home.segmentos')
  @include('home.resumen')
  @include('home.indicadores')
-  @include('home.confianza')
+  @include('home.contacto')
@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/home.css" />
+@endpush
--- a/resources/views/home/aviso.blade.php
+++ b/resources/views/home/aviso.blade.php
@ -0,0 +1,57 @@
+@if (isset($aviso) and $aviso)
+  <div id="aviso">
+    <div class="ui container">
+      <div class="ui center aligned grid">
+        <div class="ten wide column">
+          <div class="ui header">
+            BENEFICIOS COVID 19
+          </div>
+          Bono Pie 10%
+        </div>
+        <div class="row">
+          @foreach ($avisos as $i => $av)
+            <i class="circle outline tiny icon" data-id="{{$i + 1}}"></i>
+          @endforeach
+        </div>
+      </div>
+    </div>
+  </div>
+@endif
+
+@push('scripts')
+  <script type="text/javascript">
+    var avisos = {
+      avisos: [
+        @foreach ($avisos as $av)
+          {
+            titulo: '{{$av->titulo}}',
+            contenido: '{{$av->contenido}}'
+          },
+        @endforeach
+      ],
+      id: '#aviso',
+      curr_page: 1,
+      setup: () => {
+        avisos.movePage(avisos.curr_page)
+      },
+      movePage: (page) => {
+        var aviso = avisos.avisos[page - 1]
+        $(avisos.id).find('.grid .column').html('').append(
+          $('<div></div>').attr('class', 'ui header').html(aviso.titulo)
+        ).append(aviso.contenido)
+        $(avisos.id).find('.circle.icon').addClass('outline').css('cursor', 'pointer').click(function() {
+          var id = $(this).attr('data-id')
+          if (id == avisos.curr_page) {
+            return
+          }
+          avisos.movePage(id)
+        })
+        $(avisos.id).find('.circle.icon:nth-child(' + page + ')').removeClass('outline').css('cursor', 'default')
+        avisos.curr_page = page
+      }
+    }
+    $(document).ready(function() {
+      avisos.setup()
+    })
+  </script>
+@endpush
--- a/resources/views/home/banner.blade.php
+++ b/resources/views/home/banner.blade.php
@ -1,16 +1,25 @@
 <div id="banner">
  <div class="ui container">
    <div class="ui center aligned grid">
-      <div class="eight wide column">
+      <div class="ten wide column">
        <div id="mensaje">
          <div class="ui header">
            DISEÑA EL FUTURO, ACT&Uacute;A EN EL PRESENTE
          </div>
-          <button class="ui inverted brand button">
-            PROYECTOS
-          </button>
+          "Comienza a Invertir Hoy"
        </div>
+        <button class="ui inverted brand big button">
+          PROYECTOS
+        </button>
      </div>
    </div>
  </div>
 </div>
+
+@push('styles')
+  <style type="text/css">
+    #banner {
+      background-image: url('{{$urls->images}}/banner.jpg');
+    }
+  </style>
+@endpush
--- a/resources/views/home/confianza.blade.php
+++ b/resources/views/home/confianza.blade.php
--- a/resources/views/home/destacados.blade.php
+++ b/resources/views/home/destacados.blade.php
@ -0,0 +1,137 @@
+<div id="destacados">
+  <div class="ui container">
+    <div class="ui header titulo">
+      PROYECTOS DESTACADOS
+    </div>
+    <div class="ui four columns stackable grid" id="proyectos">
+      @for ($i = 0; $i < min(4, count($destacados)); $i ++)
+        <div class="column">
+          <div class="ui card ficha">
+            <div class="content">
+              <div class="header titulo">
+                Proyecto
+              </div>
+              <div class="meta">
+                <div class="right floated">
+                  Segmento
+                </div>
+                Comuna
+              </div>
+            </div>
+            <div class="image">
+              <div class="ui placeholder">
+                <div class="square image"></div>
+              </div>
+            </div>
+            <div class="content">
+              Detalles
+            </div>
+          </div>
+        </div>
+      @endfor
+    </div>
+    @if (count($destacados) > 4)
+      <div class="ui grid" id="paging">
+      </div>
+    @endif
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var destacados = {
+      curr_page: 1,
+      max_page: {{ceil(count($destacados) / 4)}},
+      id: '#destacados',
+      buildCard: (div, id) => {
+        $.ajax({
+          url: '{{$urls->base}}/proyecto/' + id + '/ficha',
+          success: function(data) {
+            div.append(data)
+          }
+        })
+      },
+      fillCards: (data) => {
+        var proyectos = $(destacados.id).find('#proyectos')
+        proyectos.html('')
+        $.each(data, function(i, el) {
+          var div = $('<div></div>').attr('class', 'column')
+          proyectos.append(
+            div
+          )
+          destacados.buildCard(div, el)
+        })
+      },
+      movePage: (page) => {
+        if (page == 'prev') {
+          page = Math.max(1, parseInt(destacados.curr_page) - 1)
+        }
+        if (page == 'next') {
+          page = Math.min(destacados.max_page, parseInt(destacados.curr_page) + 1)
+        }
+        destacados.findPage(page)
+      },
+      buildPaging: () => {
+        var paging = $(destacados.id).find('#paging')
+        paging.html('')
+        paging.append(
+          $('<div></div>').attr('class', 'column')
+        )
+        var ini = destacados.curr_page - 1
+        if (destacados.curr_page == 1) {
+          ini = 1
+        }
+        if (destacados.curr_page == destacados.max_page) {
+          ini = destacados.curr_page - 2
+        }
+        if (destacados.curr_page > 1) {
+          paging.append(
+            $('<div></div>').attr('class', 'column').append(
+              $('<span></span>').attr('class', 'pagina').attr('data-page', 'prev').append(
+                $('<i></i>').attr('class', 'angle left icon')
+              )
+            )
+          )
+        }
+        var max = Math.min(destacados.max_page, ini + 2)
+        for (var i = ini; i <= max; i ++) {
+          var span = $('<span></span>').attr('class', 'pagina').attr('data-page', i).html(i)
+          if (i == destacados.curr_page) {
+            span.addClass('active')
+          }
+          paging.append(
+            $('<div></div>').attr('class', 'column').append(span)
+          )
+        }
+        if (destacados.curr_page < destacados.max_page) {
+          paging.append(
+            $('<div></div>').attr('class', 'column').append(
+              $('<span></span>').attr('class', 'pagina').attr('data-page', 'next').append(
+                $('<i></i>').attr('class', 'angle right icon')
+              )
+            )
+          )
+        }
+        $(destacados.id).find('.pagina:not(.active)').css('cursor', 'pointer').click(function() {
+          var page = $(this).attr('data-page')
+          destacados.movePage(page)
+        })
+      },
+      findPage: (page) => {
+        $.getJSON('{{$urls->base}}/proyectos/destacados/' + page, function(data) {
+          $('#destacados').find('.pagina.active').removeClass('.active')
+          destacados.curr_page = data.information.page
+          destacados.buildPaging()
+          destacados.fillCards(data.destacados)
+        })
+      },
+      setup: () => {
+        destacados.buildPaging()
+        destacados.findPage(destacados.curr_page)
+      }
+    }
+    $(document).ready(function() {
+      destacados.setup()
+    })
+  </script>
+@endpush
--- a/resources/views/home/destacados/ficha.blade.php
+++ b/resources/views/home/destacados/ficha.blade.php
@ -0,0 +1,56 @@
+<div class="ui card ficha">
+  <div class="content">
+    <div class="header">
+      {{$proyecto->edificio}}
+    </div>
+    <div class="right floated meta">
+      {{$proyecto->segmento}}
+    </div>
+    <div class="descripcion">
+      {{$proyecto->comuna}}
+    </div>
+  </div>
+  <div class="medium image">
+    @if ($proyecto->destacado)
+      <div class="overlay">Destacado</div>
+    @endif
+    <img src="{{$urls->images}}/{{$proyecto->imagen}}" />
+  </div>
+  <div class="content">
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->valor}} UF
+      </span>
+      Valor depto
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->bono}} UF
+      </span>
+      Bono Pie
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->rentabilidad}}%
+      </span>
+      Rentabilidad
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->cuota}} UF
+      </span>
+      Valor cuota
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$proyecto->entrega}}
+      </span>
+      Entrega Estimada
+    </div>
+    <span class="right floated">
+      <button class="ui inverted brand button">
+        Ver
+      </button>
+    </span>
+  </div>
+</div>
--- a/resources/views/home/indicadores.blade.php
+++ b/resources/views/home/indicadores.blade.php
@ -0,0 +1,63 @@
+<div id="indicadores">
+  <div class="ui container">
+    <div class="ui grid">
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var indicadores = {
+      indicadores: [
+        @foreach ($indicadores as $indicador => $titulo)
+        {
+          sim: '{{$indicador}}',
+          titulo: '{{$titulo}}'
+        },
+        @endforeach
+      ],
+      id: '#indicadores',
+      current: {{count($indicadores)}},
+      findIndicador: (i) => {
+        var indicador = indicadores.indicadores[i]
+        return $.ajax({
+          url: '{{$urls->base}}/indicador/' + indicador.sim,
+          success: (data) => {
+            var div = $('<div></div>').attr('class', 'two wide center aligned column').append(
+              $('<div></div>').attr('class', 'ui header').append(indicador.titulo).append(
+                $('<div></div>').attr('class', 'sub header').html(data.valor)
+              )
+            )
+            $(indicadores.id).find('.grid').append(
+              div
+            )
+          }
+        })
+      },
+      findNext: () => {
+        console.log('Next call')
+        next = indicadores.current + 1
+        if (next > indicadores.indicadores.length) {
+          next = 0
+        }
+        indicadores.findIndicador(next).done(() => {
+          $(indicadores.id).find('.grid').find('.column:first-child').remove()
+          indicadores.current = next
+          setTimeout(indicadores.findNext(), 30000)
+        })
+      },
+      setup: () => {
+        var promises = []
+        $.each(indicadores.indicadores, (i, el) => {
+          promises.push(indicadores.findIndicador(i))
+        })
+        Promise.all(promises).then(() => {
+          setTimeout(indicadores.findNext(), 30000)
+        })
+      }
+    }
+    $(document).ready(() => {
+      indicadores.setup()
+    })
+  </script>
+@endpush
--- a/resources/views/home/resumen.blade.php
+++ b/resources/views/home/resumen.blade.php
@ -0,0 +1,63 @@
+<div id="resumen">
+  <div class="ui container">
+    <div class="ui center aligned grid">
+      <div class="three wide column">
+        <div class="ui inverted circular segment">
+          <div class="ui big header">
+            123
+            <div class="sub header">
+              Negocios Cerrados
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column"></div>
+      <div class="three wide column">
+        <div class="ui inverted circular segment">
+          <div class="ui big header">
+            12
+            <div class="sub header">
+              Proyectos Publicados
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="column"></div>
+      <div class="three wide column">
+        <div class="ui inverted circular segment">
+          <div class="ui big header">
+            10
+            <div class="sub header">
+              Texto Relleno
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@push('styles')
+  <style type="text/css">
+    #resumen {
+      background-image: url('{{$urls->images}}/indicadores.jpg');
+    }
+  </style>
+@endpush
+
+@push('scripts')
+  <script type="text/javascript">
+    var max_width = 0
+    $(document).ready(function() {
+      $('#resumen .circular.segment').each(function(i, el) {
+        var width = $(this).css('width')
+        var w = parseInt(width)
+        if (w > max_width) {
+          max_width = w
+        }
+        $(this).css('width', max_width + 'px')
+        $(this).css('height', max_width + 'px')
+      })
+    })
+  </script>
+@endpush
--- a/resources/views/home/segmentos.blade.php
+++ b/resources/views/home/segmentos.blade.php
@ -2,20 +2,11 @@
  <div class="ui header">
    SEGMENTOS DE NEGOCIO
  </div>
-  <div class="ui center aligned stacked four columns grid">
-    <div class="column">
-      <div class="ui basic card">
-        <div class="ui placeholder">
-          <div class="image">
-            <!-- <img src="#" /> -->
-          </div>
-        </div>
-        Oficinas
+  <div class="ui center aligned stackable grid">
+    @foreach ($segmentos as $segmento)
+      <div class="three wide column">
+        @include('home.segmentos.ficha')
      </div>
-      <div class="ui basic card">
-        <div class="image">
-        </div>
-      </div>
-    </div>
+    @endforeach
  </div>
 </div>
--- a/resources/views/home/segmentos/ficha.blade.php
+++ b/resources/views/home/segmentos/ficha.blade.php
@ -0,0 +1,8 @@
+<div class="ui basic segment">
+  <div class="ui medium image">
+    {!!$segmento->imagen!!}
+  </div>
+  <div class="ui small header">
+    {{$segmento->titulo}}
+  </div>
+</div>
--- a/resources/views/layout/footer.blade.php
+++ b/resources/views/layout/footer.blade.php
@ -1,4 +1,4 @@
-<footer class="inverted brand">
+<footer>
  <div class="ui container">
    <div class="ui tiny text menu">
      <div class="item">
@ -8,7 +8,7 @@
      <div class="right menu">
        <div class="item">
          N° Visitas
-          <div class="ui brand label">
+          <div class="ui label" >
            <i class="users icon"></i>
            {{$visitas}}
          </div>
--- a/resources/views/layout/header/menu.blade.php
+++ b/resources/views/layout/header/menu.blade.php
@ -1,22 +1,22 @@
 <div class="ui container">
  <nav class="ui massive text menu">
    <a class="item logo" href="{{$urls->base}}">
-      <strong>
-        Capital<span class="brand">Investments</span>
-      </strong>
+      <div class="ui title image">
+        <img src="{{$urls->images}}/logo.png" alt="Capital Investments" title="Capital Investments" />
+      </div>
    </a>
    <div class="right menu">
      <a class="item">
-        Nosotros
+        NOSOTROS
      </a>
      <a class="item">
-        Productos
+        PRODUCTOS
      </a>
      <a class="item">
-        PPFF
+        FAQs
      </a>
      <a class="item">
-        Contacto
+        CONTACTO
      </a>
    </div>
  </nav>