158 lines
4.1 KiB
JavaScript
158 lines
4.1 KiB
JavaScript
class Elem {
|
|
constructor(tag, attrs, close = true) {
|
|
this.tag = '<' + tag
|
|
if (close) {
|
|
this.tag += '></' + tag + '>'
|
|
} else {
|
|
this.tag += '/>'
|
|
}
|
|
this.attrs = attrs
|
|
this.children = []
|
|
}
|
|
addChild(child) {
|
|
if (typeof child != 'object' || typeof child.tag == 'undefined') {
|
|
return this
|
|
}
|
|
this.children.push(child)
|
|
return this
|
|
}
|
|
html(text) {
|
|
this.text = text
|
|
return this
|
|
}
|
|
build() {
|
|
let obj = $(this.tag)
|
|
$.each(this.attrs, (key, el) => {
|
|
obj.attr(key, el)
|
|
})
|
|
$.each(this.children, (i, el) => {
|
|
obj.append(el.build())
|
|
})
|
|
if (typeof this.text !== 'undefined') {
|
|
obj.html(this.text)
|
|
}
|
|
return obj
|
|
}
|
|
}
|
|
var imagenes = {
|
|
imagenes: [],
|
|
url: '',
|
|
evento: '',
|
|
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)
|
|
})
|
|
},
|
|
buildForm: () => {
|
|
let form = new Elem('form', {class: 'ui form', id: 'add_image'}).addChild(
|
|
new Elem('div', {class: 'ui grid'}).addChild(
|
|
new Elem('div', {class: 'row'}).addChild(
|
|
new Elem('div', {class: 'sixteen wide column'}).addChild(
|
|
new Elem('div', {class: 'ui fluid input'}).addChild(
|
|
new Elem('input', {type: 'file', name: 'imagen[]', multiple: 'multiple'}, false)
|
|
)
|
|
)
|
|
)
|
|
).addChild(
|
|
new Elem('div', {class: 'row'}).addChild(
|
|
new Elem('div', {class: 'two wide column'}).addChild(
|
|
new Elem('div', {class: 'ui fluid button', type: 'submit'}).html('Agregar')
|
|
)
|
|
).addChild(
|
|
new Elem('div', {class: 'fourteen wide column'}).addChild(
|
|
new Elem('div', {id: 'resultado', class: 'ui fluid basic segment'})
|
|
)
|
|
)
|
|
)
|
|
)
|
|
return form.build()
|
|
},
|
|
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(imagenes.buildForm())
|
|
)
|
|
imgs.after(div)
|
|
div.modal('show')
|
|
div.find('form .button').click((e) => {
|
|
div.find('form').submit()
|
|
})
|
|
div.find('form').submit((e) => {
|
|
e.preventDefault()
|
|
imagenes.addImage()
|
|
return false
|
|
})
|
|
},
|
|
addImage: () => {
|
|
let form = $('#add_image')
|
|
$('#resultado').html('')
|
|
$('#resultado').append(
|
|
$('<div></div>').attr('class', 'ui active loader')
|
|
)
|
|
let data = new FormData(form[0])
|
|
let url = imagenes.url + '/evento/' + imagenes.evento + '/add'
|
|
let fallo = () => {
|
|
$('#resultado').html('')
|
|
$('#resultado').append(
|
|
$('<div></div>').attr('class', 'ui negative message')
|
|
.append($('<i></i>').attr('class', 'inline close icon'))
|
|
.append('<p>No se pudo agregar.</p>')
|
|
)
|
|
$('#resultado .message .close').on('click', function() {
|
|
$(this).closest('.message')
|
|
.transition('fade');
|
|
});
|
|
}
|
|
$.ajax({
|
|
url: url,
|
|
data: data,
|
|
processData: false,
|
|
contentType: false,
|
|
type: 'POST',
|
|
success: (output) => {
|
|
if (output.estado) {
|
|
window.location.reload()
|
|
return
|
|
}
|
|
fallo()
|
|
},
|
|
error: () => {
|
|
fallo()
|
|
}
|
|
})
|
|
},
|
|
deleteImage: (i) => {
|
|
let media = imagenes.imagenes[i]
|
|
let url = imagenes.url + '/evento/' + imagenes.evento + '/image/delete'
|
|
$.post(url, {media: media}, (output) => {
|
|
if (output.estado) {
|
|
window.location.reload()
|
|
}
|
|
})
|
|
}
|
|
}
|