From 941386218679cb86a8f034b2b0589c5d2a38138a Mon Sep 17 00:00:00 2001
From: boyska <boyska@riseup.net>
Date: Sat, 20 Aug 2022 17:52:55 +0200
Subject: [PATCH] vue webui autodetects queue_num

---
 pizzicore/static/js/spa.js          | 39 ++++++++-------------------
 pizzicore/static/vue/counter.js     |  3 +--
 pizzicore/static/vue/counterlist.js | 41 +++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 30 deletions(-)
 create mode 100644 pizzicore/static/vue/counterlist.js

diff --git a/pizzicore/static/js/spa.js b/pizzicore/static/js/spa.js
index fa0e360..21bbd7e 100644
--- a/pizzicore/static/js/spa.js
+++ b/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)
 }
-
diff --git a/pizzicore/static/vue/counter.js b/pizzicore/static/vue/counter.js
index 743c7a1..5a6c47e 100644
--- a/pizzicore/static/vue/counter.js
+++ b/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 }
diff --git a/pizzicore/static/vue/counterlist.js b/pizzicore/static/vue/counterlist.js
new file mode 100644
index 0000000..7f9e6d6
--- /dev/null
+++ b/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)
+        }
+    },
+
+}
+