BatteryLevelBar

Domain · UPS

Battery charge indicator with percent, color-coded bar (green/yellow/red), charge status, and runtime remaining.

Full charge

Preview

100% battery

full

0h 47m remaining

Code

<%- include('../../../modules/domain/ups/BatteryLevelBar', { percent: battery.percent, status: battery.status, runtimeMinutes: battery.runtimeMinutes }) %>

Low battery

Preview

12% battery

discharging

0h 6m remaining

Code

<%- include('../../../modules/domain/ups/BatteryLevelBar', { percent: 12, status: 'DISCHARGING', runtimeMinutes: 6 }) %>

Source modules/domain/ups/BatteryLevelBar.ejs

<%
  var _percent        = locals.percent        || 0;
  var _status         = (locals.status || 'UNKNOWN').toUpperCase();
  var _runtimeMinutes = locals.runtimeMinutes || 0;
  var _size           = locals.size           || 'md';

  var barColor = _percent > 50 ? 'bg-success' : _percent > 20 ? 'bg-warning' : 'bg-error';
  var textColor = _percent > 50 ? 'text-success' : _percent > 20 ? 'text-warning' : 'text-error';

  var statusIcon = _status === 'CHARGING' ? 'fa-bolt' : _status === 'DISCHARGING' ? 'fa-battery-half' : _status === 'FULL' ? 'fa-battery-full' : 'fa-battery-quarter';
  var statusLabel = _status === 'CHARGING' ? 'Charging' : _status === 'DISCHARGING' ? 'Discharging' : _status === 'FULL' ? 'Full' : 'Unknown';

  var runtimeH = Math.floor(_runtimeMinutes / 60);
  var runtimeM = _runtimeMinutes % 60;
  var runtimeStr = runtimeH > 0 ? runtimeH + 'h ' + runtimeM + 'm' : runtimeM + 'm';

  var barH = _size === 'sm' ? 'h-1.5' : _size === 'lg' ? 'h-3' : 'h-2';
  var textSz = _size === 'lg' ? 'text-3xl' : _size === 'sm' ? 'text-sm' : 'text-xl';
%>

  
    
      <%= _percent %>%
      battery
    
    
      
      <%= statusLabel %>
    
  

  
    
  

  <% if (_runtimeMinutes > 0) { %>
  <%= runtimeStr %> remaining
  <% } %>