Proyectos -> Productos

resources/views/productos/ficha.blade.php

@@ -0,0 +1,58 @@
+<div class="ui card ficha">
+  <div class="content">
+    <div class="header">
+      {{$producto->nombre}}
+    </div>
+    <div class="right floated meta">
+      {{$producto->segmento}}
+    </div>
+    <div class="descripcion">
+      {{$producto->comuna}}
+    </div>
+  </div>
+  <div class="medium image">
+    @if ($producto->destacado)
+      <div class="overlay">Destacado</div>
+    @endif
+    <img src="{{$urls->images}}/{{$producto->imagen}}" />
+  </div>
+  <div class="content">
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$producto->valor}} UF
+      </span>
+      Valor depto
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$producto->bono}} UF
+      </span>
+      Bono Pie
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$producto->rentabilidad}}%
+      </span>
+      Rentabilidad
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$producto->cuota}} UF
+      </span>
+      Valor cuota
+    </div>
+    <div class="ui basic segment">
+      <span class="right floated">
+        {{$producto->entrega}}
+      </span>
+      Entrega Estimada
+    </div>
+    <span class="right floated">
+      <a href="{{$urls->base}}/producto/{{$producto->id}}">
+        <button class="ui inverted brand button">
+          Ver
+        </button>
+      </a>
+    </span>
+  </div>
+</div>

resources/views/productos/list.blade.php

@@ -0,0 +1,93 @@
+@extends('layout.base')
+
+@section('page_content')
+  <div id="productos">
+    <div class="ui container">
+      <div class="ui header titulo">
+        PRODUCTOS
+      </div>
+      <div class="ui top attached tabular menu">
+        <a class="active item" data-tab="todo">
+          Todo
+        </a>
+        @foreach ($segmentos as $segmento)
+          <a class="item" data-tab="{{mb_strtolower($segmento->titulo)}}">
+            {{$segmento->titulo}}
+          </a>
+        @endforeach
+      </div>
+      <div class="ui active tab bottom attached" data-tab="todo">
+        <div class="ui four column stackable grid"></div>
+      </div>
+      @foreach ($segmentos as $segmento)
+        <div class="ui tab bottom attached" data-tab="{{mb_strtolower($segmento->titulo)}}">
+          <div class="ui four column stackable grid"></div>
+        </div>
+      @endforeach
+    </div>
+  </div>
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/productos.css" />
+@endpush
+
+@push('scripts')
+  <script type="text/javascript">
+    var loaded = {
+      todo: false,
+      @foreach ($segmentos as $segmento)
+        '{{mb_strtolower($segmento->titulo)}}': false,
+      @endforeach
+    }
+    function loadSegmento(segmento) {
+      if (loaded[segmento]) {
+        return
+      }
+      var name = segmento
+      if (name.indexOf(' ') > -1) {
+        name = name.replaceAll(' ', '_')
+      }
+      var url = '{{$urls->base}}/productos/segmento/' + name
+      $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
+      loaded[segmento] = true
+      $.getJSON(url, (data) => {
+        $(".tab[data-tab='" + segmento + "']").find('.grid').append(
+          $('<div></div>').attr('class', 'ui active centered inline loader')
+        )
+        $.each(data.productos, (i, el) => {
+          getProducto(segmento, el)
+        })
+      })
+    }
+    function getProducto(segmento, id_producto) {
+      var url = '{{$urls->base}}/producto/' + id_producto + '/ficha'
+      $.ajax({
+        url: url,
+        success: (data) => {
+          if ($(".tab[data-tab='" + segmento + "']").find('.grid').find('.loader').length > 0) {
+            $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
+          }
+          $(".tab[data-tab='" + segmento + "']").find('.grid').append(
+            $('<div></div>').attr('class', 'column').append(data)
+          )
+        }
+      })
+    }
+    $(document).ready(() => {
+      loadSegmento('todo')
+      $('#productos').find('.tabular.menu .item').tab({
+        onFirstLoad: (tabPath, parameterArray, historyEvent) => {
+          if (tabPath == 'todo') {
+            return
+          }
+          loadSegmento(tabPath)
+        }
+      })
+      if (window.location.hash) {
+        var start = (window.location.hash).replace('#', '').replace('%20', ' ')
+        $('#productos').find('.tabular.menu .item').tab('change tab', start)
+      }
+    })
+  </script>
+@endpush

resources/views/productos/producto/buscar.blade.php

@@ -0,0 +1,54 @@
+<div id="buscar">
+  <div class="ui header">
+    Buscar
+  </div>
+  <hr class="ui divider" />
+  <form class="ui form">
+    <div class="ui field">
+      <label>Estado:</label>
+      <input type="text" name="estado" />
+    </div>
+    <div class="ui field">
+      <label>Tipo:</label>
+      <input type="text" name="tipo" />
+    </div>
+    <div class="ui field">
+      <label>Ubicaci&oacute;n:</label>
+      <input type="text" name="ubicacion" />
+    </div>
+    <div class="ui field">
+      <label>Precio:</label>
+      <div class="ui range slider" id="precio"></div>
+      <input type="hidden" name="precio" value="1.000 - 30.000" />
+      <div class="price_label">
+        1.000 - 30.000 UF
+      </div>
+    </div>
+    <button class="ui fluid button">Buscar</button>
+  </form>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    function changePrice(min, max) {
+      $("input[name='precio']").val(min + '-' + max)
+      formatter = new Intl.NumberFormat('de-DE')
+      $('.price_label').html(formatter.format(min) + ' - ' + formatter.format(max) + ' UF')
+    }
+    var gMin = 1000
+    var gMax = 30000
+    $(document).ready(() => {
+      changePrice(gMin, gMax)
+      $('#precio').slider({
+        min: gMin,
+        max: gMax,
+        start: gMin,
+        end: gMax,
+        step: 500,
+        onChange: (range, min, max) => {
+          changePrice(min, max)
+        }
+      })
+    })
+  </script>
+@endpush

resources/views/productos/producto/datos.blade.php

@@ -0,0 +1,108 @@
+<div id="datos">
+  <div class="ui top attached tabular menu">
+    <a class="active item" data-tab="informacion">Informaci&oacute;n</a>
+    <a class="item" data-tab="mapa">Ver Mapa</a>
+    <a class="item" data-tab="video">Video</a>
+    <a class="item" data-tab="estado">Estado del producto</a>
+  </div>
+  <div class="ui bottom attached basic segment active tab" data-tab="informacion">
+    <div class="ui grid">
+      <div class="four wide column">
+        <div class="ui two columns grid informacion">
+          <div class="row">
+            <div class="column">
+              Precio:
+            </div>
+            <div class="column">
+              {{$producto->valor}} UF
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Estado:
+            </div>
+            <div class="column">
+              {{$producto->estado}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Tipo:
+            </div>
+            <div class="column">
+              {{$producto->segmento}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Ubicaci&oacute;n:
+            </div>
+            <div class="column">
+              {{$producto->comuna}}, {{$producto->ciudad}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Unidades:
+            </div>
+            <div class="column">
+              {{$producto->unidades}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Modelos:
+            </div>
+            <div class="column">
+              {{$producto->modelos}}
+            </div>
+          </div>
+          <div class="row">
+            <div class="column">
+              Tama&ntilde;o
+            </div>
+            <div class="column">
+              {{$producto->tamaño}}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="twelve wide column">
+        {{$producto->descripcion}}
+      </div>
+    </div>
+  </div>
+  <div class="ui bottom attached basic segment tab" data-tab="mapa">
+    <div class="ui fluid placeholder">
+      <div class="image"></div>
+    </div>
+  </div>
+  <div class="ui bottom attached basic segment tab" data-tab="video">
+    <div class="ui fluid placeholder">
+      <div class="image"></div>
+    </div>
+  </div>
+  <div class="ui bottom attached basic segment tab" data-tab="estado">
+    <div class="ui fluid placeholder">
+      <div class="paragraph">
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+        <div class="full line"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    $(document).ready(() => {
+      $('#datos').find('.tabular .item').tab()
+    })
+  </script>
+@endpush

resources/views/productos/producto/galeria.blade.php

@@ -0,0 +1,66 @@
+<div id="galeria">
+  <div class="ui image" data-id="0">
+    <img src="{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$producto->imagen}}" />
+  </div>
+  <div class="ui grid" id="thumbnails">
+    @foreach ($producto->images as $i => $image)
+      @if ($i == 0)
+        @continue
+      @endif
+      <div class="three wide column">
+        <div class="ui image" data-id="{{$i}}">
+          <img src="{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$image}}" />
+        </div>
+      </div>
+    @endforeach
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var images = [
+      @foreach ($producto->images as $image)
+        '{{$urls->images}}/{{mb_strtolower($producto->nombre)}}/{{$image}}',
+      @endforeach
+    ]
+    function populateThumbs(current) {
+      var thumbs = $('#thumbnails')
+      thumbs.html('')
+      $.each(images, (i, el) => {
+        if (i == current) {
+          return
+        }
+        thumbs.append(
+          $('<div></div>').attr('class', 'three wide column').append(
+            $('<div></div>').attr('class', 'ui image').attr('data-id', i).append(
+              $('<img />').attr('src', el)
+            )
+          )
+        )
+      })
+      $('#galeria').find('.grid .image').click(function(e) {
+        var id = $(this).attr('data-id')
+        changeImage(id)
+      })
+    }
+    function changeImage(id) {
+      var big = $('#galeria>.image')
+      big.find('img').attr('src', images[id])
+      big.attr('data-id', id)
+      populateThumbs(id)
+    }
+    $(document).ready(() => {
+      $('#galeria').find('.grid .image').click(function(e) {
+        var id = $(this).attr('data-id')
+        changeImage(id)
+        /*var big = $('#galeria>.image')
+        var big_id = big.attr('data-id')
+        big.find('img').attr('src', images[id])
+        big.attr('data-id', id)
+        $(this).find('img').attr('src', images[big_id])
+        $(this).attr('data-id', big_id)
+        populateThumbs(id)*/
+      })
+    })
+  </script>
+@endpush

resources/views/productos/show.blade.php

@@ -0,0 +1,29 @@
+@extends('layout.base')
+
+@section('page_content')
+  <div id="producto">
+    <div class="ui container">
+      <div class="ui one columns grid">
+        <div class="column">
+          <div class="titulo">
+            <span class="ui header">
+              {{$producto->nombre}}
+            </span>
+            <span class="direccion">
+              {{$producto->direccion}}, {{$producto->comuna}}, {{$producto->ciudad}}
+            </span>
+            <div class="publicado">
+              Publicado el {{$producto->publicacion}}
+            </div>
+          </div>
+          @include('productos.producto.galeria')
+          @include('productos.producto.datos')
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/producto.css" />
+@endpush