customize ranking table limit setting

DoctorLai · Sep 9, 2018 · aa2811f · aa2811f
1 parent dcd2a3d
commit aa2811f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/js/cointools.js b/js/cointools.js
@@ -19,6 +19,7 @@ const saveSettings = (msgbox = true) => {
     settings['history_limit'] = $('input#history_limit').val();
     settings['pairs_id'] = $('input#pairs_id').val();
     settings['ranking_search'] = $('input#ranking_search_id').val();
+    settings['ranking_limit'] = $('input#ranking_limit').val();
     chrome.storage.sync.set({ 
         cointools: settings
     }, function() {
@@ -138,14 +139,17 @@ const getGeneralData = (currency, dom) => {
 }
 
 // get ranking table from coinmarketcap
-const getRankingTable = (currency, dom, keyword = "", limit = 300) => {
+const getRankingTable = (currency, dom, keyword = "", limit = default_ranking_limit) => {
     let currency_upper = currency.toUpperCase();
     let currency_lower = currency.toLowerCase();
     keyword = keyword.trim().toLowerCase();
     if (keyword.length > 0) {
         // search a coin
         limit = 99999; 
     }
+    if (limit <= 0) {
+        limit = default_ranking_limit;
+    }
     let api = "https://api.coinmarketcap.com/v1/ticker/?limit=" + limit;
     if (currency != '') {
         api += "&convert=" + currency_upper;
@@ -874,6 +878,7 @@ document.addEventListener('DOMContentLoaded', function() {
             let currency = settings['currency'];
             let lang = settings['lang'];
             let conversion = settings['conversion'];
+            let ranking_limit = settings['ranking_limit'] || default_ranking_limit;
             $("select#currency").val(currency);
             $("select#lang").val(lang);
             $("textarea#conversion").val(conversion);
@@ -884,9 +889,7 @@ document.addEventListener('DOMContentLoaded', function() {
             $("input#convert_to_history").val(settings['convert_to_history']);
             $("input#pairs_id").val(settings['pairs_id']);
             $("input#ranking_search_id").val(settings['ranking_search']);
-            if (settings['ranking_search']) {
-                getRankingTable("", $('div#rank_div'), $("input#ranking_search_id").val());
-            }
+            $('input#ranking_limit').val(ranking_limit);
             if (settings['history_limit']) {
                 $("input#history_limit").val(settings['history_limit']);
             } else {
@@ -896,15 +899,21 @@ document.addEventListener('DOMContentLoaded', function() {
             //general - api https://api.coinmarketcap.com/v1/global/
             getGeneralData(currency, $('div#general_div'));
             // ranking tables - api https://api.coinmarketcap.com/v1/ticker/?convert=EUR&limit=2000
-            getRankingTable(currency, $('div#rank_div'));
+            if (settings['ranking_search']) {
+                getRankingTable("", $('div#rank_div'), $("input#ranking_search_id").val(), ranking_limit);
+            } else {
+                getRankingTable(currency, $('div#rank_div'), "", ranking_limit);
+            }
         } else {
             // first time set default parameters
             // general - api https://api.coinmarketcap.com/v1/global/
             getGeneralData("", $('div#general_div'));
             // ranking tables - api https://api.coinmarketcap.com/v1/ticker/?convert=EUR&limit=2000
-            getRankingTable("", $('div#rank_div'));            
+            getRankingTable("", $('div#rank_div'), "", $("input#ranking_limit").val());            
             // default conversion
             processConversion($('textarea#conversion').val());
+            // ranking_limit
+            $('input#ranking_limit').val(default_ranking_limit);
         }
         // about
         let manifest = chrome.runtime.getManifest();    
@@ -1007,6 +1016,11 @@ document.addEventListener('DOMContentLoaded', function() {
     // search while you type
     $('input#ranking_search_id').on("keyup", function() {
         saveSettings(false);
-        getRankingTable("", $('div#rank_div'), this.value);
+        getRankingTable("", $('div#rank_div'), this.value, $('input#ranking_limit').val());
     });
+    // save ranking_limit
+    $('input#ranking_limit').change(function() {
+        saveSettings(false);
+        getRankingTable("", $('div#rank_div'), $("input#ranking_search_id").val(), $('input#ranking_limit').val());
+    })
 }, false);
diff --git a/js/constants.js b/js/constants.js
@@ -8,4 +8,7 @@ let currency_array = [
 const isFiat = (x, arr) => {
 	arr = arr || currency_array;
 	return arr.includes(x.toUpperCase());
-}
+}
+
+// default ranking limit
+const default_ranking_limit = 300;
diff --git a/main.html b/main.html
@@ -63,7 +63,20 @@ <h4 id="text_news">News</h4>
       </div>        
       <div id="tabs-rank">
         <h4 id="text_cryptocurrency_ranking_table">Cryptocurrency Ranking Table</h4>
-        <input type='text' id='ranking_search_id' class="form-control" placeholder="e.g. BTC">
+        <form class='form-inline'>
+          <input type='text' id='ranking_search_id' class="form-control" placeholder="e.g. BTC" style='width:600px'>
+          <input type=text list='num_per_page' class="form-control" style='width:100px' id="ranking_limit">
+          <datalist id='num_per_page'>
+            <option value=1>100</option>
+            <option value=200>200</option>
+            <option value=300>300</option>
+            <option value=500>500</option>
+            <option value=1000>1000</option>
+            <option value=2000>2000</option>
+            <option value=3000>3000</option>
+            <option value=999999>999999</option>
+          </datalist>        
+        </form>
         <div id="rank_div"> </div>
       </div>   
       <div id="tabs-chart">