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

@extends('layout.base')

@section('page_content')
    <div class="ui container">
        <h2 class="ui header">Unidades por Proyecto</h2>
        <h4 class="ui dividing header">
            <div class="ui two column grid">
                <div id="list_title" class="column">Proyectos</div>
                <div class="right aligned column">
                    <div class="ui tiny icon buttons">
                        <button id="up_button" class="ui button">
                            <i class="up arrow icon"></i>
                        </button>
                        <button id="refresh_button" class="ui button">
                            <i class="refresh icon"></i>
                        </button>
                    </div>
                    <button class="ui tiny green icon button" id="add_button">
                        <i class="plus icon"></i>
                    </button>
                </div>
            </div>
        </h4>
        <div id="proyectos" class="ui link selection list">
            @foreach ($proyectos as $proyecto)
                <div class="item" data-proyecto="{{$proyecto->id}}">{{$proyecto->descripcion}}</div>
            @endforeach
        </div>
        <table class="ui table" id="data"></table>
    </div>
@endsection

@push('page_styles')
    <style>
        .show-unidades, .linea {
            cursor: pointer;
        }
    </style>
@endpush

@push('page_scripts')
    <script>
        class Unidad
        {
            id
            descripcion
            piso
            linea

            constructor({id, descripcion, piso, linea})
            {
                this.id = id
                this.descripcion = descripcion
                this.piso = piso
                this.linea = linea
            }
            draw(parent)
            {
                const row = $('<tr></tr>').addClass('unidad').attr('data-linea', linea).append(
                    $('<td></td>').html(this.descripcion)
                ).append(
                    $('<td></td>').html(this.piso)
                ).append(
                    $('<td></td>').addClass('right aligned').append(
                        $('<button></button>').addClass('ui yellow icon button').attr('type', 'button').append(
                            $('<i></i>').addClass('edit icon')
                        )
                    ).append(
                        $('<button></button>').addClass('ui red icon button').attr('type', 'button').append(
                            $('<i></i>').addClass('remove icon')
                        )
                    )
                )
                parent.append(row)
            }
        }
        class Linea
        {
            numero
            orientacion

            unidades
            constructor({numero, orientacion})
            {
                this.numero = numero
                this.orientacion = orientacion
                this.unidades = []
            }
            get cantidad()
            {
                return this.unidades.length
            }
            get pisos()
            {
                if (this.cantidad === 0) {
                    return ''
                }
                const pisos = this.unidades.map(unidad => unidad.piso)
                return Math.min(pisos) + ' - ' + Math.max(pisos)
            }
            get descripcion()
            {
                return 'Linea ' + this.numero
            }
            draw(parent)
            {
                const row = $('<tr></tr>').addClass('linea').attr('data-id', this.numero).attr('data-status', 'closed').append(
                    $('<td></td>').append(
                        $('<strong></strong>').html(this.descripcion)
                    ).append(
                        $('<i></i>').addClass('caret right icon')
                    )
                ).append(
                    $('<td></td>').append(
                        $('<stong></stong>').html(this.orientacion)
                    )
                ).append($('<td></td>'))
                parent.append(row)
                this.unidades.forEach(unidad => {
                    unidad.draw(parent)
                })
            }
        }
        class ProyectoTipoUnidad
        {
            id
            descripcion
            tipo
            tipologia
            superficies

            lineas

            constructor({id, descripcion, tipo, tipologia, superficies})
            {
                this.id = id
                this.descripcion = descripcion
                this.tipo = tipo
                this.tipologia = tipologia
                this.superficies = superficies

                this.lineas = []
            }


            get cantidad()
            {
                return this.lineas.reduce((sum, linea) => sum + linea.cantidad)
            }

            draw(parent)
            {
                const row = $('<tr></tr>').addClass('proyecto_tipo_unidad').attr('data-id', this.id).attr('data-status', 'closed').append(
                    $('<td></td>').append(this.tipo.descripcion).append(
                        $('<i></i>').addClass('caret icon right')
                    )
                ).append(
                    $('<td></td>').html(this.descripcion)
                ).append(
                    $('<td></td>').html(this.tipologia.abreviacion)
                ).append(
                    $('<td></td>').html(this.cantidad)
                ).append(
                    $('<td></td>').html(this.lineas.map(linea => linea.numero).join(' - '))
                ).append(
                    $('<td></td>').html(this.superficies.interior)
                ).append(
                    $('<td></td>').html(this.superficies.terraza)
                ).append(
                    $('<td></td>').html(this.superficies.vendible)
                ).append(
                    $('<td></td>').html(this.superficies.total)
                ).append(
                    $('<td></td>').html(this.tipologia.descripcion)
                )
                parent.append(row)
                const tbody = $('<tbody></tbody>')
                this.lineas.forEach(linea => {
                    linea.draw(tbody)
                })
                const table = $('<table></table>').addClass('ui table').append(
                    $('<thead></thead>').append(
                        $('<th></th>').html('Unidad')
                    ).append(
                        $('<th></th>').html('Orientacion')
                    ).append(
                        $('<th></th>').html('Cantidad<br />Piso')
                    )
                ).append(tbody)

                const line_row = $('<tr></tr>').addClass('unidades').attr('data-tipo', this.id).append(
                    $('<td></td>')
                ).append(
                    $('<td></td>').attr('colspan', 9).append(table)
                )
                parent.append(line_row)
            }
        }
        const proyectos = {
            ids: {},
            tipos: [],
            get: function() {
                return {
                    tipos: proyecto_id => {
                        const url = '{{$urls->api}}/proyecto/' + proyecto_id + '/unidades/tipos'
                        return fetchAPI(url).then(response => {
                            if (response.ok) {
                                return response.json()
                            }
                        }).then(data => {
                            console.debug(tipos)
                        })
                    }
                }
            },
            setup: function() {
                $('.item.proyecto').click(event => {
                    if (this.loading.precios) {
                        return false
                    }
                    const element = $(event.currentTarget)
                    $('.item.proyecto').css('cursor', 'wait')
                    this.loading.precios = true
                    const proyecto_id = element.data('proyecto')
                    this.get().tipos(proyecto_id)
                })
                $('#data').hide()
            }
        }
        $(document).ready(() => {
            proyectos.setup()
        })
    </script>
@endpush