solari

src/components/InSessionNow.vue

@@ -45,8 +45,12 @@
     },
     async mounted() {
       await this.loadData();
+      this.startLoop();
     },
     methods: {
+      startLoop() {
+        setInterval(this.loadData, 10000)
+      },  
       async loadData() {
         this.isLoading = true;
         let data = await getFlightplansNow();
@@ -58,8 +62,7 @@
           return acc;
         }, []);
         
-        // this.list = rows;
+        this.list = rows;
-        this.list = this.test;
       }
     },
     components: {

src/components/SolariBoard.vue

@@ -22,7 +22,8 @@
 <script>
 import SolariBoardRow from './SolariBoardRow.vue';
 import _isNil from 'lodash/isNil';
-import _fill from 'lodash/fill';
+import _times from 'lodash/times';
+import _constant from 'lodash/constant';
 
 export default {
   props: {
@@ -62,9 +63,9 @@ export default {
   },
   mounted() {
    
-    if (Array.isArray(this.data)) {
+    // if (Array.isArray(this.data)) {
-      this.setData(this.data);
+    //   this.setData(this.data);
-    }
+    // }
     
   },
   computed: {
@@ -87,18 +88,21 @@ export default {
       return this.cols * this.rows;
     }
   },
+  watch: {
+    data: {
+      handler(newData) {
+        this.setData(newData);
+      },
+      immediate: true,
+    }
+  },
   methods: {
     setData(data) {
       const plainData = (data || []).reduce((acc, row) => {
-        console.log('row :>> ', row);
         acc = acc.concat(row);
         return acc;
       }, []);
-      console.log('plainData :>> ', plainData);
+      this.values = _times(this.total, _constant(' ')).map((d, i) => plainData[i] || d);
-      console.log('this.total :>> ', this.total);
-      this.values =  _fill(Array(this.total), ' ').map((d, i) => plainData[i] || d);
-      console.log('this.values :>> ', this.values);
-
     },
     mapRow(r, i) {
       r.loops = (_isNil(r.loops)) ? this.loops : r.loops;

src/components/SolariBoardRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="board-line">
-    <div class="board-letter" :ref="'letter' + $index" :class="{'animating': isAnimating[$index]}" v-for="(char, $index) in charsBack" :key="$index">{{ char }}</div>
+    <div class="board-letter" :ref="'letter' + $index" :class="{'animating': isAnimating[$index]}" v-for="(char, $index) in charsToShow" :key="$index">{{ char }}</div>
   </div>  
 </template>
 
@@ -56,6 +56,7 @@
 <script>
   import _isInteger from 'lodash/isInteger';
   import _delay from 'lodash/delay';
+  import _clone from 'lodash/clone';
 
   export default {
     props: {
@@ -80,17 +81,19 @@
       }
     },
     data() {
+      const newArray = Array.apply(null, Array(this.size)).map(() => ' ');
+      const newArrayAnimating = Array.apply(null, Array(this.size)).map(() => false);
       return {
         charsAll: ' ABCDEFGHIJKLMNÑOPQRSTUVWXYZ0123456789-:.>*',
-        charsBack: [],
+        charsReference: _clone(newArray),
-        isAnimating: [],
+        charsToShow: _clone(newArray),
+        isAnimating: newArrayAnimating,
       }
     },
     computed: {
       chars() {
         const text =  this.getText(this.textToShow);
-        const size = _isInteger(this.size) ? this.size : text.length;
+        const chars = Array.apply(null, Array(this.size)).map(() => ' ');
-        const chars = Array.apply(null, Array(size)).map(() => ' ');
         const offset = (this.align === 'left') ? 0 : chars.length - text.length;
         
         for (let index = 0; index < text.length; index++) {
@@ -101,8 +104,7 @@
     },
     watch: {
       chars: {
-        handler(newValue) {
+        handler() {
-          this.charsBack = Array.apply(null, Array(newValue.length)).map(() => ' ');
           if (_isInteger(this.delay) && this.delay > 0) {
             _delay(this.startAnimation, this.delay);
           } else {
@@ -123,24 +125,26 @@
         return (text.length > this.size) ? text.substring(0, this.size) : text;
       },
       async startAnimation() {
-        this.charsBack = this.charsBack.map(() => ' ');
+        const cts = _clone(this.charsReference);
-        this.isAnimating = [];
         for (let index = 0; index < this.chars.length; index++) {
           const char = this.chars[index];
-          this.animateLetter(index, char);
+          if (char !== cts[index]) {
-          await new Promise((resolve) => setTimeout(resolve, 100))
+            this.animateLetter(index, char);
+            await new Promise((resolve) => setTimeout(resolve, 100))
+          }
         }
+        this.charsReference = this.chars;
       },
       animateLetter(index, letter) {
         let showIndex = 0;
-        this.charsBack[index] = this.charsAll[showIndex];
+        this.charsToShow[index] = this.charsAll[showIndex];
         this.isAnimating[index] = true;
         let loop = 0;
         const letterIndex = this.getLetterIndex(letter);
 
         const interval = setInterval(() => {
           showIndex = this.getNextIndex(showIndex);
-          this.charsBack[index] = this.charsAll.charAt(showIndex);
+          this.charsToShow[index] = this.charsAll.charAt(showIndex);
           if (showIndex === 0) {
             loop++;
           }

src/helpers/time-helpers.js

@@ -4,7 +4,7 @@ function format(num) {
 
 export function hoursFromSeconds(seconds) {
   const h = format(Math.floor(seconds / 3600));
-  const m = format(Math.round(seconds % 3600 * 60));
+  const m = format(Math.round(seconds % 3600 / 60));
   return {
     h,
     m