zargold/Filters.js

## Filters.js
angular.module('filters', [])

/*
 * Creates a time that is the right hour relative to Now
 * for displaying a number (or fraction of hours) as a time.
 * (4)    => 4:00
 * (3.17) => 3:10
 * (67.291667) => 67:18 (rounds up at .5 of a minute)
 * Usage: {{ job.actualHoursSpent | decToHour | date: 'H:mm' }}
 * Because it adds on to Angular's built in date filter as above
 * It can apply any formatting strategy angular allows...
 */
.filter('decToHour', function($filter) {


  // *private
  // Error given when a number is probably not inputted as intended:
  // Intended use is only for positive numbers probably less than
  // 10000 or so -- 120000 hours is unlikely amount of labor hours.
  var errorMessage = 'Invalid input used with decToHour filter, please check for a misuse of: "| decToHour"';

  // Deal with hours with integer hours like 4 or 24.
  function nakedHours(hs, form, time) {
    return $filter('date')(time.setHours(hs, 0, 0), form);
  }

  function decHours(hs, form, time) {
    var rounded = Math.floor(hs);
    var decimal = hs - rounded;
    var minutes = Math.round(decimal * 60);
    return $filter('date')(time.setHours(rounded, minutes, 0), form);
  }

  /*
   * @param: inputHours {decimal} time spent eg. 3.17
   * @param: specialFormat {string} feeds to angular date filter
   * @param: hourText {string} for displaying over 23.99 hours
   * defaults to 'H:mm' any other use is experimental.
   * TODO: 'H:mm' will probably not work well with other formats.
   */
  return function(inputHours, specialFormat, hourText) {
    //reference point for amount of hours...
    var now = new Date();
    var hours = Number(inputHours);
    hourText = hourText || 'hs';
    specialFormat = specialFormat || 'H:mm';
    if (Number.isNaN(hours) || hours < 0) {
      console.warn(errorMessage);
      return hours;
    }

    // for now this is the only functionality
    // it will return as rounded Decimal for over 24 hours.
    // TODO: add a third param to allow special instructions.
    if (hours > 23.9916666666) {

      // Not going to bother rounding huge numbers
      if (String(hours).indexOf('e') > 0) {
        console.warn(errorMessage);
        return hours + hourText;
      }
      // one can always add CSS or | uppercase filter.
      // TODO: Potentially allow for different decimal places than 2.
      return (Math.round(hours * 100) / 100) + hourText;
    }

    if (hours % 1 === 0) {
      return nakedHours(hours, specialFormat, now);
    }

    return decHours(hours, specialFormat, now);
  };
});

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example101-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>


  </head>
  <body ng-app="app">
    <p ng-non-bindable>
      {{-4 | decToHour}} // Does nothing to - Hours (a weird concept)
    </p>
    <p>{{-4 | decToHour}}</p>
    <p ng-non-bindable>
      {{3.17 | decToHour}} // formats decimals to minutes.
    </p>
    <p>{{3.17 | decToHour}}</p>
    <p ng-non-bindable>
      {{24.1789232323 | decToHour}} // has no problem with under 23.99166...7 hours.
    </p>
    <p>{{23.1789232323 | decToHour}}</p>
    <p ng-non-bindable>
      {{25.174989294 | decToHour}} // formats large decimals to rounded "hours".
    </p>
    <p>{{25.174989294 | decToHour}}</p>
    <p ng-non-bindable>
      {{23.991666667 | decToHour}} // Has no problem with updates to time.
    </p>
    <p>{{23.991666667 | decToHour}}</p>
    <script type='text/javascript' src='Filters.js'></script>
    <script type='text/javascript'>
      angular.module('app', ['filters']);
    </script>
  </body>
</html>

<!--
Original code used:
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

## protractor.js
// customized by Raz
it('should format hours', function() {
  expect(element(by.binding("4 | decToHour")).getText()).
    toBe("4:00");
  expect(element(by.binding("3.17 | decToHour")).getText()).
    toBe("3:10");
  expect(element(by.binding("23.1789232323 | decToHour")).getText()).
    toBe("23:11");
  expect(element(by.binding("25.174989294 | decToHour")).getText()).
    toBe("25.17hs");
  expect(element(by.binding("23.991667 | decToHour")).getText()).
    toBe("23.99hs");
});

/*
Original code is:
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
	angular.module('filters', [])

	/*
	* Creates a time that is the right hour relative to Now
	* for displaying a number (or fraction of hours) as a time.
	* (4) => 4:00
	* (3.17) => 3:10
	* (67.291667) => 67:18 (rounds up at .5 of a minute)
	* Usage: {{ job.actualHoursSpent \| decToHour \| date: 'H:mm' }}
	* Because it adds on to Angular's built in date filter as above
	* It can apply any formatting strategy angular allows...
	*/
	.filter('decToHour', function($filter) {


	// *private
	// Error given when a number is probably not inputted as intended:
	// Intended use is only for positive numbers probably less than
	// 10000 or so -- 120000 hours is unlikely amount of labor hours.
	var errorMessage = 'Invalid input used with decToHour filter, please check for a misuse of: "\| decToHour"';

	// Deal with hours with integer hours like 4 or 24.
	function nakedHours(hs, form, time) {
	return $filter('date')(time.setHours(hs, 0, 0), form);
	}

	function decHours(hs, form, time) {
	var rounded = Math.floor(hs);
	var decimal = hs - rounded;
	var minutes = Math.round(decimal * 60);
	return $filter('date')(time.setHours(rounded, minutes, 0), form);
	}

	/*
	* @param: inputHours {decimal} time spent eg. 3.17
	* @param: specialFormat {string} feeds to angular date filter
	* @param: hourText {string} for displaying over 23.99 hours
	* defaults to 'H:mm' any other use is experimental.
	* TODO: 'H:mm' will probably not work well with other formats.
	*/
	return function(inputHours, specialFormat, hourText) {
	//reference point for amount of hours...
	var now = new Date();
	var hours = Number(inputHours);
	hourText = hourText \|\| 'hs';
	specialFormat = specialFormat \|\| 'H:mm';
	if (Number.isNaN(hours) \|\| hours < 0) {
	console.warn(errorMessage);
	return hours;
	}

	// for now this is the only functionality
	// it will return as rounded Decimal for over 24 hours.
	// TODO: add a third param to allow special instructions.
	if (hours > 23.9916666666) {

	// Not going to bother rounding huge numbers
	if (String(hours).indexOf('e') > 0) {
	console.warn(errorMessage);
	return hours + hourText;
	}
	// one can always add CSS or \| uppercase filter.
	// TODO: Potentially allow for different decimal places than 2.
	return (Math.round(hours * 100) / 100) + hourText;
	}

	if (hours % 1 === 0) {
	return nakedHours(hours, specialFormat, now);
	}

	return decHours(hours, specialFormat, now);
	};
	});
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Example - example-example101-production</title>


	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>


	</head>
	<body ng-app="app">
	<p ng-non-bindable>
	{{-4 \| decToHour}} // Does nothing to - Hours (a weird concept)
	</p>
	<p>{{-4 \| decToHour}}</p>
	<p ng-non-bindable>
	{{3.17 \| decToHour}} // formats decimals to minutes.
	</p>
	<p>{{3.17 \| decToHour}}</p>
	<p ng-non-bindable>
	{{24.1789232323 \| decToHour}} // has no problem with under 23.99166...7 hours.
	</p>
	<p>{{23.1789232323 \| decToHour}}</p>
	<p ng-non-bindable>
	{{25.174989294 \| decToHour}} // formats large decimals to rounded "hours".
	</p>
	<p>{{25.174989294 \| decToHour}}</p>
	<p ng-non-bindable>
	{{23.991666667 \| decToHour}} // Has no problem with updates to time.
	</p>
	<p>{{23.991666667 \| decToHour}}</p>
	<script type='text/javascript' src='Filters.js'></script>
	<script type='text/javascript'>
	angular.module('app', ['filters']);
	</script>
	</body>
	</html>

	<!--
	Original code used:
	Copyright 2016 Google Inc. All Rights Reserved.
	Use of this source code is governed by an MIT-style license that
	can be found in the LICENSE file at http://angular.io/license
	-->
	// customized by Raz
	it('should format hours', function() {
	expect(element(by.binding("4 \| decToHour")).getText()).
	toBe("4:00");
	expect(element(by.binding("3.17 \| decToHour")).getText()).
	toBe("3:10");
	expect(element(by.binding("23.1789232323 \| decToHour")).getText()).
	toBe("23:11");
	expect(element(by.binding("25.174989294 \| decToHour")).getText()).
	toBe("25.17hs");
	expect(element(by.binding("23.991667 \| decToHour")).getText()).
	toBe("23.99hs");
	});

	/*
	Original code is:
	Copyright 2016 Google Inc. All Rights Reserved.
	Use of this source code is governed by an MIT-style license that
	can be found in the LICENSE file at http://angular.io/license
	*/