Add quick navigation box for Agents
Andrew Cantino
7 gewijzigde bestanden met toevoegingen van 64 en 12 verwijderingen
+ 26
- 3
app/assets/javascripts/application.js.coffee.erb
@@ -54,7 +54,30 @@ $(document).ready -> |
||
| 54 | 54 |
if $(".flash").length
|
| 55 | 55 |
setTimeout((-> $(".flash").slideUp(-> $(".flash").remove())), 5000)
|
| 56 | 56 |
|
| 57 |
- # Agent Show |
|
| 57 |
+ # Agent Navigation |
|
| 58 |
+ $agentNavigate = $('#agent-navigate')
|
|
| 59 |
+ $agentNavigate.typeahead( |
|
| 60 |
+ minLength: 0, |
|
| 61 |
+ items: 15, |
|
| 62 |
+ source: agentNames |
|
| 63 |
+ ).on("change", (e) ->
|
|
| 64 |
+ if agentPaths[$agentNavigate.val()] |
|
| 65 |
+ $('#agent-navigate').closest(".navbar-search").find(".spinner").show();
|
|
| 66 |
+ window.location = agentPaths[$agentNavigate.val()] |
|
| 67 |
+ ).on("focus", (e) ->
|
|
| 68 |
+ $agentNavigate.val '' |
|
| 69 |
+ ).on("blur", (e) ->
|
|
| 70 |
+ $agentNavigate.val '' |
|
| 71 |
+ ) |
|
| 72 |
+ |
|
| 73 |
+ # Pressing '/' selects the search box. |
|
| 74 |
+ $("body").on "keypress", (e) ->
|
|
| 75 |
+ if e.keyCode == 47 # The '/' key |
|
| 76 |
+ if e.target.nodeName == "BODY" |
|
| 77 |
+ e.preventDefault() |
|
| 78 |
+ $agentNavigate.focus() |
|
| 79 |
+ |
|
| 80 |
+# Agent Show |
|
| 58 | 81 |
fetchLogs = (e) -> |
| 59 | 82 |
agentId = $(e.target).closest("[data-agent-id]").data("agent-id")
|
| 60 | 83 |
e.preventDefault() |
@@ -85,7 +108,7 @@ $(document).ready -> |
||
| 85 | 108 |
|
| 86 | 109 |
$("#agent_type").on "change", ->
|
| 87 | 110 |
if window.jsonEditor? |
| 88 |
- $(".spinner").fadeIn();
|
|
| 111 |
+ $("#agent-spinner").fadeIn();
|
|
| 89 | 112 |
$("#agent_source_ids").select2("val", {});
|
| 90 | 113 |
$(".event-descriptions").html("").hide()
|
| 91 | 114 |
$.getJSON "/agents/type_details", { type: $(@).val() }, (json) =>
|
@@ -104,7 +127,7 @@ $(document).ready -> |
||
| 104 | 127 |
window.jsonEditor.json = json.options |
| 105 | 128 |
window.jsonEditor.rebuild() |
| 106 | 129 |
|
| 107 |
- $(".spinner").stop(true, true).fadeOut();
|
|
| 130 |
+ $("#agent-spinner").stop(true, true).fadeOut();
|
|
| 108 | 131 |
|
| 109 | 132 |
$("#agent_type").change() if $("#agent_type").length
|
| 110 | 133 |
|
+ 14
- 7
app/assets/stylesheets/application.css.scss.erb
@@ -51,10 +51,6 @@ table.events {
|
||
| 51 | 51 |
margin-left: 0 !important; |
| 52 | 52 |
} |
| 53 | 53 |
|
| 54 |
-#job-indicator, #event-indicator {
|
|
| 55 |
- display: none; |
|
| 56 |
-} |
|
| 57 |
- |
|
| 58 | 54 |
img.odin {
|
| 59 | 55 |
position: relative; |
| 60 | 56 |
top: -32px; |
@@ -86,14 +82,25 @@ img.spinner {
|
||
| 86 | 82 |
overflow: hidden; |
| 87 | 83 |
} |
| 88 | 84 |
|
| 85 |
+// Navbar |
|
| 86 |
+ |
|
| 87 |
+#job-indicator, #event-indicator {
|
|
| 88 |
+ display: none; |
|
| 89 |
+} |
|
| 90 |
+ |
|
| 91 |
+.navbar-search > .spinner {
|
|
| 92 |
+ position: absolute; |
|
| 93 |
+ top: -1px; |
|
| 94 |
+ right: 1px; |
|
| 95 |
+} |
|
| 96 |
+ |
|
| 89 | 97 |
// Flash |
| 90 | 98 |
|
| 91 | 99 |
.flash {
|
| 92 | 100 |
position: fixed; |
| 93 |
- width: 500px; |
|
| 101 |
+ width: 210px; |
|
| 94 | 102 |
z-index: 99999; |
| 95 |
- top: 1px; |
|
| 96 |
- margin-left: 250px; |
|
| 103 |
+ right: 20px; |
|
| 97 | 104 |
|
| 98 | 105 |
.alert {
|
| 99 | 106 |
} |
+ 1
- 1
app/views/agents/edit.html.erb
@@ -4,7 +4,7 @@ |
||
| 4 | 4 |
<div class="page-header"> |
| 5 | 5 |
<h2> |
| 6 | 6 |
Editing your <%= @agent.short_type %> |
| 7 |
- <%= image_tag "spinner-arrows.gif", :class => "spinner" %> |
|
| 7 |
+ <%= image_tag "spinner-arrows.gif", :class => "spinner", :id => 'agent-spinner' %> |
|
| 8 | 8 |
</h2> |
| 9 | 9 |
</div> |
| 10 | 10 |
|
+ 1
- 1
app/views/agents/new.html.erb
@@ -4,7 +4,7 @@ |
||
| 4 | 4 |
<div class="page-header"> |
| 5 | 5 |
<h2> |
| 6 | 6 |
Create a new Agent |
| 7 |
- <%= image_tag "spinner-arrows.gif", :class => "spinner" %> |
|
| 7 |
+ <%= image_tag "spinner-arrows.gif", :class => "spinner", :id => 'agent-spinner' %> |
|
| 8 | 8 |
</h2> |
| 9 | 9 |
</div> |
| 10 | 10 |
|
+ 8
- 0
app/views/layouts/_navigation.html.erb
@@ -9,11 +9,18 @@ |
||
| 9 | 9 |
|
| 10 | 10 |
<ul class="nav pull-right"> |
| 11 | 11 |
<% if user_signed_in? %> |
| 12 |
+ |
|
| 13 |
+ <form class="navbar-search pull-left"> |
|
| 14 |
+ <input type="text" class="search-query" id='agent-navigate' autocomplete="off" placeholder="Search"> |
|
| 15 |
+ <%= image_tag "spinner-arrows.gif", :class => "spinner" %> |
|
| 16 |
+ </form> |
|
| 17 |
+ |
|
| 12 | 18 |
<li id='job-indicator'> |
| 13 | 19 |
<a href="/delayed_job"> |
| 14 | 20 |
<span class="badge"><i class="icon-refresh icon-white"></i> <span class='number'>0</span></span> |
| 15 | 21 |
</a> |
| 16 | 22 |
</li> |
| 23 |
+ |
|
| 17 | 24 |
<li id='event-indicator'> |
| 18 | 25 |
<a href="#"> |
| 19 | 26 |
<span class="badge"><i class="icon-random icon-white"></i> <span class='number'>0</span> new events</span> |
@@ -45,3 +52,4 @@ |
||
| 45 | 52 |
</ul> |
| 46 | 53 |
</li> |
| 47 | 54 |
</ul> |
| 55 |
+ |
+ 10
- 0
app/views/layouts/application.html.erb
@@ -32,5 +32,15 @@ |
||
| 32 | 32 |
</div> |
| 33 | 33 |
</div> |
| 34 | 34 |
</div> |
| 35 |
+ |
|
| 36 |
+ <script> |
|
| 37 |
+ var agentPaths = <%= Utils.jsonify(current_user.agents.inject({}) {|m, a| m[a.name] = agent_path(a) unless a.new_record?; m }) %>;
|
|
| 38 |
+ agentPaths["All Agents Index"] = <%= Utils.jsonify agents_path %>; |
|
| 39 |
+ agentPaths["New Agent"] = <%= Utils.jsonify new_agent_path %>; |
|
| 40 |
+ agentPaths["Account"] = <%= Utils.jsonify edit_user_registration_path %>; |
|
| 41 |
+ agentPaths["Events Index"] = <%= Utils.jsonify events_path %>; |
|
| 42 |
+ var agentNames = []; |
|
| 43 |
+ $.each(agentPaths, function(name, v) { agentNames.push(name); });
|
|
| 44 |
+ </script> |
|
| 35 | 45 |
</body> |
| 36 | 46 |
</html> |
+ 4
- 0
lib/utils.rb
@@ -51,4 +51,8 @@ module Utils |
||
| 51 | 51 |
result |
| 52 | 52 |
end |
| 53 | 53 |
end |
| 54 |
+ |
|
| 55 |
+ def self.jsonify(thing) |
|
| 56 |
+ thing.to_json.gsub('</', '<\/').html_safe
|
|
| 57 |
+ end |
|
| 54 | 58 |
end |