Progress bar stubs and required resources

TeaWithStrangers · May 13, 2015 · af6764b · af6764b
1 parent 896a7ec
commit af6764b
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 41 deletions.
diff --git a/app/assets/javascripts/cities.js b/app/assets/javascripts/cities.js
@@ -1,46 +1,49 @@
 var onCitiesIndexLoad = function() {
-
-  var listOfActiveCities = [];
-  var listOfUpcomingCities = [];
-
-  var cityLink = function(city) {
-    return '<a href="/' + city.city_code + '">' + city.name + "</a>"
-  }
-
-  $.get('/api/v1/cities', function(data){
-    var cities = _(data.cities).chain()
-    .sortBy(function(c) {
-      return c.info.user_count;
-    }).reverse()
-    .sortBy(function(c) {
-      switch(c.brew_status) {
-        case 'fully_brewed':
-          console.log(100)
-          return 100;
-        case 'warming_up':
-          return 10;
-        case 'hidden':
-          return -1000;
-      }
-      return 1;
-    })
-    .value()
-
-    $.each(cities, function(index, city){
-
-      console.log(city.name, city.info.user_count, city.brew_status)
-      var cityDiv = '<div class="city"><img class="city-image" src="'+city.header_bg+'"/><h3 class="city-name">' + cityLink(city) + '</h3></div>';
-      if(city.brew_status === "fully_brewed"){
-        listOfActiveCities.push(cityDiv);
-      }
-      else if(!(city.brew_status === "unapproved") && !(city.brew_status === "hidden")) {
-        listOfUpcomingCities.push(cityDiv);
-
-      }
+  if(window.location.pathname === '/cities/' || 
+     window.location.pathname === '/cities') {
+
+    var listOfActiveCities = [];
+    var listOfUpcomingCities = [];
+
+    var cityLink = function(city) {
+      return '<a href="/' + city.city_code + '">' + city.name + "</a>"
+    }
+
+    $.get('/api/v1/cities', function(data){
+      var cities = _(data.cities).chain()
+        .sortBy(function(c) {
+          return c.info.user_count;
+        }).reverse()
+      .sortBy(function(c) {
+        switch(c.brew_status) {
+          case 'fully_brewed':
+            console.log(100)
+              return 100;
+          case 'warming_up':
+            return 10;
+          case 'hidden':
+            return -1000;
+        }
+        return 1;
+      })
+      .value()
+
+        $.each(cities, function(index, city){
+
+          console.log(city.name, city.info.user_count, city.brew_status)
+            var cityDiv = '<div class="city"><img class="city-image" src="'+city.header_bg+'"/><h3 class="city-name">' + cityLink(city) + '</h3></div>';
+          if(city.brew_status === "fully_brewed"){
+            listOfActiveCities.push(cityDiv);
+          }
+          else if(!(city.brew_status === "unapproved") && !(city.brew_status === "hidden")) {
+            listOfUpcomingCities.push(cityDiv);
+
+          }
+        });
+      $('.current-cities-container').html(listOfActiveCities.join(' '));
+      $('.upcoming-cities-container').html(listOfUpcomingCities.join(' '));
     });
-    $('.current-cities-container').html(listOfActiveCities.join(' '));
-    $('.upcoming-cities-container').html(listOfUpcomingCities.join(' '));
-  });
+  }
 };
 
 

diff --git a/app/assets/stylesheets/cities/_index.scss b/app/assets/stylesheets/cities/_index.scss
@@ -35,3 +35,34 @@
 .city-banner {
   @include cover-photo(url(''), url(''), linear-gradient(to bottom, rgba($tws-yellow, .87), rgba($tws-yellow, .87)));
 }
+
+.progress-bar { 
+	height: 20px;  /* Can be anything */
+	position: relative;
+	background: $medium-gray;
+	-moz-border-radius: 25px;
+	-webkit-border-radius: 25px;
+	border-radius: 25px;
+	padding: 10px;
+	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
+
+  .bar {
+    display: block;
+    height: 100%;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    background-color: $tws-yellow;
+    box-shadow: 
+      inset 0 2px 9px  rgba(255,255,255,0.3),
+      inset 0 -2px 6px rgba(0,0,0,0.4);
+    position: relative;
+    overflow: hidden;
+  }
+
+  &.green > span {
+    background-color: $tws-green;
+    background-image: linear-gradient(to bottom, $tws-green, $tws-green);
+  }
+}
diff --git a/app/helpers/city_helper.rb b/app/helpers/city_helper.rb
@@ -1,2 +1,5 @@
 module CityHelper
+  def progress_bar(val, max)
+    raw(render partial: 'cities/show/progress_bar', locals: {val: val, max: max})
+  end
 end
diff --git a/app/views/cities/show/_cold_water.html.erb b/app/views/cities/show/_cold_water.html.erb
@@ -0,0 +1 @@
+<%= render partial: 'cities/show/required_resources' %>
diff --git a/app/views/cities/show/_progress_bar.html.erb b/app/views/cities/show/_progress_bar.html.erb
@@ -0,0 +1,12 @@
+<div class="progress-bar-block">
+  <p class="description">
+  <% if val < max %>
+    <%= val %> of <%= max %> filled
+  <% else %>
+    Filled
+  <% end %>
+  </p>
+  <div class="progress-bar <%= 'green' if (val >= max ) %>">
+    <span class="bar" style='width: <%= (val.to_f / max) * 100 %>%;'></span>
+  </div>
+</div>
diff --git a/app/views/cities/show/_required_resources.html.erb b/app/views/cities/show/_required_resources.html.erb
@@ -0,0 +1,27 @@
+<h3>What we need to get going</h3>
+<div class="city-resources">
+	<div class="city-resource">
+		<div class="block">
+			<span class="number">1</span>
+			<p class="description">superstar community leader</p>
+      <a class="button" href="#">I'm interested</a>
+		</div>
+    <%= progress_bar(1, 1) %>
+	</div>
+	<div class="city-resource">
+		<div class="block">
+			<span class="number">8</span>
+			<p class="description">hosts to bring teatime together</p>
+      <%= progress_bar(@city.hosts.count, 8) %>
+		</div>
+    <a class="button" href="#">I'm interested</a>
+	</div>
+	<div class="city-resource">
+		<div class="block">
+			<span class="number">200</span>
+			<p class="description">strangers ready to share at tea time</p>
+      <%= progress_bar(0, 200) %>
+		</div>
+    <a class="button" href="#">Spread the Word</a>
+	</div>
+</div>