Files
This commit is contained in:
238
public/js/home.js
Normal file
238
public/js/home.js
Normal file
@ -0,0 +1,238 @@
|
||||
class ProyectoCantidad {
|
||||
constructor({proyecto = '', cantidad = 0}) {
|
||||
this.proyecto = proyecto
|
||||
this.cantidad = cantidad
|
||||
}
|
||||
draw() {
|
||||
return $('<div></div>').attr('class', 'event').append(
|
||||
$('<div></div>').attr('class', 'content').append(
|
||||
$('<div></div>').attr('class', 'summary').html(this.proyecto)
|
||||
)
|
||||
).append(
|
||||
$('<div></div>').attr('class', 'meta').html(this.cantidad)
|
||||
)
|
||||
}
|
||||
}
|
||||
class Dia {
|
||||
constructor({dia = null, proyectos = []}) {
|
||||
this.dia = dia
|
||||
this.proyectos = []
|
||||
$.each(proyectos, (i, el) => {
|
||||
const pc = new ProyectoCantidad(el)
|
||||
this.proyectos.push(pc)
|
||||
})
|
||||
this.valor_total = false
|
||||
}
|
||||
format() {
|
||||
return {
|
||||
dia: () => {
|
||||
const intl = Intl.DateTimeFormat('es-ES', {day: 'numeric', month: 'long', year: 'numeric', weekday: 'short'})
|
||||
return intl.format(new Date(this.dia.replaceAll('-', '/')))
|
||||
}
|
||||
}
|
||||
}
|
||||
total() {
|
||||
if (!this.valor_total) {
|
||||
this.valor_total = 0
|
||||
$.each(this.proyectos, (i, el) => {
|
||||
this.valor_total += el.cantidad
|
||||
})
|
||||
}
|
||||
return this.valor_total
|
||||
}
|
||||
draw() {
|
||||
const feed = $('<div></div>').attr('class', 'ui feed')
|
||||
$.each(this.proyectos, (i, el) => {
|
||||
feed.append(el.draw())
|
||||
})
|
||||
return $('<div></div>').attr('class', 'item').append(
|
||||
$('<div></div>').attr('class', 'date').append(
|
||||
$('<strong></strong>').html(this.format().dia() + '<br /><small>Total: ' + this.total() + '</small>')
|
||||
)
|
||||
).append(feed)
|
||||
}
|
||||
}
|
||||
class Calendario {
|
||||
constructor({id, token}) {
|
||||
this.id = id
|
||||
this.token = token
|
||||
this.dias = []
|
||||
}
|
||||
get() {
|
||||
return sendGet('/proyectos/cuotas/mes').then((resp) => {
|
||||
if (resp.dias === null || resp.dias.length === 0) {
|
||||
return
|
||||
}
|
||||
$.each(resp.dias, (i, el) => {
|
||||
const dia = new Dia(el)
|
||||
this.dias.push(dia)
|
||||
})
|
||||
}).then(() => {
|
||||
this.draw()
|
||||
})
|
||||
}
|
||||
build(parent_elem) {
|
||||
let parent = parent_elem.find('.ui.list')
|
||||
if (parent.length === 0) {
|
||||
parent_elem.append(
|
||||
$('<div></div>').attr('class', 'ui dividing header').html('Cuotas del próximo mes móvil')
|
||||
)
|
||||
parent = $('<div></div>').attr('class', 'ui divided list')
|
||||
parent_elem.append(parent)
|
||||
}
|
||||
return parent
|
||||
}
|
||||
draw() {
|
||||
const div = $(this.id)
|
||||
const parent = this.build(div)
|
||||
parent.html('')
|
||||
$.each(this.dias, (i, el) => {
|
||||
parent.append(el.draw())
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
class CierresProyecto {
|
||||
constructor({proyecto, total, promesados, pendientes, rechazados, ultimo_pendiente}) {
|
||||
this.proyecto = proyecto
|
||||
this.total = total
|
||||
this.promesados = promesados
|
||||
this.pendientes = pendientes
|
||||
this.rechazados = rechazados
|
||||
this.ultimo_pendiente = ultimo_pendiente
|
||||
}
|
||||
draw() {
|
||||
function event({title, meta, date = ''}) {
|
||||
const event = $('<div></div>').attr('class', 'event')
|
||||
const content = $('<div></div>').attr('class', 'content').append(
|
||||
$('<div></div>').attr('class', 'summary').html(title)
|
||||
)
|
||||
if (date !== '') {
|
||||
content.append(
|
||||
$('<div></div>').attr('class', 'meta').html(date)
|
||||
)
|
||||
}
|
||||
event.append(content).append(
|
||||
$('<div></div>').attr('class', 'meta').html(meta)
|
||||
)
|
||||
return event
|
||||
}
|
||||
return $('<div></div>').attr('class', 'item').append(
|
||||
$('<div></div>').attr('class', 'date').append(
|
||||
$('<strong></strong>').html(this.proyecto)
|
||||
).append(' [' + this.total + ']')
|
||||
).append(
|
||||
$('<div></div>').attr('class', 'ui feed').append(
|
||||
event({
|
||||
title: 'Promesados',
|
||||
meta: this.promesados
|
||||
})
|
||||
).append(
|
||||
event({
|
||||
title: 'Pendientes',
|
||||
meta: this.pendientes,
|
||||
date: (this.pendientes > 0) ? 'Desde ' + this.ultimo_pendiente + ' días atrás' : ''
|
||||
})
|
||||
).append(
|
||||
event({
|
||||
title: 'Rechazados',
|
||||
meta: this.rechazados
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
class Cierres {
|
||||
constructor({id}) {
|
||||
this.id = id
|
||||
this.proyectos = []
|
||||
}
|
||||
get() {
|
||||
return sendGet('/proyectos/cierres').then((resp) => {
|
||||
if (resp.cierres === null || resp.cierres.length === 0) {
|
||||
return
|
||||
}
|
||||
$.each(resp.cierres, (i, el) => {
|
||||
const p = new CierresProyecto(el)
|
||||
this.proyectos.push(p)
|
||||
})
|
||||
}).then(() => {
|
||||
this.draw()
|
||||
})
|
||||
}
|
||||
draw() {
|
||||
const parent = $(this.id)
|
||||
parent.append(
|
||||
$('<div></div>').attr('class', 'ui dividing header').html('Cierres Vigentes')
|
||||
)
|
||||
const list = $('<div></div>').attr('class', 'ui divided list')
|
||||
$.each(this.proyectos, (i, el) => {
|
||||
list.append(el.draw())
|
||||
})
|
||||
parent.append(list)
|
||||
}
|
||||
}
|
||||
const home = {
|
||||
calendario: null,
|
||||
cierres: null,
|
||||
token: 0,
|
||||
hoy: 0,
|
||||
pendientes: 0,
|
||||
get: function() {
|
||||
return {
|
||||
hoy: () => {
|
||||
return sendGet('/proyectos/cuotas/hoy').then((resp) => {
|
||||
this.hoy = resp.hoy
|
||||
}).then(() => {
|
||||
this.draw().hoy()
|
||||
})
|
||||
},
|
||||
pendientes: () => {
|
||||
return sendGet('/proyectos/cuotas/pendientes').then((resp) => {
|
||||
this.pendientes = resp.pendientes
|
||||
}).then(() => {
|
||||
this.draw().pendientes()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function() {
|
||||
return {
|
||||
hoy: () => {
|
||||
if (this.hoy === 0) {
|
||||
return
|
||||
}
|
||||
const parent = $('#hoy')
|
||||
parent.append(
|
||||
$('<div></div>').attr('class', 'row').append(
|
||||
$('<div></div>').attr('class', 'col-md-12').html('Hay ' + this.hoy + ' deposito' + ((this.hoy > 1) ? 's' : '') + ' para hoy.')
|
||||
)
|
||||
)
|
||||
},
|
||||
pendientes: () => {
|
||||
const parent = $('#pendientes')
|
||||
parent.append(
|
||||
$('<div></div>').attr('class', 'row').append(
|
||||
$('<div></div>').attr('class', 'col-md-12').append(
|
||||
$('<a></a>').attr('href', _urls.base + '/cuotas/pendientes')
|
||||
.html('Existe' + ((this.pendientes > 1) ? 'n' : '') + ' ' + this.pendientes + ' cuota' + ((this.pendientes > 1) ? 's' : '') + ' pendiente' + ((this.pendientes > 1) ? 's' : '') + '.').append(
|
||||
$('<span></span>').attr('class', 'glyphicon glyphicon-arrow-right')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
build: function() {
|
||||
this.calendario = new Calendario({id: '#calendario', token: this.token})
|
||||
this.calendario.get()
|
||||
this.cierres = new Cierres({id: '#cierres'})
|
||||
this.cierres.get()
|
||||
},
|
||||
setup: function() {
|
||||
this.get().hoy()
|
||||
this.get().pendientes()
|
||||
this.build()
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user