ui/public/js/home.js

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()
    }
}