flipper-ui 0.2.0.beta2 → 0.2.0.beta3

data/lib/flipper/ui/views/add_actor.erb

@@ -0,0 +1,22 @@
+<% if params.key?("error") %>
+  <div class="flash flash-error">
+    <%= params["error"] %>
+  </div>
+<% end %>
+
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3 class="panel-title">Enable Actor for <%= @feature.key %></h3>
+  </div>
+  <div class="panel-body">
+    <p>
+      Turn on this feature for an individual actor.
+    </p>
+    <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post">
+      <%== csrf_input_tag %>
+      <input type="hidden" name="operation" value="enable">
+      <input type="text" name="value" placeholder="ie: User:6">
+      <input type="submit" value="Add Actor" class="btn">
+    </form>
+  </div>
+</div>

data/lib/flipper/ui/views/add_feature.erb

@@ -0,0 +1,18 @@
+<% if params.key?("error") %>
+  <div class="flash flash-error">
+    <%= params["error"] %>
+  </div>
+<% end %>
+
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3 class="panel-title">Add Feature</h3>
+  </div>
+  <div class="panel-body">
+    <form action="<%= script_name %>/features" method="post">
+      <%== csrf_input_tag %>
+      <input type="text" name="value" placeholder="ie: admins, orgs_next, etc.">
+      <input type="submit" value="Add Feature" class="btn">
+    </form>
+  </div>
+</div>

data/lib/flipper/ui/views/add_group.erb

@@ -0,0 +1,31 @@
+<% if params.key?("error") %>
+  <div class="flash flash-error">
+    <%= params["error"] %>
+  </div>
+<% end %>
+
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3 class="panel-title">Enable Group for <%= @feature.key %></h3>
+  </div>
+  <div class="panel-body">
+    <% if @feature.disabled_groups.empty? %>
+      <p>All groups are enabled for this feature which means there is nothing to add.</p>
+    <% else %>
+      <p>
+        Turn on this feature for an entire group of actors.
+      </p>
+      <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post">
+        <%== csrf_input_tag %>
+        <input type="hidden" name="operation" value="enable">
+        <select name="value">
+          <option value="">Select a group...</option>
+          <% @feature.disabled_groups.each do |group| %>
+            <option value="<%= group.name %>"><%= group.name %></option>
+          <% end %>
+        </select>
+        <input type="submit" value="Add Group" class="btn">
+      </form>
+    <% end %>
+  </div>
+</div>

data/lib/flipper/ui/views/feature.erb

@@ -0,0 +1,209 @@
+<% if params.key?("error") %>
+  <div class="flash flash-error">
+    <%= params["error"] %>
+  </div>
+<% end %>
+
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3 class="panel-title">
+      <span class="octicon octicon-squirrel <%= @feature.color_class %>"></span>
+      <%= @feature.key %>
+    </h3>
+  </div>
+  <div class="panel-body">
+    <p>
+      <% if @feature.on? %>
+        The feature is enabled for <strong>everyone</strong>. Disable this feature with one click.
+      <% else %>
+        Enable or disable this feature for <strong>everyone</strong> with one click.
+      <% end %>
+    </p>
+
+    <form action="<%= script_name %>/features/<%= @feature.key %>/boolean" method="post">
+      <%== csrf_input_tag %>
+
+      <% unless @feature.on? %>
+        <button type="submit" name="action" value="Enable" class="btn btn-danger tooltipped tooltipped-n" aria-label="Enable for everyone">Enable</button>
+      <% end %>
+
+      <button type="submit" name="action" value="Disable" class="btn tooltipped tooltipped-n" <% if @feature.off? %>disabled aria-label="Already disabled for everyone"<% else %>aria-label="Disable for everyone by clearing all percentages, groups and actors."<% end %>>Disable</button>
+    </form>
+  </div>
+</div>
+
+<% unless @feature.on? %>
+  <div class="container">
+    <div class="columns">
+      <div class="column one-half">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h3 class="panel-title">Percentage of Actors</h3>
+          </div>
+          <div class="panel-body">
+            <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post">
+              <%== csrf_input_tag %>
+              <div class="btn-group">
+                <% @percentages.each do |number| %>
+                  <input type="submit" name="value" value="<%= number %>%" class="btn" <% if number == @feature.percentage_of_actors_value %>disabled<% end %>>
+                <% end %>
+              </div>
+            </form>
+
+            <h4>- or -</h4>
+
+            <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_actors" method="post">
+              <%== csrf_input_tag %>
+              <input type="text" name="value" <% if @feature.percentage_of_actors_value > 0 %>value="<%= @feature.percentage_of_actors_value %>"<% end %> placeholder="custom (ie: 26, 32, etc.)" class="input-mini">
+              <input type="submit" name="action" value="Enable" class="btn btn-sm">
+            </form>
+          </div>
+        </div>
+      </div>
+      <div class="column one-half">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <h3 class="panel-title">Percentage of Time</h3>
+          </div>
+          <div class="panel-body">
+            <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_time" method="post">
+              <%== csrf_input_tag %>
+              <div class="btn-group">
+                <% @percentages.each do |number| %>
+                  <input type="submit" name="value" value="<%= number %>%" class="btn" <% if number == @feature.percentage_of_time_value %>disabled<% end %>>
+                <% end %>
+              </div>
+            </form>
+
+            <h4>- or -</h4>
+
+            <form action="<%= script_name %>/features/<%= @feature.key %>/percentage_of_time" method="post">
+              <%== csrf_input_tag %>
+              <input type="text" name="value" <% if @feature.percentage_of_time_value > 0 %>value="<%= @feature.percentage_of_time_value %>"<% end %> placeholder="custom (ie: 26, 32, etc.)" class="input-mini">
+              <input type="submit" name="action" value="Enable" class="btn btn-sm">
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="columns">
+      <div class="column one-half">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <% if @feature.disabled_groups.empty? %>
+              <p class="right">All groups enabled.</p>
+            <% else %>
+              <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post" class="right">
+                <%== csrf_input_tag %>
+                <input type="hidden" name="operation" value="enable">
+                <select name="value">
+                  <option value="">Select a group...</option>
+                  <% @feature.disabled_groups.each do |group| %>
+                    <option value="<%= group.name %>"><%= group.name %></option>
+                  <% end %>
+                </select>
+                <input type="submit" value="Add Group" class="btn btn-sm">
+              </form>
+            <% end %>
+            <h3 class="panel-title">Groups</h3>
+          </div>
+          <% if @feature.groups_value.empty? %>
+            <div class="blankslate">
+              <span class="mega-octicon octicon-organization"></span>
+              <span class="mega-octicon octicon-squirrel"></span>
+              <span class="mega-octicon octicon-zap"></span>
+              <h3>No Enabled Groups</h3>
+              <p>Enable groups using the form above.</p>
+            </div>
+          <% else %>
+            <ul class="list-group">
+              <% @feature.groups_value.each do |item| %>
+                <li class="list-group-item">
+                  <div class="flex-table">
+                    <div class="flex-table-item flex-table-item-primary">
+                      <%= item %>
+                    </div>
+                    <div class="flex-table-item">
+                      <form action="<%= script_name %>/features/<%= @feature.key %>/groups" method="post">
+                        <%== csrf_input_tag %>
+                        <input type="hidden" name="operation" value="disable">
+                        <input type="hidden" name="value" value="<%= item %>">
+                        <button type="submit" value="Disable" class="button-inv danger tooltipped tooltipped-w" aria-label="Disable <%= item %>">
+                          <span class="octicon octicon-trashcan"></span>
+                        </button>
+                      </form>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+        </div>
+      </div>
+      <div class="column one-half">
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post" class="right">
+              <%== csrf_input_tag %>
+              <input type="hidden" name="operation" value="enable">
+              <input type="text" name="value" placeholder="ie: User:6" class="input-mini">
+              <input type="submit" value="Add Actor" class="btn btn-sm">
+            </form>
+            <h3 class="panel-title">Actors</h3>
+          </div>
+          <% if @feature.actors_value.empty? %>
+            <div class="blankslate">
+              <span class="mega-octicon octicon-person"></span>
+              <span class="mega-octicon octicon-squirrel"></span>
+              <span class="mega-octicon octicon-zap"></span>
+              <h3>No Enabled Actors</h3>
+              <p>Enable actors using the form above.</p>
+            </div>
+          <% else %>
+            <ul class="list-group">
+              <% @feature.actors_value.each do |item| %>
+                <li class="list-group-item">
+                  <div class="flex-table">
+                    <div class="flex-table-item flex-table-item-primary">
+                      <%= item %>
+                    </div>
+                    <div class="flex-table-item">
+                      <form action="<%= script_name %>/features/<%= @feature.key %>/actors" method="post">
+                        <%== csrf_input_tag %>
+                        <input type="hidden" name="operation" value="disable">
+                        <input type="hidden" name="value" value="<%= item %>">
+                        <button type="submit" value="Disable" class="button-inv danger tooltipped tooltipped-w" aria-label="Disable <%= item %>">
+                          <span class="octicon octicon-trashcan"></span>
+                        </button>
+                      </form>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<div class="panel panel-danger">
+  <div class="panel-heading">
+    <h3 class="panel-title">Danger Zone</h3>
+  </div>
+  <div class="panel-body">
+    <p>
+      Deleting a feature removes it from the list of features and disables it for everyone.
+    </p>
+
+    <form action="<%= script_name %>/features/<%= @feature.key %>" method="post">
+      <%== csrf_input_tag %>
+      <input type="hidden" name="_method" value="DELETE">
+      <button type="submit" name="action" value="Delete" class="btn btn-danger tooltipped tooltipped-ne" aria-label="Remove feature from list of features and disable it.">Delete</button>
+    </form>
+  </div>
+</div>

data/lib/flipper/ui/views/features.erb

@@ -0,0 +1,46 @@
+<% if @show_blank_slate %>
+  <div class="blankslate">
+    <span class="mega-octicon octicon-plus"></span>
+    <span class="mega-octicon octicon-list-unordered"></span>
+    <span class="mega-octicon octicon-zap"></span>
+    <h3>But I've got a blank space baby...</h3>
+    <p>And I'll flip your features.</p>
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/e-ORhEE9VVg" frameborder="0" allowfullscreen></iframe>
+    </div>
+  </div>
+<% else %>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h3 class="panel-title">Features</h3>
+    </div>
+
+    <table class="table">
+      <thead>
+        <tr>
+          <th class="feature-state">
+            <span class="octicon octicon-squirrel"></span>
+          </th>
+          <th>Feature</th>
+          <th class="feature-enabled-gates">Enabled Gates</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @features.each do |feature| %>
+          <tr>
+            <td class="feature-state">
+              <span class="octicon octicon-squirrel <%= feature.color_class %>"></span>
+            </td>
+            <td>
+              <a href="<%= "#{script_name}/features/#{feature.key}" %>">
+                <%= feature.key %></a>
+            </td>
+            <td class="feature-enabled-gates">
+              <%= feature.enabled_gate_names %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/lib/flipper/ui/views/layout.erb

@@ -1,161 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Flipper</title>
-    <link rel="stylesheet" type="text/css" href="<%= script_name %>/css/application.css">
-    <link rel="stylesheet" type="text/css" href="<%= script_name %>/css/jquery-ui-1.10.3.slider.min.css">
-
-    <script>
-      var Flipper = {};
-      Flipper.Config = {
-        url: "<%= script_name %>"
-      }
-    </script>
-    <script src="<%= script_name %>/js/jquery.min.js"></script>
-    <script src="<%= script_name %>/js/jquery-ui-1.10.3.slider.min.js"></script>
-
-    <script src="<%= script_name %>/js/handlebars.js"></script>
-    <script src="<%= script_name %>/js/spine/spine.js"></script>
-    <script src="<%= script_name %>/js/spine/ajax.js"></script>
-    <script src="<%= script_name %>/js/spine/route.js"></script>
-    <script src="<%= script_name %>/js/spine/manager.js"></script>
-    <script src="<%= script_name %>/js/application.js"></script>
+    <title><%= @page_title ? "#{@page_title} // " : "" %>Flipper</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="<%= script_name %>/octicons/octicons.css">
+    <link rel="stylesheet" href="<%= script_name %>/css/application.css">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
   </head>
   <body>
-    <div id="app">
-      <div id="header">
-        <h1>
-          <a href="<%= script_name %>/">
-            <img src="<%= script_name %>/images/logo.png" alt="Flipper" />
-          </a>
-        </h1>
-      </div>
+    <div class="container header">
+      <a class="btn btn-sm right" href="<%= script_name %>/features/new">Add Feature</a>
+
+      <ol class="breadcrumb">
+        <% @breadcrumbs.each do |breadcrumb| %>
+          <li<% if breadcrumb.active? %> class="active"<% end %>>
+            <% if breadcrumb.active? %>
+              <%= breadcrumb.text %>
+            <% else %>
+              <a href="<%= script_name %><%= breadcrumb.href %>"><%= breadcrumb.text %></a>
+            <% end %>
+          </li>
+        <% end %>
+      </ol>
 
-      <div id="content">
+      <div>
         <%== yield %>
       </div>
     </div>
 
-    <script id="feature-template" type="text/x-handlebars-template">
-      <div class="feature" id="feature-{{id}}">
-        <div class="show">
-          <h3>
-            <span class="state {{state}}"></span>
-            {{name}}
-            <span class="description">{{description}}</span>
-          </h3>
-
-          <div class="actions">
-            <a href="#" class="show-settings">Change Settings</a>
-          </div>
-        </div>
-
-        <div class="edit">
-          <h3>
-            {{name}}
-            <span class="description">Settings</span>
-          </h3>
-
-          <div class="actions">
-            <a href="#" class="hide-settings">Cancel</a>
-          </div>
-
-          <div class="tabs">
-            <ul>
-              <li><a href="#" data-tab="boolean">All On/All Off</a></li>
-              <li><a href="#" data-tab="group">Groups</a></li>
-              <li><a href="#" data-tab="actor">Actors</a></li>
-              <li><a href="#" data-tab="percentage_of_actors">
-                Percentage Of Actors</a></li>
-              <li><a href="#" data-tab="percentage_of_time">
-                Percentage Of Time</a></li>
-            </ul>
-          </div>
-
-          <div class="gates"></div>
-        </div>
-      </div>
-    </script>
-
-    <script id="gate-boolean-template" type="text/x-handlebars-template">
-      <form action="/features/{{feature_id}}/boolean" method="POST">
-        <input type="radio" name="value" value="true" {{#value}}checked="checked"{{/value}} /> On
-        <input type="radio" name="value" value="false" {{^value}}checked="checked"{{/value}} /> Off
-        <button>Save Settings</button>
-      </form>
-    </script>
-
-    <script id="gate-member-template" type="text/x-handlebars-template">
-      <li class="member" data-value="{{this}}">
-        <a href="#" class="disable">
-          <img src="<%= script_name %>/images/remove.png">
-        </a>
-        {{this}}
-      </li>
-    </script>
-
-    <script id="gate-group-template" type="text/x-handlebars-template">
-      <form action="/features/{{feature_id}}/group" method="POST">
-        <input type="hidden" name="operation" value="enable" />
-        <label>
-          Group Name
-          <select name="value">
-            <option value="">Select the group...</option>
-            <% Flipper.group_names.each do |name| %>
-            <option value="<%= name %>"><%= name %></option>
-            <% end %>
-          </select>
-        </label>
-        <button>Enable Group</button>
-      </form>
-      <ul class="members">
-        {{#each value}}
-          <li class="member" data-value="{{this}}">
-            <a href="#" class="disable">
-              <img src="<%= script_name %>/images/remove.png">
-            </a>
-            {{this}}
-          </li>
-        {{/each}}
-      </ul>
-    </script>
-
-    <script id="gate-actor-template" type="text/x-handlebars-template">
-      <form action="/features/{{feature_id}}/actor" method="POST">
-        <input type="hidden" name="operation" value="enable" />
-        <label>
-          Flipper Id
-          <input type="text" name="value" value="" />
-        </label>
-        <button>Enable Actor</button>
-      </form>
-      <ul class="members">
-        {{#each value}}
-          <li class="member" data-value="{{this}}">
-            <a href="#" class="disable">
-              <img src="<%= script_name %>/images/remove.png">
-            </a>
-            {{this}}
-          </li>
-        {{/each}}
-      </ul>
-    </script>
-
-    <script id="gate-percentage-of-actors-template" type="text/x-handlebars-template">
-      <form action="/features/{{feature_id}}/percentage_of_actors" method="POST">
-        <div class="slider-range"></div>
-        <input type="text" name="value" value="{{value}}" /> %
-        <button>Save Settings</button>
-      </form>
-    </script>
-
-    <script id="gate-percentage-of-time-template" type="text/x-handlebars-template">
-      <form action="/features/{{feature_id}}/percentage_of_time" method="POST">
-        <div class="slider-range"></div>
-        <input type="text" name="value" value="{{value}}" /> %
-        <button>Save Settings</button>
-      </form>
-    </script>
-
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script src="<%= script_name %>/js/bootstrap.min.js"></script>
+    <script src="<%= script_name %>/js/application.js"></script>
   </body>
 </html>