var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vat = 0.23;
$scope.tariff = {
offpeak: 0.0946*(1+vat),
peak: 0.1785*(1+vat),
power:0.2895*(1+vat)
};
$scope.consumption = {
};
$scope.powerwall = {
price: 3000
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" class="container">
<h2>Tesla Powerwall Savings estimator</h2>
<span class="label label-default">v0.1</span>
<br><br>
<div class="row">
<!-- Inputs -->
<div class="col-md-4">
<h4>Inputs</h4>
<form class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label>Off-peak energy consuption (Kwh)</label>
<input type="number" class="form-control" placeholder="1720" ng-model="consumption.offpeak">
<p class="help-block">Yearly consumption</p>
</div>
<div class="form-group">
<label>Peak energy consumption (Kwh)</label>
<input type="number" class="form-control" placeholder="3969" ng-model="consumption.peak">
<p class="help-block">Yearly consumption</p>
</div>
</div>
</form>
</div>
<!-- Results -->
<div class="col-md-4">
<h4>Results</h4>
<form class="well">
<div class="form-group">
<label>Energy bill estimate</label>
<p ng-show="energybill">{{energybill=(tariff.offpeak)*consumption.offpeak + (tariff.peak)*consumption.peak + tariff.power*365 | currency}}</p>
<p class="help-block" ng-hide="energybill">(nothing to show yet)</p>
</div>
<div class="form-group">
<label>Yearly savings estimate</label>
<p>{{savings=(tariff.peak-tariff.offpeak)*consumption.peak | currency}}</p>
<p class="help-block" ng-hide="savings">(nothing to show yet)</p>
</div>
<div class="form-group">
<label>Investment payback</label>
<p ng-show="savings">{{powerwall.price/savings | number:1}} years</p>
<p class="help-block" ng-hide="savings">(nothing to show yet)</p>
</div>
</form>
</div>
<!-- Config -->
<div class="col-md-4">
<h4 class="faded">Configuration</h4>
<form class="panel panel-default faded">
<div class="panel-body">
<div class="form-group">
<label>Offpeak Energy Price (per Kwh)</label>
<input type="number" class="form-control" placeholder="0,116358" ng-model="tariff.offpeak">
<p class="help-block">Default price is for Portugal's EDP</p>
</div>
<div class="form-group">
<label>Peak Energy Price (per Kwh)</label>
<input type="number" class="form-control" placeholder="0,219555" ng-model="tariff.peak">
<p class="help-block">Default price is for Portugal's EDP</p>
</div>
<div class="form-group">
<label>Contracted KVA (per day)</label>
<input type="number" class="form-control" placeholder="3000" ng-model="tariff.power">
<p class="help-block">Default price is for Portugal's EDP</p>
</div>
<div class="form-group">
<label>Powerwall price</label>
<input type="number" class="form-control" placeholder="1720" ng-model="powerwall.price">
<p class="help-block">Battery plus installation</p>
</div>
</div>
</form>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<span class="text-muted">
<p>
<span class="label label-default">1</span>
Assumes that the Powerwall can convert all the peak consumption into off-peak consumption.
<span class="label label-default">2</span>
Default values mix USD and EUR. Feel free to adapt to your own currency.
<span class="label label-default">3</span>
State incentives are not accounted for. You can do so by reducing the Powerwall's price.
</p>
</span>
</div>
</div>
</body>
</html>
/* Put your css in here */
.faded {
opacity: 0.5;
}
.faded:hover {
opacity: 1;
}