Make entity stats section on aggregate pages more appealing

finos#401
davidwatkins73 · Aug 24, 2016 · 8111782 · 8111782
1 parent d7e87cd
commit 8111782
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 67 deletions.
diff --git a/waltz-ng/client/playpen/3/playpen3.html b/waltz-ng/client/playpen/3/playpen3.html
@@ -26,23 +26,49 @@ <h4 ng-bind="ctrl.selectedApp.name">
         </div>
 
 
-        <button ng-click="ctrl.all()">All</button>
-        <button ng-click="ctrl.more()">Almost All</button>
-        <button ng-click="ctrl.less()">Less</button>
-        <button ng-click="ctrl.low()">Low</button>
-        <button ng-click="ctrl.high()">High</button>
-
-        <pre>{{ ctrl.selectedApp }} </pre>
-        <div class="waltz-scroll-region" style="height: 200px">
-            <ul>
-                <li ng-repeat="app in ctrl.apps">
+        <div class="row">
+            <div class="col-md-12">
+                <button ng-click="ctrl.all()">All</button>
+                <button ng-click="ctrl.more()">Almost All</button>
+                <button ng-click="ctrl.less()">Less</button>
+                <button ng-click="ctrl.low()">Low</button>
+                <button ng-click="ctrl.high()">High</button>
+                <hr>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-4">
+                <form>
+                    <label>Kind</label>
+                    <input type="text"
+                           ng-model='ctrl.ref.kind'
+                           class="form-control">
+                    <label>Id</label>
+                    <input type="number"
+                           ng-model='ctrl.ref.id'
+                           class="form-control">
+                    <br>
+                    <button class="btn" ng-click="ctrl.refresh()">
+                        Refresh
+                    </button>
+                </form>
+            </div>
+            <div class="col-md-8">
+                <div class="waltz-scroll-region" style="height: 200px">
+                    <ul>
+                        <li ng-repeat="app in ctrl.apps">
                     <span ng-bind='app.name'
                           class="clickable"
                           ng-click="ctrl.selectedApp = app">
                     </span>
-                </li>
-            </ul>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
         </div>
+
     </waltz-section>
 
 

diff --git a/waltz-ng/client/playpen/3/playpen3.js b/waltz-ng/client/playpen/3/playpen3.js
@@ -1,68 +1,78 @@
+import _ from 'lodash';
 
 
-function controller($scope, assetCostStore, appStore) {
-    const vm = this;
-    let appsById = {};
-
-    const selector = {
-        entityReference: {
-            id: 10,
-            kind: 'ORG_UNIT'
-        },
-        scope: 'CHILDREN'
-    };
-
-    const amountsPromise = assetCostStore
-        .calculateCombinedAmountsForSelector(selector);
-
-    amountsPromise
-        .then(amounts => vm.amounts = amounts);
-
-    appStore
-        .findBySelector(selector)
-        .then(apps => vm.apps = apps)
-        .then(apps => appsById = _.keyBy(apps, 'id'));
+const initialState = {
+    ref: {
+        id: 10,
+        kind: 'ORG_UNIT'
+    }
+};
 
-    vm.less = () =>
-        amountsPromise
-            .then(amounts =>
-                vm.amounts = _.filter(
-                    amounts,
-                    () => _.random(0, 10) > 9.3));
 
+function controller($scope, assetCostStore, appStore) {
+    const vm = Object.assign(this, initialState);
 
-    vm.more = () =>
-        amountsPromise
-            .then(amounts =>
-                vm.amounts = _.filter(
-                    amounts,
-                    () => _.random(0, 10) > 5));
+    vm.refresh = () => {
+        let appsById = {};
 
-    vm.all = () =>
-        amountsPromise
-            .then(amounts =>
-                vm.amounts = amounts);
+        const selector = {
+            entityReference: vm.ref,
+            scope: 'CHILDREN'
+        };
 
-    vm.low = () =>
-        amountsPromise
-            .then(amounts =>
-                vm.amounts = _.filter(amounts, x => x.v2 < 400000));
+        const amountsPromise = assetCostStore
+            .calculateCombinedAmountsForSelector(selector);
 
-    vm.high = () =>
         amountsPromise
-            .then(amounts =>
-                vm.amounts = _.filter(amounts, x => x.v2 > 1400000));
-
-    vm.onHover = ({v1: appId, v2: amount}) => $scope.$applyAsync(() => {
-        vm.hoveredApp = appsById[appId];
-        vm.hoveredAmount = amount;
-    });
-
-    vm.onSelect = ({v1: appId, v2: amount}) => $scope.$applyAsync(() => {
-        vm.selectedApp = appsById[appId];
-        vm.selectedAmount = amount;
-    });
+            .then(amounts => vm.amounts = amounts);
+
+        appStore
+            .findBySelector(selector)
+            .then(apps => vm.apps = apps)
+            .then(apps => appsById = _.keyBy(apps, 'id'));
+
+        vm.less = () =>
+            amountsPromise
+                .then(amounts =>
+                    vm.amounts = _.filter(
+                        amounts,
+                        () => _.random(0, 10) > 9.3));
+
+
+        vm.more = () =>
+            amountsPromise
+                .then(amounts =>
+                    vm.amounts = _.filter(
+                        amounts,
+                        () => _.random(0, 10) > 5));
+
+        vm.all = () =>
+            amountsPromise
+                .then(amounts =>
+                    vm.amounts = amounts);
+
+        vm.low = () =>
+            amountsPromise
+                .then(amounts =>
+                    vm.amounts = _.filter(amounts, x => x.v2 < 400000));
+
+        vm.high = () =>
+            amountsPromise
+                .then(amounts =>
+                    vm.amounts = _.filter(amounts, x => x.v2 > 1400000));
+
+        vm.onHover = ({v1: appId, v2: amount}) => $scope.$applyAsync(() => {
+            vm.hoveredApp = appsById[appId];
+            vm.hoveredAmount = amount;
+        });
+
+        vm.onSelect = ({v1: appId, v2: amount}) => $scope.$applyAsync(() => {
+            vm.selectedApp = appsById[appId];
+            vm.selectedAmount = amount;
+        });
+    };
 
+    vm.refresh();
 }