[feature] Add readyToContinue flag to UI

Author: g3force

src/components/control/ControlFlowBar.vue

@@ -24,6 +24,22 @@
                 </span>
             </b-button>
         </div>
+
+        <div v-for="autoRefId of autoRefs" v-if="autoRefReady(autoRefId) !== undefined" class="auto-ref-meta">
+            {{autoRefId}}
+            <font-awesome-icon
+                    v-b-tooltip.hover.d500
+                    title="Ready to continue"
+                    v-if="autoRefReady(autoRefId)"
+                    class="fa-xs"
+                    icon="check-circle"/>
+            <font-awesome-icon
+                    v-b-tooltip.hover.d500
+                    title="Not ready to continue yet"
+                    v-else
+                    class="fa-xs"
+                    icon="times-circle"/>
+        </div>
     </div>
 </template>
 
@@ -40,6 +56,9 @@
             triggerContinue() {
                 submitChange({continue: {}});
             },
+            autoRefReady(id) {
+                return this.$store.state.gcState.autoRefState[id].readyToContinue;
+            }
         },
         computed: {
             keymapHalt() {
@@ -87,6 +106,9 @@
                     'team-blue': this.nextCommand && this.nextCommand.forTeam === TEAM_BLUE,
                     'team-yellow': this.nextCommand && this.nextCommand.forTeam === TEAM_YELLOW
                 }
+            },
+            autoRefs() {
+                return Object.keys(this.$store.state.gcState.autoRefState);
             }
         }
     }
@@ -102,4 +124,10 @@
         display: flex;
         justify-content: center;
     }
+
+    .auto-ref-meta {
+        font-size: 1.2em;
+        margin: auto .2em;
+    }
+
 </style>