Zona de administracion para agregar eventos y subir imagenes

This commit is contained in:
2020-06-16 22:44:48 -04:00
parent c09165529f
commit b943a21890
32 changed files with 1228 additions and 97 deletions

View File

@ -0,0 +1,46 @@
@extends('admin.layout.base')
@section('page_content')
<div class="ui container">
<div class="ui header">
Eventos
</div>
<table class="ui collapsing table">
<thead>
<tr>
<th colspan="3" class="right aligned">
<a href="{{$urls->admin}}/eventos/add">
<button class="ui blue button">
Agregar
</button>
</a>
</th>
</tr>
<tr>
<th>Evento</th>
<th>Editar</th>
<th>Borrar</th>
</tr>
</thead>
<tbody>
@foreach ($eventos as $i => $evento)
<tr>
<td>
{{($evento->empresa != '') ? implode(', ', [$evento->titulo, $evento->empresa]) : $evento->titulo}}
</td>
<td>
<a href="{{$urls->admin}}/evento/{{$i}}">
<i class="edit icon"></i>
</a>
</td>
<td>
<a href="{{$urls->admin}}/evento/{{$i}}/delete">
<i class="trash icon"></i>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection

View File

@ -0,0 +1,77 @@
@extends('admin.layout.base')
@section('page_content')
<div class="ui container">
<h1 class="ui header">
Evento
</h1>
<br />
<form class="ui form" method="post" action="{{$urls->admin}}/eventos/add">
<div class="ui grid">
<div class="row">
<div class="two wide column">
<div class="ui header">
Titulo
</div>
</div>
<div class="ten wide column">
<div class="ui fluid input">
<input type="text" name="titulo" value="{{$evento->titulo}}" />
</div>
</div>
</div>
<div class="row">
<div class="two wide column">
<div class="ui header">
Empresa
</div>
</div>
<div class="six wide column">
<div class="ui fluid input">
<input type="text" name="empresa" value="{{$evento->empresa}}" />
</div>
</div>
<div class="two wide column">
</div>
<div class="six wide column">
<div class="ui selection dropdown" id="servicio">
<input type="hidden" name="servicio" value="{{$evento->servicio}}" />
<i class="dropdown icon"></i>
<div class="default text">Servicio</div>
<div class="menu">
@foreach ($servicios as $servicio)
<div class="item" data-value="{{$servicio->titulo}}">{{$servicio->titulo}}</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="row">
<div class="two wide column">
<div class="ui header">
Descripcion
</div>
</div>
<div class="eight wide column">
<div class="ui fluid input">
<textarea name="descripcion">{{$evento->descripcion}}</textarea>
</div>
</div>
</div>
<div class="row">
<div class="two wide column">
<button class="ui fluid button">Guardar</button>
</div>
</div>
</div>
</form>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(() => {
$('#servicio').dropdown()
})
</script>
@endpush

View File

@ -0,0 +1,190 @@
@extends('admin.layout.base')
@section('page_content')
<div class="ui container">
<h1 class="ui header">
Evento
</h1>
<br />
<form class="ui form" method="post" action="{{$urls->admin}}/evento/{{$evento->id}}/edit">
<div class="ui grid">
<div class="row">
<div class="two wide column">
<div class="ui header">
Titulo
</div>
</div>
<div class="ten wide column">
<div class="ui fluid input">
<input type="text" name="titulo" value="{{$evento->titulo}}" />
</div>
</div>
</div>
<div class="row">
<div class="two wide column">
<div class="ui header">
Empresa
</div>
</div>
<div class="six wide column">
<div class="ui fluid input">
<input type="text" name="empresa" value="{{$evento->empresa}}" />
</div>
</div>
<div class="two wide column">
</div>
<div class="six wide column">
<div class="ui selection dropdown" id="servicio">
<input type="hidden" name="servicio" value="{{$evento->servicio}}" />
<i class="dropdown icon"></i>
<div class="default text">Servicio</div>
<div class="menu">
@foreach ($servicios as $servicio)
<div class="item" data-value="{{$servicio->titulo}}">{{$servicio->titulo}}</div>
@endforeach
</div>
</div>
</div>
</div>
<div class="row">
<div class="two wide column">
<div class="ui header">
Descripcion
</div>
</div>
<div class="eight wide column">
<div class="ui fluid input">
<textarea name="descripcion">{{$evento->descripcion}}</textarea>
</div>
</div>
</div>
<div class="row">
<div class="two wide column">
<button class="ui fluid button">Guardar</button>
</div>
</div>
</div>
</form>
<div class="ui header">
Media
</div>
<table class="ui collapsing table" id="imagenes">
<thead>
<tr>
<th colspan="2" class="right aligned">
<i class="plus icon" id="agregar_imagen"></i>
</th>
</tr>
<tr>
<th>Archivo</th>
<th>Borrar</th>
</tr>
</thead>
<tbody>
@if ($imagenes)
@foreach (array_values($imagenes) as $i => $imagen)
<tr>
<td>{{$imagen->media->n}}</td>
<td>
<i class="trash icon" data-media="{{$i}}"></i>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
var imagenes = {
imagenes: [
@if ($imagenes)
@foreach (array_values($imagenes) as $imagen)
'{{$imagen->media->n}}',
@endforeach
@endif
],
setup: () => {
$('#agregar_imagen').css('cursor', 'pointer').click(() => {
imagenes.add()
})
$('.trash.icon').css('cursor', 'pointer').click(function() {
let i = $(this).attr('data-media')
imagenes.deleteImage(i)
})
},
add: () => {
var imgs = $('#imagenes')
var div = imgs.next('.modal')
if (div.length > 0) {
div.remove()
}
div = $('<div></div>').attr('class', 'ui modal').append(
$('<i></i>').attr('class', 'inside close icon')
)
if (imagenes.imagenes.length >= 12) {
div.append(
$('<div></div>').attr('class', 'header').html('Media')
).append(
$('<div></div>').attr('class', 'content').html('Se ha llegado al máximo de media.')
)
imgs.after(div)
div.modal('show')
return
}
div.append(
$('<div></div>').attr('class', 'header').html('Media')
).append(
$('<div></div>').attr('class', 'content').append(
$('<form></form>').attr('class', 'ui form').attr('id', 'add_image').append(
$('<div></div>').attr('class', 'ui fluid input').append(
$('<input />').attr('type', 'file').attr('name', 'imagen[]').attr('multiple', 'multiple')
)
).append(
$('<button></button>').attr('class', 'ui button').html('Agregar')
)
)
)
imgs.after(div)
div.modal('show')
div.find('form').submit((e) => {
e.preventDefault()
imagenes.addImage()
return false
})
},
addImage: () => {
let form = $('#add_image')
let data = new FormData(form[0])
let url = '{{$urls->admin}}/evento/{{$evento->id}}/add'
$.ajax({
url: url,
data: data,
processData: false,
contentType: false,
type: 'POST',
success: (output) => {
if (output.estado) {
window.location.reload()
}
}
})
},
deleteImage: (i) => {
let media = imagenes.imagenes[i]
let url = '{{$urls->admin}}/evento/{{$evento->id}}/image/delete'
$.post(url, {media: media}, (output) => {
if (output.estado) {
window.location.reload()
}
})
}
}
$(document).ready(() => {
$('#servicio').dropdown()
imagenes.setup()
})
</script>
@endpush

View File

@ -0,0 +1,5 @@
<!DOCTYPE html>
<html lang="es">
@include('admin.layout.head')
@include('admin.layout.body')
</html>

View File

@ -0,0 +1,6 @@
<body>
@include('admin.layout.header')
@yield('page_content')
<br />
@include('admin.layout.footer')
</body>

View File

@ -0,0 +1,21 @@
<footer class="ui fixed">
<div class="dark-grey">
<div class="ui inverted container main">
<div class="ui stackable grid">
<div class="three columns row">
<div class="middle aligned column">
@include('layout.footer.contacto')
</div>
<div class="middle aligned column">
@include('layout.footer.ubicacion')
</div>
<div class="middle aligned column">
@include('layout.footer.redes')
</div>
</div>
</div>
</div>
</div>
@include('admin.layout.footer.menu')
</footer>
@include('admin.layout.scripts')

View File

@ -0,0 +1,15 @@
<div style="text-align: center;">
<a href="{{$urls->base}}/#contacto">
<i class="big icon icon-contacto"></i>
<p>
<strong>
CONTACTO
</strong>
</p>
</a>
<p>
<a href="tel:56 9 9334 3645">+56 9 9334 3645</a>
<br />
<a href="mailto:mauriciogonzalez@totalsport.cl">mauriciogonzalez@totalsport.cl</a>
</p>
</div>

View File

@ -0,0 +1,24 @@
<div class="grey">
<nav class="ui container attached text stackable 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}}/#clientes">
Clientes
</a>
<a class="item" href="{{$urls->base}}/#eventos">
Eventos
</a>
<a class="item" href="{{$urls->base}}/#contacto">
Contacto
</a>
<div class="right menu">
<div class="item">
Copyright Todos los derechos reservados a ProVM&copy;
</div>
</div>
</nav>
</div>

View File

@ -0,0 +1,17 @@
<div class="ui five columns center aligned grid">
<div class="column">
<i class="youtube big icon"></i>
</div>
<div class="column">
<i class="instagram big icon"></i>
</div>
<div class="column">
<i class="facebook big icon"></i>
</div>
<div class="column">
<i class="linkedin big icon"></i>
</div>
<div class="column">
<i class="twitter big icon"></i>
</div>
</div>

View File

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

View File

@ -0,0 +1,8 @@
<head>
<meta charset="utf-8" />
<title>
Total Sport
@yield('page_title')
</title>
@include('admin.layout.styles')
</head>

View File

@ -0,0 +1,3 @@
<div class="ui container">
@include('admin.layout.menu')
</div>

View File

@ -0,0 +1,13 @@
<nav class="ui massive stackable center aligned text three item grey menu">
<div class="left three item menu">
<a class="item" href="{{$urls->admin}}/eventos">Eventos</a>
</div>
<a class="item" href="{{$urls->admin}}">
<div class="ui header" id="page_logo">
Total<span class="brand">Sport</span>
</div>
</a>
<div class="right two item menu">
<a class="item" href="{{$urls->base}}">Salir</a>
</div>
</nav>

View File

@ -0,0 +1,7 @@
@if (isset($assets->scripts))
@foreach ($assets->scripts as $script)
<script type="text/javascript" src="{{$script}}"></script>
@endforeach
@endif
@stack('scripts')

View File

@ -0,0 +1,14 @@
@if (isset($assets->styles))
@foreach ($assets->styles as $style)
<link rel="stylesheet" type="text/css" href="{{$style}}" />
@endforeach
@endif
@if (isset($assets->fonts))
@foreach ($assets->fonts as $type => $fs)
@foreach ($fs as $font)
<link type="{{$type}}" href="{{$font}}" />
@endforeach
@endforeach
@endif
@stack('styles')

View File

@ -5,8 +5,12 @@
<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 class="ui image" id="seleccionada">
@if ($imagenes !== false)
{!!array_values($imagenes)[0]->media->html!!}
@else
Imagen no encontrada.
@endif
</div>
</div>
<div class="column">
@ -25,13 +29,19 @@
{{$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" />
@if ($imagenes !== false)
@foreach (array_values($imagenes) as $i => $imagen)
<div class="column">
<div class="ui image imagen" data-id="{{$i}}">
{!!$imagen->thumb->html!!}
</div>
</div>
@endforeach
@else
<div class="column">
No hay imagenes.
</div>
@endforeach
@endif
</div>
</div>
</div>
@ -45,10 +55,16 @@
@push('scripts')
<script type="text/javascript">
var media = [
@foreach ($imagenes as $media)
'{!!$media->media->html!!}',
@endforeach
]
$(document).ready(function() {
$('.imagen').css('cursor', 'pointer').click(function() {
var src = $(this).attr('src')
$('#seleccionada').attr('src', src)
var id = $(this).attr('data-id')
var src = media[id]
$('#seleccionada').html(src)
})
})
</script>

View File

@ -19,7 +19,7 @@
<div class="ui basic segment">
<a href="{{$urls->base}}/evento/{{$i}}">
<div class="ui image">
<img src="{{$evento->imagen}}" />
{!!$evento->imagen!!}
</div>
<div class="ui center aligned header">
{{$evento->titulo}}
@ -36,56 +36,61 @@
@push('scripts')
<script type="text/javascript">
var eventos = [
@foreach ($eventos as $evento)
{
titulo: '{{$evento->titulo}}',
image: '{{$evento->imagen}}',
empresa: '{{$evento->empresa}}',
servicio: '{{$evento->servicio}}'
},
@endforeach
];
function changeEventos(filter) {
var grid = $('#eventos_cards')
grid.html('')
$.each(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)
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)
)
).append(
$('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
$('<br />')
).append(el.empresa)
)
)
)
)
})
}
var current_tab = 'none'
function changeTab(filter) {
$('.servicio.active').removeClass('active')
$(".servicio[data-filter='" + filter + "']").addClass('active')
current_tab = filter
})
},
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() {
$('.servicio').click(function(e) {
e.preventDefault()
var filter = $(this).attr('data-filter')
if (filter == current_tab) {
return
}
changeTab(filter)
changeEventos(filter)
})
eventos.setup()
})
</script>
@endpush