add namespace to functions to better accommodate more modules adn fun…

…ctions

frontend/frontend.js

@@ -11,7 +11,8 @@ document.querySelector('#addFunction').addEventListener('submit', (e) => {
       version: 1
     },
     function: document.querySelector('#function').value,
-    listener: document.querySelector('#listener').value
+    listener: document.querySelector('#listener').value,
+    namespace: document.querySelector('#namespace').value,
   })
 })
 
@@ -34,29 +35,34 @@ function initSettings(settings) {
   document.querySelector('#port').value = settings.port
 }
 
-function deleteFunction(id) {
+function deleteFunction(id, namespace, listener) {
   window.LPTE.emit({
     meta: {
       namespace: 'module-vmix',
       type: 'delete',
       version: 1
     },
-    id
+    id,
+    namespace,
+    listener
   })
 }
 
-function displayFucntionTable(data) {
-  console.log(data)
+function displayFunctionTable(data) {
   if (data.functions === undefined) return
 
   functions.innerHTML = ''
 
   data.functions.forEach((f) => {
     const row = document.createElement('tr')
 
-    const nameTd = document.createElement('td')
-    nameTd.innerText = f.listener
-    row.appendChild(nameTd)
+    const namespaceTd = document.createElement('td')
+    namespaceTd.innerText = f.namespace
+    row.appendChild(namespaceTd)
+
+    const listenerTd = document.createElement('td')
+    listenerTd.innerText = f.listener
+    row.appendChild(listenerTd)
 
     const handleTd = document.createElement('td')
     handleTd.innerText = f.function
@@ -67,7 +73,7 @@ function displayFucntionTable(data) {
     deleteBtn.classList.add('btn', 'btn-danger')
     deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>'
     deleteBtn.onclick = () => {
-      deleteFunction(f.id)
+      deleteFunction(f.id, f.namespace, f.listener)
     }
     deleteTd.appendChild(deleteBtn)
     row.appendChild(deleteTd)
@@ -84,9 +90,9 @@ window.LPTE.onready(async () => {
       version: 1
     }
   })
-  displayFucntionTable(data)
+  displayFunctionTable(data)
 
-  window.LPTE.on('module-vmix', 'update-vmix-set', displayFucntionTable)
+  window.LPTE.on('module-vmix', 'update-vmix-set', displayFunctionTable)
 
   const settings = await LPTE.request({
     meta: {

frontend/index.html

@@ -3,6 +3,7 @@ <h1>vMix</h1>
 <table class="table mb-3 mt-5">
   <thead>
     <tr>
+      <th scope="col">Namespace</th>
       <th scope="col">Listener</th>
       <th scope="col">Function</th>
       <th scope="col"></th>
@@ -13,6 +14,16 @@ <h1>vMix</h1>
 
 <form id="addFunction">
   <div class="d-flex">
+    <div class="form-group w-50">
+      <label for="namespace">Namespace</label>
+      <input
+        type="text"
+        id="namespace"
+        placeholder="Namespace"
+        class="form-control"
+        required
+      />
+    </div>
     <div class="form-group w-50">
       <label for="listener">Listener</label>
       <input

plugin.ts

@@ -91,7 +91,7 @@ module.exports = async (ctx: PluginContext) => {
       id: e.id
     })
 
-    ctx.LPTE.unregister(namespace, e.listener)
+    ctx.LPTE.unregister(e.namespace, e.listener)
 
     const res = await ctx.LPTE.request({
       meta: {
@@ -126,12 +126,13 @@ module.exports = async (ctx: PluginContext) => {
       },
       collection: 'vmix',
       data: {
+        namespace: e.namespace,
         listener: e.listener,
         function: e.function
       }
     })
 
-    ctx.LPTE.on(namespace, e.listener, async () => {
+    ctx.LPTE.on(e.namespace, e.listener, async () => {
       await executeFunc(e.function)
     })
 
@@ -209,7 +210,7 @@ module.exports = async (ctx: PluginContext) => {
   }
 
   res.data.forEach((f: any) => {
-    ctx.LPTE.on(namespace, f.listener, async () => {
+    ctx.LPTE.on(f.namespace, f.listener, async () => {
       await executeFunc(f.function)
     })
   })