Skip to content

Instantly share code, notes, and snippets.

@zainaali

zainaali/calculator.html

Last active December 19, 2017 07:31
Show Gist options
  • Save zainaali/5d37ed823a1879cc96a8db7090c9b6d8 to your computer and use it in GitHub Desktop.
Save zainaali/5d37ed823a1879cc96a8db7090c9b6d8 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Js Pool water calculator
Raw
calculator.html
<!DOCTYPE html>
<html>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-messages.js"></script>
<!--
further work on validation with AngularJS Ng Messages
https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages
https://scotch.io/tutorials/angularjs-form-validation
Formula Resutls: http://www.alohapoolwater.net/uploads/3/2/4/8/3248875/pool_water_calculations_chart.pdf
-->
<body>
<div class="container" ng-app="calApp" ng-controller="volCal as vm">
<div class="well text-center">
<h2>Pool Calculator for Volume and Loads</h2>
</div>
<form name="poolCal" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.poolType.$touched && poolCal.poolType.$invalid }">
<label class="control-label">Pool Type: </label>
<select class="form-control" ng-model="vm.poolType" name="poolType">
<option value="above">Above Ground</option>
<option value="inner">In-Gound</option>
</select>
<div class="help-block" ng-messages="poolCal.poolType.$error" ng-if="poolCal.poolType.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': userForm.email.$touched && userForm.email.$invalid }">
<label class="control-label">Shape</label>
<select class="form-control" ng-model="vm.shape" name="shape">
<option value="rectangular">Rectangular</option>
<option value="triangular">Triangular</option>
<option value="circular">Circular</option>
<option value="oval">Oval</option>
</select>
<div class="help-block" ng-messages="poolCal.shape.$error" ng-if="poolCal.shape.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
</div>
</div>
<div class="mainSwitch" ng-switch="vm.shape">
<div class="row" ng-switch-when="rectangular">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.length.$touched && poolCal.length.$invalid }">
<label class="control-label">length (ft) * </label>
<input type="text" name="length" ng-model="vm.length" class="form-control" required>
<div class="help-block" ng-messages="poolCal.shape.$error" ng-if="poolCal.shape.$touched">
<div ng-messages-include="messages.html"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.width.$touched && poolCal.width.$invalid }">
<label class="control-label">Width (ft) * </label>
<input type="text" name="width" id="width" ng-model="vm.width" class="form-control" required>
</div>
</div>
</div>
<div class="row" ng-switch-when="triangular">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.base.$touched && poolCal.base.$invalid }">
<label class="control-label">Base (ft) * &nbsp;&nbsp;</label>
<input type="text" name="base" id="base" ng-model="vm.base" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.height.$touched && poolCal.height.$invalid }">
<label class="control-label">Height (ft) * </label>
<input type="text" name="height" id="height" ng-model="vm.height" class="form-control" required>
</div>
</div>
</div>
<div class="row" ng-switch-when="circular">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.diameter.$touched && poolCal.diameter.$invalid }">
<label class="control-label">Diameter (ft) * </label>
<input type="text" name="diameter" id="diameter" ng-model="vm.diameter" class="form-control" required>
</div>
</div>
</div>
<div class="row" ng-switch-when="oval">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.length1.$touched && poolCal.length1.$invalid }">
<label class="control-label">Length (ft) * &nbsp;&nbsp;</label>
<input type="text" name="length1" id="length1" ng-model="vm.length1" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.weight1.$touched && poolCal.weight1.$invalid }">
<label class="control-label">Wight (ft) * </label>
<input type="text" name="weight1" id="weight1" ng-model="vm.weight1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" ng-hide="vm.poolType == 'above'">
<div class="form-group" ng-class="{ 'has-error': poolCal.depth1.$touched && poolCal.depth1.$invalid }">
<label class="control-label">Shallow End (ft) * </label>
<input type="text" name="depth1" id="depth1" ng-model="vm.depth1" class="form-control" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': poolCal.depth2.$touched && poolCal.depth2.$invalid }">
<label class="control-label" ng-hide="vm.poolType == 'above'">Deep End (ft) *</label>
<label class="control-label" ng-show="vm.poolType == 'above'">Depth (ft) *</label>
<input type="text" name="depth2" id="depth2" ng-model="vm.depth2" class="form-control" required >
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Gallons</label>
<input type="text" ng-model="vm.result" class="form-control" disabled/>
</div>
</div>
<div class="col-md-6">
<label class="control-label">Loads</label>
<input type="text" ng-model="vm.load" class="form-control" disabled/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="button" value="Calculate" ng-click="vm.calculate()" class="btn btn-danger"/>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
var calApp = angular.module('calApp', ['ngAnimate','ngMessages']);
// Decimals inches converting in Feet
calApp.factory('MathService', function() {
var factory = {}
factory.inchtofeet = function(foot) {
var feet = Math.floor(foot);
console.log(feet);
var round = ((foot - feet) * 0.0833)+feet;
return round;
}
return factory;
});
calApp.controller("volCal", function (MathService) {
var vm = this; /*initlize the current scope*/
vm.shape = 'rectangular';
vm.poolType = 'above';
vm.length = null;
vm.width = null;
vm.length1 = null;
vm.weight1 = null;
vm.base = null;
vm.height = null;
vm.diameter = null;
vm.depth1 = null;
vm.depth2 = null;
/* Function to calculate based on shape selected */
vm.calculate = function() {
var length = MathService.inchtofeet(vm.length);
console.log(length);
var width = MathService.inchtofeet(vm.width);
console.log(width);
var length1 = MathService.inchtofeet(vm.length1);
var weight1 = MathService.inchtofeet(vm.weight1);
var base = MathService.inchtofeet(vm.base);
var height = MathService.inchtofeet(vm.height);
var diameter = MathService.inchtofeet(vm.diameter);
var depth1 = MathService.inchtofeet(vm.depth1);
var depth2 = MathService.inchtofeet(vm.depth2);
vm.avg = ((parseFloat(vm.depth1) + parseFloat(vm.depth2)) / 2);
if (vm.shape == 'rectangular' ) {
if (vm.poolType == 'inner') {
if ( !vm.length || !vm.length || !vm.avg) return alert('Please fill all require fields.');
vm.result = Math.round(parseFloat(vm.length) * parseFloat(vm.width) * parseFloat(vm.avg) * 7.5);
} else{
if ( !vm.length || !vm.length || !vm.depth2) return alert('Please fill all require fields.');
vm.result = Math.round(parseFloat(vm.length) * parseFloat(vm.width) * parseFloat(vm.depth2) * 5.9);
}
} else if (vm.shape == 'triangular') {
if (vm.poolType == 'inner') {
if ( !vm.base || !vm.height || !vm.avg) return alert('Please fill all require fields.');
vm.result = Math.round((parseFloat(vm.base) * parseFloat(vm.height) / 2 ) * vm.avg * 7.5);
} else{
if ( !vm.base || !vm.height || !vm.depth2) return alert('Please fill all require fields.');
vm.result = Math.round((parseFloat(vm.base) * parseFloat(vm.height) / 2 ) * parseFloat(vm.depth2) * 5.9);
}
} else if (vm.shape == 'circular') {
if (vm.poolType == 'inner') {
if ( !vm.diameter || !vm.avg) return alert('Please fill all require fields.');
vm.result = Math.round(3.14 * Math.pow(vm.diameter, 2) * parseFloat(vm.avg) * 7.5);
} else{
if ( !vm.diameter || !vm.depth2) return alert('Please fill all require fields.');
vm.result = Math.round(3.14 * Math.pow(vm.diameter, 2) * parseFloat(vm.depth2) * 5.9);
}
} else if(vm.shape == 'oval'){
if ( !vm.length1 || !vm.weight1 || !vm.avg) return alert('Please fill all require Oval fields.');
vm.result = Math.round(parseFloat(vm.length1) * parseFloat(vm.weight1) * parseFloat(vm.avg) * 7.9);
}else {
}
vm.load = Math.round(vm.result / 6500);
};
//}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment