feat(planner): add ability to check-off steps

app/index.html

@@ -99,6 +99,7 @@
     <script src="scripts/filters/filters.js"></script>
     <script src="scripts/directives/directives.js"></script>
     <script src="scripts/directives/reputationRow.js"></script>
+    <script src="scripts/directives/mountRuns.js"></script>
     <!-- endbuild -->
 
     <!-- build:DEV_ONLY -->

app/scripts/controllers/mounts.controller.js

@@ -1,79 +1,38 @@
 /*globals $WowheadPower */
-'use strict';
-
-(function() {
-
-    angular
-        .module('simpleArmoryApp')
-        .controller('MountsCtrl' , MountsCtrl);
-
-    function MountsCtrl($scope, MountsAndPetsService, PlannerService, $window, SettingsService) {
-
+"use strict";
+
+(function () {
+    angular.module("simpleArmoryApp").controller("MountsCtrl", MountsCtrl);
+
+    function MountsCtrl(
+        $scope,
+        MountsAndPetsService,
+        PlannerService,
+        $window,
+        SettingsService
+    ) {
         $scope.settings = SettingsService;
-
-    	// Analytics for page 
-        $window.ga('send', 'pageview', 'Mounts');
-
-        // anchor css used for planner checkbox
-        $scope.anchorCss = function (boss) {
-            if (boss.epic) {
-                return 'mnt-plan-epic';
-            }
-
-            return 'mnt-plan-rare';
-        };
-
-        // img src for planner image
-        $scope.getPlanImageSrc = function (boss) {
-            if (!boss.icon) {
-                return '';
-            }
-
-            return '//wow.zamimg.com/images/wow/icons/tiny/' + boss.icon + '.gif';
-        };
 
-        MountsAndPetsService.getItems('mounts', 'mounts', 'mount').then(function(items){
-            $scope.items = items;
+        // Analytics for page
+        $window.ga("send", "pageview", "Mounts");
 
-            // called when planner checkbox is clicked
-            $scope.plannerChanged = function() {
-                if ($scope.showPlanner) {
-                    $window.ga('send', 'pageview', 'Planner');
+        MountsAndPetsService.getItems("mounts", "mounts", "mount").then(
+            function (items) {
+                $scope.items = items;
+                $scope.faction = items.isAlliance ? "alliance" : "horde";
 
-                    PlannerService.getSteps(items).then(function(steps){
-                        $scope.plannerReturned = true;
-                        $scope.planner = steps;
-                    });
-                }
-            };
+                // called when planner checkbox is clicked
+                $scope.plannerChanged = function () {
+                    if ($scope.showPlanner) {
+                        $window.ga("send", "pageview", "Planner");
 
-            // img src for planner image
-            $scope.getPlanStepImageSrc = function (step) {
-
-                if (step.capital) {
-                    if (items.isAlliance) {
-                        return 'images/alliance.png';
+                        PlannerService.getSteps(items).then(function (steps) {
+                            $scope.plannerReturned = true;
+                            $scope.planner = steps;
+                        });
                     }
-                    else {
-                        return 'images/horde.png';
-                    }
-                }
-                else if (step.hearth) {
-                    return 'images/hearth.png';
-                }
-
-                return '';
-            };
-
-            $scope.getStepTitle = function (step) {
-                if (step.capital) {
-                    return step.title + (items.isAlliance ? 'Stormwind' : 'Orgrimmar');
-                }
-                else {
-                    return step.title;
-                }
-            };
-        });       
+                };
+            }
+        );
     }
-
-})();
+})();

app/scripts/directives/mountRuns.js

@@ -0,0 +1,89 @@
+"use strict";
+
+(function () {
+    angular.module("simpleArmoryApp").directive("mountRuns", MountRuns);
+
+    var capitals = {
+        alliance: "Stormwind",
+        horde: "Orgrimmar"
+    };
+
+    var emblems = {
+        alliance: "images/alliance.png",
+        horde: "images/horde.png"
+    };
+
+    /*@ngInject*/
+    var MountRunsController = function ($scope, $filter, SettingsService) {
+        $scope.settings = SettingsService;
+
+        $scope.showDone = angular.isDefined($scope.showDone)
+            ? $scope.showDone
+            : false;
+
+        $scope.expanded = angular.isDefined($scope.expanded)
+            ? $scope.expanded
+            : false;
+
+        $scope.$watch(
+            "runs",
+            function () {
+                $scope.filteredRuns = $filter("plannerStepHasRun")(
+                    $scope.runs,
+                    $scope.showDone
+                );
+            },
+            true
+        );
+
+        $scope.toggleRun = function (step) {
+            step.hasRun = !step.hasRun;
+        };
+
+        // anchor css used for planner checkbox
+        $scope.anchorCss = function (boss) {
+            return boss.epic ? "mnt-plan-epic" : "mnt-plan-rare";
+        };
+
+        // img src for planner image
+        $scope.getPlanImageSrc = function (boss) {
+            return boss.icon
+                ? "//wow.zamimg.com/images/wow/icons/tiny/" + boss.icon + ".gif"
+                : "";
+        };
+
+        // img src for planner image
+        $scope.getPlanStepImageSrc = function (step) {
+            var src = "";
+
+            if (step.capital) {
+                src = emblems[$scope.faction];
+            } else if (step.hearth) {
+                src = "images/hearth.png";
+            }
+
+            return src;
+        };
+
+        $scope.getStepTitle = function (step) {
+            return step.capital
+                ? step.title + capitals[$scope.faction]
+                : step.title;
+        };
+    };
+
+    function MountRuns() {
+        return {
+            controller: MountRunsController,
+            restrict: "E",
+            scope: {
+                faction: "@",
+                heading: "@",
+                runs: "=",
+                showDone: "=?",
+                expanded: "=?"
+            },
+            templateUrl: "views/mountRuns.html"
+        };
+    }
+})();

app/scripts/filters/filters.js

@@ -1,3 +1,21 @@
-'use strict';
+"use strict";
 
-/* Filters */
+/* Filters */
+(function () {
+    angular
+        .module("simpleArmoryApp")
+        .filter("plannerStepHasRun", plannerStepHasRun);
+
+    function plannerStepHasRun() {
+        return function (steps, hasRun) {
+            hasRun = typeof hasRun === "undefined" ? true : hasRun;
+            var filtered = [];
+            angular.forEach(steps, function (step) {
+                if (step.hasRun === hasRun) {
+                    filtered.push(step);
+                }
+            });
+            return filtered;
+        };
+    }
+})();

app/scripts/services/planner.service.js

@@ -19,15 +19,16 @@
                     return $q.when(parsedStepsObject);
                 }
 
-                var profile;
                 return LoginService.getProfile($routeParams)
                     .then(function(p) {
-                        profile = p;
                         $log.log('Parsing planner.json...');
                         return $http.get('data/planner.json', { cache: true});
                     })
                     .then(function(data) {
                         parsedStepsObject = parseStepsObject(data.data.steps, items);
+                        angular.forEach(parsedStepsObject, function (step, index) {
+                            step.visualIndex = index + 1;
+                        });
                         return parsedStepsObject;
                     });
             }
@@ -37,6 +38,7 @@
         function parseStepsObject(steps, items) {
             var neededSteps = [];
             angular.forEach(steps, function(step) {
+                step.hasRun = false;
                 if (step.steps) {
                     var neededChildSteps = parseStepsObject(step.steps, items);
 
@@ -46,7 +48,11 @@
                         neededSteps.push(step);
                         neededSteps = neededSteps.concat(neededChildSteps);
                         if (step.finalStep) {
-                            neededSteps.push({'title':step.finalStep, 'hearth':true});
+                            neededSteps.push({
+                                title: step.finalStep,
+                                hearth: true,
+                                hasRun: false
+                            });
                         }
                     }
                 }

app/styles/main.css

@@ -344,7 +344,22 @@ body {
   top: -2px;
   margin-right: 3px;
 }
-/* ## Mounts Page ############################### */
+
+/* ## Planner Page ############################### */
+.planner-details summary {
+    cursor: pointer;
+    display: list-item;
+}
+
+.planner-details h4 {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.planner-table .complete {
+    opacity: .5;
+    text-decoration: line-through;
+}
 
 /* Fix up the widths for bigger header */
 @media (min-width: 768px) {

app/views/mountRuns.html

@@ -0,0 +1,55 @@
+<details class="planner-details" ng-open="filteredRuns.length > 0 && expanded">
+  <summary>
+    <h4>{{heading}} ({{ filteredRuns.length }})</h4>
+  </summary>
+
+  <table class="table table-condensed planner-table">
+    <thead>
+      <tr>
+        <th></th>
+        <th>#</th>
+        <th>Step</th>
+        <th class="mnt-plan-boss-col">Boss</th>
+        <th class="mnt-plan-mount-col" style="padding-left:0px;">Mount</th>
+        <th>Notes</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="step in filteredRuns" ng-class="{complete: step.hasRun}">
+        <td>
+            <input type="checkbox" ng-model="step.hasRun" ng-click="toggleRun(step)" />
+        </td>
+        <td>{{step.visualIndex}}</td>
+        <td>
+          <img ng-src="{{getPlanStepImageSrc(step)}}" ng-hide="getPlanStepImageSrc(step) == ''" class="mnt-icon-step"/>
+          {{getStepTitle(step)}}
+        </td>
+        <td colspan="2">
+          <table width="100%">
+            <tbody>
+              <tr ng-repeat="boss in step.bosses">
+                <td class="mnt-plan-boss-col">{{boss.name}}</td>
+                <td class="mnt-plan-mount-col">
+                  <a ng-show="boss.itemId" ng-class="anchorCss(boss)" target="{{settings.anchorTarget}}" ng-href="//{{settings.WowHeadUrl}}/item={{ boss.itemId }}">
+                    <img class="mnt-plan-icon" ng-src="{{getPlanImageSrc(boss)}}">
+                    {{boss.mount}}
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td>
+          {{step.notes}}
+          <table>
+            <tbody>
+              <tr ng-repeat="boss in step.bosses">
+                <td>{{boss.note}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</details>