coriolis/app/views/page-outfit.html

<div id="outfit">

  <div id="overview">
    <h1 ng-bind="ship.name"></h1>
    <div id="build">
      <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxsize="50" />
      <button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode || !canSave">
        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl">Save</span>
      </button>
      <button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">
        <svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="button-lbl">Reload</span>
      </button>
      <button class="danger" ng-click="deleteBuild()" ng-disabled="!savedCode">
        <svg class="icon lg"><use xlink:href="#bin"></use></svg>
      </button>
      <button ui-sref="outfit({shipId: ship.id,code:null, bn: buildName})" ng-disabled="!code">
        <svg class="icon lg"><use xlink:href="#switch"></use></svg><span class="button-lbl">Reset</span>
      </button>
      <button ng-click="stripBuild()">
        <svg class="icon lg"><use xlink:href="#feather"></use></svg><span class="button-lbl">Low-Weight</span>
      </button>
    </div>
  </div>

  <div id="summary">
    <table id="summaryTable">
      <thead>
        <tr class="main">
          <th rowspan="2">Size</th>
          <th rowspan="2">Agility</th>
          <th rowspan="2">Speed</th>
          <th rowspan="2">Boost</th>
          <th rowspan="2">DPS</th>
          <th rowspan="2">Armour</th>
          <th rowspan="2">Shields</th>
          <th colspan="2">Mass</th>
          <th rowspan="2">Cargo</th>
          <th rowspan="2">Fuel</th>
          <th colspan="3">Jump Range</th>
          <th colspan="3">Total Range</th>
        </tr>
        <tr>
          <th class="lft">Unladen</th>
          <th>Laden</th>
          <th class="lft">Max</th>
          <th>Full Tank</th>
          <th>Laden</th>
          <th class="lft">Jumps</th>
          <th>Unladen</th>
          <th>Laden</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-bind="SZ[ship.class]"></td>
          <td>{{ship.agility}}/10</td>
          <td>{{fRound(ship.speed)}} <u>m/s</u></td>
          <td>{{fRound(ship.boost)}} <u>m/s</u></td>
          <td>{{fRound(ship.totalDps)}}</td>
          <td>{{ship.armourTotal}} <span ng-if="ship.armourAdded">({{ship.armour}} + {{ship.armourAdded}})</span></td>
          <td>{{fRound(ship.shieldStrength)}} <u>MJ</u> <span ng-if="ship.shieldMultiplier > 1 && ship.shieldStrength > 0">({{fRPct(ship.shieldMultiplier)}})</span></td>
          <td>{{fRound(ship.unladenMass)}} <u>T</u></td>
          <td>{{fRound(ship.ladenMass)}} <u>T</u></td>
          <td>{{fRound(ship.cargoCapacity)}} <u>T</u></td>
          <td>{{fRound(ship.fuelCapacity)}} <u>T</u></td>
          <td>{{fRound(ship.unladenRange)}} <u>LY</u></td>
          <td>{{fRound(ship.fullTankRange)}} <u>LY</u></td>
          <td>{{fRound(ship.ladenRange)}} <u>LY</u></td>
          <td>{{fRound(ship.maxJumpCount)}}</td>
          <td>{{fRound(ship.unladenTotalRange)}} <u>LY</u></td>
          <td>{{fRound(ship.ladenTotalRange)}} <u>LY</u></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="standard" class="group">
    <h1>Standard</h1>
    <div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
      <div class="details">
        <div class="sz"><span>8</span></div>
        <div class="l">Bulkheads</div>
        <div class="r">{{ship.bulkheads.c.mass}} <u>T</u></div>
        <div class="cl l">{{ship.bulkheads.c.name}}</div>
      </div>
      <div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)">
        <ul>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='0'}" cpid="0">Lightweight Alloy</li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='1'}" cpid="1">Reinforced Alloy</li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='2'}" cpid="2">Military Grade Composite</li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='3'}" cpid="3">Mirrored Surface Composite</li>
          <li class="lc" ng-class="{active: ship.bulkheads.id=='4'}" cpid="4">Reactive Surface Composite</li>
        </ul>
      </div>
    </div>
    <div class="slot" ng-click="selectSlot($event, pp)" ng-class="{selected: selectedSlot==pp}">
      <div class="details">
        <div class="sz">{{::pp.maxClass}}</div>
        <div class="l">{{pp.id}} Power Plant</div>
        <div class="r">{{pp.c.mass}} <u>T</u></div>
        <div class="cb"></div>
        <div class="l">Efficiency: {{pp.c.eff}}</div>
        <div class="l">Power: {{pp.c.pGen}} <u>MW</u></div>
      </div>
      <div component-select class="select" s="pp" opts="availCS.common[0]" ng-if="selectedSlot==pp" ng-click="select('c',pp,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, th)" ng-class="{selected: selectedSlot==th}">
      <div class="details">
        <div class="sz">{{::th.maxClass}}</div>
        <div class="l">{{th.id}} Thrusters</div>
        <div class="r">{{th.c.mass}} <u>T</u></div>
        <div class="cb"></div>
        <div class="l">Optimal Mass: {{th.c.optmass}} <u>T</u></div>
        <div class="l">Max Mass: {{th.c.maxmass}} <u>T</u></div>
      </div>
      <div component-select class="select" s="th" 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">
        <div class="sz">{{::fsd.maxClass}}</div>
        <div class="l">{{fsd.id}} Frame Shift Drive</div>
        <div class="r cr">{{fsd.c.mass}} <u>T</u></div>
        <div class="cb"></div>
        <div class="l">Optimal Mass: {{fsd.c.optmass}} <u>T</u></div>
        <div class="l">Max Fuel: {{fsd.c.maxfuel}} <u>T</u></div>
      </div>
      <div component-select class="select" s="fsd" opts="availCS.common[2]" ng-if="selectedSlot==fsd" ng-click="select('c',fsd,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, ls)" ng-class="{selected: selectedSlot==ls}">
      <div class="details">
        <div class="sz">{{::ls.maxClass}}</div>
        <div class="l">{{ls.id}} Life Support</div>
        <div class="r">{{ls.c.mass}} <u>T</u></div>
        <div class="cb"></div>
        <div class="l">Time: {{fTime(ls.c.time)}}</div>
      </div>
      <div component-select class="select" s="ls" opts="availCS.common[3]" ng-if="selectedSlot==ls" ng-click="select('c',ls,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, pd)" ng-class="{selected: selectedSlot==pd}">
      <div class="details">
        <div class="sz">{{::pd.maxClass}}</div>
        <div class="l">{{pd.id}} Power Distributor</div>
        <div class="r">{{pd.c.mass}} <u>T</u></div>
        <div class="cb"></div>
        <div class="l">WEP: {{pd.c.weaponcapacity}} <u>MJ</u> / {{pd.c.weaponrecharge}} <u>MW</u></div>
        <div class="l">SYS: {{pd.c.systemcapacity}} <u>MJ</u> / {{pd.c.systemrecharge}} <u>MW</u></div>
        <div class="l">ENG: {{pd.c.enginecapacity}} <u>MJ</u> / {{pd.c.enginerecharge}} <u>MW</u></div>
      </div>
      <div component-select class="select" s="pd" opts="availCS.common[4]" ng-if="selectedSlot==pd" ng-click="select('c',pd,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, ss)" ng-class="{selected: selectedSlot==ss}">
      <div class="details">
        <div class="sz">{{::ss.maxClass}}</div>
        <div class="l">{{ss.id}} Sensors</div>
        <div class="r">{{ss.c.mass}} <u>T</u></div>
        <div class="cb"></div>
        <div class="l">Range: {{ss.c.range}} <u>km</u></div>
      </div>
      <div component-select class="select" s="ss" opts="availCS.common[5]" ng-if="selectedSlot==ss" ng-click="select('c',ss,$event)"></div>
    </div>
    <div class="slot" ng-click="selectSlot($event, ft)" ng-class="{selected: selectedSlot==ft}">
      <div class="details">
        <div class="sz">{{::ft.maxClass}}</div>
        <div class="l">{{ft.id}} Fuel Tank</div>
        <div class="r">{{ft.c.capacity}} <u>T</u></div>
      </div>
      <div component-select class="select" s="ft" opts="availCS.common[6]" ng-if="selectedSlot==ft" ng-click="select('c',ft,$event)"></div>
    </div>
  </div>

  <div id="internal" class="group">
    <h1>Internal Compartments</h1>
    <div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" context-menu="select('i', i, $event, 'empty')" ng-class="{selected: selectedSlot==i}">
      <div slot-internal class="details" slot="i" lbl="GMAP[i.c.grp]" fuel="ship.fuelCapacity"></div>
      <div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
        <div component-select s="i" groups="availCS.getInts(i.maxClass)"></div>
      </div>
    </div>
  </div>

  <div id="hardpoints" class="group">
    <h1>HardPoints</h1>
    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '!0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
      </div>
    </div>
  </div>

  <div id="utility" class="group">
    <h1>Utility Mounts</h1>
    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
      </div>
    </div>
  </div>

  <div class="group half" id="componentPriority">
    <table style="width:100%">
      <thead>
        <tr class="main">
          <th colspan="2" class="sortable le" ng-click="sortPwr(cName)">Component</th>
          <th style="width:3em;" class="sortable" ng-click="sortPwr('type')">Type</th>
          <th style="width:4em;" class="sortable" ng-click="sortPwr('priority')">Pri</th>
          <th colspan="2" class="sortable" ng-click="sortPwr('c.power')">Pwr</th>
          <th style="width:3em;" class="sortable" ng-click="sortPwr(statusRetracted)">Ret</th>
          <th style="width:3em;" class="sortable" ng-click="sortPwr(statusDeployed)">Dep</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{pp.c.class}}{{pp.c.rating}}</td>
          <td class="le shorten">Power Plant</td>
          <td><u>SYS</u></td>
          <td>1</td>
          <td class="ri">{{fPwr(pp.c.pGen)}}</td>
          <td class="ri"><u>100%</u></td>
          <td></td>
          <td></td>
        </tr>
        <tr><td style="line-height:0;" colspan="8"><hr style="margin: 0 0 3px;background: #ff8c0d;border: 0;height: 1px;" /></td></tr>
        <tr class="highlight" ng-repeat="c in powerList | orderBy:pwrPredicate:pwrDesc" ng-if="c.c.power" ng-class="{disabled:!c.enabled}">
          <td style="width:1em;" ng-click="togglePwr(c)">{{c.c.class}}{{c.c.rating}}</td>
          <td class="le shorten" ng-click="togglePwr(c)" ng-bind="cName(c)"></td>
          <td ng-click="togglePwr(c)"><u  ng-bind="c.type"></u></td>
          <td><span ng-click="decPriority(c)" class="flip">&#9658;</span> {{c.priority + 1}} <span ng-click="incPriority(c)">&#9658;</span></td>
          <td class="ri" style="width:3.25em;">{{fPwr(c.c.power)}}</td>
          <td class="ri" style="width:3em;"><u>{{f1Pct(c.c.power/ship.powerAvailable)}}</u></td>
          <td ng-if="!c.enabled" class="disabled" colspan="2">DISABLED</td>
          <td ng-if="c.enabled" ng-class="STATUS_CLASS[statusRetracted(c)]">{{STATUS[statusRetracted(c)]}}</td>
          <td ng-if="c.enabled" ng-class="STATUS_CLASS[statusDeployed(c)]">{{STATUS[statusDeployed(c)]}}</td>
        </tr>
      </tbody>
    </table>
    <div style="margin-top: 1em" power-bands bands="priorityBands" available="ship.powerAvailable"></div>
  </div>

  <div class="group half">
    <table class="tabs">
      <thead>
        <tr>
          <th style="width:50%" ng-class="{active: costTab == 'retrofit'}" ng-click="costTab = 'retrofit'">Retrofit Costs</th>
          <th style="width:50%" ng-class="{active: costTab == 'costs'}" ng-click="costTab = 'costs'">Costs</th>
        </tr>
      </thead>
    </table>

    <div ng-if="costTab == 'costs'">
      <table style="width:100%">
        <thead>
          <tr class="main">
            <th colspan="2" class="sortable le" ng-click="sortCost(cName)">
              Component
              <div class="r">
                <u ng-if="discounts.ship < 1">[Ship {{fRPct(1 - discounts.ship)}} off]</u>
                <u ng-if="discounts.components < 1">[Components {{fRPct(1 - discounts.components)}} off]</u>
              </div>
            </th>
            <th class="sortable le" ng-click="sortCost('discountedCost')">Credits</th>
          </tr>
        </thead>
        <tbody>
          <tr class="highlight" ng-repeat="item in costList | orderBy:costPredicate:costDesc" ng-if="item.c.cost > 0" ng-class="{disabled:!item.incCost}">
            <td class="toggleable" style="width:1em;"  ng-click="toggleCost(item)">{{item.c.class}}{{item.c.rating}}</td>
            <td class="le toggleable shorten" ng-click="toggleCost(item)">{{cName(item)}}</td>
            <td class="ri toggleable"  ng-click="toggleCost(item)">{{fCrd(item.discountedCost)}} <u>CR</u></td>
          </tr>
        </tbody>
      </table>
      <table class="total">
        <tr class="ri">
          <td class="lbl">Total</td>
          <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
        </tr>
        <tr class="ri">
          <td class="lbl">Insurance</td>
          <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
        </tr>
      </table>
    </div>

    <div ng-if="costTab == 'retrofit'">
      <div style="overflow-x: auto;-webkit-overflow-scrolling: touch;">
        <table style="width:100%">
          <thead>
            <tr class="main">
              <th colspan="2" class="sortable le" ng-click="sortRetrofit('sellName')">Sell</th>
              <th colspan="2" class="sortable le" ng-click="sortRetrofit('buyName')">Buy</th>
              <th class="sortable le" ng-click="sortRetrofit('netCost')">
                Net Cost
                <div class="r">
                  <u ng-if="discounts.components < 1">[{{fRPct(1 - discounts.components)}} off]</u>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-if="!retrofitList || retrofitList.length == 0">
              <td colspan="5">No Retrofitting changes</td>
            </tr>
            <tr class="highlight" ng-repeat="item in retrofitList | orderBy:retroPredicate:retroDesc">
              <td style="width:1em;">{{item.sellClassRating}}</td>
              <td class="le shorten">{{item.sellName}}</td>
              <td style="width:1em;">{{item.buyClassRating}}</td>
              <td class="le shorten">{{item.buyName}}</td>
              <td class="ri" ng-class="item.netCost > 0 ? 'warning' : 'secondary-disabled'">{{ fCrd(item.netCost)}} <u>CR</u></td>
            </tr>
          </tbody>
        </table>
      </div>
      <table class="total">
        <tr class="ri">
          <td class="lbl">Cost</td>
          <td ng-class="retrofitTotal > 0 ? 'warning' : 'secondary-disabled'">{{fCrd(retrofitTotal)}} <u>CR</u></td>
        </tr>
        <tr class="ri">
          <td class="lbl">Retrofitting from</td>
          <td style="padding:0;">
            <select style="width: 100%; border: none;" ng-model="$parent.retrofitBuild" ng-change="setRetrofitBase()" ng-options="name as name for (name, build) in allBuilds[ship.id]">
              <option value="">Stock / Standard</option>
            </select>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <div class="group half">
    <h1>Jump Range</h1>
    <div line-chart config="jrChart" series="jrSeries"></div>
  </div>

  <div class="group half">
    <h1>Total Range</h1>
    <div line-chart config="trChart" series="trSeries"></div>
  </div>

  <!-- TODO: Add back in once calcSpeed is dynamic and accurate
  <div class="group third">
    <h1>Thruster Speed</h1>
    <div line-chart config="speedChart" series="speedSeries"></div>
  </div>
  -->

  <div class="group half">
    <div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
        <svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
    </div>
  </div>

</div>