Created
April 30, 2013 16:35
-
-
Save endzyme/5489923 to your computer and use it in GitHub Desktop.
Progress bars with twitter and state machines
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<% items = @compute_resource.package.package_type.workflow %> | |
<% items.delete(:adding_to_network) if @compute_resource.load_balancers.empty? %> | |
<% count = items.count %> | |
<% state_index = items.index @compute_resource.machine_state.to_sym %> | |
<% state = @compute_resource.machine_state %> | |
<% found = false %> | |
<div class="row"> | |
<% items.each do |e| %> | |
<div class="span2 pagination-centered"> | |
<%= e.to_s.titleize %> | |
<% if e.to_s == state %> | |
<div class="progress progress-striped active" style="width: 100%;"> | |
<div class="bar bar-warning" style="width: 100%;"></div> | |
</div> | |
<% found = true %> | |
<% elsif found %> | |
<div class="progress progress-striped" style="width: 100%;"> | |
</div> | |
<% else %> | |
<div class="progress" style="width: 100%;"> | |
<div class="bar bar-success" style="width: 100%;"></div> | |
</div> | |
<% end %> | |
</div> | |
<% end %> | |
</div> | |
<% percent = (state_index == count - 1) ? 100 : ((state_index).to_f / count) * 100 %> | |
<% cellsize = (100 / count.to_f) - 0.6 %> | |
<%= percent %> | |
<div class="row"> | |
<div class="span12"> | |
<% items.each do |e| %> | |
<div class="pagination-centered" style="width: <%= cellsize %>%; display: inline-block"> | |
<%= e.to_s.titleize %> | |
</div> | |
<% end %> | |
</div> | |
<div class="span12"> | |
<div class="progress" style="width: 100%;"> | |
<div class="bar bar-success" style="width: <%= percent %>%;"></div> | |
<% unless state == 'running' %> | |
<div class="bar bar-warning" style="width: <%= cellsize %>%;"></div> | |
<div class="bar" style="display: none; width: <%= 100 - (cellsize + percent) %>%;"></div> | |
<% end %> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment