Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
sap.ui.jsview("sapui5test.countdown", {
getControllerName : function() {
return "sapui5test.countdown";
},
createContent : function(oController) {
//Timer for count down
var timer;
//Create a panel instance
var oPanel = new sap.ui.commons.Panel({width: "350px", showCollapseIcon: false});
//Set the title of the panel
oPanel.setTitle(new sap.ui.core.Title({text: "Countdown Timer"}));
//Create a matrixLayout instance for buttons
var oButtonMatrixLayout = new sap.ui.commons.layout.MatrixLayout({height: "50px", layoutFixed: false});
//Create button to restart count down timer
var oButtonRestart = new sap.ui.commons.Button({text: 'Restart',
press: function() {
clearInterval(timer); //Clear current timer running
oProgressIndicator.setBarColor(sap.ui.core.BarColor.NEUTRAL); //set bar color to NEUTRAL
oProgressIndicator.setPercentValue(100); //Set percent to 100(starting point)
oLabelTimeLeft.setText("02:00"); //Update label text value
timer = setInterval(startCountDown, interval); //start new
}});
//Create button to clear count down timer
var oButtonClear = new sap.ui.commons.Button({text: 'Clear',
press: function() {
clearInterval(timer);
oProgressIndicator.setPercentValue(0);
oLabelTimeLeft.setText("");
}});
oButtonMatrixLayout.createRow(oButtonClear, oButtonRestart);
//Create initial progress indicator
var oProgressIndicatorMatrixLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed: false});
var oProgressIndicator = new sap.ui.commons.ProgressIndicator("progressIndicator", {
width: "300px",
percentValue: 100,
showValue: false
});
//Label to show time left
var oLabelTimeLeft = new sap.ui.commons.Label({text: "02:00",});
oProgressIndicatorMatrixLayout.createRow(oProgressIndicator);
oProgressIndicatorMatrixLayout.createRow(oLabelTimeLeft);
//Add elements to the panel
oPanel.addContent(oButtonMatrixLayout);
oPanel.addContent(oProgressIndicatorMatrixLayout);
//Attach the panel to the page
oPanel.placeAt("content");
var totalTime = 120000; //2 minutes
var interval = 1200;
timer = setInterval(startCountDown, interval);
function startCountDown() {
var percent = oProgressIndicator.getPercentValue();
var newPercent = percent - 1;
var timePassed = (totalTime * newPercent) / 100;
var milliseconds = (timePassed % 1000); timePassed = Math.floor(timePassed/1000);
var seconds = (timePassed % 60); timePassed = Math.floor(timePassed/60);
var minutes = (timePassed % 60); timePassed = Math.floor(timePassed/60);
if(minutes.toString().length == 1){
minutes = "0" + minutes;
}
if(seconds.toString().length == 1){
seconds = "0" + seconds;
}
if(newPercent >= 0){
oProgressIndicator.setPercentValue(newPercent);
//Change bar color to negative in last 30 seconds
if(newPercent <= 25){
oProgressIndicator.setBarColor(sap.ui.core.BarColor.NEGATIVE);
}
//Change bar color to critical in last 1 minute
else if(newPercent <= 50){
oProgressIndicator.setBarColor(sap.ui.core.BarColor.CRITICAL);
}
//Update current time left
oLabelTimeLeft.setText(minutes + ":" + seconds);
} else {
//Stop timer after 2 minutes
clearInterval(timer);
}
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment