V20190225_0

src/assetindex/assetIndex.es6

@@ -4,7 +4,7 @@ import liveapi from '../websockets/binary_websockets';
 import rv from 'common/rivetsExtra';
 import 'jquery-growl';
 import 'css!./assetIndex.css';
-import { getMarketsSubmarkets, getOrderedMarkets } from '../common/marketUtils';
+import { getObjectMarketSubmarkets, getSortedMarkets, getSortedSubmarkets } from '../common/marketUtils';
 
 let table_el = null;
 let asset_win_el = null;
@@ -85,8 +85,8 @@ const initTable = () => {
 
         if($.isEmptyObject(active_symbols_data) && $.isEmptyObject(asset_index_data)) return;
 
-        state.dropdown.market_submarkets = getMarketsSubmarkets(active_symbols_data);
-        state.dropdown.sorted_markets = getOrderedMarkets(active_symbols_data);
+        state.dropdown.market_submarkets = getObjectMarketSubmarkets(active_symbols_data);
+        state.dropdown.sorted_markets = getSortedMarkets(active_symbols_data);
         state.table.asset_data = asset_index_data;
 
         header_el = asset_win_el.parent().find('.ui-dialog-title').addClass('with-content');
@@ -167,7 +167,7 @@ const initTable = () => {
                         list: markets_sorted_list,
                         inx: 0,
                         changed: (val) => {
-                            const submarket_list = Object.keys(market_submarkets[val]);
+                            const submarket_list = getSortedSubmarkets(Object.keys(market_submarkets[val]));
                             state.dropdown.display_submarkets.update_list(submarket_list);
                             updateTable(state.dropdown.display_markets.val(), state.dropdown.display_submarkets.val());
                         },
@@ -180,10 +180,13 @@ const initTable = () => {
         }
 
         function submarketsDropdown(market_submarkets) {
+            const submarkets = Object.keys(market_submarkets[state.dropdown.display_markets.val()]);
+            const sorted_submarkets = getSortedSubmarkets(submarkets);
+
             if (!state.dropdown.display_submarkets) {
                 state.dropdown.display_submarkets = windows
                     .makeSelectmenu($('<select />').insertAfter(asset_win_el), {
-                        list: Object.keys(market_submarkets[state.dropdown.display_markets.val()]),
+                        list: sorted_submarkets,
                         inx: 0,
                         changed: (val) => {
                             updateTable(state.dropdown.display_markets.val(), state.dropdown.display_submarkets.val());
@@ -192,7 +195,7 @@ const initTable = () => {
                     });
                 state.dropdown.display_submarkets.selectmenu('widget').addClass('asset-index-selectmenu');
             } else {
-                state.dropdown.display_submarkets.update_list(Object.keys(market_submarkets[state.dropdown.display_markets.val()]));
+                state.dropdown.display_submarkets.update_list(sorted_submarkets);
             }
         }
     }

src/common/marketUtils.es6

@@ -1,4 +1,4 @@
-const getMarketPosition = (() => {
+const sortMarkets = (() => {
     const market_order = {
         forex: 1,
         indices: 2,
@@ -11,38 +11,63 @@ const getMarketPosition = (() => {
     };
 })();
 
-const getMarketsSubmarkets = (active_symbols) => {
-    return active_symbols.reduce((market_result, markets) => {
-        const { market_display_name, submarket_display_name, display_name } = markets;
+const sortSubmarkets = ([...markets]) => {
+    return markets.map((market) => {
+        if (market.submarkets) {
+            const submarkets_sort = market.submarkets.sort((a, b) => {
+                if (a.display_name < b.display_name) return -1;
+                if (a.display_name > b.display_name) return 1;
+            });
+            market.submarkets = submarkets_sort;
+        }
+        return market
+    })
+}
 
-        market_result[market_display_name] = market_result[market_display_name] || {};
-        market_result[market_display_name][submarket_display_name] = market_result[market_display_name][submarket_display_name] || [];
-        market_result[market_display_name][submarket_display_name].push(display_name);
+const getSortedMarkets = (active_symbols) => {
+    const unsorted_markets = active_symbols.reduce((market_result, markets) => {
+        const { market, market_display_name } = markets;
+
+        market_result[market] = market_result[market] || [];
+        if (market_result[market].includes(market_display_name) === false) market_result[market].push(market_display_name);
 
         return market_result;
     }, {});
-};
 
-const getOrderedMarkets = (active_symbols) => {
-    const unsorted_markets = getMarkets(active_symbols);
-    const sorted_markets_order = getMarketPosition(Object.keys(unsorted_markets));
+    const sorted_markets_order = sortMarkets(Object.keys(unsorted_markets));
 
     return sorted_markets_order.map(market_id => unsorted_markets[market_id].toString());
 };
 
-const getMarkets = (active_symbols) => {
+function getSortedSubmarkets([...submarkets]) {
+    return submarkets.sort((a, b) => {
+        if (a < b) return -1;
+        if (a > b) return 1;
+    })
+}
+
+const getObjectMarketSubmarkets = (active_symbols) => {
     return active_symbols.reduce((market_result, markets) => {
-        const { market, market_display_name } = markets;
+        const { market_display_name, submarket_display_name, display_name } = markets;
 
-        market_result[market] = market_result[market] || [];
-        if (market_result[market].includes(market_display_name) === false) market_result[market].push(market_display_name);
+        market_result[market_display_name] = market_result[market_display_name] || {};
+        market_result[market_display_name][submarket_display_name] = market_result[market_display_name][submarket_display_name] || [];
+        market_result[market_display_name][submarket_display_name].push(display_name);
 
         return market_result;
     }, {});
 };
 
+const getSortedMarketSubmarkets = (markets_submarkets) => {
+    const sorted_markets_order = sortMarkets(markets_submarkets);
+    const sorted_market_child = sortSubmarkets(sorted_markets_order);
+
+    return sorted_market_child
+}
+
 export {
-    getMarketsSubmarkets,
-    getOrderedMarkets,
-    getMarketPosition,
+    getObjectMarketSubmarkets,
+    getSortedMarkets,
+    getSortedMarketSubmarkets,
+    getSortedSubmarkets,
 };

src/instruments/instruments.es6

@@ -2,7 +2,7 @@ import $ from "jquery";
 import liveapi from "websockets/binary_websockets";
 import menu from "navigation/menu";
 import chartWindow from "charts/chartWindow";
-import { getMarketPosition } from '../common/marketUtils';
+import { getSortedMarketSubmarkets } from '../common/marketUtils';
 import "jquery-growl";
 import "common/util";
 
@@ -48,7 +48,7 @@ function refresh_active_symbols() {
                 return m.submarkets.length !== 0;
             });
 
-            markets = getMarketPosition(markets);
+            markets = getSortedMarketSubmarkets(markets);
 
             const instruments = $("#nav-menu").find(".instruments");
             instruments.find('> ul').remove();

src/navigation/navigation.scss

@@ -51,13 +51,14 @@ nav {
      .resources {
        .ui-icon { left: 10px; }
      }
-     .trade, .instruments, .resources {
+     .trade, .instruments, .resources, .workspace {
          .ui-menu .ui-menu-item {
             list-style-image: none !important;
             white-space: nowrap;
             .ui-menu-item-wrapper {
                padding: 8px 30px;
                font-size: 14px;
+               cursor: pointer;
             }
            div {
              font-size: 1rem;

src/trade/tradeDialog.es6

@@ -1014,7 +1014,7 @@ function init_state(available,root, dialog, symbol, contracts_for_spot) {
     .uniq()
     .value()
     // TODO: Remove this filter after implementing reset, high/low, spread, runs contracts.
-    .filter(f => !/reset|high\/low|spread|runs/.test(f.toLowerCase()))
+    .filter(f => !/reset|high\/low|spread|run/.test(f.toLowerCase()))
     .forEach(x => {
       let y = {};
       y.contract_category_display = x;

src/trade/tradeMenu.es6

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import liveapi from '../websockets/binary_websockets';
 import menu from '../navigation/menu';
-import { getMarketPosition } from '../common/marketUtils';
+import { getSortedMarketSubmarkets } from '../common/marketUtils';
 import "jquery-growl";
 
 const show_error = (err) => {
@@ -32,7 +32,7 @@ const refresh_active_symbols = () => {
             market.is_disabled = _.every(market.submarkets, 'is_disabled');
             return market;
          }).value();
-         markets = getMarketPosition(markets);
+         markets = getSortedMarketSubmarkets(markets);
 
          const trade = $("#nav-menu").find(".trade");
          menu.refreshMenu(trade, markets, (symbol, display_name, pip) => {

src/tradingtimes/tradingTimes.es6

@@ -6,7 +6,7 @@ import 'datatables';
 import 'jquery-growl';
 import _ from 'lodash';
 import moment from 'moment';
-import { getMarketsSubmarkets, getOrderedMarkets } from '../common/marketUtils';
+import { getObjectMarketSubmarkets, getSortedMarkets, getSortedSubmarkets } from '../common/marketUtils';
 
 let table = null;
 let tradingWin = null;
@@ -144,16 +144,17 @@ const initTradingWin = ($html) => {
       /* refresh the table with result of {trading_times:yyyy_mm_dd} from WS */
       const refresh = (data) => {
         const result = processData(menu.extractFilteredMarkets(data[0]));
-        const active_symbols = local_storage.get('active_symbols')
-        const header = getMarketsSubmarkets(active_symbols);
-        const markets_sorted_list = getOrderedMarkets(active_symbols);
+        const active_symbols = local_storage.get('active_symbols');
+        let header = getObjectMarketSubmarkets(active_symbols);
+        const markets_sorted_list = getSortedMarkets(active_symbols);
 
         if($.isEmptyObject(header)) return;
 
         function changed() {
           const val = $(this).val();
+          header = getObjectMarketSubmarkets(local_storage.get('active_symbols'));
 
-          if (header[val]) submarket_names.update_list(Object.keys(header[val]));
+          if (header[val]) submarket_names.update_list(getSortedSubmarkets(Object.keys(header[val])));
 
           updateTable(result, market_names.val(), submarket_names.val());
         };
@@ -177,14 +178,14 @@ const initTradingWin = ($html) => {
               const sub_select = $('<select />');
               sub_select.appendTo(subheader);
               submarket_names = windows.makeSelectmenu(sub_select, {
-                list: Object.keys(header[market_names.val()]),
+                list: getSortedSubmarkets(Object.keys(header[market_names.val()])),
                 inx: 0,
                 changed: changedFn,
               });
               submarket_names.off('selectmenuchange', changed);
               submarket_names.on('selectmenuchange', changed);
             } else {
-            submarket_names.update_list(Object.keys(header[market_names.val()]));
+            submarket_names.update_list(getSortedSubmarkets(Object.keys(header[market_names.val()])));
             submarket_names.off('selectmenuchange', changed);
             submarket_names.on('selectmenuchange', changed);
         }

src/workspace/workspace-menu.html

@@ -1,20 +1,20 @@
 <ul class='workspace-ul'>
-   <li rv-on-click='showWorkspaceManager' class='invert-on-hover'>
-      <a href="#">
+   <li rv-on-click='showWorkspaceManager'>
+      <a href='#'>
          <span class='ui-icon ui-icon-workspace'></span>
-         Manage
+         {'Manage' | i18n}
       </a>
    </li>
-   <li rv-on-click='tileDialogs' class='invert-on-hover'>
-      <a href="#">
+   <li rv-on-click='tileDialogs'>
+      <a href='#'>
          <span class='ui-icon ui-icon-arrange'></span>
-         <span>Arrange</span>
+         {'Arrange' | i18n}
       </a>
    </li>
-   <li class='invert-on-hover' rv-on-click='closeAll'>
+   <li rv-on-click='closeAll'>
       <a href='#'>
          <span class='ui-icon ui-icon-delete'></span>
-         Close All
+         {'Close All' | i18n}
       </a>
    </li>
 </ul>

src/workspace/workspace-menu.scss

@@ -3,6 +3,7 @@ ul.workspace-ul {
     > a {
       &:hover { opacity: 1; }
       color: white;
+      font-size: 14px;
       padding: 0;
       line-height: 34px;
       padding: 0 10px 0 36px !important;