Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-10 07:05:35 +00:00
Code Issues Projects Releases Wiki Activity

Improve power management UI

Browse Source
This commit is contained in:
Colin McLeod
2015-06-10 22:51:36 -07:00
parent 0d3e156346
commit 2ea5c64256
3 changed files with 18 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/js/directives/directive-power-bands.js
View File

@@ -25,11 +25,11 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
// Create Y Axis SVG Elements // Create Y Axis SVG Elements
vis.append('g').attr('class', 'watt axis'); vis.append('g').attr('class', 'watt axis');
vis.append('g').attr('class', 'pct axis'); vis.append('g').attr('class', 'pct axis');
vis.append("text").attr('x', -35).attr('y', 15).attr('class','primary').text('RET'); vis.append("text").attr('x', -35).attr('y', 16).attr('class','primary').text('RET');
vis.append("text").attr('x', -35).attr('y', barHeight + 17).attr('class','primary').text('DEP'); vis.append("text").attr('x', -35).attr('y', barHeight + 18).attr('class','primary').text('DEP');
var retLbl = vis.append("text").attr('y', 15); var retLbl = vis.append("text").attr('y', 16);
var depLbl = vis.append("text").attr('y', barHeight + 17); var depLbl = vis.append("text").attr('y', barHeight + 18);
// Watch for changes to data and events // Watch for changes to data and events
scope.$watchCollection('available', render); scope.$watchCollection('available', render);
@@ -53,24 +53,24 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
deployed.selectAll('text').remove(); deployed.selectAll('text').remove();
// Update X & Y Axis // Update X & Y Axis
wattScale.range([0, w]).domain([0, maxPwr]); wattScale.range([0, w]).domain([0, maxPwr]).clamp(true);
pctScale.range([0, w]).domain([0, maxPwr / available]); pctScale.range([0, w]).domain([0, maxPwr / available]).clamp(true);
vis.selectAll('.watt.axis').call(wattAxis); vis.selectAll('.watt.axis').call(wattAxis);
vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis); vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
retLbl retLbl
.attr('x', wattScale(maxBand.retractedSum) + 5 ) .attr('x', w + 5 )
.attr('class',maxBand.retractedSum > available? 'warning': 'primary') .attr('class',maxBand.retractedSum > available? 'warning': 'primary')
.text(wattFmt(maxBand.retractedSum) + ' (' + pctFmt(maxBand.retractedSum / available) + ')'); .text(wattFmt(Math.max(0,maxBand.retractedSum)) + ' (' + pctFmt(Math.max(0,maxBand.retractedSum / available)) + ')');
depLbl depLbl
.attr('x', wattScale(maxBand.deployedSum) + 5 ) .attr('x', w + 5 )
.attr('class',maxBand.deployedSum > available? 'warning': 'primary') .attr('class',maxBand.deployedSum > available? 'warning': 'primary')
.text(wattFmt(maxBand.deployedSum) + ' (' + pctFmt(maxBand.deployedSum / available) + ')'); .text(wattFmt(Math.max(0,maxBand.deployedSum)) + ' (' + pctFmt(Math.max(0,maxBand.deployedSum / available)) + ')');
retracted.selectAll("rect").data(bands).enter().append("rect") retracted.selectAll("rect").data(bands).enter().append("rect")
.attr("height", barHeight) .attr("height", barHeight)
.attr("width", function(d) { return d.retracted? (wattScale(d.retracted) - 1) : 0; }) .attr("width", function(d) { return Math.max(wattScale(d.retracted) - 1, 0); })
.attr("x", function(d) { return wattScale(d.retractedSum) - wattScale(d.retracted); }) .attr("x", function(d) { return wattScale(d.retractedSum) - wattScale(d.retracted); })
.attr('y', 1) .attr('y', 1)
.attr('class',function(d){ return (d.retractedSum > available)? 'warning' :'primary'; }); .attr('class',function(d){ return (d.retractedSum > available)? 'warning' :'primary'; });
@@ -84,7 +84,7 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
deployed.selectAll("rect").data(bands).enter().append("rect") deployed.selectAll("rect").data(bands).enter().append("rect")
.attr("height", barHeight) .attr("height", barHeight)
.attr("width", function(d) { return (d.deployed || d.retracted)? (wattScale(d.deployed + d.retracted) - 1) : 0; }) .attr("width", function(d) { return Math.max(wattScale(d.deployed + d.retracted) - 1, 0); })
.attr("x", function(d) { return wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed); }) .attr("x", function(d) { return wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed); })
.attr('y', barHeight + 2) .attr('y', barHeight + 2)
.attr('class',function(d){ return (d.deployedSum > available)? 'warning' :'primary'; }); .attr('class',function(d){ return (d.deployedSum > available)? 'warning' :'primary'; });
@@ -99,13 +99,8 @@ angular.module('app').directive('powerBands', ['$window', function ($window) {
} }
function bandText(val, index) { function bandText(val, index) {
if (val > 0) { if (val > 0 && wattScale(val) > 13) {
if( wattScale(val) > 100) { return index + 1;
return (index + 1) + ' (' + wattFmt(val) + ' MW)';
}
if( wattScale(val) > 10) {
return index + 1;
}
} }
return ''; return '';
} }

1
app/less/outfit.less
View File

@@ -155,6 +155,7 @@ table.total {
.smallTablet({ .smallTablet({
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100% !important; width: 100% !important;
}); });
} }

6
app/views/page-outfit.html
View File

@@ -194,7 +194,7 @@
</div> </div>
<div class="group dbl"> <div class="group dbl">
<table style="width:100%"> <table style="min-width:600px;width:100%">
<thead> <thead>
<tr class="main"> <tr class="main">
<th colspan="2" class="sortable le" ng-click="sortPwr(cName)">Component</th> <th colspan="2" class="sortable le" ng-click="sortPwr(cName)">Component</th>
@@ -223,14 +223,14 @@
<td ng-click="togglePwr(c)"><u ng-bind="c.type"></u></td> <td ng-click="togglePwr(c)"><u ng-bind="c.type"></u></td>
<td><span ng-click="decPriority(c)">◀</span> {{c.priority + 1}} <span ng-click="incPriority(c)">▶</span></td> <td><span ng-click="decPriority(c)">◀</span> {{c.priority + 1}} <span ng-click="incPriority(c)">▶</span></td>
<td class="ri" style="width:3.25em;">{{fPwr(c.c.power)}}</td> <td class="ri" style="width:3.25em;">{{fPwr(c.c.power)}}</td>
<td class="ri" style="width:2em;"><u>{{fRPct(c.c.power/ship.powerAvailable)}}</u></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" 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[statusRetracted(c)]">{{STATUS[statusRetracted(c)]}}</td>
<td ng-if="c.enabled" ng-class="STATUS_CLASS[statusDeployed(c)]">{{STATUS[statusDeployed(c)]}}</td> <td ng-if="c.enabled" ng-class="STATUS_CLASS[statusDeployed(c)]">{{STATUS[statusDeployed(c)]}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div style="margin-top: 1em" power-bands bands="priorityBands" available="ship.powerAvailable"></div> <div style="min-width: 600px; margin-top: 1em" power-bands bands="priorityBands" available="ship.powerAvailable"></div>
</div> </div>
<div class="group dbl"> <div class="group dbl">