Listados separados por hojas (tabs)
This commit is contained in:
Juan Pablo Vial
@ -14,67 +14,77 @@
|
||||
<b>Fecha Inicio:</b> {{ $contract->current()->date->format('d/m/Y') }} <br/>
|
||||
</div>
|
||||
<div class="ui active inline loader"></div>
|
||||
<table class="ui table" id="tipos">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Tipo</th>
|
||||
<th class="center aligned" rowspan="2">Cantidad</th>
|
||||
<th class="center aligned" colspan="3">Precio</th>
|
||||
<th class="center aligned" colspan="3">Promoción</th>
|
||||
<th class="right aligned" rowspan="2">Acciones</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="right aligned">Mínimo</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máximo</th>
|
||||
<th class="right aligned">Mínima</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máxima</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<table class="ui table" id="lineas">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Tipo</th>
|
||||
<th class="center aligned" rowspan="2">Línea</th>
|
||||
<th class="center aligned" rowspan="2">Orientación</th>
|
||||
<th class="center aligned" rowspan="2">Tipología</th>
|
||||
<th class="center aligned" rowspan="2">Cantidad</th>
|
||||
<th class="center aligned" colspan="3">Precio</th>
|
||||
<th class="center aligned" colspan="3">Promoción</th>
|
||||
<th class="right aligned" rowspan="2">Acciones</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="right aligned">Mínimo</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máximo</th>
|
||||
<th class="right aligned">Mínima</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máxima</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<div id="unidades_container">
|
||||
<table class="ui table" id="unidades">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tipo</th>
|
||||
<th>Tipo Order</th>
|
||||
<th class="right aligned">Unidad</th>
|
||||
<th>Unidad Orden</th>
|
||||
<th>Estado</th>
|
||||
<th class="right aligned">Precio</th>
|
||||
<th class="right aligned">Promoción</th>
|
||||
<th>Fecha Inicio</th>
|
||||
<th>Fecha Término</th>
|
||||
<th class="right aligned">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<div id="results">
|
||||
<div class="ui top attached tabular menu">
|
||||
<a class="item active" data-tab="tipos">Tipos</a>
|
||||
<a class="item" data-tab="lineas">Líneas</a>
|
||||
<a class="item" data-tab="unidades">Unidades</a>
|
||||
</div>
|
||||
<div class="ui bottom attached tab basic horizontally fitted segment active" data-tab="tipos">
|
||||
<table class="ui table" id="tipos">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Tipo</th>
|
||||
<th class="center aligned" rowspan="2">Cantidad</th>
|
||||
<th class="center aligned" colspan="3">Precio</th>
|
||||
<th class="center aligned" colspan="3">Promoción</th>
|
||||
<th class="right aligned" rowspan="2">Acciones</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="right aligned">Mínimo</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máximo</th>
|
||||
<th class="right aligned">Mínima</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máxima</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ui bottom attached tab basic horizontally fitted segment" data-tab="lineas">
|
||||
<table class="ui table" id="lineas">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Tipo</th>
|
||||
<th class="center aligned" rowspan="2">Línea</th>
|
||||
<th class="center aligned" rowspan="2">Orientación</th>
|
||||
<th class="center aligned" rowspan="2">Cantidad</th>
|
||||
<th class="center aligned" colspan="3">Precio</th>
|
||||
<th class="center aligned" colspan="3">Promoción</th>
|
||||
<th class="right aligned" rowspan="2">Acciones</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="right aligned">Mínimo</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máximo</th>
|
||||
<th class="right aligned">Mínima</th>
|
||||
<th class="right aligned">Promedio</th>
|
||||
<th class="right aligned">Máxima</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ui bottom attached tab basic horizontally fitted segment" data-tab="unidades">
|
||||
<table class="ui table" id="unidades">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tipo</th>
|
||||
<th>Tipo Order</th>
|
||||
<th class="right aligned">Unidad</th>
|
||||
<th>Unidad Orden</th>
|
||||
<th>Estado</th>
|
||||
<th class="right aligned">Precio</th>
|
||||
<th class="right aligned">Promoción</th>
|
||||
<th>Fecha Inicio</th>
|
||||
<th>Fecha Término</th>
|
||||
<th class="right aligned">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@ -312,9 +322,8 @@
|
||||
tbody.innerHTML += [
|
||||
`<tr>`,
|
||||
`<td>${tipo.charAt(0).toUpperCase() + tipo.slice(1)}</td>`,
|
||||
`<td class="center aligned">${linea}</td>`,
|
||||
`<td class="center aligned"><span data-tooltip="${unidades[0].proyecto_tipo_unidad.tipologia}" data-position="right center">${linea}</span></td>`,
|
||||
`<td class="center aligned">${orientacion}</td>`,
|
||||
`<td class="center aligned">${unidades[0].proyecto_tipo_unidad.tipologia}</td>`,
|
||||
`<td class="center aligned">${unidades.length}</td>`,
|
||||
`<td class="right aligned">UF ${units.formatters.ufs.format(precios.min)}</td>`,
|
||||
`<td class="right aligned">UF ${units.formatters.ufs.format(precios.avg)}</td>`,
|
||||
@ -363,18 +372,25 @@
|
||||
}
|
||||
$(`#${units.ids.units}`).DataTable(dto)
|
||||
|
||||
document.getElementById(units.ids.unidades_container).style.visibility = 'hidden'
|
||||
document.getElementById(units.ids.tipos).style.visibility = 'hidden'
|
||||
document.getElementById(units.ids.lineas).style.visibility = 'hidden'
|
||||
$(`#${units.ids.results}`).find('.tabular.menu .item').tab({
|
||||
onVisible: function(tabPath) {
|
||||
if (tabPath !== 'unidades') {
|
||||
return
|
||||
}
|
||||
$(this.querySelector('table')).DataTable().columns.adjust().draw()
|
||||
this.querySelector('table').style.width = ''
|
||||
}
|
||||
})
|
||||
document.getElementById(units.ids.results).style.visibility = 'hidden'
|
||||
|
||||
units.get().units().then(() => {
|
||||
units.get().prices().then(() => {
|
||||
units.get().promotions().then(() => {
|
||||
units.get().sold().then(() => {
|
||||
$(units.ids.loader).hide()
|
||||
document.getElementById(units.ids.unidades_container).style.visibility = 'visible'
|
||||
document.getElementById(units.ids.tipos).style.visibility = 'visible'
|
||||
document.getElementById(units.ids.lineas).style.visibility = 'visible'
|
||||
|
||||
document.getElementById(units.ids.results).style.visibility = 'visible'
|
||||
|
||||
units.draw().units()
|
||||
units.draw().tipos()
|
||||
units.draw().lineas()
|
||||
@ -385,7 +401,7 @@
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
units.setup({units: 'unidades', unidades_container: 'unidades_container', tipos: 'tipos', lineas: 'lineas', loader: '.ui.loader'})
|
||||
units.setup({results: 'results', units: 'unidades', tipos: 'tipos', lineas: 'lineas', loader: '.ui.loader'})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user