tacke758/pomodoro.html

## pomodoro.html
<html>

<head>
<title> Pomodoro Timer </title>
<script type="text/javascript">
<!--

var minTextElem;
var secTextElem;

var pomodoroNameElem;

var pomodoro_list = [];
var current_pomodoro = null;

// internal state
var mode = "Pomodoro"; // mode = Pomodoro or Rest


/* onLoad */

var load = function () {
  minTextElem = document.getElementById('min');
  secTextElem = document.getElementById('sec');
  pomodoroNameElem = document.getElementById('name');
}


/* Model */

var Pomodoro = function (name) {
  this.name = name;
  this.start_time = null;
  this.finish_time = null;
}

var Rest = function () {
  this.start_time = null;
  this.finish_time = null;
}


/* Event */

var start_pomodoro = function () {
  if (current_pomodoro) {
    var name = prompt("Input new pomodoro name: ", current_pomodoro.name);
  } else {
    var name = prompt("Input new pomodoro name: ");
  }

  // prompt cancel button pushed
  if (name == null) {
	  return ;
  }
  var pomodoro = new Pomodoro(name);
  pomodoroNameElem.innerText = name;
  pomodoro.start_time = new Date();
  pomodoro_list.push(pomodoro);
  current_pomodoro = pomodoro;
  timer.start(25, 0);
}

var start_rest = function () {
  var rest = new Rest();
  pomodoroNameElem.innerText = "Rest";
  rest.start_time = new Date();
  current_pomodoro = rest;
  timer.start(5, 0);
}

var start_button_clicked = function () {
  if (mode == "Pomodoro") {
    start_pomodoro();
  } else if (mode == "Rest") {
    start_rest();
  }
}

var suspend_button_clicked = function () {
  timer.suspend();
}

var resume_button_clicked = function () {
  timer.resume();
}


/* Timer */

var Timer = function () {

  var self = this;

  var min;
  var sec;

  var interval_id = null;
  this.when_finish = function () {}

  var next_tick = function() {
    if (sec == 0) {
      min --;
      sec = 59;
    } else {
      sec --;
    }

    minTextElem.innerText = "" + min;
    secTextElem.innerText = "" + sec;

    if (min == 0 && sec == 0) {
      self.when_finish();
      clearInterval(interval_id);
      interval_id = null;
    }
  }

  this.start = function (min_, sec_) {

    min = min_;
    sec = sec_;

    if (!interval_id) {
      clearInterval(interval_id);
      interval_id = null;
    }
    interval_id = setInterval(next_tick, 1000);
  }

  this.suspend = function () {
    if (interval_id != null) {
      clearInterval(interval_id);
      interval_id = null;
    }
  }

  this.resume = function () {
    if (interval_id == null) {
      interval_id = setInterval(next_tick, 1000);
    }
  }
}

var hhmm = function(a_date) {
 var hour = a_date.getHours();
 var minute = a_date.getMinutes();

 if (minute < 10) {
  return hour + ":" + "0" + minute;
 } else {
  return hour + ":" + minute;
 }
}

var toggle_state = function () {
  if (mode == "Pomodoro") {
    mode = "Rest";
  } else if (mode == "Rest") {
    mode = "Pomodoro";
  }
}

var timer = new Timer();
timer.when_finish = function () {
  current_pomodoro.finish_time = new Date();

  if (mode == "Pomodoro") {
    alert("Pomodoro <" + current_pomodoro.name
          + " (" + hhmm(current_pomodoro.start_time) + "~" + hhmm(current_pomodoro.finish_time) + ")"
          + " > finished!");
  } else if (mode == "Rest") {
    alert("Rest (" + hhmm(current_pomodoro.start_time) + "~" + hhmm(current_pomodoro.finish_time)
          + ") finished!");
  }

  toggle_state();
}

//-->
</script>
</head>

  <body onLoad="load();">
    <div id="min" style="font-size: 160; float: left;">25</div>
    <div style="font-size: 160; float: left;">:</div>
    <div id="sec" style="font-size: 160; float: left;">00</div>
  </body>

  <div style="clear: both; "></div>
  <div id="name" style="font-size: 80;"></div>
  <div>
    <button onClick="start_button_clicked();">START!</button>
    <button onClick="suspend_button_clicked();">SUSPEND</button>
    <button onClick="resume_button_clicked();">RESUME</button>
  </div>
</html>
	<html>

	<head>
	<title> Pomodoro Timer </title>
	<script type="text/javascript">
	<!--

	var minTextElem;
	var secTextElem;

	var pomodoroNameElem;

	var pomodoro_list = [];
	var current_pomodoro = null;

	// internal state
	var mode = "Pomodoro"; // mode = Pomodoro or Rest


	/* onLoad */

	var load = function () {
	minTextElem = document.getElementById('min');
	secTextElem = document.getElementById('sec');
	pomodoroNameElem = document.getElementById('name');
	}


	/* Model */

	var Pomodoro = function (name) {
	this.name = name;
	this.start_time = null;
	this.finish_time = null;
	}

	var Rest = function () {
	this.start_time = null;
	this.finish_time = null;
	}


	/* Event */

	var start_pomodoro = function () {
	if (current_pomodoro) {
	var name = prompt("Input new pomodoro name: ", current_pomodoro.name);
	} else {
	var name = prompt("Input new pomodoro name: ");
	}

	// prompt cancel button pushed
	if (name == null) {
	return ;
	}
	var pomodoro = new Pomodoro(name);
	pomodoroNameElem.innerText = name;
	pomodoro.start_time = new Date();
	pomodoro_list.push(pomodoro);
	current_pomodoro = pomodoro;
	timer.start(25, 0);
	}

	var start_rest = function () {
	var rest = new Rest();
	pomodoroNameElem.innerText = "Rest";
	rest.start_time = new Date();
	current_pomodoro = rest;
	timer.start(5, 0);
	}

	var start_button_clicked = function () {
	if (mode == "Pomodoro") {
	start_pomodoro();
	} else if (mode == "Rest") {
	start_rest();
	}
	}

	var suspend_button_clicked = function () {
	timer.suspend();
	}

	var resume_button_clicked = function () {
	timer.resume();
	}


	/* Timer */

	var Timer = function () {

	var self = this;

	var min;
	var sec;

	var interval_id = null;
	this.when_finish = function () {}

	var next_tick = function() {
	if (sec == 0) {
	min --;
	sec = 59;
	} else {
	sec --;
	}

	minTextElem.innerText = "" + min;
	secTextElem.innerText = "" + sec;

	if (min == 0 && sec == 0) {
	self.when_finish();
	clearInterval(interval_id);
	interval_id = null;
	}
	}

	this.start = function (min_, sec_) {

	min = min_;
	sec = sec_;

	if (!interval_id) {
	clearInterval(interval_id);
	interval_id = null;
	}
	interval_id = setInterval(next_tick, 1000);
	}

	this.suspend = function () {
	if (interval_id != null) {
	clearInterval(interval_id);
	interval_id = null;
	}
	}

	this.resume = function () {
	if (interval_id == null) {
	interval_id = setInterval(next_tick, 1000);
	}
	}
	}

	var hhmm = function(a_date) {
	var hour = a_date.getHours();
	var minute = a_date.getMinutes();

	if (minute < 10) {
	return hour + ":" + "0" + minute;
	} else {
	return hour + ":" + minute;
	}
	}

	var toggle_state = function () {
	if (mode == "Pomodoro") {
	mode = "Rest";
	} else if (mode == "Rest") {
	mode = "Pomodoro";
	}
	}

	var timer = new Timer();
	timer.when_finish = function () {
	current_pomodoro.finish_time = new Date();

	if (mode == "Pomodoro") {
	alert("Pomodoro <" + current_pomodoro.name
	+ " (" + hhmm(current_pomodoro.start_time) + "~" + hhmm(current_pomodoro.finish_time) + ")"
	+ " > finished!");
	} else if (mode == "Rest") {
	alert("Rest (" + hhmm(current_pomodoro.start_time) + "~" + hhmm(current_pomodoro.finish_time)
	+ ") finished!");
	}

	toggle_state();
	}

	//-->
	</script>
	</head>

	<body onLoad="load();">
	<div id="min" style="font-size: 160; float: left;">25</div>
	<div style="font-size: 160; float: left;">:</div>
	<div id="sec" style="font-size: 160; float: left;">00</div>
	</body>

	<div style="clear: both; "></div>
	<div id="name" style="font-size: 80;"></div>
	<div>
	<button onClick="start_button_clicked();">START!</button>
	<button onClick="suspend_button_clicked();">SUSPEND</button>
	<button onClick="resume_button_clicked();">RESUME</button>
	</div>
	</html>