vue webui autodetects queue_num

pizzicore/static/js/spa.js

@@ -1,40 +1,24 @@
 const { createApp } = Vue
 
+function range(start, end) {
+    var ans = [];
+    for (let i = start; i <= end; i++) {
+        ans.push(i);
+    }
+    return ans;
+}
+
 var app = createApp({
-    data() {
-        return {
-            counter: -1,
-        }
-    },
     components: {
-        'CounterController': Vue.defineAsyncComponent( () => import('/static/vue/counter.js') )
+        'CounterList': Vue.defineAsyncComponent( () => import('/static/vue/counterlist.js') ),
     },
-    template: `
-            <CounterController queue_num="0"></CounterController>
-            <CounterController queue_num="1"></CounterController>
-            `,
+
+    template: ` <CounterList></CounterList> `
 })
 app.mount('#app')
 
-app.component(
-    'counter-controller',
-    {
-        data: () => { counter: 0; },
-        template: `<div class="counter">{{counter}}</div>`,
-    }
-)
-
-
-function get_cid() {
-    return document.getElementsByTagName('body')[0].dataset.cid;
-}
-
 function get_url(cid)
 {
-    if(cid === undefined) {
-        cid = get_cid()
-    }
-
     var url = "";
     if(window.location.protocol == "http:") {
         url += "ws://"
@@ -77,4 +61,3 @@ function printToLetter(number, recursive){
     var quotient = Math.floor((number-1)/alphabet.length)
     return printToLetter(quotient, true) + printToLetter(remainder, true)
 }
-

pizzicore/static/vue/counter.js

@@ -5,8 +5,7 @@ export default {
     props: ["queue_num"],
     data() {
         var me = this;
-        console.log("I am", this);
-        do_websocket(me.queue_num, function(new_value) {
+        do_websocket(parseInt(me.queue_num, 10), function(new_value) {
             me.counter = new_value
         })
         return  { counter: -1 }

pizzicore/static/vue/counterlist.js

@@ -0,0 +1,41 @@
+const template = `
+    <CounterController v-for="q in queues" :queue_num="q"></CounterController>
+            `
+
+export default {
+    template: template,
+
+    components: {
+        'CounterController': Vue.defineAsyncComponent( () => import('/static/vue/counter.js') ),
+    },
+
+    data() {
+        return {
+            queue_count: 0,
+        }
+    },
+
+    mounted: function () {
+        this.updateGlobalProperties()
+    },
+
+    methods: {
+        updateGlobalProperties() {
+            var me = this
+            fetch('/v1/counter/')
+            .then((response) => response.json())
+            .then(function(data) {
+                me.queue_count = data.counters
+                console.log('qc', me.queue_count)
+            })
+        }
+    },
+
+    computed: {
+        queues() {
+            return range(0, this.queue_count-1)
+        }
+    },
+
+}
+