Improved error handling and error page

app/index.html

@@ -28,7 +28,7 @@
 
   <footer>
     <div class="right">
-      <a href="https://github.com/cmmcleod/ed-shipyard" target="_blank" title="Shipyard Github Project">Version <%= version %> - <%= date %></a>
+      <a href="https://github.com/cmmcleod/ed-shipyard" target="_blank" title="Coriolis Github Project">Version <%= version %> - <%= date %></a>
     </div>
     <div class="l">
       Coriolis Shipyard was created using assets and imagery from Elite: Dangerous, with the permission of Frontier Developments plc, for non-commercial purposes.<br>

app/js/config.js

@@ -46,10 +46,10 @@ angular.module('app').config(['$provide','$stateProvider', '$urlRouterProvider',
    *
    */
   $provide.decorator('$exceptionHandler', ['$delegate', '$injector', function ($delegate, $injector) {
-    return function(exception, cause) {
+    return function(err, cause) {
       // Go to error state, reload the controller, keep the current URL
-      $injector.get('$state').go('error', { details: exception }, {location:false, reload:true});
+      $injector.get('$state').go('error', {type:null, message: err.message, details: err.stack }, {location:false, reload:true});
-      $delegate(exception, cause);
+      $delegate(err, cause);
     };
   }]);
 

app/js/controllers/controller-error.js

@@ -7,26 +7,27 @@ angular.module('app')
 
   switch ($scope.type) {
     case 404:
+        $rootScope.bodyClass = 'deep-space';
         $scope.msgPre = 'Page';
         $scope.msgHighlight = $scope.path;
         $scope.msgPost = 'Not Found';
-        $rootScope.bodyClass = 'deep-space';
       break;
     case 'no-ship':
+        $rootScope.bodyClass = 'docking-bay';
         $scope.msgPre = 'Ship';
         $scope.msgHighlight = $p.message;
         $scope.msgPost = 'does not exist';
-        $rootScope.bodyClass = 'docking-bay';
       break;
     case 'build-fail':
+        $rootScope.bodyClass = 'ship-explode';  // TODO: create background imag for this
         $scope.msgPre = 'Build Failure!';
-        $scope.image = 'ship-explode';
+        $scope.details = $p.details;
-        $rootScope.bodyClass = 'docking-bay';
       break;
     default:
+      $rootScope.bodyClass = 'thargoid'; // TODO: create background imag for this
       $scope.msgPre = "Uh, this is bad..";
-      $scope.image = 'thargoid';
+      $scope.errorMessage = $p.message;
-      $rootScope.bodyClass = null;
+      $scope.details = $p.details;
   }
 
 }]);

app/js/controllers/controller-shipyard.js

@@ -1,4 +1,4 @@
 angular.module('app').controller('ShipyardController', ['$rootScope', function ($rootScope) {
-  $rootScope.title = 'Coriolis - Shipyard';
+  $rootScope.title = 'Coriolis';
   $rootScope.bodyClass = 'docking-bay';
 }]);

app/js/directives/directive-component-select.js

@@ -2,18 +2,19 @@ angular.module('app').directive('componentSelect', [ function() {
   return {
     restrict: 'A',
     scope:{
-      opts: '=',   // Component Options object
+      opts: '=',  // Component Options object
+      mass: '='   // Current ship mass
     },
     link: function(scope, element) {
       var list = [], o, id;
       var opts = scope.opts;
-      //TODO: take current ship mass into account if provided
+      var mass = scope.mass || 0;
       // Generting the HTML in this manner is MUCH faster than using an angular template.
       for (id in opts) {
         o = opts[id];
         list.push('<li class="');
         list.push(o.name? 'lc' : 'c');
-        if (false) { // Omit id if mass is exceeded making it 'disabled'
+        if (o.maxmass && mass > o.maxmass) { // Omit id if mass is exceeded making it 'disabled'
           list.push(' disabled"');
         } else {
           list.push('" id="');

app/js/shipyard/factory-ship.js

@@ -92,7 +92,6 @@ angular.module('shipyard').factory('Ship', ['Components', 'calcShieldStrength',
     this.armourTotal = this.armourAdded + this.armour;
     // TODO: shield recharge rate
     // TODO: armor bonus / damage reduction for bulkheads
-    // TODO: thermal load and weapon recharge rate
   };
 
   /**

app/less/select.less

@@ -27,6 +27,10 @@
     &:hover {
       color: @warning;
     }
+    &.disabled {
+      cursor: not-allowed;
+      color: @disabled;
+    }
   }
 
   @optionSpacing: 1.8em;
@@ -70,6 +74,10 @@
     &:nth-child(5n +1) {
       clear: left;
     }
+
+    &.disabled {
+      border:1px solid @disabled;
+    }
   }
 
   ul {

app/views/page-error.html

@@ -5,12 +5,15 @@
     <span ng-if="msgPost">{{msgPost}}</span>
   </h1>
 
-  <!-- TODO: add awesome relevant SVG based on code /-->
+  <div style="text-align:left; font-size:0.8em; width: 43em; margin:0 auto;" >
-
+    <a href="https://github.com/cmmcleod/ed-shipyard" target="_blank" title="Coriolis Github Project">Create an issue on Github</a>
-  <p ng-if="path" >Path: {{path}}</p>
+    if you this if this keeps happening. <a href="#" ng-click="showDetails = !showDetails">Add these details</a>
-  <p ng-if="type">Error: {{type}}</p>
+    <div style="margin-top: 2em;" ng-show="showDetails">
-  <p ng-if="details">Details: {{details | json}}</p>
+      <div>Browser:<br>{{browser}}</div>
-  <p>Browser: {{browser}}</p>
+      <div ng-if="path" >Path:<br>{{path}}</div>
+      <div ng-if="type">Error:<br>{{type}}</div>
+      <div ng-if="errorMessage">Message:<br>{{errorMessage}}</div>
+      <div ng-if="details">Details:<br><pre>{{details}}<pre></div>
+    </div>
+  </div>
 </div>
-
-<!-- TODO: Add github issue link /-->

app/views/page-outfit.html

@@ -52,7 +52,7 @@
         <div class="l">Max: {{th.c.maxmass}} <u>T</u></div>
         <div class="r">{{th.c.mass}} <u>T</u></div>
       </div>
-      <div component-select class="select" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
+      <div component-select class="select" mass="ship.unladenMass" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
     </div>
     <div class="slot" ng-click="selectSlot($event, fsd)" ng-class="{selected: selectedSlot==fsd}">
       <div class="details">