Move overview table on keys page into its own tab

6 files changed, 63 insertions, 52 deletions

diff --git a/web/i18n/en.yml b/web/i18n/en.yml
index 67980fe..30c86a8 100644
--- a/web/i18n/en.yml
+++ b/web/i18n/en.yml
@@ -12,6 +12,7 @@ osm:
     ways: Ways
     relation: Relation
     relations: Relations
+    all: All
     user: User
     users: Users
 
@@ -28,6 +29,7 @@ taginfo:
     maps: Maps
     combinations: Combinations
     key_combinations: Combinations
+    overview: Overview
     data_from: Data from
     instance:
         title: About this Taginfo site
diff --git a/web/lib/api/db.rb b/web/lib/api/db.rb
index 739c791..45b7782 100644
--- a/web/lib/api/db.rb
+++ b/web/lib/api/db.rb
@@ -192,6 +192,31 @@ class Taginfo < Sinatra::Base
         out.to_json
     end
 
+    api(3, 'db/keys/overview') do
+        key = params[:key]
+        out = []
+
+        # default values
+        ['all', 'nodes', 'ways', 'relations'].each_with_index do |type, n|
+            out[n] = { :type => type, :count => 0, :count_fraction => 0.0, :values => 0 }
+        end
+
+        @db.select('SELECT * FROM db.keys').
+            condition('key = ?', key).
+            execute() do |row|
+                ['all', 'nodes', 'ways', 'relations'].each_with_index do |type, n|
+                    out[n] = {
+                        :type           => type,
+                        :count          => row['count_'  + type].to_i,
+                        :count_fraction => row['count_'  + type].to_f / get_total(type),
+                        :values         => row['values_' + type].to_i
+                    }
+                end
+        end
+
+        out.to_json
+    end
+
     api(2, 'db/keys/distribution', {
         :description => 'Get map with distribution of this key in the database (nodes only).',
         :parameters => { :key => 'Tag key (required).' },
diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 3764dee..ed7490e 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -159,46 +159,6 @@ div#tabs form {
 
 /* ==========  */
 
-table#overview {
-    position: absolute;
-    border-collapse: collapse;
-    right: 20px;
-    margin-top: 8px;
-    background-color: #d0e0f0;
-    background-image: url('/img/bg-blue.png');
-    background-repeat: repeat-x;
-    -moz-border-radius: 4px;
-    -khtml-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    -chrome-border-radius: 4px;
-    -o-border-radius: 4px;
-}
-
-table#overview th {
-    border-bottom: 1px solid #ffffff;
-    font-weight: normal;
-    padding: 4px;
-}
-
-table#overview td {
-    padding: 4px;
-    color: #404040;
-}
-
-table#overview div.bar {
-    background-color: #4080e0;
-}
-
-table#overview .count {
-    width: 300px;
-}
-
-table#overview .values {
-    text-align: right;
-}
-
-/* ========== */
-
 table.stats {
     margin-top: 0;
     margin-left: 16px;
diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index 47b4ca0..0d0777b 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -420,6 +420,32 @@ var create_flexigrid_for = {
         }
     },
     key: {
+        overview: function(key, filter_type) {
+            create_flexigrid('grid-overview', {
+                url: '/api/3/db/keys/overview?key=' + encodeURIComponent(key),
+                colModel: [
+                    { display: 'Type', name: 'type', width: 100, sortable: true },
+                    { display: 'Number of objects', name: 'count', width: 260, sortable: true, align: 'center' },
+                    { display: 'Number of values', name: 'value', width: 140, sortable: true, align: 'right' }
+                ],
+                usepager: false,
+                useRp: false,
+                height: 130,
+                preProcess: function(data) {
+                    return {
+                        total: 4,
+                        page: 1,
+                        rows: jQuery.map(data, function(row, i) {
+                            return { 'cell': [
+                                print_image(row.type) + ' ' + texts.osm[row.type],
+                                print_value_with_percent(row.count, row.count_fraction),
+                                print_with_ts(row.values)
+                            ]};
+                        })
+                    };
+                }
+            });
+        },
         values: function(key, filter_type) {
             create_flexigrid('grid-values', {
                 url: '/api/2/db/keys/values?key=' + encodeURIComponent(key) + '&filter=' + encodeURIComponent(filter_type),
diff --git a/web/taginfo.rb b/web/taginfo.rb
index bb4a089..9862605 100755
--- a/web/taginfo.rb
+++ b/web/taginfo.rb
@@ -305,8 +305,12 @@ class Taginfo < Sinatra::Base
                 :value => trans.t.osm.value,
                 :values => trans.t.osm.values,
                 :node => trans.t.osm.node,
+                :nodes => trans.t.osm.nodes,
                 :way => trans.t.osm.way,
+                :ways => trans.t.osm.ways,
                 :relation => trans.t.osm.relation,
+                :relations => trans.t.osm.relations,
+                :all => trans.t.osm.all
             },
             :pages => {
                 :key => {
diff --git a/web/views/key.erb b/web/views/key.erb
index e332ef9..8f99553 100644
--- a/web/views/key.erb
+++ b/web/views/key.erb
@@ -1,6 +1,3 @@
-<table id="overview">
-</table>
-
 <h1><%= @key_pp %></h1>
 
 <div class="source-wiki" title="Description from the wiki">
@@ -28,12 +25,18 @@
 
 <div id="tabs">
     <ul>
+        <li><a href="#overview"><%= t.taginfo.overview %></a></li>
         <li><a href="#values"><%= t.osm.values %></a></li>
         <li><a href="#keys"><%= t.taginfo.key_combinations %></a></li>
         <li><a href="#map"><%= t.taginfo.map %></a></li>
         <li><a href="#wiki"><%= t.sources.wiki.name %></a></li>
         <li><a href="#josm"><%= t.sources.josm.name %></a></li>
     </ul>
+    <div id="overview">
+        <h2><%= t.taginfo.overview %></h2>
+        <table id="grid-overview">
+        </table>
+    </div>
     <div id="values">
         <h2><%= t.pages.key.values_used %></h2>
         <div class="canvas" id="canvas-values" style="position: absolute;"></div>
@@ -126,15 +129,6 @@ jQuery('#filter').bind('change', function() {
     window.location.search = jQuery.param(qs);
 });
 
-jQuery.getJSON('/api/2/db/keys/overview?key=#{ @key_uri }', function(data, textStatus) {
-    var table_content = '<tr><th></th><th title="Number of objects with this key">' + texts.pages.key.number_objects + '</th><th class="values" title="Number of different values">' + texts.osm.values + '</th></tr>';
-    table_content += jQuery.map(['all', 'nodes', 'ways', 'relations'], function(obj, i) {
-        var d = data[obj];
-        return '<tr><td>' + print_image(obj) + '</td><td class="count">' + print_value_with_percent(d.count, d.count_fraction) + '</td><td class="values">' + print_with_ts(d.values) + '</td></tr>';
-    }).join('');
-    jQuery('#overview').append(table_content);
-});
-
 var tabs = jQuery('#tabs').tabs({
     show: function(event, ui) { 
         window.location.hash = ui.tab.hash;