Custom comparisons, performance improvements

app/views/_header.html

@@ -3,9 +3,9 @@
 
   <div class="l menu">
     <div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
-      <svg class="icon warning"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rocket"></use></svg> Ships
+      <svg class="icon warning"><use xlink:href="#rocket"></use></svg> Ships
     </div>
-    <div class="menu-list" ng-if="openedMenu=='s'">
+    <div class="menu-list no-wrap" ng-if="openedMenu=='s'">
       <a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a>
     </div>
   </div>
@@ -18,7 +18,7 @@
       <ul class="l" ng-repeat="(shipId,builds) in allBuilds">
         {{ships[shipId].properties.name}}
         <li ng-repeat="(name, build) in builds">
-          <a ui-sref-active="active" class="build-name" ui-sref="outfit({shipId:shipId, code:build, bn:name})" ng-bind="name"></a>
+          <a ui-sref-active="active" class="name" ui-sref="outfit({shipId:shipId, code:build, bn:name})" ng-bind="name"></a>
         </li>
       </ul>
     </div>
@@ -29,13 +29,11 @@
       <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#stats-bars"></use></svg> Comparison
     </div>
     <div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();">
-      <ul>
-      <li>Custom Comparisons</li>
-      <li>Coming soon!</li>
-       <!-- TODO: comparison links /-->
-      </ul>
+      <span ng-if="!bs.hasComparisons">None Created</span>
+      <a ng-repeat="(name, comp) in allComparisons" ui-sref-active="active" class="block name" ui-sref="compare({name:name})" ng-bind="name"></a>
       <hr />
-      <a ui-sref="comparison" class="block">Compare All</a>
+      <a ui-sref="compare({name: 'all'})" class="block">Compare All</a>
+      <a ui-sref="compare({name: null})" class="block">Create New</a>
     </div>
   </div>
 
@@ -43,7 +41,7 @@
     <div class="menu-header" ng-class="{selected: openedMenu=='settings'}" ng-click="openMenu($event,'settings')">
       <svg class="icon xl warning"><use xlink:href="#cogs"></use></svg>
     </div>
-    <div class="menu-list" ng-if="openedMenu=='settings'" ng-click="$event.stopPropagation();">
+    <div class="menu-list no-wrap" ng-if="openedMenu=='settings'" ng-click="$event.stopPropagation();">
       <ul>
         Insurance
         <li><select ng-model="insurance.current" ng-options="ins.name for (i,ins) in insurance.opts" ng-change="updateInsurance()"></select></li>
@@ -51,7 +49,7 @@
       <hr />
       <ul>
         Builds & Comparisons
-        <li><a href="#" class="block" ui-sref="modal.export">Export</a></li>
+        <li><a href="#" class="block" ui-sref="modal.export({data: allBuilds})">Export</a></li>
         <li><a href="#" class="block" ui-sref="modal.import">Import</a></li>
         <li><a href="#" class="block" ui-sref="modal.delete">Delete All</a></li>
       </ul>

app/views/_slot-internal.html

@@ -5,14 +5,13 @@
   <div class="r">{{c.c.class}}{{c.c.rating}}</div>
   <div class="cb"></div>
   <div class="l" ng-if="c.c.optmass">Opt: {{c.c.optmass}} <u>T</u></div>
-  <div class="l" ng-if="c.c.maxmass">Max: {{c.c.optmass}} <u>T</u></div>
+  <div class="l" ng-if="c.c.maxmass">Max: {{c.c.maxmass}} <u>T</u></div>
   <div class="l" ng-if="c.c.bins">{{c.c.bins}} <u>Bins</u></div>
   <div class="l" ng-if="c.c.rate">Rate: {{$r.fRound4(c.c.rate/1000)}} <u>T/s</u></div>
   <div class="l" ng-if="c.c.ammo">Ammo: {{c.c.ammo}}</div>
   <div class="l" ng-if="c.c.repair">Repair: {{c.c.repair}}</div>
   <div class="l" ng-if="c.c.range">{{c.c.range}} <u>KM</u></div>
+  <div class="l" ng-if="c.c.rangeRating">Range: {{c.c.rangeRating}}</div>
   <div class="l" ng-if="c.c.armouradd">+{{c.c.armouradd}} <u>Armour</u></div>
   <div class="r cr">{{c.c.mass || c.c.capacity || '0'}} <u>T</u></div>
-
-  <!-- Rate add /-->
 </div>

app/views/modal-export.html

@@ -1,5 +1,5 @@
-<h2>Export</h2>
+<h2 ng-bind="title"></h2>
 <div>
-  <textarea class="cb json">{{builds | json}}</textarea>
+  <textarea class="cb json" ng-focus="onTextClick($event)" ng-bind="export"></textarea>
 </div>
 <button class="r dismiss" ng-click="dismiss()">Close</button>

app/views/modal-import.html

@@ -13,14 +13,14 @@
         <td>{{ships[shipId].properties.name}}</td>
         <td><input type="text" ng-model="b.useName"/></td>
         <td ng-class="{warning: hasBuild(shipId, b.useName) == true, disabled: b.useName == ''}">
-          <span ng-if="b.useName">{{ hasBuild(shipId, b.useName)? 'Overwrite' : 'Create' }}</span>
-          <span ng-if="b.useName == ''">Skip</span>
+          <span ng-show="b.useName">{{ hasBuild(shipId, b.useName)? 'Overwrite' : 'Create' }}</span>
+          <span ng-show="b.useName == ''">Skip</span>
         </td>
       </tr>
     </tbody>
   </table>
   <button class="cl l" ng-click="import()"><svg class="icon"><use xlink:href="#download"></use></svg> Import</button>
-  <button class="l" style="margin-left: 2em;" ng-click="processed = false">Edit JSON</button>
+  <button class="l" style="margin-left: 2em;" ng-click="processed = false" ng-show="canEdit">Edit JSON</button>
 </div>
 
 <button class="r dismiss" ng-click="dismiss()">Cancel</button>

app/views/modal-link.html

@@ -0,0 +1,9 @@
+<h2>Permalink</h2>
+<br>
+<h3>URL</h3>
+<input ng-model="url" size="70" ng-focus="onTextClick($event)">
+<br><br>
+<h3>Shortened</h3>
+<input ng-model="shortenedUrl" size="25" ng-focus="onTextClick($event)">
+<br><br>
+<button class="r dismiss" ng-click="dismiss()">Close</button>

app/views/page-comparison.html

@@ -1,33 +1,68 @@
-<div id="comparison">
 
-<!-- TODO: Select builds -->
-<!-- TODO: Save Comparison -->
-<!-- TODO: Permalink for comparison -->
-<!-- TODO: Select faceset -->
+<table id="comparison">
+  <tr ng-show="compareMode">
+    <td class="head">Comparison</td>
+    <td>
+      <input ng-model="name" ng-change="nameChange()" placeholder="Enter Comparison Name"  maxlength="50" />
+    </td>
+    <td>
+      <button ng-click="save()" ng-disabled="!name || name == 'all' || saved"><svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg> Save</button>
+      <button ng-click="delete()" ng-disabled="name == 'all' || !saved"><svg class="icon lg warning "><use xlink:href="#bin"></use></svg></button>
+      <button ng-click="selectBuilds(true, $event)"><svg class="icon lg "><use xlink:href="#rocket"></use></svg> Builds</button>
+      <button class="r" ng-click="permalink($event)" ng-disabled="builds.length == 0"><svg class="icon lg "><use xlink:href="#link"></use></svg> Permalink</button>
+      <button class="r" ng-click="embed($event)" ng-disabled="builds.length == 0"><svg class="icon lg "><use xlink:href="#embed"></use></svg> Forum</button>
+    </td>
+  </tr>
+  <tr ng-show="!compareMode">
+    <td class="head">Comparison</td>
+    <td colspan="2">
+      <h3 ng-bind="name"></h3>
+      <button class="r" ui-sref="modal.import({obj:importObj})"><svg class="icon lg "><use xlink:href="#download"></use></svg> Import Builds</button>
+    </td>
+  </tr>
+  <tr>
+    <td class="head">Compare</td>
+    <td colspan="2">
+      <ul id="facet-container" as-sortable="facetSortOpts" ng-model="facets" class="sortable" update="tblUpdate">
+        <li ng-repeat="(i,f) in facets" as-sortable-item class="facet" ng-class="{active: f.active}" ng-click="toggleFacet(i)">
+          <div as-sortable-item-handle>
+            <svg class="icon move"><use xlink:href="{{f.active? '#checkmark' : '#checkmark2'}}"></use></svg>
+            <span ng-bind="f.title"></span>
+          </div>
+        </li>
+      </ul>
+    </td>
+    </tr>
+</table>
 
-  <table>
-    <thead  ng-click="sortProperty($event)">
-      <tr class="main">
-        <th rowspan="2" class="prop" prop="name">Ship</th>
-        <th rowspan="2" class="prop" prop="buildName">Build</th>
-        <th ng-repeat="f in facets" rowspan="{{f.prop? 2 : 1}}" colspan="{{f.prop? 1: f.props.length}}" prop="{{f.prop}}" ng-class="{prop: f.prop}" ng-bind="f.title"></th>
-      </tr>
-      <tr>
-        <th ng-repeat="f in subFacets | filter:{sub:true}" class="prop" prop="{{f.prop}}" ng-class="{lft: f.start}" test="{{f.start}}" ng-bind="f.label"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr  class="tr" ng-repeat="b in comparison">
-        <td class="tl"><a ui-sref="outfit({shipId: b.id, code: b.code, bn: b.buildName})" ng-bind="b.name"></a></td>
-        <td class="tl"><a ui-sref="outfit({shipId: b.id, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
-        <td ng-repeat="f in subFacets">{{f.fmt(b[f.prop])}} <u>{{f.unit}}</u></td>
+<table id="comp-tbl" comparison-table ng-click="handleClick($event)"></table>
 
-      </tr>
-      </tbody>
-  </table>
+<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart width="500" facet="f" data="builds">
+  <h3 ng-click="sort(f.props[0])" >{{f.title}}</h3>
+</div>
 
-  <div ng-repeat="f in facets" class="chart" bar-chart width="500" height="chartHeight" facet="f" data="comparison">
-    <h3 ng-click="sort(f.prop || f.props[0])" >{{f.title}}</h3>
+<div class="modal-bg" ng-show="showBuilds" ng-click="selectBuilds(false, $event)">
+  <div class="modal" ui-view="modal-content" ng-click="$event.stopPropagation()">
+    <h3>Select Builds to Compare</h3>
+    <div id="build-select">
+      <table class="l">
+        <thead><tr><th colspan="2">Available</th></tr></thead>
+        <tbody>
+          <tr ng-repeat="b in unusedBuilds | orderBy:'[0]'" ng-click="addBuild(b.id, b.buildName)">
+            <td class="tl" ng-bind="b.name"></td><td class="tl" ng-bind="b.buildName"></td>
+          </tr>
+        </tbody>
+      </table>
+      <h1 class="l">⇆</h1>
+      <table class="l">
+        <tbody>
+          <thead><tr><th colspan="2">Added</th></tr></thead>
+          <tr ng-repeat="b in builds | orderBy:'name'" ng-click="removeBuild(b.id, b.buildName)">
+            <td class="tl" ng-bind="b.name"></td><td class="tl" ng-bind="b.buildName"></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <button class="r dismiss" ng-click="selectBuilds(false, $event)">Done</button>
   </div>
-
 </div>

app/views/page-error.html

@@ -6,8 +6,10 @@
   </h1>
 
   <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>
-    if you this if this keeps happening. <a href="#" ng-click="showDetails = !showDetails">Add these details</a>
+    <div class="cen">
+      <a href="https://github.com/cmmcleod/ed-shipyard" target="_blank" title="Coriolis Github Project">Create an issue on Github</a>
+      if this keeps happening. <a href="#" ng-click="showDetails = !showDetails">Add these details</a>
+    </div>
     <div style="margin-top: 2em;" ng-show="showDetails">
       <div>Browser:<br>{{browser}}</div>
       <div ng-if="path" >Path:<br>{{path}}</div>

app/views/page-outfit.html

@@ -123,7 +123,7 @@
     <div id="overview" class="list">
       <h1 ng-bind="ship.name"></h1>
       <div id="build">
-        <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" />
+        <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxlength="50" />
         <button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode">
         <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg> Save
         </button>
@@ -171,15 +171,22 @@
     <div class="list">
       <div class="header">Mass</div>
       <div class="summary">
-        <div class="item"><div class="lbl">Max</div><div class="val">{{fRound(ship.maxMass)}} <u>T</u></div></div>
         <div class="item"><div class="lbl">Laden</div><div class="val">{{fRound(ship.ladenMass)}} <u>T</u></div></div>
         <div class="item"><div class="lbl">Unladen</div><div class="val">{{fRound(ship.unladenMass)}} <u>T</u></div></div>
       </div>
     </div>
 
+    <div class="list">
+      <div class="header">Capacity</div>
+        <div class="summary">
+          <div class="item"><div class="lbl">Cargo</div><div class="val">{{fRound(ship.cargoCapacity)}} <u>T</u></div></div>
+          <div class="item"><div class="lbl">Fuel</div><div class="val">{{fRound(ship.fuelCapacity)}} <u>T</u></div></div>
+        </div>
+    </div>
+
     <div class="list" ship="ship">
       <div class="header toggle" ng-click="powerExp = !powerExp">Power Use</div>
-      <div class="items" ng-if="powerExp">
+      <div class="items" ng-if="!powerExp">
         <div ng-if="pp.c.pGen" class="item common enabled untoggleable">
           <div class="lbl">{{pp.c.class}}{{pp.c.rating}} Power Plant</div><div class="val">{{fPwr(pp.c.pGen)}}</div>
         </div>
@@ -216,19 +223,10 @@
       </div>
     </div>
 
-      <div class="list">
-      <div class="header">Capacity</div>
-        <div class="summary">
-          <div class="item"><div class="lbl">Cargo</div><div class="val">{{fRound(ship.cargoCapacity)}} <u>T</u></div></div>
-          <div class="item"><div class="lbl">Fuel</div><div class="val">{{fRound(ship.fuelCapacity)}} <u>T</u></div></div>
-        </div>
-    </div>
-
     <div class="list">
       <div class="header toggle" ng-click="rangeExp = !rangeExp">Jump Range</div>
-      <div class="items" ng-if="rangeExp">
-        <!---<linechart data="data" options="options" mode="" width="" height=""></linechart>/-->
-        Stuff!
+      <div class="items cen" ng-if="!rangeExp">
+        <div class="chart" area-chart config="jrChart" series="jrSeries" width="500" height="250"></div>
       </div>
       <div class="summary toggle" ng-click="rangeExp = !rangeExp">
         <div class="item">
@@ -244,11 +242,11 @@
 
     <div class="list">
       <div class="header toggle" ng-click="costsExpanded = !costsExpanded">Costs</div>
-      <div class="items" ng-if="costsExpanded">
-        <div class="item" ng-class="{enabled:ship.incCost}" ng-click="toggleCost()">
+      <div class="items" ng-if="!costsExpanded">
+        <div class="item" ng-class="{enabled:ship.incCost}" ng-click="toggleCost(ship)">
           <div class="lbl">{{ship.name}}</div><div class="val">{{fCrd(ship.cost)}}</div>
         </div>
-        <div class="item" ng-class="{enabled:ship.bulkheads.incCost}" ng-click="toggleCost()" ng-if="ship.bulkheads.c.cost">
+        <div class="item" ng-class="{enabled:ship.bulkheads.incCost}" ng-click="toggleCost(ship.bulkheads)" ng-if="ship.bulkheads.c.cost">
           <div class="lbl">{{ship.bulkheads.c.name}}</div><div class="val">{{fCrd(ship.bulkheads.c.cost)}}</div>
         </div>
         <div ng-repeat="c in ship.common" ng-if="c.c.cost" class="item common" ng-class="{enabled:c.incCost}" ng-click="toggleCost(c)">