Marquee de indicadores

This commit is contained in:
2020-05-27 17:20:15 -04:00
parent 13320628ae
commit 08cf6df8fc
5 changed files with 54 additions and 31 deletions

View File

@ -142,22 +142,27 @@
background-color: $gris-medio;
padding-top: 1rem;
padding-bottom: 1rem;
min-height: 5rem;
height: 2rem;
.slideshow {
overflow: hidden;
height: 6rem;
text-align: center;
.slide {
display: inline-block;
display: inline;
float: left;
background-color: white;
color: white;
padding: 0;
margin: 1rem;
width: 8rem !important;
padding-top: .5rem;
padding-bottom: .5rem;
margin-right: 1rem;
text-align: center;
.value:last-child {
padding-left: 0.3rem;
font-weight: 100 !important;
}
padding-left: 1rem;
padding-right: 2rem;
border-right: thin solid black;
}
}
}

View File

@ -1,7 +1,5 @@
<div id="indicadores">
<div class="ui container">
<div class="slideshow ui center aligned grid">
</div>
<div class="marquee slideshow">
</div>
</div>
@ -70,6 +68,7 @@
},
@endforeach
],
data: [],
id: '#indicadores',
current: {{count($indicadores)}},
findIndicador: (i) => {
@ -77,16 +76,22 @@
return $.ajax({
url: '{{$urls->base}}/indicador/' + indicador.sim,
success: (data) => {
var div = $('<div></div>').attr('class', 'two wide column slide').append(
$('<div></div>').attr('class', 'ui header').attr('data-title', 'Fecha').attr('data-content', data.valor.fecha).append(indicador.titulo).append(
$('<div></div>').attr('class', 'sub header').html(data.valor.valor)
)
)
div.find('.header').popup(9)
$(indicadores.id).find('.slideshow').append(div)
indicadores.data.push(data.valor)
indicadores.putIndicador(indicador.titulo, data.valor)
}
})
},
putIndicador: (titulo, data) => {
var div = $('<div></div>').attr('class', 'slide').append(
$('<div></div>').attr('class', 'ui horizontal mini statistic').attr('data-title', 'Fecha').attr('data-content', data.fecha).append(
$('<div></div>').attr('class', 'value').html(titulo)
).append(
$('<div></div>').attr('class', 'value').html(data.valor)
)
)
div.find('.header').popup(9)
$(indicadores.id).find('.slideshow').append(div)
},
setup: () => {
var promises = []
promise = null
@ -95,7 +100,13 @@
promises.push(promise)
})
Promise.all(promises).then(() => {
//slideshow.setup()
$.each(indicadores.data, (i, el) => {
indicadores.putIndicador(indicadores.indicadores[i].titulo, el)
})
$('.marquee').marquee({
duration: 20000,
gap: 50
})
})
}
}