Youba
1
I want to make a count down timer, in react native i did it like this
countDown(timeToStartInSeconds) {
if(timeToStartInSeconds< 0 )
return (
<TimerCountdown
initialSecondsRemaining={Math.abs(timeToStartInSeconds)}
onTick={secondsRemaining => console.log('tick', secondsRemaining)}
onTimeElapsed={() => console.log('complete')}
allowFontScaling={true}
style={{ fontSize: 12 }}
/>
)
else if(timeToEndInSeconds > 0 )
return (<Text>Ended</Text>)
}
Then i call countDown where i want to put the count down timer.
In Framework7 i tried to do it like this but it didn’t work
Template7.registerHelper('printCountDown',function(timeToEndInSeconds, divID){
if(timeToStartInSeconds< 0 ) {
var minutes, seconds, display;
var timer = timeToEndInSeconds;
display = document.createElement('span');
display.setAttribute("id", "new"+divID);
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
display.textContent= 'Ended';
}
}, 1000);
$$('#'+divID).html(display);
}
else if(timeToEndInSeconds > 0 )
return 'Ended';
}
Then call {{printCountDown timeLeft id}}, but it didn’t work
plpl
2
- timeToStartInSeconds is not defined
- helper is designed to return a value, not to manipulate (different) DOM
- setInterval will go forever (not good idea)
try componentPage => $setState()
this is exactly what are you looking for
Youba
3
Can you please show me how to do it, i’m trying to find how to do that all day:
async: function (routeTo, routeFrom, resolve, reject) {
app.request.json(apiURL, function (data) {
if(data) {
resolve(
{
templateUrl: './pages/all.html'
},
{
context: {
users: data
}
}
)
} else reject()
})
}
// my template
<template>
{{#each users}}
<div>{{name}}</div>
<div class="countDown" data-date={{date}}></div>
{{/each}}
</template>
<script>
return {
on: {
tabMounted: function () {
document.querySelectorAll('.countDown').forEach(function(e) {
var myDate = e.getAttribute('data-date');
var myDateInSeconds = parseInt(new Date(myDate).getTime()/1000);
var now = parseInt(new Date().getTime()/1000);
var timeLeftinSeconds = myDateInSeconds - now;
if(timeLeftinSeconds<0) {
e.innerText = "Done!";
return;
}
var days, hours, minutes, seconds;
var x = setInterval(function () {
days = parseInt(timeLeftinSeconds / 86400, 10);
hours = parseInt((timeLeftinSeconds - 86400 * days) / 3600, 10);
minutes = parseInt((timeLeftinSeconds - 86400 * days - 3600 * hours ) / 60, 10);
seconds = parseInt(timeLeftinSeconds % 60, 10);
days = days < 10 ? "0" + days : days;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
e.innerText = days + ":" + hours + ":" + minutes + ":" + seconds;
if (--timeLeftinSeconds < 0) {
clearInterval(x);
e.innerText = "Done!";
}
}, 1000);
})
}
}
};
</script>
plpl
4
probably i will edit this tomorrow
meanwhile:
got to https://framework7.io/kitchen-sink/core/
open console
and copy/pase this:
app.views.current.routes.unshift({
path:'/some-page/',
component:{
template:`
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">{{title}}</div>
</div>
</div>
<div class="page-content">
<div class="list">
<ul>
{{#users}}
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">{{name}}</div>
<div class="item-after">{{display}}</div>
</div>
</div>
</li>
{{/users}}
</ul>
</div>
</div>
</div>
`,
data:function(){
return {
title:'count down',
interval:null,
users:[
{name:'A',display:'00:10',date:'0000-00-00 00:00:10'},
{name:'B',display:'00:15',date:'0000-00-00 00:00:15'},
{name:'C',display:'00:30',date:'0000-00-00 00:00:30'},
{name:'D',display:'00:05',date:'0000-00-00 00:00:05'},
{name:'E',display:'00:20',date:'0000-00-00 00:00:20'}
]
}
},
methods:{
play:function(){
console.log('start')
var self = this;
var start = app.utils.now();
self.interval = setInterval(function(){
var flag = true;
var diff = app.utils.now() - start;
self.users.map(function(i){
var val=i.date.split(/[- :]/);
if(i.display.split(':').length==2){
flag = false;
var d = new Date();
d.setHours(0,0,0);
var t = new Date(d.getFullYear(),d.getMonth(),d.getDate(),val[3],val[4],val[5]);
t.setTime(t.getTime()-diff);
i.display = t > d ? t.toISOString().slice(14,19) : 'Done!';
}
});
self.$setState({users:self.users});
if (flag) { clearInterval(self.interval); console.log('stop'); }
},500);
}
},
on:{
pageInit:function(e,page){
this.play();
}
}
}
});
app.views.current.router.navigate('/some-page/');
Youba
5
Thanks a lot, I did it with a different method, you can check the code above, i edited it.
what do you think about the method i used, is it good?
plpl
6
ok
make sure you kill “all” the intervals on “pageBeforeRemove”
in case they didn’t finish
Youba
7
ok thanks, i forgot to kill all intervals