oficial/app/resources/views/proyectos/list.blade.php

@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Proyectos</h2>
        <table class="ui table">
            <thead>
            <tr>
                <th>Proyecto</th>
                <th>Inmobiliaria</th>
                <th>Etapa</th>
                <th>Estado</th>
                <th>Tiempo Total</th>
            </tr>
            </thead>
            <tbody>
            @foreach ($proyectos as $proyecto)
                <tr class="proyecto" data-id="{{$proyecto->id}}">
                    <td>{{$proyecto->descripcion}}</td>
                    <td>{{$proyecto->inmobiliaria()->nombreCompleto()}}</td>
                    <td class="etapa"></td>
                    <td class="estado"></td>
                    <td class="tiempo"></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript">
        class Proyecto {
            id
            estados

            constructor(id) {
                this.id = id
                this.estados = {
                    start: null,
                    current: null
                }
            }
            get() {
                return {
                    start: () => {
                        return fetch('{{$urls->api}}/proyecto/' + this.id + '/inicio').then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.estados.start = data.estado
                        })
                    },
                    current: () => {
                        return fetch('{{$urls->api}}/proyecto/' + this.id + '/estado').then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            this.estados.current = data.estado
                        })
                    }
                }
            }
            show() {
                const row = $(".proyecto[data-id='" + this.id + "']")
                const today = new Date()
                return {
                    etapa: () => {
                        row.find('.etapa').html(this.estados.current.tipo_estado_proyecto.etapa.descripcion)
                    },
                    current: () => {
                        let estado = this.estados.current.tipo_estado_proyecto.descripcion

                        if (this.estados.current.tipo_estado_proyecto.etapa.descripcion === 'Terminado') {
                            row.find('.estado').html(estado)
                            return
                        }

                        let diff = (today - new Date(this.estados.current.fecha.date)) / (1000 * 60 * 60 * 24)
                        if (isNaN(diff) || diff === 0) {
                            row.find('.estado').html(estado)
                            return
                        }
                        let frame = 'días'
                        if (diff >= 30) {
                            diff /= 30
                            frame = 'meses'
                        }
                        if (diff >= 12) {
                            diff /= 12
                            frame = 'años'
                        }
                        if (diff > 0) {
                            estado += ' (hace ' + Math.floor(diff) + ' ' + frame + ')'
                        }

                        row.find('.estado').html(estado)
                    },
                    tiempo: () => {
                        if (this.estados.current.tipo_estado_proyecto.etapa.descripcion === 'Terminado') {
                            return
                        }
                        let diff = (today - new Date(this.estados.start.fecha.date)) / (1000 * 60 * 60 * 24)
                        if (isNaN(diff) || diff === 0) {
                            return
                        }

                        let frame = 'días'
                        if (diff >= 30) {
                            diff /= 30
                            frame = 'meses'
                        }
                        if (diff >= 12) {
                            diff /= 12
                            frame = 'años'
                        }

                        row.find('.tiempo').html('Hace ' + Math.floor(diff) + ' ' + frame)
                    }
                }
            }
        }
        function showTiempo(proyecto_id, tiempo) {
            if (tiempo.trim() === '') {
                return
            }
            const row = $(".proyecto[data-id='" + proyecto_id + "']")
            row.find('.tiempo').html(tiempo)
        }
        function getEstados(proyecto_id) {
            return fetch('{{$urls->api}}/proyecto/' + proyecto_id + '/estados').then(response => {
                if (response.ok) {
                    return response.json()
                }
            }).then(data => {
                let tiempo = 0
                const current = new Date(data.estados.at(-1).fecha.date)
                const start = new Date(data.estados[0].fecha.date)
                tiempo = (current - start) / (1000 * 60 * 60 * 24)
                if (isNaN(tiempo) || tiempo === 0) {
                    return
                }
                let frame = 'días'
                if (tiempo > 30) {
                    tiempo /= 30
                    frame = 'meses'
                }
                if (tiempo > 12) {
                    tiempo /= 12
                    frame = 'años'
                }
                showTiempo(data.proyecto_id, 'Hace ' + Math.ceil(tiempo) + ' ' + frame)
            })
        }
        function showEtapa(proyecto_id, etapa) {
            const row = $(".proyecto[data-id='" + proyecto_id + "']")
            row.find('.etapa').html(etapa)
        }
        function showEstado(proyecto_id, estado) {
            const row = $(".proyecto[data-id='" + proyecto_id + "']")
            row.find('.estado').html(estado)
        }
        function getEstado(proyecto_id) {
            return fetch('{{$urls->api}}/proyecto/' + proyecto_id + '/estado').then(response => {
                if (response.ok) {
                    return response.json()
                }
            }).then(data => {
                showEtapa(data.proyecto_id, data.estado.tipo_estado_proyecto.etapa.descripcion)
                showEstado(data.proyecto_id, data.estado.tipo_estado_proyecto.descripcion)
            })
        }
        function loadEstados(proyecto_id) {
            const proyecto = new Proyecto(proyecto_id)
            const promises = []
            promises.push(proyecto.get().start())
            promises.push(proyecto.get().current())
            Promise.all(promises).then(() => {
                proyecto.show().etapa()
                proyecto.show().current()
                proyecto.show().tiempo()
            })
        }
        $(document).ready(() => {
            @foreach ($proyectos as $proyecto)
                loadEstados('{{$proyecto->id}}')
                /*getEstado('{{$proyecto->id}}')
                getEstados('{{$proyecto->id}}')*/
            @endforeach
        })
    </script>
@endpush