Barras de progreso

This commit is contained in:
Juan Pablo Vial
2025-04-22 11:35:56 -04:00
parent d6730cd020
commit d5a3512852

View File

@ -73,6 +73,11 @@
</div> </div>
<div class="ui very basic segment"> <div class="ui very basic segment">
<div class="ui active inline loader"></div> <div class="ui active inline loader"></div>
<div class="ui indicating progress" id="load_progress">
<div class="bar">
<div class="progress"></div>
</div>
</div>
</div> </div>
<div id="results"> <div id="results">
<div class="ui top attached tabular menu"> <div class="ui top attached tabular menu">
@ -80,6 +85,9 @@
<a class="item" data-tab="lineas">Líneas</a> <a class="item" data-tab="lineas">Líneas</a>
<a class="item" data-tab="unidades">Unidades</a> <a class="item" data-tab="unidades">Unidades</a>
</div> </div>
<div class="ui top attached indicating progress" id="values_progress">
<div class="bar"></div>
</div>
<div class="ui bottom attached tab basic fitted segment active" data-tab="tipos"> <div class="ui bottom attached tab basic fitted segment active" data-tab="tipos">
@include('proyectos.brokers.contracts.show.tipo') @include('proyectos.brokers.contracts.show.tipo')
</div> </div>
@ -101,7 +109,9 @@
const units = { const units = {
ids: { ids: {
units: '', units: '',
loader: '' loader: '',
progress: '',
load_progress: ''
}, },
data: { data: {
project_id: {{ $contract->project->id }}, project_id: {{ $contract->project->id }},
@ -132,7 +142,7 @@
}) })
}) })
}, },
promotions: () => { promotions: progress_bar => {
const chunkSize = 100 const chunkSize = 100
const chunks = [] const chunks = []
for (let i = 0; i < units.data.units.length; i += chunkSize) { for (let i = 0; i < units.data.units.length; i += chunkSize) {
@ -145,6 +155,7 @@
const body = new FormData() const body = new FormData()
chunk.forEach(id => body.append('unidad_ids[]', id)) chunk.forEach(id => body.append('unidad_ids[]', id))
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => { promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
progress_bar.progress('increment', json.input.unidad_ids.length)
if (json.unidades.length === 0) { if (json.unidades.length === 0) {
return return
} }
@ -156,8 +167,11 @@
}) })
return Promise.all(promises) return Promise.all(promises)
}, },
prices: () => { prices: progress_bar => {
const unsold = [...units.data.units.filter(unit => !unit.sold), ...units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion !== 'departamento')] const unsold = [...units.data.units.filter(unit => !unit.sold), ...units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion !== 'departamento')]
const current_total = progress_bar.progress('get total')
progress_bar.progress('set total', current_total + unsold.length)
const chunkSize = 100 const chunkSize = 100
const chunks = [] const chunks = []
for (let i = 0; i < unsold.length; i += chunkSize) { for (let i = 0; i < unsold.length; i += chunkSize) {
@ -170,6 +184,7 @@
const body = new FormData() const body = new FormData()
chunk.forEach(id => body.append('unidad_ids[]', id)) chunk.forEach(id => body.append('unidad_ids[]', id))
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => { promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
progress_bar.progress('increment', json.input.unidad_ids.length)
if (json.precios.length === 0) { if (json.precios.length === 0) {
return return
} }
@ -181,8 +196,10 @@
}) })
return Promise.all(promises) return Promise.all(promises)
}, },
values: () => { values: progress_bar => {
const sold = units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento') const sold = units.data.units.filter(unit => unit.sold && unit.proyecto_tipo_unidad.tipo_unidad.descripcion === 'departamento')
progress_bar.progress('set total', sold.length)
const chunkSize = 10 const chunkSize = 10
const chunks = [] const chunks = []
for (let i = 0; i < sold.length; i += chunkSize) { for (let i = 0; i < sold.length; i += chunkSize) {
@ -195,6 +212,7 @@
const body = new FormData() const body = new FormData()
chunk.forEach(id => body.append('unidad_ids[]', id)) chunk.forEach(id => body.append('unidad_ids[]', id))
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => { promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
progress_bar.progress('increment', json.input.unidad_ids.length)
if (json.ventas.length === 0) { if (json.ventas.length === 0) {
return return
} }
@ -226,7 +244,7 @@
}) })
return Promise.all(promises) return Promise.all(promises)
}, },
sold: () => { sold: progress_bar => {
const chunkSize = 100 const chunkSize = 100
const chunks = [] const chunks = []
for (let i = 0; i < units.data.units.length; i += chunkSize) { for (let i = 0; i < units.data.units.length; i += chunkSize) {
@ -239,6 +257,7 @@
const body = new FormData() const body = new FormData()
chunk.forEach(id => body.append('unidad_ids[]', id)) chunk.forEach(id => body.append('unidad_ids[]', id))
promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => { promises.push(APIClient.fetch(url, {method, body}).then(response => response.json()).then(json => {
progress_bar.progress('increment', json.input.unidad_ids.length)
if (json.estados.length === 0) { if (json.estados.length === 0) {
return return
} }
@ -282,20 +301,35 @@
} }
}) })
document.getElementById(units.ids.results).style.visibility = 'hidden' document.getElementById(units.ids.results).style.visibility = 'hidden'
document.getElementById(units.ids.progress).style.visibility = 'hidden'
document.getElementById(units.ids.load_progress).style.visibility = 'hidden'
units.get().units().then(() => { units.get().units().then(() => {
units.get().promotions().then(() => { document.getElementById(units.ids.load_progress).style.visibility = 'visible'
units.get().sold().then(() => {
units.get().prices().then(() => { const units_length = units.data.units.length
const progress_bar = $(`#${units.ids.load_progress}`)
progress_bar.progress({ total: units_length * 2 })
$(units.ids.loader).hide()
units.get().promotions(progress_bar).then(() => {
units.get().sold(progress_bar).then(() => {
units.get().prices(progress_bar).then(() => {
document.getElementById(units.ids.results).style.visibility = 'visible' document.getElementById(units.ids.results).style.visibility = 'visible'
$(units.ids.loader).parent().remove()
units.draw().units() units.draw().units()
units.draw().tipos() units.draw().tipos()
units.draw().lineas() units.draw().lineas()
units.get().values().then(() => { document.getElementById(units.ids.progress).style.visibility = 'visible'
$(units.ids.loader).hide() const progress_bar = $(`#${units.ids.progress}`)
$(units.ids.loader).parent().hide() progress_bar.progress()
units.get().values(progress_bar).then(() => {
document.getElementById(units.ids.progress).remove()
units.draw().units() units.draw().units()
units.draw().tipos() units.draw().tipos()
@ -308,7 +342,7 @@
} }
} }
$(document).ready(function () { $(document).ready(function () {
units.setup({results: 'results', loader: '.ui.loader'}) units.setup({results: 'results', loader: '.ui.loader', progress: 'values_progress', load_progress: 'load_progress'})
}) })
</script> </script>
@endpush @endpush