677 lines
29 KiB
PHP
677 lines
29 KiB
PHP
@extends('layout.base')
|
|
|
|
|
|
@section('page_title')
|
|
Precios - Listado
|
|
@endsection
|
|
|
|
@section('page_content')
|
|
<div class="ui container">
|
|
<h2 class="ui header">Listado de Precios</h2>
|
|
<div id="list">
|
|
<h4 class="ui dividing header">
|
|
<div class="ui two column grid">
|
|
<div id="list_title" class="column"></div>
|
|
<div class="right aligned column">
|
|
<div class="ui tiny icon buttons">
|
|
<button class="ui button" id="up_button">
|
|
<i class="up arrow icon"></i>
|
|
</button>
|
|
<button class="ui button" id="refresh_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 class="ui link selection list" id="proyectos"></div>
|
|
<table class="ui table" id="list_data"></table>
|
|
</div>
|
|
</div>
|
|
<div class="ui modal" id="list_modal">
|
|
<div class="header">
|
|
Actualizar <span id="modal_title"></span>
|
|
<button class="ui right floated icon button"><i class="close icon"></i></button>
|
|
</div>
|
|
<div class="content">
|
|
<div class="ui form">
|
|
<input type="hidden" name="type" value="" />
|
|
<input type="hidden" name="id" value="" />
|
|
<div class="inline field">
|
|
<label for="fecha">Fecha</label>
|
|
<div class="ui calendar" id="fecha">
|
|
<div class="ui input left icon">
|
|
<i class="calendar icon"></i>
|
|
<input type="text" placeholder="Fecha" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inline field">
|
|
<label for="valor">Valor</label>
|
|
<div class="ui right labeled input">
|
|
<input type="text" id="valor" name="valor" />
|
|
<div class="ui basic label">UF</div>
|
|
</div>
|
|
</div>
|
|
<button class="ui button" id="send">
|
|
Actualizar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('page_styles')
|
|
<style>
|
|
.show-unidades, .linea {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('page_scripts')
|
|
<script type="text/javascript">
|
|
class Unidad {
|
|
data = {
|
|
id: 0,
|
|
nombre: '',
|
|
fecha: '',
|
|
precio: 0,
|
|
superficie: 0,
|
|
tipo: '',
|
|
linea: 0
|
|
}
|
|
|
|
constructor({id, nombre, fecha, precio, superficie, tipo, linea}) {
|
|
this.data.id = id
|
|
this.data.nombre = nombre
|
|
this.data.fecha = fecha
|
|
this.data.precio = precio
|
|
this.data.superficie = superficie
|
|
this.data.tipo = tipo
|
|
this.data.linea = linea
|
|
}
|
|
|
|
unitario() {
|
|
return this.data.precio / this.data.superficie
|
|
}
|
|
draw(formatter) {
|
|
const date = new Date(this.data.fecha)
|
|
const dateFormatter = new Intl.DateTimeFormat('es-CL')
|
|
return $('<tr></tr>').addClass('unidad').attr('data-linea', this.data.linea).append(
|
|
$('<td></td>').html(this.data.nombre)
|
|
).append(
|
|
$('<td></td>')
|
|
).append(
|
|
$('<td></td>').html(dateFormatter.format(date))
|
|
).append(
|
|
$('<td></td>').html(formatter.format(this.data.precio) + ' UF')
|
|
).append(
|
|
$('<td></td>').html(formatter.format(this.unitario()) + ' UF/m²')
|
|
).append(
|
|
$('<td></td>').append(
|
|
$('<button></button>').addClass('ui tiny green icon button add_unidad')
|
|
.attr('data-id', this.data.id)
|
|
.attr('data-tipo', this.data.tipo)
|
|
.attr('data-unidad', this.data.nombre).append(
|
|
$('<i></i>').addClass('plus icon')
|
|
).click(precios.actions().add().unidad)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
class Linea {
|
|
data = {
|
|
id: 0,
|
|
nombre: '',
|
|
orientacion: '',
|
|
superficie: 0,
|
|
unidades: [],
|
|
}
|
|
|
|
constructor({id, nombre, orientacion, superficie}) {
|
|
this.data.id = id
|
|
this.data.nombre = nombre
|
|
this.data.orientacion = orientacion
|
|
this.data.superficie = superficie
|
|
}
|
|
|
|
precio() {
|
|
let sum = 0
|
|
this.data.unidades.forEach(unidad => {
|
|
sum += unidad.data.precio
|
|
})
|
|
return sum / this.data.unidades.length
|
|
}
|
|
unitario() {
|
|
return this.precio() / this.data.superficie
|
|
}
|
|
add(data) {
|
|
if (this.data.id !== data.unidad.subtipo) {
|
|
return
|
|
}
|
|
let unidad = this.data.unidades.find(unidad => unidad.data.id === data.unidad.id)
|
|
if (typeof unidad !== 'undefined') {
|
|
return
|
|
}
|
|
const tipo = data.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
unidad = new Unidad({
|
|
id: data.unidad.id,
|
|
nombre: data.unidad.descripcion,
|
|
fecha: data.estado_precio.fecha,
|
|
precio: data.valor,
|
|
superficie: this.data.superficie,
|
|
tipo: tipo.charAt(0).toUpperCase() + tipo.slice(1),
|
|
linea: this.data.id
|
|
})
|
|
this.data.unidades.push(unidad)
|
|
}
|
|
draw(formatter) {
|
|
const row1 = $('<tr></tr>').attr('data-id', this.data.id).attr('data-status', 'closed').append(
|
|
$('<td></td>').addClass('linea').append($('<strong></strong>').html(this.data.nombre)).append(
|
|
$('<i></i>').addClass('right caret icon')
|
|
)
|
|
).append(
|
|
$('<td></td>').addClass('linea').append($('<strong></strong>').html(this.data.orientacion))
|
|
).append(
|
|
$('<td></td>').addClass('linea')
|
|
).append(
|
|
$('<td></td>').addClass('linea').append($('<strong></strong>').html(formatter.format(this.precio()) + ' UF'))
|
|
).append(
|
|
$('<td></td>').addClass('linea').append($('<strong></strong>').html(formatter.format(this.unitario()) + ' UF/m²'))
|
|
).append(
|
|
$('<td></td>').append(
|
|
$('<button></button>').addClass('ui tiny green icon button add_linea').attr('data-id', this.data.id).append(
|
|
$('<i></i>').addClass('plus icon')
|
|
).click(precios.actions().add().linea)
|
|
)
|
|
)
|
|
const output = [
|
|
row1
|
|
]
|
|
this.data.unidades.forEach(unidad => {
|
|
output.push(unidad.draw(formatter))
|
|
})
|
|
return output
|
|
}
|
|
}
|
|
class Tipologia {
|
|
data = {
|
|
id: 0,
|
|
tipo: '',
|
|
nombre: '',
|
|
descripcion: '',
|
|
lineas: [],
|
|
superficie: 0,
|
|
}
|
|
constructor({id, tipo, nombre, descripcion, superficie}) {
|
|
this.data.id = id
|
|
this.data.tipo = tipo
|
|
this.data.nombre = nombre
|
|
this.data.descripcion = descripcion
|
|
this.data.superficie = superficie
|
|
}
|
|
count() {
|
|
return this.data.lineas.reduce((sum, linea) => {
|
|
return sum + linea.data.unidades.length
|
|
}, 0)
|
|
}
|
|
precio() {
|
|
let sum = 0
|
|
this.data.lineas.forEach(linea => {
|
|
sum += linea.precio()
|
|
})
|
|
return sum / this.data.lineas.length
|
|
}
|
|
unitario() {
|
|
return this.precio() / this.data.superficie
|
|
}
|
|
add(data) {
|
|
if (this.data.id !== data.unidad.proyecto_tipo_unidad.id) {
|
|
return
|
|
}
|
|
let linea = this.data.lineas.find(linea => linea.data.id === data.unidad.subtipo)
|
|
if (this.data.lineas.length === 0 || typeof linea === 'undefined') {
|
|
linea = new Linea({
|
|
id: data.unidad.subtipo,
|
|
nombre: 'Linea ' + data.unidad.subtipo,
|
|
orientacion: data.unidad.orientacion,
|
|
superficie: data.unidad.proyecto_tipo_unidad.vendible
|
|
})
|
|
this.data.lineas.push(linea)
|
|
}
|
|
linea.add(data)
|
|
}
|
|
draw(formatter) {
|
|
const output = []
|
|
const row1 = $('<tr></tr>').attr('data-status', 'closed').attr('data-id', this.data.id)
|
|
row1.append(
|
|
$('<td></td>').addClass('show-unidades').html(this.data.tipo).append(
|
|
$('<i></i>').addClass('right caret icon')
|
|
)
|
|
).append(
|
|
$('<td></td>').addClass('show-unidades').html(this.data.nombre)
|
|
).append(
|
|
$('<td></td>').addClass('show-unidades').html(this.data.descripcion)
|
|
).append(
|
|
$('<td></td>').addClass('show-unidades').html(this.data.lineas.map(linea => linea.data.id).sort((a, b) => parseInt(a) - parseInt(b)).join(' - '))
|
|
).append(
|
|
$('<td></td>').addClass('show-unidades').html(formatter.format(this.data.superficie) + ' m²')
|
|
).append(
|
|
$('<td></td>').addClass('show-unidades').html(this.count())
|
|
).append(
|
|
$('<td></td>').addClass('show-unidades').html(formatter.format(this.precio()) + ' UF')
|
|
).append(
|
|
$('<td></td>').addClass('show-unidades').html(formatter.format(this.unitario()) + ' UF/m²')
|
|
).append(
|
|
$('<td></td>').append(
|
|
$('<button></button>').addClass('ui tiny green icon button add_tipologia').attr('data-id', this.data.id).attr('data-tipologia', this.data.nombre).append(
|
|
$('<i></i>').addClass('plus icon')
|
|
).click(precios.actions().add().tipologia)
|
|
)
|
|
)
|
|
const row2 = $('<tr></tr>').addClass('unidades').attr('data-tipo', this.data.id)
|
|
const tbody = $('<tbody></tbody>')
|
|
this.data.lineas.forEach(linea => {
|
|
linea.draw(formatter).forEach(row => {
|
|
tbody.append(row)
|
|
})
|
|
})
|
|
const table = $('<table></table>').addClass('ui striped table')
|
|
table.append(
|
|
$('<thead></thead>').append(
|
|
$('<tr></tr>').append(
|
|
$('<th></th>').html('Unidad')
|
|
).append(
|
|
$('<th></th>').html('Orientación')
|
|
).append(
|
|
$('<th></th>').html('Desde')
|
|
).append(
|
|
$('<th></th>').html('Precio')
|
|
).append(
|
|
$('<th></th>').html('UF/m²')
|
|
).append(
|
|
$('<th></th>')
|
|
)
|
|
)
|
|
).append(tbody)
|
|
row2.append(
|
|
$('<td></td>')
|
|
).append(
|
|
$('<td></td>').attr('colspan', 8).append(table)
|
|
)
|
|
output.push(row1)
|
|
output.push(row2)
|
|
return output
|
|
}
|
|
}
|
|
const precios = {
|
|
ids: {
|
|
list: '',
|
|
proyectos: '',
|
|
buttons: {
|
|
add: '',
|
|
up: '',
|
|
refresh: ''
|
|
}
|
|
},
|
|
data: {
|
|
id: 0,
|
|
proyecto: '',
|
|
proyectos: JSON.parse('{!! json_encode($proyectos) !!}'),
|
|
precios: []
|
|
},
|
|
table: null,
|
|
loading: {
|
|
precios: false
|
|
},
|
|
get: function() {
|
|
return {
|
|
proyectos: () => {
|
|
this.data.proyectos = []
|
|
this.data.id = 0
|
|
this.data.proyecto = ''
|
|
|
|
$(this.ids.buttons.add).hide()
|
|
|
|
return fetch('{{$urls->api}}/proyectos').then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
if (data.total > 0) {
|
|
data.proyectos.forEach(proyecto => {
|
|
this.data.proyectos.push({
|
|
id: proyecto.id,
|
|
descripcion: proyecto.descripcion
|
|
})
|
|
})
|
|
this.draw().proyectos()
|
|
}
|
|
})
|
|
},
|
|
precios: proyecto_id => {
|
|
this.data.precios = []
|
|
return fetch('{{$urls->api}}/ventas/precios',
|
|
{method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({proyecto_id})}
|
|
).then(response => {
|
|
$('.item.proyecto').css('cursor', 'default')
|
|
this.loading.precios = false
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
if (data.total > 0) {
|
|
this.data.id = data.precios[0].unidad.proyecto_tipo_unidad.proyecto.id
|
|
this.data.proyecto = data.precios[0].unidad.proyecto_tipo_unidad.proyecto.descripcion
|
|
data.precios.forEach(precio => {
|
|
this.add().precio(precio)
|
|
})
|
|
this.draw().precios()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
add: function() {
|
|
return {
|
|
precio: data => {
|
|
let tipologia = this.data.precios.find(tipologia => tipologia.data.id === data.unidad.proyecto_tipo_unidad.id)
|
|
if (this.data.precios.length === 0 || typeof tipologia === 'undefined') {
|
|
const tipo = data.unidad.proyecto_tipo_unidad.tipo_unidad.descripcion
|
|
tipologia = new Tipologia({
|
|
id: data.unidad.proyecto_tipo_unidad.id,
|
|
tipo: tipo.charAt(0).toUpperCase() + tipo.slice(1),
|
|
nombre: data.unidad.proyecto_tipo_unidad.nombre,
|
|
descripcion: data.unidad.proyecto_tipo_unidad.abreviacion,
|
|
superficie: data.unidad.proyecto_tipo_unidad.vendible
|
|
})
|
|
this.data.precios.push(tipologia)
|
|
}
|
|
tipologia.add(data)
|
|
}
|
|
}
|
|
},
|
|
draw: function() {
|
|
return {
|
|
proyectos: () => {
|
|
const parent = $(this.ids.list)
|
|
const header = parent.find('#list_title')
|
|
const list = parent.find('.list')
|
|
const table = parent.find('table.table')
|
|
|
|
$(this.ids.buttons.add).hide()
|
|
$(this.ids.buttons.add).attr('data-id', '')
|
|
$(this.ids.buttons.add).attr('data-proyecto', '')
|
|
|
|
header.html('Proyectos')
|
|
table.hide()
|
|
list.html('')
|
|
|
|
this.data.proyectos.forEach(proyecto => {
|
|
list.append(
|
|
$('<div></div>').addClass('item proyecto').attr('data-proyecto', proyecto.id).html(proyecto.descripcion).css('cursor', 'pointer')
|
|
)
|
|
})
|
|
list.show()
|
|
$('.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().precios(proyecto_id)
|
|
})
|
|
},
|
|
precios: () => {
|
|
const parent = $(this.ids.list)
|
|
const header = parent.find('#list_title')
|
|
const list = parent.find('.list')
|
|
const table = parent.find('table.table')
|
|
|
|
$(this.ids.buttons.add).attr('data-id', this.data.id)
|
|
$(this.ids.buttons.add).attr('data-proyecto', this.data.proyecto)
|
|
$(this.ids.buttons.add).show()
|
|
|
|
header.html('Precios de ' + this.data.proyecto)
|
|
list.hide()
|
|
table.html('')
|
|
|
|
table.append(this.draw().header())
|
|
const tbody = $('<tbody></tbody>')
|
|
const formatter = new Intl.NumberFormat('es-CL', {minimumFractionDigits: 2, maximumFractionDigits: 2})
|
|
this.data.precios.forEach(tipologia => {
|
|
tipologia.draw(formatter).forEach(row => {
|
|
tbody.append(row)
|
|
})
|
|
})
|
|
table.append(tbody)
|
|
table.show()
|
|
|
|
$('.show-unidades').click(this.actions().toggle().tipologia)
|
|
$('.unidades').hide()
|
|
$('.linea').click(this.actions().toggle().linea)
|
|
$('.unidad').hide()
|
|
},
|
|
header: () => {
|
|
return $('<thead></thead>').append(
|
|
$('<tr></tr>').append(
|
|
$('<th></th>').html('Tipo')
|
|
).append(
|
|
$('<th></th>').html('Nombre')
|
|
).append(
|
|
$('<th></th>').html('Tipología')
|
|
).append(
|
|
$('<th></th>').html('Líneas')
|
|
).append(
|
|
$('<th></th>').html('m² Vendibles')
|
|
).append(
|
|
$('<th></th>').html('#')
|
|
).append(
|
|
$('<th></th>').html('Precio Promedio')
|
|
).append(
|
|
$('<th></th>').html('UF/m²')
|
|
).append(
|
|
$('<th></th>')
|
|
)
|
|
)
|
|
}
|
|
}
|
|
},
|
|
actions: function() {
|
|
return {
|
|
toggle: () => {
|
|
return {
|
|
tipologia: event => {
|
|
const th = $(event.currentTarget)
|
|
const row = th.parent()
|
|
const id = row.data('id')
|
|
const status = row.attr('data-status')
|
|
const unidades = $(".unidades[data-tipo='" + id + "']")
|
|
if (status === 'closed') {
|
|
unidades.show()
|
|
row.attr('data-status', 'open')
|
|
row.find('.caret.icon').removeClass('right').addClass('down')
|
|
return
|
|
}
|
|
unidades.find('.linea').data('status', 'closed')
|
|
unidades.find('.unidad').hide()
|
|
unidades.hide()
|
|
row.attr('data-status', 'closed')
|
|
row.find('.caret.icon').removeClass('down').addClass('right')
|
|
},
|
|
linea: event => {
|
|
const th = $(event.currentTarget)
|
|
const row = th.parent()
|
|
const id = row.data('id')
|
|
const status = row.attr('data-status')
|
|
const unidades = $(".unidad[data-linea='" + id + "']")
|
|
if (status === 'closed') {
|
|
unidades.show()
|
|
row.attr('data-status', 'open')
|
|
row.find('.caret.icon').removeClass('right').addClass('down')
|
|
return
|
|
}
|
|
unidades.hide()
|
|
row.attr('data-status', 'closed')
|
|
row.find('.caret.icon').removeClass('down').addClass('right')
|
|
}
|
|
}
|
|
},
|
|
up: event => {
|
|
this.draw().proyectos()
|
|
},
|
|
refresh: event => {
|
|
const list = $(this.ids.proyectos)
|
|
if (list.is(':hidden')) {
|
|
this.get().precios(this.data.id)
|
|
} else {
|
|
this.draw().proyectos()
|
|
}
|
|
},
|
|
add: () => {
|
|
return {
|
|
list: event => {
|
|
const button = $(event.currentTarget)
|
|
const id = button.data('id')
|
|
const proyecto = button.data('proyecto')
|
|
list_modal.data.title = 'Precios del Proyecto ' + proyecto
|
|
list_modal.data.type = 'proyecto'
|
|
list_modal.data.id = id
|
|
list_modal.actions().open()
|
|
},
|
|
tipologia: event => {
|
|
const button = $(event.currentTarget)
|
|
const id = button.data('id')
|
|
const tipologia = button.data('tipologia')
|
|
list_modal.data.title = 'Precios de Tipología ' + tipologia
|
|
list_modal.data.type = 'tipologia'
|
|
list_modal.data.id = id
|
|
list_modal.actions().open()
|
|
},
|
|
linea: event => {
|
|
const button = $(event.currentTarget)
|
|
const id = button.data('id')
|
|
list_modal.data.title = 'Precios de la Línea ' + id
|
|
list_modal.data.type = 'linea'
|
|
list_modal.data.id = id
|
|
list_modal.actions().open()
|
|
},
|
|
unidad: event => {
|
|
const button = $(event.currentTarget)
|
|
const id = button.data('id')
|
|
const tipo = button.data('tipo')
|
|
const unidad = button.data('unidad')
|
|
list_modal.data.title = 'Precio de ' + tipo + ' ' + unidad
|
|
list_modal.data.type = 'unidad'
|
|
list_modal.data.id = id
|
|
list_modal.actions().open()
|
|
}
|
|
}
|
|
},
|
|
}
|
|
},
|
|
setup: function() {
|
|
$(this.ids.buttons.up).click(this.actions().up)
|
|
$(this.ids.buttons.refresh).click(this.actions().refresh)
|
|
$(this.ids.buttons.add).click(this.actions().add().list)
|
|
|
|
this.draw().proyectos()
|
|
}
|
|
}
|
|
|
|
const list_modal = {
|
|
ids: {
|
|
modal: '',
|
|
title: '',
|
|
fields: {
|
|
type: '',
|
|
id: '',
|
|
calendar: '',
|
|
valor: ''
|
|
},
|
|
button: ''
|
|
},
|
|
data: {
|
|
title: '',
|
|
type: '',
|
|
id: 0
|
|
},
|
|
actions: function() {
|
|
return {
|
|
reset: () => {
|
|
this.data.title = ''
|
|
this.data.type = ''
|
|
this.data.id = 0
|
|
|
|
$(this.ids.fields.calendar).calendar('refresh')
|
|
$(this.ids.fields.valor).val('')
|
|
},
|
|
open: event => {
|
|
this.draw()
|
|
$(this.ids.modal).modal('show')
|
|
},
|
|
close: event => {
|
|
$(this.ids.modal).modal('hide')
|
|
this.actions().reset()
|
|
},
|
|
send: event => {
|
|
const data = {
|
|
type: $(this.ids.fields.type).val(),
|
|
id: $(this.ids.fields.id).val(),
|
|
fecha: $(this.ids.fields.calendar).calendar('get date'),
|
|
valor: $(this.ids.fields.valor).val()
|
|
}
|
|
return fetch('{{$urls->api}}/precios/update',
|
|
{method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)}
|
|
).then(response => {
|
|
if (response.ok) {
|
|
return response.json()
|
|
}
|
|
}).then(data => {
|
|
precios.get().precios(precios.data.proyecto)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
draw: function() {
|
|
$(this.ids.title).html(this.data.title)
|
|
$(this.ids.modal).find("input[name='type']").val(this.data.type)
|
|
$(this.ids.modal).find("input[name='id']").val(this.data.id)
|
|
},
|
|
setup: function() {
|
|
$(this.ids.modal).modal('hide')
|
|
$(this.ids.modal).find('.icon.button').find('.close.icon').parent().click(this.actions().close)
|
|
|
|
$(this.ids.fields.calendar).calendar({
|
|
type: 'date'
|
|
})
|
|
$(this.ids.button).click(this.actions().send)
|
|
}
|
|
}
|
|
|
|
$(document).ready(() => {
|
|
precios.ids.list = '#list'
|
|
precios.ids.proyectos = '#proyectos'
|
|
precios.ids.buttons.up = '#up_button'
|
|
precios.ids.buttons.refresh = '#refresh_button'
|
|
precios.ids.buttons.add = '#add_button'
|
|
precios.setup()
|
|
|
|
list_modal.ids.modal = '#list_modal'
|
|
list_modal.ids.title = '#modal_title'
|
|
list_modal.ids.fields.type = "input[name='type']"
|
|
list_modal.ids.fields.id = "input[name='id']"
|
|
list_modal.ids.fields.calendar = '#fecha'
|
|
list_modal.ids.fields.valor = '#valor'
|
|
list_modal.ids.button = '#send'
|
|
list_modal.setup()
|
|
})
|
|
</script>
|
|
@endpush
|