React timer

by GosiaPi

HTML

<div id='hmrc_stopwatch'></div>
<script>
ReactDOM.render(
React.createElement(Stopwatch, {
  'thresholdMinute': '<p:r n="param.thresholdMinute"/>',
  'thresholdClass': '<p:r n="param.thresholdClass"/>',
  'thresholdCallCodes': '<p:r n="param.thresholdCallCodes"/>',
  'currentCallCode': '<p:r n="CTIPhone.pyCurrentReasonCode"/>'
}), document.getElementById('hmrc_stopwatch'));
</script>


<!-- 
** thresholdMinute - Set a threshold in minutes, once reached will trigger an event (string)
** thresholdClass - CSS class to apply once thresholdMinute has been reached (string)
** thresholdCallCodes - Call codes (comma delimited) which trigger thresholdClass to be applied on thresholdMinute (string) 
-->

CSS

/* TresholdCallCodes

{"pyCode":"25","pyDisplayName":"Break - C"},
{"pyCode":"26","pyDisplayName":"Break - D"},
{"pyCode":"27","pyDisplayName":"Break - U"},
{"pyCode":"35","pyDisplayName":"Development - I"},
{"pyCode":"36","pyDisplayName":"Development - T"},
{"pyCode":"39","pyDisplayName":"Lunch"},

// other callCodees
{"pyCode":"28","pyDisplayName":"Customer1"},
{"pyCode":"29","pyDisplayName":"Customer2"},
{"pyCode":"30","pyDisplayName":"Customer3"},
{"pyCode":"31","pyDisplayName":"Customer4"},
{"pyCode":"32","pyDisplayName":"Customer5"},
{"pyCode":"33","pyDisplayName":"Customer6"},
{"pyCode":"34","pyDisplayName":"Customer7"}, */



/* more info how it should behave

https://jsfiddle.net/GosiaPi/tps504du/18/

*/

React

/* TresholdCallCodes

{"pyCode":"25","pyDisplayName":"Break - C"},
{"pyCode":"26","pyDisplayName":"Break - D"},
{"pyCode":"27","pyDisplayName":"Break - U"},
{"pyCode":"35","pyDisplayName":"Development - I"},
{"pyCode":"36","pyDisplayName":"Development - T"},
{"pyCode":"39","pyDisplayName":"Lunch"},

// other callCodees
{"pyCode":"28","pyDisplayName":"Customer1"},
{"pyCode":"29","pyDisplayName":"Customer2"},
{"pyCode":"30","pyDisplayName":"Customer3"},
{"pyCode":"31","pyDisplayName":"Customer4"},
{"pyCode":"32","pyDisplayName":"Customer5"},
{"pyCode":"33","pyDisplayName":"Customer6"},
{"pyCode":"34","pyDisplayName":"Customer7"}, */

// Used to add 0 paddings to numbers.
const leftPad = (width, n) => {
  if ((n + '').length > width) {
	  return n;
  }
  const padding = new Array(width).join('0');
  return (padding + n).slice(-width);
};

class Stopwatch extends React.Component {
  constructor(props) {
    super(props);

    ["update", "reset", "toggle"].forEach((method) => {
    	this[method] = this[method].bind(this);
    });

    this.state = this.initialState = {
    	isRunning: false,
      timeElapsed: 0,
      thresholdMinute: this.props.thresholdMinute, // At which minute to apply thresholdClass to div in render()
      thresholdClass: this.props.thresholdClass, // What CSS class to apply
      thresholdCallCodes: this.props.thresholdCallCodes, // Which call codes should trigger a class change on threshold reached
      currentCallCode: this.props.currentCallCode, // The current call code
      thresholdReached: false
    };
  }

  // Begin the timer as soon as the component is loaded.
  componentDidMount() {
    if(document.breakTimer != null) {
      this.reset();
    }
    this.toggle();
    console.log("BreakTimer: Loaded. currentCallCode: " + this.state.currentCallCode);
  }

  // If the component unnmounts, reset.
  componentWillUnmount() {
    console.log("BreakTimer: Unmounting");
    this.reset()
  }

  // Toggle the state of the timer between...