added superDemo tab

components/Cube/StockMarketQuotes.vue

@@ -10,7 +10,7 @@ const cubeAppCommand = computed(() => {
   // build command and command line options;
   const command = ['ts-node', appSrcDir + 'stockMarketQuotes/showStockMarketQuotes.ts'];
   command.push('--tickerSymbols');
-  command.push(tickerSymbols.value);
+  command.push(...tickerSymbols.value);
   return command;
 });
 
@@ -42,7 +42,7 @@ async function showStockMarketQuotes() {
       <!-- <span> TEST language: {{ language }}</span><br> -->
     </div>
     <br><br><br><br>
-    <!--<div style="word-break: break-all;">{{ cubeAppCommand }}</div>-->
+    <div style="word-break: break-all;">{{ cubeAppCommand }}</div>
     <div class="field is-grouped">
       <p class="control">
         <button :disabled="!tickerSymbols" @click="showStockMarketQuotes" class="button is-primary"

components/Cube/SuperDemo.vue

@@ -0,0 +1,44 @@
+<script setup>
+const nLoops = ref(1);
+const showTime = ref(60);
+
+const loading = ref(false);
+const { appSrcDir } = useConfig();
+const { start, stop } = useAPI();
+
+const superDemoAppCommand = computed(() => {
+  // build command and command line options;
+  const command = ["sudo", appSrcDir + 'superDemo/superDemo.py'];
+  command.push('--n_loops');
+  command.push(nLoops.value);
+  command.push('--show_time');
+  command.push(showTime.value);
+  return command;
+});
+
+async function superDemo() {
+  loading.value = true;
+  // build command and command line options;
+  const response = await start(superDemoAppCommand.value)
+  console.log(response.data)
+
+  loading.value = false;
+}
+
+</script>
+
+<template>
+
+  Number of loops: <input type="number" v-model="nLoops"><br><br>
+  Show time per app: <input type="number" v-model="showTime"> (seconds)<br><br>
+  <div style="word-break: break-all;">{{ superDemoAppCommand }}</div>
+  <div class="field is-grouped">
+    <p class="control">
+      <button @click="superDemo" class="button is-primary"
+        :class="{ 'is-loading': loading }">Super demo</button>
+    </p>
+    <p class="control">
+      <button @click="stop" class="button is-danger" :class="{ 'is-loading': loading }">Stop</button>
+    </p>
+  </div>
+</template>

pages/index.vue

@@ -72,6 +72,12 @@ const currentTab = ref('clock');
               <span>Fireworks</span>
             </a>
           </li>
+          <li :class="{ 'is-active': currentTab === 'superDemo' }">
+            <a @click="currentTab = 'superDemo'">
+              <span class="icon is-small"><i class="fa-solid fa-wand-magic-sparkles"></i></span>
+              <span>Super demo</span>
+            </a>
+          </li>
           <li :class="{ 'is-active': currentTab === 'boss' }">
             <a @click="currentTab = 'boss'">
               <span class="icon is-small"><i class="fa-solid fa-wand-magic-sparkles"></i></span>
@@ -92,6 +98,7 @@ const currentTab = ref('clock');
       <CubeHelloWorld v-if="currentTab === 'helloWorld'" />
       <CubeDemo v-if="currentTab === 'demo'" />
       <CubeFireworks v-if="currentTab === 'fireworks'" />
+      <CubeSuperDemo v-if="currentTab === 'superDemo'" />
       <CubeBoss v-if="currentTab === 'boss'" />
     </div>
   </div>