coundown.view.js

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);
			}
		}
	}
});