Ventas
This commit is contained in:
Juan Pablo Vial
257
app/resources/views/ventas/pagos/pendientes.blade.php
Normal file
257
app/resources/views/ventas/pagos/pendientes.blade.php
Normal file
@ -0,0 +1,257 @@
|
||||
@extends('layout.base')
|
||||
|
||||
@section('page_title')
|
||||
Pagos Pendientes
|
||||
@endsection
|
||||
|
||||
@section('page_content')
|
||||
<div class="ui container">
|
||||
<h2 class="ui header">Pagos Pendientes</h2>
|
||||
<div class="ui basic segment" id="pendientes"></div>
|
||||
<h2 class="ui header">Para Abonar<span id="total_abonar"></span></h2>
|
||||
<div class="ui basic segment" id="abonar"></div>
|
||||
<h2 class="ui header">Pagos Devueltos<span id="total_devueltos"></span></h2>
|
||||
<div class="ui basic segment" id="devueltos"></div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@include('layout.body.scripts.chartjs')
|
||||
@include('layout.head.styles.datatables')
|
||||
@include('layout.body.scripts.datatables')
|
||||
|
||||
@push('page_scripts')
|
||||
<script type="text/javascript">
|
||||
const historicos = {
|
||||
id: '',
|
||||
data: {
|
||||
total: {
|
||||
pendientes: 0,
|
||||
depositados: 0
|
||||
},
|
||||
graph: {}
|
||||
},
|
||||
get: function() {
|
||||
return {
|
||||
pagos: () => {
|
||||
const uri = '{{$urls->api}}/ventas/pagos/pendientes'
|
||||
fetch(uri).then(response => {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
}
|
||||
}).then(data => {
|
||||
this.data.total.pendientes = data.pagos.historicos
|
||||
this.data.total.depositados = data.abonos.historicos
|
||||
this.data.graph = data
|
||||
|
||||
this.draw().all()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function() {
|
||||
return {
|
||||
all: () => {
|
||||
const parent = $(this.id)
|
||||
parent.append(this.draw().table())
|
||||
this.draw().graph(parent)
|
||||
},
|
||||
table: () => {
|
||||
return $('<table></table>').append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').attr('rowspan', 2).html('Históricos')
|
||||
).append(
|
||||
$('<td></td>').html('Pendientes')
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
$('<a></a>').attr('href', '{{$urls->base}}/ventas/cuotas/pendientes').html(this.data.total.pendientes)
|
||||
)
|
||||
)
|
||||
).append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').html('Depositadas')
|
||||
).append(
|
||||
$('<td></td>').append(
|
||||
$('<a></a>').attr('href', '{{$urls->base}}/ventas/cuotas/abonar').html(this.data.total.depositados)
|
||||
)
|
||||
)
|
||||
)
|
||||
},
|
||||
graph: parent => {
|
||||
const canvas = $('<canvas></canvas>').attr('id', 'pagos_historicos')
|
||||
parent.append(canvas)
|
||||
const chart = new Chart(canvas, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: this.data.graph.fechas,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Pagos',
|
||||
data: this.data.graph.pagos.data,
|
||||
backgroundColor: this.data.graph.pagos.backgroundColor
|
||||
},
|
||||
{
|
||||
label: 'Abonos',
|
||||
data: this.data.graph.abonos.data,
|
||||
backgroundColor: this.data.graph.abonos.backgroundColor
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
x: [
|
||||
{
|
||||
stacked: true
|
||||
}
|
||||
],
|
||||
y: [
|
||||
{
|
||||
stacked: true
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: {
|
||||
chartJSPluginBarchartBackground: {
|
||||
color: 'rgb(100, 100, 100)'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setup: function(id) {
|
||||
this.id = id
|
||||
this.get().pagos()
|
||||
}
|
||||
}
|
||||
const depositados = {
|
||||
ids: {
|
||||
data: '',
|
||||
total: ''
|
||||
},
|
||||
data: [],
|
||||
total: 0,
|
||||
get: function() {
|
||||
return {
|
||||
pendientes: () => {
|
||||
const uri = '{{$urls->api}}/ventas/pagos/abonar'
|
||||
fetch(uri).then(response => {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
}
|
||||
}).then(data => {
|
||||
this.data = data.pagos
|
||||
this.total = data.total
|
||||
this.draw().all()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function() {
|
||||
return {
|
||||
all: () => {
|
||||
this.draw().total()
|
||||
this.draw().table($(this.ids.data))
|
||||
},
|
||||
total: () => {
|
||||
$(this.ids.total).html(' [' + this.total + ']')
|
||||
},
|
||||
table: parent => {
|
||||
const header_row = $('<tr></tr>')
|
||||
['Proyecto', 'Departamento', 'Propietario', 'Tipo', 'Fecha Deposito', 'Valor'].forEach(title => {
|
||||
header_row.append(
|
||||
$('<th></th>').html(title)
|
||||
)
|
||||
})
|
||||
const tbody = $('<tbody></tbody>')
|
||||
this.data.forEach(pago => {
|
||||
tbody.append(
|
||||
$('<tr></tr>').append(
|
||||
$('<td></td>').html(pago.proyecto)
|
||||
).append(
|
||||
$('<td></td>').html(pago.departamento)
|
||||
).append(
|
||||
$('<td></td>').html(pago.propietario)
|
||||
).append(
|
||||
$('<td></td>').html(pago.tipo)
|
||||
).append(
|
||||
$('<td></td>').html(pago.fecha)
|
||||
).append(
|
||||
$('<td></td>').html(pago.valor)
|
||||
)
|
||||
)
|
||||
})
|
||||
const table = $('<table></table>').attr('id', 'pendientes_table').append(
|
||||
$('<thead></thead>').append(header_row)
|
||||
).append(tbody)
|
||||
parent.append(table)
|
||||
const dt = new DataTable('#pendientes_table', {
|
||||
language: {
|
||||
info: 'Mostrando página _PAGE_ de _PAGES_',
|
||||
infoEmpty: 'No hay cuotas depositadas por abonar',
|
||||
infoFiltered: '(filtrado de _MAX_ cuotas)',
|
||||
lengthMenu: 'Mostrando de a _MENU_ cuotas',
|
||||
zeroRecords: 'No se encotró cuotas con ese criterio',
|
||||
search: 'Buscar: '
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setup: function(id, total_id) {
|
||||
this.ids.data = id
|
||||
this.ids.total = total_id
|
||||
this.get().pendientes()
|
||||
}
|
||||
}
|
||||
const devueltos = {
|
||||
ids: {
|
||||
data: '',
|
||||
total: ''
|
||||
},
|
||||
data: [],
|
||||
total: 0,
|
||||
get: function() {
|
||||
return {
|
||||
devueltos: () => {
|
||||
const uri = '{{$urls->api}}/ventas/pagos/rebotes'
|
||||
fetch(uri).then(response => {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
}
|
||||
}).then(data => {
|
||||
this.data = data.pagos
|
||||
this.total = data.total
|
||||
this.draw().all()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function() {
|
||||
return {
|
||||
all: () => {
|
||||
this.draw().total()
|
||||
this.draw().table($(this.ids.data))
|
||||
},
|
||||
total: () => {
|
||||
$(this.ids.total).html(' [' + this.total + ']')
|
||||
},
|
||||
table: parent => {}
|
||||
}
|
||||
},
|
||||
setup: function(id, total_id) {
|
||||
this.ids.data = id
|
||||
this.ids.total = total_id
|
||||
this.get().devueltos()
|
||||
}
|
||||
}
|
||||
$(document).ready(() => {
|
||||
historicos.setup('#pendientes')
|
||||
depositados.setup('#abonar', '#total_abonar')
|
||||
devueltos.setup('#devueltos', '#total_devueltos')
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user