Galeria funcionando

bootstrap/web/config.php

@@ -64,8 +64,8 @@ return [
       ]))
     ],
     'scripts' => [
-      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js',
-      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/semantic.min.js'
+      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
+      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js'
     ],
     'fonts' => (object) [
       'text/css' => [

common/Controller/Web/Home.php

@@ -14,6 +14,7 @@ class Home {
       'title' => 'BUSCAMOS LA MEJOR EXPERIENCA',
       'contenido' => 'Eventos hechos a tu medida'
     ];
+    $resumen = $handler->load('resumen');
     $servicios = $handler->load('servicios');
     $frase = (object) [
       'titulo' => 'Lorem ipsum dolor sit amet, consectetur adipiscing',
@@ -39,6 +40,6 @@ class Home {
       }
     }
 
-    return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'galeria'));
+    return $view->render($response, 'home', compact('banner', 'resumen', 'servicios', 'frase', 'clientes', 'testimonios', 'galeria'));
   }
 }

public/assets/scripts/home.js

@@ -1,9 +1,9 @@
-let clientes = {
+const clientes = {
   clientes: [],
   current: 0,
   rows: 2,
   cols: 6,
-  decreaseClientes: () => {
+  decreaseClientes: function() {
     $('#img_clientes').find('.row').find('.column:last-child').remove()
     clientes.current -= clientes.rows
     if (clientes.current < - clientes.cols * clientes.rows) {
@@ -20,7 +20,7 @@ let clientes = {
       $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n + 1])
     )
   },
-  increaseClientes: () => {
+  increaseClientes: function() {
     $('#img_clientes').find('.row').find('.column:first-child').remove()
     clientes.current += 2
     if (clientes.current > clientes.clientes.length - clientes.cols * clientes.rows) {
@@ -33,7 +33,7 @@ let clientes = {
       $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + clientes.cols * clientes.rows - 1])
     )
   },
-  setup: () => {
+  setup: function() {
     $('.ci .icon').css('cursor', 'pointer').click(function() {
       if ($(this).attr('class').indexOf('left') != -1) {
         clientes.decreaseClientes()
@@ -43,7 +43,7 @@ let clientes = {
     })
   }
 }
-let eventos = {
+const eventos = {
   eventos: [],
   current_tab: 'none',
   base_url: '',
@@ -54,7 +54,6 @@ let eventos = {
       if (filter != 'none' && el.servicio != filter) {
         return
       }
-      console.debug(el.image)
       grid.append(
         $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
           $('<div></div>').attr('class', 'ui basic segment').append(
@@ -108,7 +107,7 @@ let eventos = {
     })
   }
 }
-let testimonios = {
+const testimonios = {
   testimonios: [],
   current_testimonio: 0,
   cambiar: (id) => {
@@ -134,3 +133,57 @@ let testimonios = {
     $('#marcador').find('.icon.outline').css('cursor', 'pointer')
   }
 }
+const galeria = {
+  id: '',
+  galeria_id: '',
+  galeria: [],
+  base_url: '',
+  setup: function() {
+    $('.servicio').click((e) => {
+      this.changeTab(e.target)
+    })
+  },
+  changeTab: function(tab) {
+    this.drawTabs(tab)
+    $(this.galeria_id).html('')
+    const servicio = $(tab).attr('data-filter')
+    const grid = $(this.galeria_id)
+    $.each(this.galeria, (i, el) => {
+      if (servicio != 'none' && el.servicio != servicio) {
+        return
+      }
+      grid.append(this.drawCard(i, el))
+    })
+  },
+  drawTabs: function(active) {
+    $(this.id).find('.servicio.active').removeClass('active')
+    $(active).addClass('active')
+  },
+  drawCard: function(key, item) {
+    /*
+    <div class="eight wide tablet four wide computer column">
+      <div class="ui basic segment">
+        <a href="{{$urls->base}}/evento/{{$i}}">
+          <div class="ui image">
+            {!!$evento->imagen!!}
+          </div>
+          <div class="ui center aligned header">
+            {{$evento->titulo}}
+            <br />
+            {{$evento->empresa}}
+          </div>
+        </a>
+      </div>
+    </div>
+    */
+   return $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
+     $('<div></div>').attr('class', 'ui basic segment').append(
+       $('<a></a>').attr('href', this.base_url + '/evento/' + key).append(
+         $('<div></div>').attr('class', 'ui image').html(item.image)
+       ).append(
+         $('<div></div>').attr('class', 'ui center aligned header').html(item.titulo + '<br />' + item.empresa)
+       )
+     )
+   )
+  }
+}

public/assets/styles/home.css

@@ -88,6 +88,9 @@
   background-color: white;
   padding: 0;
 }
+#galeria .bottom.attached.segment {
+  padding-top: 1rem !important;
+}
 #galeria .segment .image {
   height: 14rem;
   width: 100%;

resources/data/resumen.yml

@@ -0,0 +1,12 @@
+- titulo: Objetivo
+  imagen: eventos_calidad_de_vida.jpg
+  contenido: "<b>Organización y gestión de eventos deportivos</b>, talleres y actividades que contribuyan a la mejora de la salud, la comunicación, entretención y la superación personal."
+- titulo: Experiencia
+  imagen: eventos_deportivos.jpg
+  contenido: "Empresa con más de <b>15 años</b> de experiencia en la <b>gestión y organización de eventos deportivos.</b>"
+- titulo: Formación
+  imagen: eventos_recreativos.jpg
+  contenido: "Empresa con un equipo de profesionales altamente cualificados en el sector de la <b>organización de eventos</b> y con una gran implicación en cada proyecto que realizamos."
+- titulo: Tecnología
+  imagen: eventos_recreativos.jpg
+  contenido: "Total Sport aprovecha y saca el máximo partido a todo tipo de <b>innovaciones tecnológicas al servicio de la gestión de eventos</b> y de la docencia"

resources/data/servicios.yml

@@ -1,12 +1,3 @@
-- titulo: Objetivo
-  imagen: eventos_calidad_de_vida.jpg
-  contenido: "<b>Organización y gestión de eventos deportivos</b>, talleres y actividades que contribuyan a la mejora de la salud, la comunicación, entretención y la superación personal."
-- titulo: Experiencia
-  imagen: eventos_deportivos.jpg
-  contenido: "Empresa con más de <b>15 años</b> de experiencia en la <b>gestión y organización de eventos deportivos.</b>"
-- titulo: Formación
-  imagen: eventos_recreativos.jpg
-  contenido: "Empresa con un equipo de profesionales altamente cualificados en el sector de la <b>organización de eventos</b> y con una gran implicación en cada proyecto que realizamos."
-- titulo: Tecnología
-  imagen: eventos_recreativos.jpg
-  contenido: "Total Sport aprovecha y saca el máximo partido a todo tipo de <b>innovaciones tecnológicas al servicio de la gestión de eventos</b> y de la docencia"
+- titulo: Eventos Calidad de Vida
+- titulo: Eventos Deportivos
+- titulo: Eventos Recreativos

resources/views/home/galeria.blade.php

@@ -13,6 +13,7 @@
         </div>
       </div>
     </div>
+    <div class="ui bottom attached segment">
       <div class="ui center aligned grid" id="galeria_cards">
         @foreach ($galeria as $i => $evento)
           <div class="eight wide tablet four wide computer column">
@@ -32,9 +33,12 @@
         @endforeach
       </div>
     </div>
+  </div>
 </div>
 
 @push('readyjs')
+  galeria.id = '#galeria'
+  galeria.galeria_id = '#galeria_cards'
   galeria.galeria = [
     @foreach ($galeria as $evento)
       {

resources/views/home/servicios.blade.php

@@ -10,7 +10,7 @@
       <div class="fourteen wide column">
         <div class="ui center aligned stackable grid">
           <div class="four columns row">
-            @foreach ($servicios as $servicio)
+            @foreach ($resumen as $servicio)
               <div class="column">
                 <div class="ui basic card">
                   <div class="image">