95 lines
3.1 KiB
HTML
95 lines
3.1 KiB
HTML
<style>
|
|
.phi-mb-table {
|
|
margin-bottom: 1ex;
|
|
width: 100%;
|
|
}
|
|
|
|
.phi-mb-table-slider div {
|
|
font-size: 75%;
|
|
}
|
|
|
|
.phi-mb-table caption {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phi-mb-table-name {
|
|
text-align: left;
|
|
width: 8em;
|
|
}
|
|
|
|
.phi-mb-table-value {
|
|
width: 4em;
|
|
max-width: 4em;
|
|
text-align: right;
|
|
}
|
|
|
|
#phi-mb-tablecolumn {
|
|
width: 66%;
|
|
float: left;
|
|
}
|
|
|
|
#phi-mb-graphcolumn {
|
|
width: 33%;
|
|
float: right;
|
|
}
|
|
</style>
|
|
<div id="phi-mb-tablecolumn">
|
|
|
|
<table id="phi-mb-fueltable" class="phi-mb-table ui-widget-content ui-corner-all">
|
|
<caption class="ui-widget-header ui-corner-all">Fuel Tanks</caption>
|
|
<thead>
|
|
<tr>
|
|
<th class="phi-mb-table-name">Name</th>
|
|
<th class="phi-mb-table-slider">Level</th>
|
|
<th class="phi-mb-table-value">GAL</th>
|
|
<th class="phi-mb-table-value">IN-LBS</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: tanks">
|
|
<tr data-bind="ifnot: hidden">
|
|
<td class="phi-mb-table-name" data-bind="text: name"></td>
|
|
<td class="phi-mb-table-slider"><div
|
|
data-bind="slider: { value: content, realtime: true, max: capacity, change: setTankLevel }"></div></td>
|
|
<td class="phi-mb-table-value" data-bind="text: content().toFixed(0)"></td>
|
|
<td class="phi-mb-table-value" data-bind="text: moment().toFixed(0)"></td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table id="phi-mb-loadtable" class="phi-mb-table ui-widget-content ui-corner-all">
|
|
<caption class="ui-widget-header ui-corner-all">Payload</caption>
|
|
<thead>
|
|
<tr>
|
|
<th class="phi-mb-table-name">Name</th>
|
|
<th class="phi-mb-table-slider">Load</th>
|
|
<th class="phi-mb-table-value">LBS</th>
|
|
<th class="phi-mb-table-value">IN-LBS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-bind="foreach: loads">
|
|
<tr>
|
|
<td class="phi-mb-table-name" data-bind="text: name"></td>
|
|
<td class="phi-mb-table-slider"><div
|
|
data-bind="slider: { value: mass, realtime: true, 'max': max, 'min': min, change: setLoad }"></div></td>
|
|
<td class="phi-mb-table-value" data-bind="text: mass().toFixed(0)"></td>
|
|
<td class="phi-mb-table-value" data-bind="text: moment().toFixed(0)"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="phi-mb-graphcolumn">
|
|
<div class="ui-widget">
|
|
<div class="ui-widget-header ui-corner-all">Envelope</div>
|
|
<div class="ui-widget-content ui-corner-all">
|
|
<div style="height: 200px" data-bind="flotchart: { data: envelopeData, options: envelopeOptions, hover: hover }"></div>
|
|
<div data-bind="visible: hoverLabel">
|
|
<div>
|
|
<span data-bind="text: hoverLabel"></span> <span data-bind="text: hoverMass().toFixed(0)"></span><span>lbs</span>
|
|
<span data-bind="text: hoverCG().toFixed(0)"></span><span>@in</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|