Refactoring and RC design.

algotrading-systems · Apr 14, 2016 · 79b74dc · 79b74dc
1 parent e92081b
commit 79b74dc
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 116 deletions.
diff --git a/www/bower.json b/www/bower.json
@@ -26,6 +26,5 @@
     "jquery": "~2.2.0",
     "ratchet": "~2.0.2",
     "react": "~0.14.6",
-    "flipclock": "FlipClock#~0.7.7"
   }
 }
diff --git a/www/css/app.css b/www/css/app.css
@@ -36,19 +36,28 @@ html, body {
     background: none;
     padding: 0; }
   .app .table-view-divider {
-    padding-top: 1px;
-    padding-bottom: 1px;
+    padding-top: 4px;
+    padding-bottom: 4px;
     font-weight: 500;
     color: #999;
-    background-color: #666666;
+    background-color: transparent;
     border: none; }
   .app #signals-table {
-    padding: 0; }
+    padding: 0;
+    border: none; }
+    .app #signals-table .nextUpdateIn {
+      padding: 10px;
+      text-align: center; }
+      .app #signals-table .nextUpdateIn p {
+        color: #6adc00; }
+      .app #signals-table .nextUpdateIn.soon p {
+        color: #d53301; }
     .app #signals-table ul.signal {
       padding: 0; }
       .app #signals-table ul.signal.header {
-        background: black;
-        padding: 20px 0; }
+        background: rgba(255, 255, 255, 0.75);
+        color: black;
+        padding: 5px 0 10px 0; }
 
 .signal li {
   padding-top: 8px;
@@ -120,29 +129,19 @@ html, body {
     width: 10%;
     height: 100%; }
 
-.table-view-cell-signal.expired:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: url("../img/expired-stamp.png") center center no-repeat;
-  background-size: 100px auto;
-  opacity: 0.8; }
-
-#timerContainer {
-  text-align: center; }
-
-#timer {
-  zoom: 0.35;
-  -moz-transform: scale(0.35);
-  width: 35%; }
-
-#nextSignalsInLabel {
-  width: 55%; }
-
-#nextSignalsInLabel, #timer {
-  display: inline-block;
-  padding: 0;
-  vertical-align: middle; }
+.table-view-cell-signal.expired {
+  -webkit-filter: grayscale(50%);
+  -moz-filter: grayscale(50%);
+  -ms-filter: grayscale(50%);
+  -o-filter: grayscale(50%);
+  filter: grayscale(505%); }
+  .table-view-cell-signal.expired:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: url("../img/expired-stamp.png") center center no-repeat;
+    background-size: 100px auto;
+    opacity: 0.8; }
diff --git a/www/css/app.scss b/www/css/app.scss
@@ -65,22 +65,36 @@ html, body {
   }
 
   .table-view-divider {
-    padding-top: 1px;
-    padding-bottom: 1px;
+    padding-top: 4px;
+    padding-bottom: 4px;
     font-weight: 500;
     color: #999;
-    background-color: $colorGrey;
+    background-color: transparent;
     border: none;
   }
 
 
   #signals-table{
     padding: 0;
+    border: none;
+    .nextUpdateIn {
+      padding: 10px;
+      text-align: center;
+      p {
+        color: $colorGreen;
+      }
+      &.soon {
+        p {
+          color: $colorOrange;
+        }
+      }
+    }
     ul.signal{
       padding: 0;
       &.header{
-        background: $colorBlack;
-        padding: 20px 0;
+        background: rgba(255, 255, 255, 0.75);
+        color: $colorBlack;
+        padding: 5px 0 10px 0;
       }
     }
   }
@@ -147,6 +161,11 @@ html, body {
 
 .table-view-cell-signal{
   &.expired{
+    -webkit-filter: grayscale(50%);
+    -moz-filter: grayscale(50%);
+    -ms-filter: grayscale(50%);
+    -o-filter: grayscale(50%);
+    filter: grayscale(505%);
     &:after{
       content: '';
       position: absolute;
@@ -159,24 +178,4 @@ html, body {
       opacity: 0.8;
     }
   }
-}
-
-#timerContainer{
-  text-align: center;
-}
-
-#timer{
-  zoom: 0.35;
-  -moz-transform: scale(0.35);
-  width: 35%;
-}
-
-#nextSignalsInLabel{
-  width: 55%;
-}
-
-#nextSignalsInLabel, #timer{
-  display: inline-block;
-  padding: 0;
-  vertical-align: middle;
 }
diff --git a/www/index.html b/www/index.html
@@ -6,16 +6,11 @@
         <meta name="msapplication-tap-highlight" content="no" />
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
         <link rel="stylesheet" type="text/css" href="bower_components/ratchet/dist/css/ratchet.min.css" />
-        <link rel="stylesheet" type="text/css" href="bower_components/flipclock/compiled/flipclock.css" />
         <link rel="stylesheet" type="text/css" href="css/app.css" />
         <title>Binary Options Signals Source</title>
     </head>
     <body class="app">
         <div class="content">
-            <div class="content-padded" id="timerContainer">
-                <div id="nextSignalsInLabel">Time for new signals:</div>
-                <div id="timer">timer</div>
-            </div>
             <div class="content-padded">
                 <div id="signals-table-container"></div>
             </div>
@@ -34,7 +29,6 @@
         <script type="text/javascript" src="bower_components/react/react.js"></script>
         <script type="text/javascript" src="bower_components/react/react-dom.js"></script>
         <script type="text/javascript" src="bower_components/ratchet/dist/js/ratchet.min.js"></script>
-        <script type="text/javascript" src="bower_components/flipclock/compiled/flipclock.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
         <script type="text/javascript" src="js/jquery.rest.min.js"></script>
         <script type="text/javascript" src="js/signals-table.js"></script>

diff --git a/www/js/app.js b/www/js/app.js
@@ -73,10 +73,6 @@
                 });
             }
             var timeout = maxSignalTime + tradeSystemInverval -new Date() + maxServerDelay;
-            var clock = $('#timer').FlipClock(timeout / 1000, {
-                countdown: true,
-                clockFace: 'MinuteCounter'
-            });
             setTimeout(feed, timeout);
         });
     };

diff --git a/www/js/signals-table.js b/www/js/signals-table.js
@@ -1,7 +1,7 @@
-"use strict";
+'use strict';
 
 var SignalsTable = React.createClass({
-    displayName: "SignalsTable",
+    displayName: 'SignalsTable',
 
 
     /**
@@ -57,92 +57,115 @@ var SignalsTable = React.createClass({
     },
 
     render: function render() {
-        // Это даст нам число с одной цифрой после запятой dot (xx.x):
-        var elapsedString = (this.state.elapsed / 1000).toFixed(3) + ' seconds';
+        var lifeTime = 60 * 1000;
+        var elapsedString = (this.state.elapsed / 1000).toFixed(0) + ' seconds';
         var signals = this.props.signals;
         var that = this;
+
+        var nextUpdateInClasses = ['table-view-cell', 'nextUpdateIn'];
+        if (this.state.elapsed < 1) {
+            nextUpdateInClasses.push('expired');
+        }
+        if (this.state.elapsed < lifeTime * 0.25) {
+            nextUpdateInClasses.push('soon');
+        }
+        var nextUpdateInClass = nextUpdateInClasses.join(' ');
+
         return React.createElement(
-            "ul",
-            { className: "table-view", id: "signals-table" },
+            'ul',
+            { className: 'table-view', id: 'signals-table' },
+            React.createElement(
+                'li',
+                { className: nextUpdateInClass },
+                React.createElement(
+                    'p',
+                    null,
+                    'Next update in ',
+                    React.createElement(
+                        'b',
+                        null,
+                        elapsedString
+                    )
+                )
+            ),
             React.createElement(
-                "li",
-                { className: "table-view-cell" },
+                'li',
+                { className: 'table-view-cell' },
                 React.createElement(
-                    "ul",
-                    { className: "signal header" },
+                    'ul',
+                    { className: 'signal header' },
                     React.createElement(
-                        "li",
-                        { className: "symbol" },
-                        "Symbol"
+                        'li',
+                        { className: 'symbol' },
+                        'Symbol'
                     ),
                     React.createElement(
-                        "li",
-                        { className: "direction" },
-                        "Option type"
+                        'li',
+                        { className: 'direction' },
+                        'Option'
                     ),
                     React.createElement(
-                        "li",
-                        { className: "time" },
-                        "Time"
+                        'li',
+                        { className: 'time' },
+                        'Time'
                     ),
                     React.createElement(
-                        "li",
-                        { className: "reliability" },
-                        "Reliability"
+                        'li',
+                        { className: 'reliability' },
+                        'Reliability'
                     )
                 )
             ),
-            React.createElement("li", { className: "table-view-divider" }),
+            React.createElement('li', { className: 'table-view-divider' }),
             signals.map(function (signal) {
                 var directionClassName = 'direction direction-' + signal.direction.toString().toLowerCase();
                 var reliabilityClassName = 'reliability reliability-' + signal.reliability;
-                var lifeTime = 60 * 1000;
                 var lifeTimePercent = that.getElapsedTime(signal.tsMs) / lifeTime * 100;
                 var className = 'table-view-cell table-view-cell-signal ';
                 className += lifeTimePercent > 0 ? 'active ' : 'expired ';
                 return React.createElement(
-                    "li",
+                    'li',
                     { key: signal.key, className: className },
                     React.createElement(
-                        "ul",
-                        { className: "signal" },
+                        'ul',
+                        { className: 'signal' },
                         React.createElement(
-                            "li",
-                            { className: "symbol" },
+                            'li',
+                            { className: 'symbol' },
                             signal.symbol
                         ),
                         React.createElement(
-                            "li",
+                            'li',
                             { className: directionClassName },
                             signal.direction
                         ),
                         React.createElement(
-                            "li",
-                            { className: "time" },
+                            'li',
+                            { className: 'time' },
                             signal.time
                         ),
                         React.createElement(
-                            "li",
+                            'li',
                             { className: reliabilityClassName },
-                            " "
+                            ' '
                         )
                     ),
                     React.createElement(
-                        "div",
-                        { className: "signalMeta" },
+                        'div',
+                        { className: 'signalMeta' },
                         React.createElement(
-                            "div",
-                            { className: "signalId" },
-                            "#",
+                            'div',
+                            { className: 'signalId' },
+                            '#',
                             signal.id
                         ),
                         React.createElement(
-                            "div",
-                            { className: "signalLifeTimeContainer" },
+                            'div',
+                            { className: 'signalLifeTimeContainer' },
                             React.createElement(
-                                "div",
-                                { className: "signalLifeTime" },
-                                React.createElement("div", { className: "signalLifeTimeBar", style: { width: lifeTimePercent + '%' } })
+                                'div',
+                                { className: 'signalLifeTime' },
+                                React.createElement('div', { className: 'signalLifeTimeBar', style: { width: lifeTimePercent + '%' } })
                             )
                         )
                     )