Se agrega seccion de evento

bootstrap/common/config.php

@@ -9,5 +9,11 @@ return [
   'folders.routes' => DI\string(implode(DIRECTORY_SEPARATOR, [
     '{folders.resources}',
     'routes'
+  ])),
+  'folders.images' => DI\string(implode(DIRECTORY_SEPARATOR, [
+    '{folders.base}',
+    'public',
+    'assets',
+    'images'
   ]))
 ];

bootstrap/common/setup.php

@@ -0,0 +1,8 @@
+<?php
+use Psr\Container\ContainerInterface as Container;
+
+return [
+  ProVM\TotalSport\Common\Service\DataHandler::class => function(Container $c) {
+    return new ProVM\TotalSport\Common\Service\DataHandler($c->get('folders.data'));
+  }
+];

bootstrap/web/setup.php

@@ -2,6 +2,9 @@
 use Psr\Container\ContainerInterface as Container;
 
 return [
+  ProVM\TotalSport\Common\Service\ImageLoader::class => function(Container $c) {
+    return new ProVM\TotalSport\Common\Service\ImageLoader($c->get('folders.images'), $c->get('urls')['images']);
+  },
   Slim\Views\Blade::class => function(Container $c) {
     return new Slim\Views\Blade(
       $c->get('folders.templates'),

common/Controller/Web/Eventos.php

@@ -0,0 +1,18 @@
+<?php
+namespace ProVM\TotalSport\Common\Controller\Web;
+
+use Psr\Container\ContainerInterface as Container;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+use ProVM\TotalSport\Common\Service\DataHandler;
+use ProVM\TotalSport\Common\Service\ImageLoader;
+
+class Eventos {
+  public function __invoke(Request $request, Response $response, View $view, DataHandler $handler, ImageLoader $loader, $evento): Response {
+    $eventos = $handler->load('eventos');
+    $e = $eventos[$evento];
+    $imagenes = $loader->load($e);
+    return $view->render($response, 'evento', ['evento' => $e, 'imagenes' => $imagenes]);
+  }
+}

common/Controller/Web/Home.php

@@ -5,15 +5,16 @@ use Psr\Container\ContainerInterface as Container;
 use Psr\Http\Message\ServerRequestInterface as Request;
 use Psr\Http\Message\ResponseInterface as Response;
 use Slim\Views\Blade as View;
-use Spyc;
+use ProVM\TotalSport\Common\Service\DataHandler;
+use ProVM\TotalSport\Common\Service\ImageLoader;
 
 class Home {
-  public function __invoke(Request $request, Response $response, Container $container, View $view): Response {
+  public function __invoke(Request $request, Response $response, Container $container, View $view, DataHandler $handler, ImageLoader $loader): Response {
     $banner = (object) [
       'title' => 'BUSCAMOS LA MEJOR EXPERIENCA',
       'contenido' => 'Eventos hechos a tu medida'
     ];
-    $servicios = $this->loadData($container, 'servicios');
+    $servicios = $handler->load('servicios');
     $frase = (object) [
       'titulo' => 'Lorem ipsum dolor sit amet, consectetur adipiscing',
       'contenido' => 'elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
@@ -23,25 +24,21 @@ class Home {
       $clientes[$i] = '<div class="ui image"><img src="' . $container->get('urls')['images'] . '/clientes/logo_' . str_pad($i + 1, 2, '0', \STR_PAD_LEFT) . '.jpg" /></div>';
     }
 
-    $testimonios = $this->loadData($container, 'testimonios');
+    $testimonios = $handler->load('testimonios');
-    $eventos = $this->loadData($container, 'eventos');
+    $eventos = $handler->load('eventos');
     foreach ($eventos as &$evento) {
-      if (!isset($evento->image)) {
+      if (!isset($evento->imagen)) {
-        $evento->image = '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>';
+        $evento->imagen = '#';
+        $imagenes = $loader->load($evento);
+        if ($imagenes !== false) {
+          $evento->imagen = $imagenes[0];
+        }
       }
       if (!isset($evento->servicio)) {
         $evento->servicio = mt_rand(0, count($servicios) - 1);
       }
     }
 
-
     return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'eventos'));
   }
-  protected function loadData(Container $container, string $file_name) {
-    $filename = implode(DIRECTORY_SEPARATOR, [
-      $container->get('folders.data'),
-      $file_name . '.yml'
-    ]);
-    return json_decode(json_encode(Spyc::YAMLLoad($filename)));
-  }
 }

common/Service/DataHandler.php

@@ -0,0 +1,18 @@
+<?php
+namespace ProVM\TotalSport\Common\Service;
+
+use Spyc;
+
+class DataHandler {
+  protected $folder;
+  public function __construct(string $data_folder) {
+    $this->folder = $data_folder;
+  }
+  public function load(string $file_name) {
+    $filename = implode(DIRECTORY_SEPARATOR, [
+      $this->folder,
+      $file_name . '.yml'
+    ]);
+    return json_decode(json_encode(Spyc::YAMLLoad($filename)));
+  }
+}

common/Service/ImageLoader.php

@@ -0,0 +1,45 @@
+<?php
+namespace ProVM\TotalSport\Common\Service;
+
+use function Stringy\create as s;
+
+class ImageLoader {
+  protected $folder;
+  protected $assets_folder;
+  public function __construct(string $images_folder, string $images_assets_folder) {
+    $this->folder = $images_folder;
+    $this->assets_folder = $images_assets_folder;
+  }
+  public function load($event) {
+    $folder = implode(DIRECTORY_SEPARATOR, [
+      $this->folder,
+      'eventos',
+      s($event->servicio)->removeLeft('Eventos '),
+      implode(', ', [
+        $event->titulo,
+        $event->empresa
+      ])
+    ]);
+    if (!file_exists($folder)) {
+      return false;
+    }
+    $files = new \DirectoryIterator($folder);
+    $images = [];
+    foreach ($files as $file) {
+      if ($file->isDir()) {
+        continue;
+      }
+      $images []= implode('/', [
+        $this->assets_folder,
+        'eventos',
+        s($event->servicio)->removeLeft('Eventos '),
+        implode(', ', [
+          $event->titulo,
+          $event->empresa
+        ]),
+        $file->getFilename()
+      ]);
+    }
+    return $images;
+  }
+}

composer.json

@@ -15,7 +15,8 @@
         "nyholm/psr7": "^1.2",
         "nyholm/psr7-server": "^0.4.1",
         "rubellum/slim-blade-view": "^0.1.1",
-        "mustangostang/spyc": "^0.6.3"
+        "mustangostang/spyc": "^0.6.3",
+        "voku/stringy": "^6.2"
     },
     "require-dev": {
         "phpunit/phpunit": "^8.5",

public/assets/styles/evento.css

@@ -0,0 +1,8 @@
+#evento {
+  background-color: #e6e7e8;
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
+.image {
+  width: 100% !important;
+}

public/assets/styles/home.css

@@ -1,5 +1,5 @@
 #banner {
-  background-color: grey;
+  background-color: rgb(0, 0, 0, 0.6);
   background-blend-mode: multiply;
   background-position: center;
   background-repeat: no-repeat;
@@ -31,7 +31,7 @@
 }
 
 #nosotros {
-  background-color: #f0f0f0;
+  background-color: #e6e7e8;
   padding-top: 3rem;
   padding-bottom: 3rem;
 }
@@ -64,7 +64,7 @@
 }
 
 #testimonios {
-  background-color: grey;
+  background-color: rgb(0, 0, 0, 0.6);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1920px auto;
@@ -79,7 +79,7 @@
 }
 
 #eventos {
-  background-color: #f0f0f0;
+  background-color: #e6e7e8;
   padding-top: 3rem;
   padding-bottom: 5rem;
 }

public/assets/styles/main.css

@@ -33,8 +33,8 @@ footer .grid {
   margin: 0 !important;
 }
 footer .main {
-  min-height: 16rem !important;
+  min-height: 13rem !important;
-  padding-top: 3rem !important;
+  padding-top: 2rem !important;
 }
 footer a {
   color: inherit;

resources/data/eventos.yml

@@ -1,24 +1,44 @@
-- titulo: 2da Corrida Famliar Inclusiva
+- titulo: Activación Olimpiadas del Seguro 2019
-  empresa: DIMERC
+  empresa: Consorcio
-- titulo: Dia de la Familia
+  servicio: Eventos Calidad de Vida
-  empresa: BUPA
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
-- titulo: Fiestas Patrias
+- titulo: Día del niño 2017
-  empresa: CONSORCIO
+  empresa: Fresenius Kabi
-- titulo: Pausas Activas
+  servicio: Eventos Calidad de Vida
-  empresa: DIMEIGGS
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
-- titulo: 2da Corrida Famliar Inclusiva
+- titulo: Fiestras patrias 2019
-  empresa: DIMERC
+  empresa: Consorcio
-- titulo: Dia de la Familia
+  servicio: Eventos Calidad de Vida
-  empresa: BUPA
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
-- titulo: Fiestas Patrias
+- titulo: Olimpiadas del Seguro 2019
-  empresa: CONSORCIO
+  empresa: Intervención Chilena Consolidada
-- titulo: Pausas Activas
+  servicio: Eventos Calidad de Vida
-  empresa: DIMEIGGS
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
-- titulo: 2da Corrida Famliar Inclusiva
+- titulo: Pausas Activas 2018
+  empresa: Dimeiggs
+  servicio: Eventos Calidad de Vida
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
+- titulo: Campeonato baby Futbo 2018
+  empresa: AZA
+  servicio: Eventos Deportivos
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
+- titulo: Campeonato Futbol Varones 2019
+  empresa: Chilena Consolidada
+  servicio: Eventos Deportivos
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
+- titulo: 2da Corrida Familiar Inclusiva
   empresa: DIMERC
+  servicio: Eventos Recreativos
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
 - titulo: Dia de la Familia
   empresa: BUPA
+  servicio: Eventos Recreativos
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
 - titulo: Fiestas Patrias
   empresa: CONSORCIO
+  servicio: Eventos Recreativos
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"
 - titulo: Pausas Activas
   empresa: DIMEIGGS
+  servicio: Eventos Recreativos
+  descripcion: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nos"

resources/routes/web.php

@@ -1,4 +1,18 @@
 <?php
 use ProVM\TotalSport\Common\Controller\Web\Home;
 
+$folder = implode(DIRECTORY_SEPARATOR, [
+  __DIR__,
+  'web'
+]);
+if (file_exists($folder)) {
+  $files = new DirectoryIterator($folder);
+  foreach ($files as $file) {
+    if ($file->isDir()) {
+      continue;
+    }
+    include_once $file->getRealPath();
+  }
+}
+
 $app->get('/', Home::class);

resources/routes/web/eventos.php

@@ -0,0 +1,6 @@
+<?php
+use ProVM\TotalSport\Common\Controller\Web\Eventos;
+
+$app->group('/evento/{evento}', function($app) {
+  $app->get('[/]', Eventos::class);
+});

resources/views/evento.blade.php

@@ -0,0 +1,55 @@
+@extends('layout.base')
+
+@section('page_content')
+  <div id="evento">
+    <div class="ui container">
+      <div class="ui two columns stackable grid">
+        <div class="column">
+          <div class="ui image">
+            <img src="{{$imagenes[0]}}" id="seleccionada" />
+          </div>
+        </div>
+        <div class="column">
+          <h2 class="ui header">
+            <strong>
+              {{mb_strtoupper($evento->titulo)}}
+            </strong>
+            {{$evento->empresa}}
+            <div class="sub header">
+              <i>
+                {{ucwords($evento->servicio)}}
+              </i>
+            </div>
+          </h2>
+          <p>
+            {{$evento->descripcion}}
+          </p>
+          <div class="ui four column grid">
+            @foreach ($imagenes as $imagen)
+              <div class="column">
+                <div class="ui image" class="imagen">
+                  <img src="{{$imagen}}" class="imagen" />
+                </div>
+              </div>
+            @endforeach
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/evento.css" />
+@endpush
+
+@push('scripts')
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.imagen').css('cursor', 'pointer').click(function() {
+        var src = $(this).attr('src')
+        $('#seleccionada').attr('src', src)
+      })
+    })
+  </script>
+@endpush

resources/views/home.blade.php

@@ -13,5 +13,4 @@
 
 @push('styles')
   <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/home.css" />
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet" />
 @endpush

resources/views/home/eventos.blade.php

@@ -8,21 +8,25 @@
         <div class="ui tabular stackable compact menu">
           <a class="active item servicio" data-filter="none">Todos</a>
           @foreach ($servicios as $i => $servicio)
-            <a class="item servicio" data-filter="{{$i}}">{{$servicio->titulo}}</a>
+            <a class="item servicio" data-filter="{{$servicio->titulo}}">{{$servicio->titulo}}</a>
           @endforeach
         </div>
       </div>
     </div>
     <div class="ui center aligned grid" id="eventos_cards">
-      @foreach ($eventos as $evento)
+      @foreach ($eventos as $i => $evento)
         <div class="eight wide tablet four wide computer column">
           <div class="ui basic segment">
-            {!!$evento->image!!}
+            <a href="{{$urls->base}}/evento/{{$i}}">
-            <div class="ui center aligned header">
+              <div class="ui image">
-              {{$evento->titulo}}
+                <img src="{{$evento->imagen}}" />
-              <br />
+              </div>
-              {{$evento->empresa}}
+              <div class="ui center aligned header">
-            </div>
+                {{$evento->titulo}}
+                <br />
+                {{$evento->empresa}}
+              </div>
+            </a>
           </div>
         </div>
       @endforeach
@@ -36,9 +40,9 @@
       @foreach ($eventos as $evento)
         {
           titulo: '{{$evento->titulo}}',
-          image: '{!!$evento->image!!}',
+          image: '{{$evento->imagen}}',
           empresa: '{{$evento->empresa}}',
-          servicio: {{$evento->servicio}}
+          servicio: '{{$evento->servicio}}'
         },
       @endforeach
     ];
@@ -51,10 +55,16 @@
         }
         grid.append(
           $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
-            $('<div></div>').attr('class', 'ui basic segment').append(el.image).append(
+            $('<div></div>').attr('class', 'ui basic segment').append(
-              $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
+              $('<a></a>').attr('href', '{{$urls->base}}/evento/' + i).append(
-                $('<br />')
+                $('<div></div>').attr('class', 'ui image').append(
-              ).append(el.empresa)
+                  $('<img />').attr('src', el.image)
+                )
+              ).append(
+                $('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
+                  $('<br />')
+                ).append(el.empresa)
+              )
             )
           )
         )

resources/views/layout/footer/contacto.blade.php

@@ -1,5 +1,5 @@
 <div style="text-align: center;">
-  <a href="{{$urls->base}}#contacto">
+  <a href="{{$urls->base}}/#contacto">
     <i class="big icon icon-contacto"></i>
     <p>
       <strong>

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

@@ -1,23 +1,23 @@
 <div class="grey">
   <nav class="ui container attached text stackable menu">
-    <a class="item" href="{{$urls->base}}#servicios">
+    <a class="item" href="{{$urls->base}}/#servicios">
       Servicios
     </a>
-    <a class="item" href="{{$urls->base}}#nosotros">
+    <a class="item" href="{{$urls->base}}/#nosotros">
       Nosotros
     </a>
-    <a class="item" href="{{$urls->base}}#clientes">
+    <a class="item" href="{{$urls->base}}/#clientes">
       Clientes
     </a>
-    <a class="item" href="{{$urls->base}}#eventos">
+    <a class="item" href="{{$urls->base}}/#eventos">
       Eventos
     </a>
-    <a class="item" href="{{$urls->base}}#contacto">
+    <a class="item" href="{{$urls->base}}/#contacto">
       Contacto
     </a>
     <div class="right menu">
       <div class="item">
-        Copyright&copy; Todos los derechos reservados a TotalSport
+        Copyright Todos los derechos reservados a ProVM&copy;
       </div>
     </div>
   </nav>

resources/views/layout/footer/ubicacion.blade.php

@@ -1,5 +1,5 @@
 <div style="text-align: center;">
-  <a href="{{$urls->base}}#contacto">
+  <a href="{{$urls->base}}/#contacto">
     <i class="big icon icon-ubicacion"></i>
     <p>
       <strong>
@@ -7,7 +7,7 @@
       </strong>
     </p>
   </a>
-  <a href="{{$urls->base}}#contacto">
+  <a href="{{$urls->base}}/#contacto">
     <p>
       Av. Nueva Providencia 1945, Of. 919,
       <br />

resources/views/layout/menu.blade.php

@@ -1,8 +1,8 @@
 <nav class="ui massive stackable center aligned text three item grey menu">
   <div class="left three item menu">
     <a class="item" href="{{$urls->base}}#servicios">Servicios</a>
-    <a class="item" href="{{$urls->base}}#nosotros">Nosotros</a>
+    <a class="item" href="{{$urls->base}}/#nosotros">Nosotros</a>
-    <a class="item" href="{{$urls->base}}#clientes">Clientes</a>
+    <a class="item" href="{{$urls->base}}/#clientes">Clientes</a>
   </div>
   <a class="item" href="{{$urls->base}}">
     <div class="ui header" id="page_logo">
@@ -10,7 +10,7 @@
     </div>
   </a>
   <div class="right two item menu">
-    <a class="item" href="{{$urls->base}}#eventos">Eventos</a>
+    <a class="item" href="{{$urls->base}}/#eventos">Eventos</a>
-    <a class="item" href="{{$urls->base}}#contacto">Contacto</a>
+    <a class="item" href="{{$urls->base}}/#contacto">Contacto</a>
   </div>
 </nav>