app/views/logs/index.erb in tailog-0.3.7 vs app/views/logs/index.erb in tailog-0.4.0

@@ -5,27 +5,87 @@
   <% if params[:file] %>
     <% file_path = File.join Tailog.log_path, params[:file] %>
     <h3 class="page-header"><%= file_path %></h3>
 
     <% File.open file_path do |file| %>
-      <div id="content" class="content-hover"></div>
+      <div id="content" class="content content-hover"></div>
     <% end %>
 
-    <a id="add_divider" class="btn btn-danger pull-right">Add Divider</a>
+    <a id="settings-toggle" class="btn btn-primary fixed-top-right"><i class="glyphicon glyphicon-cog"></i></a>
 
+    <div id="settings-panel" class="panel panel-info fixed-top-right settings-panel hidden">
+      <div class="panel-heading">Settings</div>
+      <div class="panel-body">
+        <div class="form-group btn-group">
+          <a id="add-divider" class="btn btn-default">Add Divider</a>
+          <a id="clear-logs" class="btn btn-default">Clear Logs</a>
+        </div>
+        <div class="form-group">
+          <div class="input-group">
+            <input id="highlight" type="text" class="form-control" placeholder="Keyword">
+            <span class="input-group-btn">
+              <button id="add-highlight" class="btn btn-default" type="button">Highlight!</button>
+            </span>
+          </div>
+          <div id="highlight-list" class="highlight-list"></div>
+        </div>
+      </div>
+    </div>
+
     <script type="text/javascript">
-      window.fileSize = {};
-      window.fileSizeDone = {};
-      var $window = $(window),
-          $document = $(document),
-          $content = $("#content");
+      var $settingsPanel = $("#settings-panel");
+      $("#settings-toggle").click(function() {
+        $settingsPanel.toggleClass("hidden");
+      });
 
       var dividerId = 1;
-      $("#add_divider").click(function() {
+      $("#add-divider").click(function() {
         $content.append('<span class="divider"> #' + dividerId++ + ' - ' + new Date() + '</span>');
       });
 
+      $("#clear-logs").click(function() {
+        $content.html('');
+      });
+
+      var $highlight = $("#highlight"),
+          $highlightList = $("#highlight-list");
+
+      function rawHighlight(keyword) {
+        $content.highlight(keyword, { className: 'highlight highlight-' + keyword });
+      }
+
+      function rawUnhighlight(keyword) {
+        $content.unhighlight({ className: 'highlight-' + keyword });
+      }
+
+      function highlight(keyword) {
+        if ($highlightList.find('.highlight-' + keyword).length > 0) return;
+        rawHighlight(keyword);
+        $highlightList.append('<span class="label label-primary highlight-' + keyword + ' toggle-highlight">' + keyword + '</span>');
+      }
+
+      $highlight.keypress(function(event) {
+        if ((event.keyCode || event.which) === 13) {
+          highlight($highlight.val());
+        }
+      });
+      $("#add-highlight").click(function() {
+        highlight($highlight.val());
+      });
+
+      $("#highlight-list").on("click", ".toggle-highlight", function(event) {
+        var $this = $(this),
+            keyword = $this.text();
+        $this.data('hidden') ? rawHighlight(keyword) : rawUnhighlight(keyword);
+        $this.data('hidden', !$this.data('hidden'));
+      });
+
+      window.fileSize = {};
+      window.fileSizeDone = {};
+      var $window = $(window),
+          $document = $(document),
+          $content = $("#content");
       function loadMore() {
         $.post(window.location.href, { seek: window.fileSize }, function(json) {
           try {
             var data = JSON.parse(json);
 
@@ -34,12 +94,18 @@
             window.fileSizeDone[fileSizeKey] = true;
             window.fileSize[data.server_hostname] = data.file_size;
 
             if (!data.content) return;
             var shouldScrollToBottom = $window.scrollTop() + $window.height() == $document.height();
+
             $content
               .append('<span class="text-info">' + data.server_hostname + ' - ' + data.file_size + '</span>')
               .append(ansi_up.ansi_to_html(data.content));
+
+            $highlightList.find("span").each(function(index, node) {
+              var $node = $(node);
+              $node.data('hidden') || rawHighlight($node.text());
+            });
 
             if (shouldScrollToBottom) {
               $window.scrollTop($document.height() - $window.height());
             }