Marquee de indicadores
This commit is contained in:
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user