497 lines
21 KiB
PHP
497 lines
21 KiB
PHP
@extends('layout.base')
|
|
|
|
@section('page_title')
|
|
Proyecto {{$proyecto->descripcion}}
|
|
@endsection
|
|
|
|
@section('page_content')
|
|
<div class="ui container">
|
|
<h2 class="ui header">
|
|
Proyecto {{$proyecto->descripcion}} - {{$proyecto->inmobiliaria()->razon}}
|
|
</h2>
|
|
@php
|
|
$today = new DateTimeImmutable();
|
|
@endphp
|
|
<table class="ui striped table">
|
|
<tr>
|
|
<td>Dirección</td>
|
|
<td>{{$proyecto->direccion()}} <a href="#" id="edit_direccion_button"><i class="small edit icon"></i></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Inmobiliaria</td>
|
|
<td>{{$proyecto->inmobiliaria()->nombreCompleto()}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Inicio</td>
|
|
<td>
|
|
{{$proyecto->estados()[0]->tipoEstadoProyecto->descripcion}}
|
|
[{{$proyecto->estados()[0]->tipoEstadoProyecto->etapa->descripcion}}]
|
|
({{$proyecto->estados()[0]->fecha->format('d-m-Y')}})
|
|
({{$today->diff($proyecto->estados()[0]->fecha)->format('%y años antes')}})
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Estado</td>
|
|
<td>
|
|
{{$proyecto->currentEstado()->tipoEstadoProyecto->descripcion}}
|
|
[{{$proyecto->currentEstado()->tipoEstadoProyecto->etapa->descripcion}}]
|
|
({{$proyecto->currentEstado()->fecha->format('d-m-Y')}})
|
|
({{$today->diff($proyecto->currentEstado()->fecha)->format('%y años antes')}})
|
|
<span class="ui blue text" id="estados_avanzar" style="cursor: pointer;">
|
|
<i class="right chevron icon"></i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Terreno</td>
|
|
<td>
|
|
<table class="ui very basic striped table">
|
|
<tr>
|
|
<td>
|
|
{{$format->number($proyecto->terreno->superficie, 2)}}m²
|
|
</td>
|
|
<td>
|
|
{{$format->pesos($proyecto->terreno->valor)}} ({{$proyecto->terreno->fecha?->format('d-m-Y')}})
|
|
</td>
|
|
<td>
|
|
<a href="{{$urls->base}}/proyecto/{{$proyecto->id}}/terreno">
|
|
<i class="edit icon"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Superficies</td>
|
|
<td>
|
|
<table class="ui very basic striped table">
|
|
<tr>
|
|
<td>
|
|
<strong>
|
|
Total
|
|
</strong>
|
|
</td>
|
|
<td>
|
|
<strong>
|
|
{{$format->number($proyecto->superficie->total(), 2)}}m²
|
|
</strong>
|
|
</td>
|
|
<td rowspan="6" id="chart_superficies" class="six wide"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bajo Nivel</td>
|
|
<td>{{$format->number($proyecto->superficie->bajo_nivel, 2)}}m²</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sobre Nivel</td>
|
|
<td>{{$format->number($proyecto->superficie->sobre_nivel, 2)}}m²</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>
|
|
Vendible
|
|
</strong>
|
|
</td>
|
|
<td>
|
|
<strong id="superficie_vendible"></strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Vendido</td>
|
|
<td id="superficie_vendido"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Por Vender</td>
|
|
<td id="superficie_por_vender"></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Unidades</td>
|
|
<td id="unidades"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Ventas</td>
|
|
<td id="ventas"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Stock</td>
|
|
<td id="stock"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Proyección</td>
|
|
<td id="proyeccion"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" id="chart_venta_general"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" id="chart_venta_tipologias"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2" id="chart_venta_velocidad"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
@endsection
|
|
|
|
@include('proyectos.show.edit_direccion')
|
|
@include('layout.body.scripts.chartjs')
|
|
|
|
@push('page_scripts')
|
|
<script>
|
|
const superficies = {
|
|
ids: {
|
|
vendible: '',
|
|
vendido: '',
|
|
por_vender: '',
|
|
chart: ''
|
|
},
|
|
data: {},
|
|
chart_obj: null,
|
|
get: function() {
|
|
return {
|
|
superficies: () => {
|
|
const url = '{{$urls->api}}/proyecto/{{$proyecto->id}}/superficies/vendible'
|
|
return fetchAPI(url).then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
this.data = data
|
|
this.fill()
|
|
this.chart()
|
|
})
|
|
}
|
|
}
|
|
},
|
|
fill: function() {
|
|
$(this.ids.vendible).html(this.data.formatted.vendible)
|
|
$(this.ids.vendido).html(this.data.formatted.vendido)
|
|
$(this.ids.por_vender).html(this.data.formatted.por_vender)
|
|
},
|
|
chart: function() {
|
|
const container = $(this.ids.chart)
|
|
container.html('')
|
|
this.chart_obj = null
|
|
const ctx = $('<canvas></canvas>').attr('width', '100')
|
|
container.append(ctx)
|
|
const data = {
|
|
labels: [
|
|
'Vendida',
|
|
'Por Vender'
|
|
],
|
|
datasets: [
|
|
{
|
|
label: 'Superficies',
|
|
data: [
|
|
this.data.superficies.vendido,
|
|
this.data.superficies.por_vender
|
|
],
|
|
backgroundColor: [
|
|
'green',
|
|
'red'
|
|
]
|
|
}
|
|
]
|
|
}
|
|
const options = {
|
|
type: 'pie',
|
|
data
|
|
}
|
|
|
|
this.chart_obj = new Chart(ctx, options)
|
|
},
|
|
setup: function({id_vendible, id_vendido, id_por_vender, id_chart}) {
|
|
this.ids.vendible = id_vendible
|
|
this.ids.vendido = id_vendido
|
|
this.ids.por_vender = id_por_vender
|
|
this.ids.chart = id_chart
|
|
|
|
this.get().superficies()
|
|
}
|
|
}
|
|
const unidades = {
|
|
id: '',
|
|
data: {},
|
|
get: function() {
|
|
const url = '{{$urls->api}}/proyecto/{{$proyecto->id}}/unidades'
|
|
return fetchAPI(url).then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
this.data = data
|
|
this.draw()
|
|
})
|
|
},
|
|
draw: function() {
|
|
const parent = $(this.id)
|
|
const table = $('<table></table>').addClass('ui very basic striped table')
|
|
Object.entries(this.data.unidades).forEach(([tipo, unidades]) => {
|
|
tipo = tipo.charAt(0).toUpperCase() + tipo.slice(1) + 's'
|
|
table.append(
|
|
$('<tr></tr>').append(
|
|
$('<td></td>').html(tipo)
|
|
).append(
|
|
$('<td></td>').html(unidades.length)
|
|
)
|
|
)
|
|
})
|
|
parent.append(table)
|
|
},
|
|
setup: function(id) {
|
|
this.id = id
|
|
this.get()
|
|
}
|
|
}
|
|
const ventas = {
|
|
ids: {
|
|
ventas: '',
|
|
stock: '',
|
|
proyeccion: '',
|
|
charts: {
|
|
general: '',
|
|
tipologias: '',
|
|
velocidad: ''
|
|
}
|
|
},
|
|
data: {
|
|
ventas: {
|
|
unidades: {},
|
|
valores: {
|
|
total: 0,
|
|
promedio: 0,
|
|
bonos: 0,
|
|
promociones: 0,
|
|
operadores: 0,
|
|
metro: 0,
|
|
},
|
|
superficies: {
|
|
total: 0,
|
|
promedio: 0
|
|
}
|
|
},
|
|
stock: {
|
|
unidades: {},
|
|
valores: {
|
|
total: 0,
|
|
promedio: 0,
|
|
bonos: 0,
|
|
promociones: 0,
|
|
operadores: 0,
|
|
metro: 0,
|
|
},
|
|
superficies: {
|
|
total: 0,
|
|
promedio: 0
|
|
}
|
|
}
|
|
},
|
|
get: function() {
|
|
return {
|
|
ventas: () => {
|
|
const url = '{{$urls->api}}/ventas'
|
|
return fetchAPI(url, {method: 'post', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({proyecto_id: '{{$proyecto->id}}'})}).then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
const promises = []
|
|
data.ventas.forEach(venta_id => {
|
|
promises.push(this.get().venta(venta_id))
|
|
})
|
|
return Promise.all(promises).then(() => {
|
|
const cantidad_total = Object.values(this.data.ventas.unidades).reduce((sum, cantidad) => sum + cantidad, 0)
|
|
this.data.ventas.valores.promedio = this.data.ventas.valores.total / cantidad_total
|
|
this.data.ventas.superficies.promedio = this.data.ventas.superficies.total / cantidad_total
|
|
this.data.ventas.valores.metro = this.data.ventas.valores.total / this.data.ventas.superficies.total
|
|
this.draw().ventas()
|
|
})
|
|
})
|
|
},
|
|
stock: () => {
|
|
const url = '{{$urls->api}}/proyecto/{{$proyecto->id}}/unidades/disponibles'
|
|
return fetchAPI(url).then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
const promises = []
|
|
data.unidades.forEach(unidad => {
|
|
this.add().unidad(unidad)
|
|
promises.push(this.get().precio(unidad.id))
|
|
})
|
|
return Promise.all(promises).then(() => {
|
|
const cantidad_total = Object.values(this.data.stock.unidades).reduce((sum, cantidad) => sum + cantidad, 0)
|
|
this.data.stock.valores.promedio = this.data.stock.valores.total / cantidad_total
|
|
this.data.stock.superficies.promedio = this.data.stock.superficies.total / cantidad_total
|
|
this.data.stock.valores.metro = this.data.stock.valores.total / this.data.stock.superficies.total
|
|
this.draw().stock()
|
|
})
|
|
})
|
|
},
|
|
venta: venta_id => {
|
|
const url = '{{$urls->api}}/venta/' + venta_id
|
|
return fetchAPI(url).then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
this.add().venta(data.venta)
|
|
})
|
|
},
|
|
precio: unidad_id => {
|
|
const url = '{{$urls->api}}/ventas/precio/unidad/' + unidad_id
|
|
return fetchAPI(url).then(response => {
|
|
if (response.ok) {
|
|
if (response.status === 204) {
|
|
return null
|
|
}
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
if (data === null) {
|
|
return
|
|
}
|
|
this.add().precio(data.precio)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
add: function() {
|
|
return {
|
|
venta: venta => {
|
|
Object.entries(venta.propiedad).forEach(([tipo, unidades]) => {
|
|
if (tipo === 'summary') {
|
|
return
|
|
}
|
|
tipo = tipo.charAt(0).toUpperCase() + tipo.slice(1)
|
|
if (typeof this.data.ventas.unidades[tipo] === 'undefined') {
|
|
this.data.ventas.unidades[tipo] = 0
|
|
}
|
|
this.data.ventas.unidades[tipo] ++
|
|
this.data.ventas.superficies.total += unidades.reduce((sum, unidad) => sum + unidad.proyecto_tipo_unidad.vendible, 0)
|
|
this.data.ventas.valores.total += venta.valor
|
|
if (venta.forma_pago.bono_pie !== null) {
|
|
this.data.ventas.valores.bonos += venta.forma_pago.bono_pie
|
|
}
|
|
})
|
|
},
|
|
unidad: unidad => {
|
|
let tipo = unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
tipo = tipo.charAt(0).toUpperCase() + tipo.slice(1) + 's'
|
|
if (typeof this.data.stock.unidades[tipo] === 'undefined') {
|
|
this.data.stock.unidades[tipo] = 0
|
|
}
|
|
this.data.stock.unidades[tipo] ++
|
|
this.data.ventas.superficies.total += unidad.proyecto_tipo_unidad.vendible
|
|
},
|
|
precio: precio => {
|
|
this.data.stock.valores.total += precio.valor
|
|
}
|
|
}
|
|
},
|
|
draw: function() {
|
|
return {
|
|
loading: parent => {
|
|
parent.html('')
|
|
parent.append(
|
|
$('<div></div>').addClass('ui active inline loader')
|
|
)
|
|
},
|
|
ventas: () => {
|
|
const parent = $(this.ids.ventas)
|
|
parent.html('')
|
|
this.draw().table(parent, this.data.ventas)
|
|
},
|
|
stock: () => {
|
|
const parent = $(this.ids.stock)
|
|
parent.html('')
|
|
this.draw().table(parent, this.data.stock)
|
|
},
|
|
proyeccion: () => {
|
|
|
|
},
|
|
table: (parent, data) => {
|
|
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
|
const table = $('<table></table>').addClass('ui very basic striped table')
|
|
let row = $('<tr></tr>')
|
|
let row2 = $('<tr></tr>')
|
|
Object.entries(data.unidades).forEach(([tipo, cantidad]) => {
|
|
row.append(
|
|
$('<td></td>').html(tipo)
|
|
)
|
|
row2.append(
|
|
$('<td></td>').html(cantidad)
|
|
)
|
|
})
|
|
table.append(row).append(row2)
|
|
row = $('<tr></tr>').append(
|
|
$('<td></td>').html('Valor Total [UF]')
|
|
).append(
|
|
$('<td></td>').html('Valor Promedio [UF]')
|
|
).append(
|
|
$('<td></td>').html('Valor Metro [UF/m²]')
|
|
)
|
|
table.append(row)
|
|
row = $('<tr></tr>').append(
|
|
$('<td></td>').html(formatter.format(data.valores.total))
|
|
).append(
|
|
$('<td></td>').html(formatter.format(data.valores.promedio))
|
|
).append(
|
|
$('<td></td>').html(formatter.format(data.valores.metro))
|
|
)
|
|
table.append(row)
|
|
parent.append(table)
|
|
}
|
|
}
|
|
},
|
|
chart: function() {
|
|
return {
|
|
general: () => {},
|
|
tipologias: () => {},
|
|
velocidad: () => {}
|
|
}
|
|
},
|
|
setup: function({id_ventas, id_stock, id_proyeccion, id_chart_general, id_chart_tipologias, id_chart_velocidad}) {
|
|
this.ids.ventas = id_ventas
|
|
this.ids.stock = id_stock
|
|
this.ids.proyeccion = id_proyeccion
|
|
this.ids.charts.general = id_chart_general
|
|
this.ids.charts.tipologias = id_chart_tipologias
|
|
this.ids.charts.velocidad = id_chart_velocidad
|
|
|
|
const promises = []
|
|
promises.push(this.get().ventas())
|
|
promises.push(this.get().stock())
|
|
Promise.all(promises).then(() => {
|
|
this.draw().proyeccion()
|
|
this.chart().general()
|
|
this.chart().tipologias()
|
|
this.chart().velocidad()
|
|
})
|
|
}
|
|
}
|
|
$(document).ready(() => {
|
|
$('#estados_avanzar').click(event => {
|
|
alert('Avanzar')
|
|
})
|
|
superficies.setup({id_vendible: '#superficie_vendible', id_vendido: '#superficie_vendido',
|
|
id_por_vender: '#superficie_por_vender', id_chart: '#chart_superficies'})
|
|
unidades.setup('#unidades')
|
|
ventas.setup({id_ventas: '#ventas', id_stock: '#stock', id_proyeccion: '#proyeccion',
|
|
id_chart_general: '#chart_venta_general', id_chart_tipologias: '#chart_venta_tipologia',
|
|
id_chart_velocidad: '#chart_venta_velocidad'})
|
|
|
|
document.getElementById('edit_direccion_button').addEventListener('click', event => {
|
|
event.preventDefault()
|
|
$('#edit_direccion_modal').modal('show')
|
|
})
|
|
})
|
|
</script>
|
|
@endpush
|