97 lines
3.0 KiB
PHP
97 lines
3.0 KiB
PHP
<div id="eventos">
|
|
<div class="ui container">
|
|
<div class="ui center aligned huge header">
|
|
EVENTOS
|
|
</div>
|
|
<div class="ui centered grid">
|
|
<div class="center aligned column">
|
|
<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="{{$servicio->titulo}}">{{$servicio->titulo}}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui center aligned grid" id="eventos_cards">
|
|
@foreach ($eventos as $i => $evento)
|
|
<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>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
var eventos = {
|
|
eventos: [
|
|
@foreach ($eventos as $evento)
|
|
{
|
|
titulo: '{{$evento->titulo}}',
|
|
image: '{!!$evento->imagen!!}',
|
|
empresa: '{{$evento->empresa}}',
|
|
servicio: '{{$evento->servicio}}'
|
|
},
|
|
@endforeach
|
|
],
|
|
current_tab: 'none',
|
|
changeEventos: (filter) => {
|
|
var grid = $('#eventos_cards')
|
|
grid.html('')
|
|
$.each(eventos.eventos, function(i, el) {
|
|
if (filter != 'none' && el.servicio != filter) {
|
|
return
|
|
}
|
|
grid.append(
|
|
$('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
|
|
$('<div></div>').attr('class', 'ui basic segment').append(
|
|
$('<a></a>').attr('href', '{{$urls->base}}/evento/' + i).append(
|
|
$('<div></div>').attr('class', 'ui image').append(
|
|
$('<img />').attr('src', el.image)
|
|
)
|
|
).append(
|
|
$('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
|
|
$('<br />')
|
|
).append(el.empresa)
|
|
)
|
|
)
|
|
)
|
|
)
|
|
})
|
|
},
|
|
changeTab: (filter) => {
|
|
$('.servicio.active').removeClass('active')
|
|
$(".servicio[data-filter='" + filter + "']").addClass('active')
|
|
eventos.current_tab = filter
|
|
},
|
|
setup: () => {
|
|
$('.servicio').click(function(e) {
|
|
e.preventDefault()
|
|
var filter = $(this).attr('data-filter')
|
|
if (filter == eventos.current_tab) {
|
|
return
|
|
}
|
|
eventos.changeTab(filter)
|
|
eventos.changeEventos(filter)
|
|
})
|
|
}
|
|
}
|
|
$(document).ready(function() {
|
|
eventos.setup()
|
|
})
|
|
</script>
|
|
@endpush
|