Adding comparison charts, fixes and tweaks

This commit is contained in:
Colin McLeod
2015-05-12 22:43:47 -07:00
parent 1cec10432a
commit 02fe76f43b
22 changed files with 446 additions and 119 deletions

View File

@@ -1,63 +1,33 @@
<div id="comparison">
<!-- TODO: Select builds -->
<!-- TODO: Save Comparison -->
<!-- TODO: Permalink for comparison -->
<!-- TODO: Select faceset -->
<table>
<thead>
<thead ng-click="sortProperty($event)">
<tr class="main">
<th rowspan="2" ng-click="sort('ship.name')">Ship</th>
<th rowspan="2" ng-click="sort('buildName')">Build</th>
<!-- <th rowspan="2" ng-click="sort('ship.agility')">Agility</th> /-->
<!-- <th rowspan="2" ng-click="sort('ship.speed')">Speed</th> /-->
<!-- <th rowspan="2" ng-click="sort('ship.boost')">Boost</th> -->
<th rowspan="2" ng-click="sort('ship.shieldStrength')">Shields</th>
<th rowspan="2" ng-click="sort('ship.armour')">Armour</th>
<th colspan="2">Mass</th>
<th colspan="3">Power</th>
<!-- <th rowspan="2" ng-click="sort('ship.fuelCapacity')">Fuel</th> -->
<th rowspan="2" ng-click="sort('ship.cargoCapacity')">Cargo</th>
<th colspan="2">Jump Range</th>
<th rowspan="2" ng-click="sort('ship.totalCost')">Cost</th>
<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>
<!-- Mass /-->
<th class="lft" ng-click="sort('ship.unladenMass')">Unladen</th>
<th class="rgt" ng-click="sort('ship.ladenMass')">Laden</th>
<!-- Power /-->
<th class="lft" ng-click="sort('ship.powerRetracted')">Retracted</th>
<!-- <th ng-click="sort('pctRetracted')">%</th> -->
<th ng-click="sort('ship.powerDeployed')">Deployed</th>
<!-- <th ng-click="sort('pctDeployed')">%</th> -->
<th class="rgt" ng-click="sort('ship.powerAvailable')">Available</th>
<!-- Jump Range /-->
<th class="lft" ng-click="sort('ship.unladenJumpRange')">Unladen</th>
<th class="rgt" ng-click="sort('ship.ladenJumpRange')">Laden</th>
<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 | orderBy:predicate:desc">
<td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.ship.name"></a></td>
<td class="tl"><a ui-sref="outfit({shipId: b.shipId, code: b.code, bn: b.buildName})" ng-bind="b.buildName"></a></td>
<!-- <td class="tc" ng-bind="b.ship.agility"></td> -->
<!-- <td>{{b.ship.speed}} <u>M/s</u></td> -->
<!-- <td>{{b.ship.boost}} <u>M/s</u></td> -->
<td>{{fRound(b.ship.shieldStrength)}} <u>Mj</u></td>
<td ng-bind="b.ship.armourTotal"></td>
<td>{{fRound(b.ship.unladenMass)}} <u>T</u></td>
<td>{{fRound(b.ship.ladenMass)}} <u>T</u></td>
<td>{{fPwr(b.ship.powerRetracted)}} <u>MW</u></td>
<!-- <td>{{fPct(b.pctRetracted)}}</td> -->
<td>{{fPwr(b.ship.powerDeployed)}} <u>MW</u></td>
<!-- <td>{{fPct(b.pctDeployed)}}</td> -->
<td>{{fPwr(b.ship.powerAvailable)}} <u>MW</u></td>
<!-- <td>{{fRound(b.ship.fuelCapacity)}} <u>T</u></td> -->
<td>{{fRound(b.ship.cargoCapacity)}} <u>T</u></td>
<td>{{fRound(b.ship.unladenJumpRange)}} <u>LY</u></td>
<td>{{fRound(b.ship.ladenJumpRange)}} <u>LY</u></td>
<td>{{b.ship.totalCost}} <u>CR</u></td>
<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>
</tr>
</tbody>
</table>
</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>
</div>