Moved some grid code into new format

2 files changed, 25 insertions, 155 deletions

diff --git a/web/views/reports/characters_in_keys.erb b/web/views/reports/characters_in_keys.erb
index 6b963cb..94fe728 100644
--- a/web/views/reports/characters_in_keys.erb
+++ b/web/views/reports/characters_in_keys.erb
@@ -6,15 +6,15 @@ case latin letters (a-z) and the underscore (_) are used. Sometimes the colon
 
 <div id="tabs">
     <ul>
-        <li><a href="#tabs-statistics">Statistics</a></li>
-        <li><a href="#tabs-whitespace"><span style="background-color: #d62727;">&nbsp;&nbsp;&nbsp;</span> Whitespace</a></li>
-        <li><a href="#tabs-problematic"><span style="background-color: #ff9896;">&nbsp;&nbsp;&nbsp;</span> Problematic</a></li>
+        <li><a href="#statistics">Statistics</a></li>
+        <li><a href="#whitespace"><span style="background-color: #d62727;">&nbsp;&nbsp;&nbsp;</span> Whitespace</a></li>
+        <li><a href="#problematic"><span style="background-color: #ff9896;">&nbsp;&nbsp;&nbsp;</span> Problematic</a></li>
     </ul>
-    <div id="tabs-statistics">
+    <div id="statistics">
         <h2>Statistics Overview</h2>
         <div class="canvas" id="canvas"></div>
         <p></p>
-        <table id="statistics">
+        <table id="grid-statistics">
             <tr>
                 <td style="background-color: #2ca02c;">A</td>
                 <td><%= @db.stats('characters_in_keys_plain') %></td>
@@ -59,7 +59,7 @@ case latin letters (a-z) and the underscore (_) are used. Sometimes the colon
             </tr>
         </table>
     </div>
-    <div id="tabs-whitespace">
+    <div id="whitespace">
         <h2>Keys With Whitespace</h2>
         <p>Keys that contain whitespace characters such as space, tab, new
         line, carriage return, or whitespace characters from other
@@ -67,10 +67,10 @@ case latin letters (a-z) and the underscore (_) are used. Sometimes the colon
         Whitespace in keys can be confusing, especially at the
         beginning or end of the key, because they are invisible. Generally
         the underscore (_) should be used instead.</p>
-        <table id="keys-whitespace">
+        <table id="grid-whitespace">
         </table>
     </div>
-    <div id="tabs-problematic">
+    <div id="problematic">
         <h2>Keys With Possibly Problematic Characters</h2>
         <p>Keys that contain possibly problematic characters: <span
         class="char">=+/&amp;&lt;&gt;;'"?%#@\,</span>. These characters
@@ -80,110 +80,17 @@ case latin letters (a-z) and the underscore (_) are used. Sometimes the colon
         between tag keys and values.<br/>
         Keys that appear in this list are not necessarily wrong though. But
         in many cases they are just results of some error.</p>
-        <table id="keys-problematic">
+        <table id="grid-problematic">
         </table>
     </div>
 </div>
 
 <script type="text/javascript">
-jQuery(document).ready(function() {
-    var tabs = jQuery('#tabs').tabs();
-    jQuery('#statistics').flexigrid({
-        colModel: [
-            { display: '&nbsp;', name: 'row', width: 10, sortable: true, align: 'center' },
-            { display: 'Count', name: 'count', width: 40, sortable: true, align: 'right' },
-            { display: 'Fraction', name: 'fraction', width: 60, sortable: true, align: 'right' },
-            { display: 'Characters in Key', name: 'characters', width: 810, sortable: true, align: 'left' }
-        ],
-        width: 990,
-        height: 200
-    });
-    jQuery('#keys-whitespace').flexigrid({
-        url: '/api/2/db/keys?filters=characters_space&include=prevalent_values',
-        method: 'GET',
-        dataType: 'json',
-        colModel: [
-            { display: 'Key', name: 'key', width: 250, sortable: true, align: 'left' },
-            { display: '<span title="Number of objects with this key"><img src="/img/types/all.16.png" alt=""/> Total</span>',           name: 'count_all',        width: 250, sortable: true, align: 'center' },
-            { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
-            { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
-            { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
-            //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
-            //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
-            { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
-            { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true, align: 'left' }
-        ],
-        searchitems: [
-            { display: 'Key', name: 'key' }
-        ],
-        sortname: 'count_all',
-        sortorder: 'desc',
-        showToggleBtn: false,
-        usepager: true,
-        useRp: true,
-        rp: 15,
-        rpOptions: [10,15,20,25,50,100],
-        height: 420,
-        preProcess: function(data) {
-            data.rows = jQuery.map(data.data, function(row, i) {
-                return { 'cell': [
-                    link_to_key(row.key),
-                    print_value_with_percent(row.count_all,       row.count_all_fraction),
-                    print_with_ts(row.users_all),
-                    row.in_wiki       ? '&#x2714;' : '-',
-                    row.in_josm       ? '&#x2714;' : '-',
-                //       row.in_potlatch   ? '&#x2714;' : '-',
-                //       row.in_merkaartor ? '&#x2714;' : '-',
-                    print_with_ts(row.values_all),
-                    print_prevalent_value_list(row.key, row.prevalent_values)
-                ] };
-            });
-            return data;
-        }
-    });
-    jQuery('#keys-problematic').flexigrid({
-        url: '/api/2/db/keys?filters=characters_problematic&include=prevalent_values',
-        method: 'GET',
-        dataType: 'json',
-        colModel: [
-            { display: 'Key', name: 'key', width: 250, sortable: true, align: 'left' },
-            { display: '<span title="Number of objects with this key"><img src="/img/types/all.16.png" alt=""/> Total</span>',           name: 'count_all',        width: 250, sortable: true, align: 'center' },
-            { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
-            { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
-            { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
-            //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
-            //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
-            { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
-            { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true, align: 'left' }
-        ],
-        searchitems: [
-            { display: 'Key', name: 'key' }
-        ],
-        sortname: 'count_all',
-        sortorder: 'desc',
-        showToggleBtn: false,
-        usepager: true,
-        useRp: true,
-        rp: 15,
-        rpOptions: [10,15,20,25,50,100],
-        height: 420,
-        preProcess: function(data) {
-            data.rows = jQuery.map(data.data, function(row, i) {
-                return { 'cell': [
-                    link_to_key(row.key),
-                    print_value_with_percent(row.count_all,       row.count_all_fraction),
-                    print_with_ts(row.users_all),
-                    row.in_wiki       ? '&#x2714;' : '-',
-                    row.in_josm       ? '&#x2714;' : '-',
-                //       row.in_potlatch   ? '&#x2714;' : '-',
-                //       row.in_merkaartor ? '&#x2714;' : '-',
-                    print_with_ts(row.values_all),
-                    print_prevalent_value_list(row.key, row.prevalent_values)
-                ] };
-            });
-            return data;
-        }
-    });
+var tabs = jQuery('#tabs').tabs({
+    show: function(event, ui) { 
+        window.location.hash = ui.tab.hash;
+        create_flexigrid_for.reports.characters_in_keys[ui.tab.hash.substring(1)]();
+    }
 });
 
 var data = <%= i = '@'; %w(plain colon letters space problem rest).map{ |type| i=i.next; [ { :label => i, :value => @db.stats('characters_in_keys_' + type) } ] }.to_json() %>;
diff --git a/web/views/reports/key_lengths.erb b/web/views/reports/key_lengths.erb
index 134fdc0..9931a82 100644
--- a/web/views/reports/key_lengths.erb
+++ b/web/views/reports/key_lengths.erb
@@ -12,15 +12,15 @@
 
 <div id="tabs">
     <ul>
-        <li><a href="#tabs-table">Keys</a></li>
-        <li><a href="#tabs-histogram">Histogram</a></li>
+        <li><a href="#keys">Keys</a></li>
+        <li><a href="#histogram">Histogram</a></li>
     </ul>
-    <div id="tabs-table">
+    <div id="keys">
         <h2>Keys</h2>
-        <table id="keys">
+        <table id="grid-keys">
         </table>
     </div>
-    <div id="tabs-histogram">
+    <div id="histogram">
         <h2>Histogram</h2>
         <p>This histogram shows how many keys there are of each length.<p>
         <div id="canvas"></div>
@@ -28,49 +28,12 @@
 </div>
 
 <script type="text/javascript">
-jQuery(document).ready(function() {
-    var tabs = jQuery('#tabs').tabs();
-    jQuery('#keys').flexigrid({
-        url: '/api/2/db/keys?include=prevalent_values',
-        method: 'GET',
-        dataType: 'json',
-        colModel: [
-            { display: 'Length', name: 'length', width: 60, sortable: true, align: 'right' },
-            { display: 'Key', name: 'key', width: 180, sortable: true, align: 'left' },
-            { display: 'Number of Objects', name: 'count_all', width: 250, sortable: true, align: 'center' },
-            { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
-            { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
-            //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
-            //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
-            { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
-            { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true, align: 'left' }
-        ],
-        searchitems: [
-            { display: 'Key', name: 'key' }
-        ],
-        sortname: 'length',
-        sortorder: 'asc',
-        showToggleBtn: false,
-        usepager: true,
-        useRp: true,
-        rp: 15,
-        rpOptions: [10,15,20,25,50,100],
-        height: 420,
-        preProcess: function(data) {
-            data.rows = jQuery.map(data.data, function(row, i) {
-                return { 'cell': [
-                    row.key.length,
-                    link_to_key(row.key),
-                    print_value_with_percent(row.count_all,       row.count_all_fraction),
-                    row.in_wiki       ? '&#x2714;' : '-',
-                    row.in_josm       ? '&#x2714;' : '-',
-                //       row.in_potlatch   ? '&#x2714;' : '-',
-                //       row.in_merkaartor ? '&#x2714;' : '-',
-                    print_with_ts(row.values_all),
-                    print_prevalent_value_list(row.key, row.prevalent_values)
-                ] };
-            });
-            return data;
+
+jQuery(function() {
+    var tabs = jQuery('#tabs').tabs({
+        show: function(event, ui) { 
+            window.location.hash = ui.tab.hash;
+            create_flexigrid_for.reports.key_lengths[ui.tab.hash.substring(1)]();
         }
     });
 });