angular 1.5, component structure, removed bower

.gitignore

@@ -1,4 +1,5 @@
 .idea/
+dist/
 node_modules
 bower_components
 dutch-tax-income-calculator.iml

package.json

@@ -4,8 +4,8 @@
   "description": "dutch-tax-income-calculator",
   "main": "app.js",
   "scripts": {
-    "start": "node_modules/.bin/webpack-dev-server",
-    "postinstall": "./node_modules/.bin/bower install",
+    "start": "webpack-dev-server",
+    "postinstall": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -19,14 +19,15 @@
   },
   "homepage": "https://github.com/stevermeister/dutch-tax-income-calculator",
   "devDependencies": {
-    "babel-core": "^6.0.14",
-    "babel-loader": "^6.0.0",
-    "babel-preset-es2015": "^6.0.14",
-    "bower": "^1.4.1",
-    "loader-utils": "^0.2.11",
-    "ng-annotate-webpack-plugin": "^0.1.2",
-    "source-map": "^0.5.3",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.14.1"
+    "babel-core": "6.10.4",
+    "babel-loader": "6.2.4",
+    "babel-preset-es2015": "6.9.0",
+    "css-loader": "0.23.1",
+    "html-webpack-plugin": "2.21.0",
+    "ng-annotate-loader": "0.1.0",
+    "ng-cache-loader": "0.0.16",
+    "style-loader": "0.13.1",
+    "webpack": "1.13.1",
+    "webpack-dev-server": "1.14.1"
   }
 }

src/app.js

@@ -0,0 +1,11 @@
+import './styles.css';
+import calcComponent from './calc/calc.component';
+import toolbarComponent from './toolbar/toolbar.component';
+import rulingComponent from './ruling/ruling.component';
+
+angular.module('dit-calculator', ['ngMaterial'], function($locationProvider){
+    $locationProvider.html5Mode(true);
+  })
+  .component('calc', calcComponent)
+  .component('toolbar', toolbarComponent)
+  .component('ruling', rulingComponent);

app.js → src/calc/calc.component.js

@@ -1,20 +1,22 @@
-'use strict'
-
+import template from './calc.html';
 import creditRatesBase from './creditRatesBase.js';
 import creditRatesSocial from './creditRatesSocial.js';
 import creditRatesBaseRuling from './creditRatesBaseRuling.js';
 import creditRatesSocialRuling from './creditRatesSocialRuling.js';
 
-angular.module('dit-calculator', ['ngMaterial'], function($locationProvider){
-    $locationProvider.html5Mode(true);
-  })
-  .controller('mainController', function($scope, $location) {
-
+let calcComponent = {
+  template,
+  controller: function($scope, $location) {
     this.year = 2016;
     if($location.search().year && [2015, 2016].indexOf(+$location.search().year) !== -1) {
       this.year = +$location.search().year;
     }
 
+    this.startFrom = 'year';
+    if(['year', 'month'].indexOf($location.search().startFrom) !==-1){
+      this.startFrom = $location.search().startFrom;
+    }
+
     this.salary = {
       grossYear: 0,
       grossMonth: 0,
@@ -40,15 +42,18 @@ angular.module('dit-calculator', ['ngMaterial'], function($locationProvider){
       'netYear': 'Year net income',
       'netMonth': 'Monthly net income'
     };
-
-    $scope.$watchGroup(['main.salary.age',
-                        'main.salary.ruling',
-                        'main.salary.socialSecurity',
-                        'main.salary.grossYear',
-                        'main.salary.allowance',
-                        'main.year'],
+
+    $scope.$watchGroup([
+        '$ctrl.startFrom',
+        '$ctrl.salary.age',
+        '$ctrl.salary.ruling',
+        '$ctrl.salary.socialSecurity',
+        '$ctrl.salary.grossYear',
+        '$ctrl.salary.allowance',
+        '$ctrl.year'],
       () => {
 
+        $location.search('startFrom', this.startFrom);
         $location.search('salary', this.salary.grossYear);
         $location.search('ruling', +this.salary.ruling);
         $location.search('socialSecurity', +this.salary.socialSecurity);
@@ -161,5 +166,8 @@ angular.module('dit-calculator', ['ngMaterial'], function($locationProvider){
       }
       return index ? currentRates[index - 1] : currentRates[0];
     }
+
+  }
+};
 
-  });
+export default calcComponent;

src/calc/calc.html

@@ -0,0 +1,44 @@
+<md-content layout-lg="column" layout-gt-lg="column" layout-align="center">
+  <md-input-container class="md-display-1" layout-margin>
+    <label>Annual gross income</label>
+    <input type="number" ng-model="$ctrl.salary.grossYear" autofocus>
+  </md-input-container>
+
+  <div layout-lg="row" layout-gt-lg="row" layout-margin>
+    <div flex="40">
+      <div layout="row" layout-margin
+           ng-repeat-start="(salaryOptionKey,  salaryOptionTitle) in $ctrl.salaryOutputOptions">
+        <div flex>
+          {{::salaryOptionTitle}}
+        </div>
+        <div flex class="report-value">
+          {{$ctrl.salary[salaryOptionKey] | number:0}}
+        </div>
+      </div>
+      <md-divider ng-if="!$last" ng-repeat-end></md-divider>
+    </div>
+    <div flex>
+      <md-content class="md-body-1">
+        <div layout="column" layout-margin>
+          <md-radio-group ng-model="$ctrl.year">
+            <md-radio-button value="2015">for 2015</md-radio-button>
+            <md-radio-button value="2016">for 2016</md-radio-button>
+          </md-radio-group>
+        </div>
+      </md-content>
+      <md-content class="md-body-1">
+        <div layout="column" layout-margin>
+          <!--<md-checkbox ng-model="$ctrl.salary.allowance" aria-label="I have 8% holiday allowance">I have 8% holiday allowance</md-checkbox>-->
+          <md-checkbox ng-model="$ctrl.salary.allowance" aria-label="Holiday allowance is included in gross">Holiday
+            allowance included
+          </md-checkbox>
+          <md-checkbox ng-model="$ctrl.salary.age" aria-label="I'm 65+ years old">I'm 65+ years old</md-checkbox>
+          <md-checkbox ng-model="$ctrl.salary.socialSecurity" aria-label="Social security in the Netherlands">Social
+            security
+          </md-checkbox>
+          <md-checkbox ng-model="$ctrl.salary.ruling" aria-label="I have 30% ruling">I have 30% ruling</md-checkbox>
+        </div>
+      </md-content>
+    </div>
+  </div>
+</md-content>

src/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html ng-app="dit-calculator">
+<head>
+	<meta charset="utf-8">
+	<title>Dutch Income Tax Calculator</title>
+	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+	<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
+	<meta property="og:title" content="Dutch Income Tax Calculator" />
+	<base href="/">
+</head>
+<body>
+<!--[if lt IE 9]>
+<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
+	your browser</a> to improve your experience.</p>
+<![endif]-->
+
+<div class="container">
+  <md-container class="center-block">
+    <toolbar></toolbar>
+    <calc></calc>
+  </md-container>
+  <ruling></ruling>
+</div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
+
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
+<!-- Google Analytics -->
+<script>
+	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+				(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+			m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+	ga('create', 'UA-12112718-8', 'auto');
+	ga('send', 'pageview');
+
+</script>
+</body>
+</html>

src/ruling/ruling.component.js

@@ -0,0 +1,7 @@
+import template from './ruling.html';
+
+let rulingComponent = {
+  template
+};
+
+export default rulingComponent;