migrate to vue3; autocomplete still needs work

assets/streamer/app.js

@@ -0,0 +1,60 @@
+import AdminApp from 'admin/app';
+import Model, {Set} from 'public/model';
+import Sound from 'public/sound';
+import {setEcoInterval} from 'public/utils';
+
+import {Streamer, Queue} from './controllers';
+
+
+export default {
+    ...AdminApp,
+
+    props: {
+        ...(AdminApp.props || {}),
+        apiUrl: String,
+    },
+    
+    data() {
+        return {
+            // current streamer
+            streamer: null,
+            // all streamers
+            streamers: [],
+            // fetch interval id
+            fetchInterval: null,
+            Sound: Sound,
+        }
+    },
+
+    computed: {
+        ...(AdminApp.computed || {}),
+        
+        sources() {
+            var sources = this.streamer ? this.streamer.sources : [];
+            return sources.filter(s => s.data)
+        },
+    },
+
+    methods: {
+        ...(AdminApp.methods || {}),
+
+        fetchStreamers() {
+            Streamer.fetch(this.apiUrl, {many:true}).then(streamers => {
+                this.streamers = streamers
+                this.streamer = streamers ? streamers[0] : null
+            })
+        },
+    },
+
+    mounted() {
+        this.fetchStreamers();
+        this.fetchInterval = setEcoInterval(() => this.streamer && this.streamer.fetch(), 5000)
+    },
+
+    destroyed() {
+        if(this.fetchInterval !== null)
+            clearInterval(this.fetchInterval)
+    }
+}
+
+

assets/streamer/controllers.js

@@ -1,4 +1,4 @@
-import Model, {Set} from 'public/model';
+import Model from 'public/model';
 import {setEcoInterval} from 'public/utils';
 
 
@@ -12,8 +12,8 @@ export class Streamer extends Model {
         if(!this.data)
             this.data = { id: data.id, playlists: [], queues: [] }
 
-        data.playlists = Playlist.Set(data.playlists, {args: {streamer: this}});
-        data.queues = Queue.Set(data.queues, {args: {streamer: this}});
+        data.playlists = Playlist.fromList(data.playlists, {streamer: this});
+        data.queues = Queue.fromList(data.queues, {streamer: this});
         super.commit(data)
     }
 }
@@ -83,7 +83,7 @@ export class Queue extends Source {
     get queue() { return this.data && this.data.queue; }
 
     commit(data) {
-        data.queue = Request.Set(data.queue);
+        data.queue = Request.fromList(data.queue);
         super.commit(data)
     }
 

assets/streamer/index.js

@@ -1,12 +1,18 @@
-import App from 'public/app';
+import AdminApp from 'admin/app';
 import Model, {Set} from 'public/model';
 import Sound from 'public/sound';
 import {setEcoInterval} from 'public/utils';
 
 import {Streamer, Queue} from './controllers';
 
-window.aircox.builder.config = {
-    ...App,
+
+export const StreamerApp = {
+    ...AdminApp,
+
+    props: {
+        ...(AdminApp.props || {}),
+        apiUrl: String,
+    },
     
     data() {
         return {
@@ -21,12 +27,8 @@ window.aircox.builder.config = {
     },
 
     computed: {
-        ...(App.computed || {}),
+        ...(AdminApp.computed || {}),
         
-        apiUrl() {
-            return this.$el && this.$el.dataset.apiUrl;
-        },
-
         sources() {
             var sources = this.streamer ? this.streamer.sources : [];
             return sources.filter(s => s.data)
@@ -34,10 +36,10 @@ window.aircox.builder.config = {
     },
 
     methods: {
-        ...(App.methods || {}),
+        ...(AdminApp.methods || {}),
 
         fetchStreamers() {
-            Set.fetch(Streamer, this.apiUrl).then(streamers => {
+            Streamer.fetch(this.apiUrl, {many:true}).then(streamers => {
                 this.streamers = streamers
                 this.streamer = streamers ? streamers[0] : null
             })
@@ -55,3 +57,5 @@ window.aircox.builder.config = {
     }
 }
 
+window.StreamerApp = StreamerApp
+