coriolis/app/views/page-outfit.html

<div id="outfit">
  <div id="hardpoints" class="slot-group">
    <h1>HardPoints</h1>
    <div class="slot" ng-repeat="h in ship.hardpoints" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
        <div class="empty-c" id="empty" ng-click="select(null, h, $event)">EMPTY</div>
        <div ng-repeat="(grp, data) in availCS.getHps(h.maxClass)">
          <div class="select-group">{{grp}}</div>
          <div component-select opts="data"></div>
        </div>
      </div>
    </div>
  </div>

  <div id="standard" class="slot-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.class}}{{ship.bulkheads.c.rating}}</div>
        <div class="cl l">{{ship.bulkheads.c.name}}</div>
        <div class="r cr">{{ship.bulkheads.c.mass}} <u>T</u></div>
      </div>
      <div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)"><ul>
        <li class="lc" id="0">Lightweight Alloy</li>
        <li class="lc" id="1">Reinforced Alloy</li>
        <li class="lc" id="2">Military Grade Composite</li>
        <li class="lc" id="3">Mirrored Surface Composite</li>
        <li class="lc" id="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">Power Plant</div>
        <div class="r">{{pp.id}}</div>
        <div class="cb"></div>
        <div class="l">Eff: {{pp.c.eff}}</div>
        <div class="l">Power: {{pp.c.pGen}} <u>MW</span></div>
        <div class="r">{{pp.c.mass}} <u><u>T</u></span></div>
      </div>
      <div component-select class="select" 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">Thrusters</div>
        <div class="r">{{th.id}}</div>
        <div class="cb"></div>
        <div class="l">Opt: {{th.c.optmass}} <u>T</u></div>
        <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>
    <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">Frame Shift Drive</div>
        <div class="r">{{fsd.id}}</div>
        <div class="cb"></div>
        <div class="l">Opt: {{fsd.c.optmass}} <u>T</u></div>
        <div class="l">Max Fuel: {{fsd.c.maxfuel}} <u>T</u></div>
        <div class="r cr">{{fsd.c.mass}} <u>T</u></div>
      </div>
      <div component-select class="select" 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">Life Support</div>
        <div class="r">{{ls.id}}</div>
        <div class="cb"></div>
        <div class="l">Time: {{fTime(ls.c.time)}}</div>
        <div class="r cr">{{ls.c.mass}} <u>T</u></div>
      </div>
      <div component-select class="select" 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">Power Distributor</div>
        <div class="r">{{pd.id}}</div>
        <div class="cb"></div>
        <div class="l">Sys: {{pd.c.weaponcapacity}} <u>Mj</u> {{pd.c.weaponrecharge}} <u>Mj/s</u></div>
        <div class="l">Wep: {{pd.c.systemcapacity}} <u>Mj</u> {{pd.c.systemrecharge}} <u>Mj/s</u></div>
        <div class="l">Eng: {{pd.c.enginecapacity}} <u>Mj</u> {{pd.c.enginerecharge}}<u>Mj/s</u></div>
        <div class="r cr">{{pd.c.mass}} <u>T</u></div>
      </div>
      <div component-select class="select" 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">Sensors</div>
        <div class="r">{{ss.id}}</div>
        <div class="cb"></div>
        <div class="l">{{ss.c.range}} <u>KM</u></div>
        <div class="r cr">{{ss.c.mass}} <u>T</u></div>
      </div>
      <div component-select class="select" 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">Fuel Tank</div>
        <div class="r">{{ft.id}}</div>
        <div class="r cr">{{ft.c.capacity}} <u>T</u></div>
      </div>
      <div component-select class="select" opts="availCS.common[6]" ng-if="selectedSlot==ft" ng-click="select('c',ft,$event)"></div>
    </div>
  </div>

  <div id="internal" class="slot-group">
    <h1>Internal Compartments</h1>
    <div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" ng-class="{selected: selectedSlot==i}">
      <div slot-internal class="details" slot="i" lbl="igMap[i.c.group]"></div>
      <div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
        <div class="empty-c" id="empty" ng-click="select(null, i, $event)">EMPTY</div>
        <div ng-repeat="(grp, data) in availCS.getInts(i.maxClass)">
          <div class="select-group">{{grp}}</div>
          <div component-select opts="data"></div>
        </div>
      </div>
    </div>
  </div>

  <div id="summary">
    <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" />
        <button ng-click="saveBuild()" ng-disabled="!buildName && code == savedCode">Save</button>
        <button ng-click="reloadBuild()" ng-disabled="!savedCode && code == savedCode">Reload</button>
        <button ng-click="deleteBuild()" ng-disabled="!savedCode">Delete</button>
        <button ui-sref="outfit({shipId: ship.id,code:null})" ng-disabled="!code">Reset</button>
      </div>
    </div>
    <div class="list">
      <div class="header">Maneuverability</div>
      <div class="summary">
        <div class="item"><div class="lbl">Boost</div><div class="val">{{fRound(ship.boost)}} <u>m/s</u></div></div>
        <div class="item"><div class="lbl">Speed</div><div class="val">{{fRound(ship.speed)}} <u>m/s</u></div></div>
        <div class="item"><div class="lbl">Agility</div><div class="val">{{ship.agility}} / 10</div></div>
      </div>
    </div>
    <div class="list">
      <div class="header">Shields</div>
      <div class="summary">
        <!-- TODO: Implement Shield Recharge rate
        <div class="item"><div class="lbl">Recharge Rate</div><div class="val">{{fRound(0)}} <u>Mj/s</u></div></div>
        /-->
        <div class="item"><div class="lbl">Strength</div><div class="val">{{fRound(ship.shieldStrength)}} <u>Mj</u></div></div>
        <div class="item"><div class="lbl">Multiplier</div><div class="val">{{fRPct(ship.shieldMultiplier)}}</div></div>
      </div>
    </div>
    <div class="list">
      <div class="header">Armor</div>
      <div class="summary">
        <div class="item"><div class="lbl">Total</div><div class="val">{{ship.armourTotal}}</div></div>
        <div class="item"><div class="lbl">Added</div><div class="val">{{ship.armourAdded}}</div></div>
        <div class="item"><div class="lbl">Base</div><div class="val">{{ship.armour}}</div></div>
      </div>
    </div>
    <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" power-list ship="ship"></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-range ship="ship"></div>
    <div class="list" cost-list ship="ship"></div>
  </div>

</div>