Issue #107 - Condensed playback component and moved it to lower navig…

…ation bar
NASA-AMMOS · Jul 12, 2019 · 3274cb3 · 3274cb3
1 parent 1e0c2b3
commit 3274cb3
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 109 deletions.
diff --git a/ait/gui/__init__.py b/ait/gui/__init__.py
@@ -25,7 +25,7 @@
 from ait.core import api, cmd, db, dmc, evr, limits, log, notify, pcap, tlm, gds, util
 from ait.core.server.plugin import Plugin
 import copy
-from datetime import datetime
+from datetime import datetime, timedelta
 from Queue import Queue
 
 class Session (object):
@@ -1035,9 +1035,13 @@ def handle():
         # Add start time and end time to ranges
         point_query = 'SELECT * FROM "{}"'.format(packet_name)
         points = list(dbconn.query(point_query).get_points())
-        start_time = points[0]['time']
+        start_time = points[0]['time'][:19] + 'Z'
         ranges[i].append(start_time)
         end_time = points[len(points) - 1]['time']
+        dt = datetime.strptime(end_time, '%Y-%m-%dT%H:%M:%S.%fZ')
+        if dt.microsecond != 0:
+            dt += timedelta(0, 1)
+        end_time = dt.strftime('%Y-%m-%dT%H:%M:%SZ')
         ranges[i].append(end_time)
 
     return json.dumps(ranges)

diff --git a/ait/gui/static/css/ait/gui/Playback.css b/ait/gui/static/css/ait/gui/Playback.css
@@ -1,30 +1,31 @@
-.timeline {
-    width: 80%;
-    position: relative;
-    margin: 50px 10% 50px 10%;
+ait-playback {
+    display: block;
+    height: 300px;
 }
 
-.slider {
-    width: 100%;
+ait-playback .timeline {
+    width: 80%;
+    position: relative;
+    margin: 100px 10% 50px 10%;
 }
 
-.timeline-start {
+ait-playback .timeline-start {
     position: absolute;
     top: 20px;
 }
 
-.timeline-end {
+ait-playback .timeline-end {
     position: absolute;
     top: 20px;
     right: 0px;
 }
 
-.timeline-current {
+ait-playback .timeline-current {
     position: absolute;
     top: 40px;
 }
 
-@keyframes move-dot {
+ait-playback @keyframes move-dot {
   from {left: 0;}
   to {left: 100%;}
 }
diff --git a/ait/gui/static/index.html b/ait/gui/static/index.html
@@ -156,7 +156,6 @@ <h4 class="telem-group-title">1553 HS Currents</h4>
         <h1>The current time</h1>
         <ait-clock class="navbar-text" doy="true"></ait-clock>
       </ait-tab>
-      <ait-tab title="Playback"><ait-playback></ait-playback></ait-tab>
     </ait-tabset>
   </div>
 
@@ -194,6 +193,7 @@ <h1>The current time</h1>
         </div>
         <ait-scripts></ait-scripts>
       </ait-tab>
+      <ait-tab title="Playback"><ait-playback></ait-playback></ait-tab>
     </ait-tabset>
   </div>
 

diff --git a/ait/gui/static/js/ait/gui/Playback.js b/ait/gui/static/js/ait/gui/Playback.js
@@ -32,116 +32,57 @@ const Playback = {
 
     view(vnode) {
 
-        let range = [
-            m('h3', 'Time ranges available in database'),
-            m('ul',
-                this._range.map(function(i) {
-                    return m('li', [m('div', 'Telemetry packet: ' + i[0]),
-                        m('div', 'Start time: ' + i[1]),
-                        m('div', 'End time: ' + i[2])]
-                    )
-                })
-            )
-        ]
+        let range = m('div', {class: 'form-group'}, [
+            m('label', 'Time ranges available'),
+            this._range.map(function(i) {
+                return m('div', i[0] + ': ' + i[1] + ' to ' + i[2])
+            })
+        ])
 
-        let packets = m('div', {class: 'form-group'}, [
-            m('label', 'Telemetry packet'),
+        let packets = m('div', {class: 'form-group col-xs-3'}, [
+            m('label', 'Telemetry packet:'),
             m('select', {
                 class: 'form-control',
                     name: 'packet',
                 },
                 [m('option', {
                     disabled: 'disabled',
                     selected: 'selected'
-                }, 'Select an option ...')].concat(
-                    map(this._range, (k) => {
-                        return m('option', {value: k[0]}, k[0])
+                }, 'Select an option')].concat(
+                    map(this._range, (i) => {
+                        return m('option', {value: i[0]}, i[0])
                     })
                 )
-            ),
-            m('p', {class: 'help-block'}, 'Telemetry packet from database')
+            )
         ])
         if (this._validation_errors['packet']) {
             packets.attrs.className += ' has-error'
         }
 
-        let startTime = m('div', {class: 'form-group'}, [
-            m('label', 'Start time'),
-            m('input', {class: 'form-control', placeholder: 'Start time YYYY-MM-DDTHH:MM:SSZ', name: 'startTime'}),
-            m('p', {class: 'help-block'}, 'Start time for data query. Expected format: YYYY-MM-DDTHH:MM:SSZ')
+        let startTime = m('div', {class: 'form-group col-xs-3'}, [
+            m('label', 'Start time:'),
+            m('input', {class: 'form-control', placeholder: 'YYYY-MM-DDTHH:MM:SSZ', name: 'startTime'})
         ])
         if (this._validation_errors['startTime']) {
             startTime.attrs.className += ' has-error'
         }
 
-        let endTime = m('div', {class: 'form-group'}, [
-            m('label', 'End time'),
-            m('input', {class: 'form-control', placeholder: 'End time YYYY-MM-DDTHH:MM:SSZ', name: 'endTime'}),
-            m('p', {class: 'help-block'}, 'End time for data query. Expected format: YYYY-MM-DDTHH:MM:SSZ')
+        let endTime = m('div', {class: 'form-group col-xs-3'}, [
+            m('label', 'End time:'),
+            m('input', {class: 'form-control', placeholder: 'YYYY-MM-DDTHH:MM:SSZ', name: 'endTime'})
         ])
         if (this._validation_errors['endTime']) {
             endTime.attrs.className += ' has-error'
         }
 
-        let queryBtn = m('button',
-            {class: 'btn btn-success pull-right', type: 'submit', id: 'playback-query'}, 'Query')
-
-        let timeline =
-            m('div', {class:'timeline', style:'display:none'},
-                [
-                    this._slider,
-                    m('div', {class:'timeline-start'}, this._start_time),
-                    m('div', {class:'timeline-end'}, this._end_time),
-                    this._current_time,
-                ])
-
-        let playBtn =
-            m('button',
-                {class: 'btn btn-success pull-right',
-                    onclick: (e) => {
-                        this.start_slider(vnode, this._end_time)
-                    },
-                    style: 'display:none',
-                    id: 'playback-control'
-                }, 'Play'
-            )
-
-        let pauseBtn =
-            m('button',
-                {class: 'btn btn-success pull-right',
-                    onclick: (e) => {
-                        this.stop_slider()
-                    },
-                    style: 'display:none',
-                    id: 'playback-control'
-                }, 'Pause'
-            )
-
-        let abortBtn =
-            m('button',
-                {class: 'btn btn-success pull-right',
-                    onclick: (e) => {
-                        vnode.dom.getElementsByClassName('timeline')[0].style.display = 'none'
-                        this.stop_slider()
-
-                        let buttons = vnode.dom.getElementsByClassName('btn btn-success pull-right')
-                        for (let i = 0; i < buttons.length; ++i) {
-                            if (buttons[i].id == 'playback-control')
-                                buttons[i].style.display = 'none'
-                            if (buttons[i].id == 'playback-query')
-                                buttons[i].style.display = 'block'
-                        }
-                        m.request({
-                            url: '/playback/abort',
-                            method: 'PUT'
-                        })
-                    },
-                    style: 'display:none',
-                    id: 'playback-control'
-                }, 'Abort'
-            )
+        let queryBtn = m('div', {class: 'form-group col-xs-3'}, [
+            m('div', {style: 'height: 25px'}),
+            m('button', {class: 'btn btn-success', type: 'submit'}, 'Query')
+            ]
+        )
 
         let form = m('form', {
+            class: 'form-row',
             onsubmit: (e) => {
                 e.preventDefault()
                 let form = e.currentTarget
@@ -184,24 +125,73 @@ const Playback = {
                 vnode.dom.getElementsByClassName('timeline')[0].style.display = 'block'
                 this._current_time = m('div', {class: 'timeline-current'}, 'Current time: ' + this._start_time)
 
+                vnode.dom.getElementsByClassName('btn btn-success')[0].style.display = 'none'
                 let buttons = vnode.dom.getElementsByClassName('btn btn-success pull-right')
                 for (let i = 0; i < buttons.length; ++i) {
-                    if (buttons[i].id == 'playback-control')
-                        buttons[i].style.display = 'block'
-                    if (buttons[i].id == 'playback-query')
-                        buttons[i].style.display = 'none'
+                    buttons[i].style.display = 'block'
                 }
-            },
-        }, [
-            m('h3', 'Query data from database'),
-            packets,
-            startTime,
-            endTime,
-            queryBtn,
-        ])
+            }}, [
+                packets,
+                startTime,
+                endTime,
+                queryBtn,
+            ]
+        )
+
+        let timeline =
+            m('div', {class:'timeline', style:'display:none'},
+                [
+                    this._slider,
+                    m('div', {class:'timeline-start'}, this._start_time),
+                    m('div', {class:'timeline-end'}, this._end_time),
+                    this._current_time,
+                ])
+
+        let playBtn =
+            m('button',
+                {class: 'btn btn-success pull-right',
+                    onclick: (e) => {
+                        this.start_slider(vnode, this._end_time)
+                    },
+                    style: 'display:none'
+                }, 'Play'
+            )
+
+        let pauseBtn =
+            m('button',
+                {class: 'btn btn-success pull-right',
+                    onclick: (e) => {
+                        this.stop_slider()
+                    },
+                    style: 'display:none'
+                }, 'Pause'
+            )
+
+        let abortBtn =
+            m('button',
+                {class: 'btn btn-success pull-right',
+                    onclick: (e) => {
+                        this.stop_slider()
+                        vnode.dom.getElementsByClassName('timeline')[0].style.display = 'none'
+                        vnode.dom.getElementsByClassName('btn btn-success')[0].style.display = 'inline-block'
+                        let buttons = vnode.dom.getElementsByClassName('btn btn-success pull-right')
+                        for (let i = 0; i < buttons.length; ++i) {
+                            buttons[i].style.display = 'none'
+                        }
+
+                        m.request({
+                            url: '/playback/abort',
+                            method: 'PUT'
+                        })
+                    },
+                    style: 'display:none'
+                }, 'Abort'
+            )
+
+        let controls = [abortBtn, pauseBtn, playBtn]
 
         return m('ait-playback', vnode.attrs, [
-            range, form, timeline, abortBtn, pauseBtn, playBtn
+            range, form, timeline, controls
         ])
     },