Listado proyectos

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

@@ -0,0 +1,194 @@
+@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