Enqueue js channel table sort (#72)

* enqueue js sort table

* channels table sort and style

admin/css/lbry-admin.css

@@ -61,10 +61,10 @@
   margin-right: 1em;
 }
 .post-lbry-display-before {
-  color: darkgreen;
+  color: green;
 }
 .post-lbry-display {
-  color: green;
+  color: #135548;
 }
 
 .lbry-pub-metabox {
@@ -86,38 +86,36 @@
 .lbry-meta-bx-content-last {
   padding: .2em .8em 1em .1em;
 }
-
+/*---------------------
+    Channels Table
+  -------------------*/
 table.lbry-channel-table {
   width: 100%;
   border-collapse: collapse;
   font-family: Georgia;
 }
-
 .lbry-channel-table th, .lbry-channel-table td {
   padding: .4em 1.6em;
   border: 2px solid #fff;
-  background: #fbd7b4;
+  background: #97eb9d;
   font-size: 1em;
 }
 .lbry-channel-table thead th {
   padding: .5em 2em;
-  background: #f69546;
+  background: #135548;
   text-align: left;
   font-weight: normal;
   font-size: 1.2em;
   color: #fff;
 }
-.lbry-channel-table tbody tr:nth-child(odd) *:nth-child(even), .lbry-channel-table tbody tr:nth-child(even) *:nth-child(odd) {
+.lbry-channel-table tbody tr:nth-child(odd) td {
-  background: #f3eddd;
+  background: #e1fafa;
 }
 .lbry-channel-table tfoot th {
-  padding: .5em 2em;
+  padding: .5em 1.8em;
-  background: #f69546;
+  background: #175248;
   text-align: left;
   font-weight: normal;
   font-size: .9em;
   color: #fff;
 }
-.lbry-channel-table tr *:nth-child(3), .lbry-channel-table tr *:nth-child(4) {
-  /* text-align: right; */
-}

admin/js/table-sort.js

@@ -0,0 +1,83 @@
+jQuery(document).ready(function($) {
+    var compare = {
+        channel: function(a, b) {
+            a = a.replace(/^@/i, '') && a.replace(/[-]/gi, '');
+            b = b.replace(/^@/i, '') && b.replace(/[-]/gi, '');
+
+            if (a < b) {
+                return -1;
+            } else {
+                return a > b ? 1 : 0;
+            }
+        },
+        lbryurl: function(a, b) {
+            a = a.replace(/^lbry:\/\/@/i, '') && a.replace(/#[a-zA-Z0-9]+/, '') && a.replace(/-/g, '');
+            b = b.replace(/^lbry:\/\/@/i, '') && b.replace(/#[a-zA-Z0-9]+/, '') && b.replace(/-/g, '');
+
+            if (a < b) {
+                return -1;
+            } else {
+                return a > b ? 1 : 0;
+            }
+        },
+        claim: function(a, b) {
+            if (a < b) {
+                return -1;
+            } else {
+                return a > b ? 1 : 0;
+            }
+        },
+        posts: function(a, b) {
+            a = Number(a);
+            b = Number(b);
+
+            return a - b;
+        },
+        support: function(a, b) {
+            a = a.replace(/,/g, '');
+            b = b.replace(/,/g, '');
+
+            a = Number(a);
+            b = Number(b);
+
+            return a - b;
+        },
+        date: function(a, b) {
+            a = new Date(a);
+            b = new Date(b);
+
+            return a - b;
+        }
+    };
+    $('.lbry-channel-table').each(function() {
+        var $table = $(this);
+        var $tbody = $table.find('tbody');
+        var $controls = $table.find('th');
+        var rows = $tbody.find('tr').toArray();
+
+        $controls.on('click', function() {
+            var $header = $(this);
+            var order = $header.data('sort');
+            var column;
+
+            if ($header.is('.ascending') || $header.is('.descending')) {
+                $header.toggleClass('ascending descending');
+                $tbody.append(rows.reverse());
+            } else {
+                $header.addClass('ascending');
+                $header.siblings().removeClass('ascending descending');
+                if (compare.hasOwnProperty(order)) {
+                    column = $controls.index(this);
+
+                    rows.sort(function(a, b) {
+                        a = $(a).find('td').eq(column).text();
+                        b = $(b).find('td').eq(column).text();
+                        return compare[order](a, b);
+                    });
+
+                    $tbody.append(rows);
+                }
+            }
+        });
+    });
+});

classes/LBRY_Admin.php

@@ -52,6 +52,20 @@ class LBRY_Admin
         }
         add_action( 'admin_enqueue_scripts', 'load_admin_stylesheet' );
 
+        // Admin channel sort JS enqueue
+        function load_admin_script() {
+            if ( ( $_GET['page'] == 'lbrypress') && ( $_GET['tab'] == 'channels' ) ) {
+                wp_enqueue_script(
+                    'lbry-table-sort',
+                    plugins_url( '/admin/js/table-sort.js', LBRY_PLUGIN_FILE ),
+                    array('jquery'),
+                    LBRY_VERSION,
+                    true
+                );
+            }
+        }
+        add_action( 'admin_enqueue_scripts', 'load_admin_script' );
+        
         // Admin Error Notices
         function lbry_plugin_not_configured_notice() {
           	echo "<div id='notice' class='updated fade'><p>LBRYPress plugin is not configured yet. Please do it now.</p></div>\n";
@@ -258,10 +272,12 @@ class LBRY_Admin
           <table class="lbry-channel-table">
             <thead>
                 <tr>
-                    <th>Channel</th>
+                    <th data-sort="channel">Channel</th>
-                    <th>LBRY URL</th>
+                    <th data-sort="lbryurl">LBRY URL</th>
-                    <th>Posts</th>
+                    <th data-sort="claim">Claim ID</th>
-                    <th colspan="2">Supports</th>
+                    <th data-sort="date">~ Date Created</th>
+                    <th data-sort="posts">Posts</th>
+                    <th data-sort="support" colspan="2">Supports</th>
                 </tr>
             </thead>
             <tbody>
@@ -272,6 +288,8 @@ class LBRY_Admin
                 if ( $lbry_url ) {
                     $open_url = str_replace( 'lbry://', 'open.lbry.com/', $lbry_url );
                 }
+                $timestamp = $results->items[0]->meta->creation_timestamp;
+                $created_date = date( 'm-d-y', $timestamp );
                 $support_amount = $results->items[0]->meta->support_amount;
                 $claims_published = $results->items[0]->meta->claims_in_channel;
                 if ( ( $support_amount < 0.001 ) ) {
@@ -289,14 +307,16 @@ class LBRY_Admin
                 <tr>
                 <td><a href="<?php echo esc_url( $open_url, 'lbrypress' ); ?>"><?php esc_html_e( $channel->name, 'lbrypress' ); ?></a></td>
                 <td><?php esc_html_e( $lbry_url, 'lbrypress' ); ?></td>
+                <td><?php esc_html_e( $claim_id, 'lbrypress' ); ?></td>
+                <td><?php esc_html_e( $created_date, 'lbrypress' ); ?></td>
                 <td><?php esc_html_e( $claims_published, 'lbrypress' ); ?></td>
                 <td><span title="Initial Bid Amount: <?php esc_html_e( $init_bid, 'lbrypress' ); ?>"><img src="<?php echo esc_url( plugin_dir_url( LBRY_PLUGIN_FILE ) . 'admin/images/lbc.png' ) ?>" class="icon icon-lbc bid-icon-lbc channel-bid-icon-lbc"><?php esc_html_e( $support_amount, 'lbrypress' ); ?></span></td>
-                <td><a href="<?php echo admin_url( add_query_arg( array( 'page' => 'lbrypress', 'tab' => 'supports', 'claim_id' => $claim_id, 'current_support' => $support_amount, 'init_bid' => $init_bid ), 'admin.php' ) ); ?>">Add</a></td>
+                <td><a href="<?php echo admin_url( add_query_arg( array( 'page' => 'lbrypress', 'tab' => 'supports', 'claim_id' => $claim_id, 'current_support' => $support_amount, 'init_bid' => $init_bid, 'lbry_url' => urlencode($lbry_url), 'return_page' => 'channels' ), 'admin.php' ) ); ?>">Add</a></td>
                 </tr>
           <?php endforeach; ?>
             </tbody>
             <tfoot>
-                <tr><th colspan="5">LBRYPress</th></tr>
+                <tr><th colspan="7">LBRYPress</th></tr>
             </tfoot>
          </table>
        <?php } else { ?>