Merge pull request #20 from signalwire/aa/address-api

Integrate addresses API
signalwire · Jan 16, 2024 · 3ca5713 · 3ca5713
2 parents 5e1d001 + 0dd3052
commit 3ca5713
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git a/index.js b/index.js
@@ -93,7 +93,7 @@ app.get('/', async (req, res) => {
   if (req.session && req.session.token) {
     token = req.session.token
   } else {
-    const response = getSubscriberToken()
+    const response = await getSubscriberToken()
     token = response.token
   }
 

diff --git a/public/full.js b/public/full.js
@@ -340,6 +340,7 @@ function restoreUI() {
   btnDisconnect.classList.add('d-none')
   btnAnswer.classList.add('d-none')
   btnReject.classList.add('d-none')
+  addressesCard.classList.remove('d-none')
   connectStatus.innerHTML = 'Not Connected'
 
   inCallElements.forEach((button) => {
@@ -491,6 +492,7 @@ function updateUIConnected() {
   btnConnect.classList.add('d-none')
   btnAnswer.classList.add('d-none')
   btnReject.classList.add('d-none')
+  addressesCard.classList.add('d-none')
   btnDisconnect.classList.remove('d-none')
   connectStatus.innerHTML = 'Connected'
 
@@ -858,4 +860,61 @@ window.ready(async function () {
   if (searchParams.has('inbound')) {
     await enablePushNotifications()
   }
+  await fetchAddresses()
 })
+
+function updateAddressUI() {
+  addressesCard.classList.remove('d-none')
+  const addressesDiv = document.getElementById('addresses')
+  addressesDiv.innerHTML = ''
+  const { addresses } = window.__addressData
+
+  const list = addresses.map((address) => {
+    return `<li class="list-group-item">
+        <b>${address.display_name}</b> / <span>${
+      address.name
+    } </span> <span class="badge bg-primary float-end">${address.type}</span>
+      <ul class="list-group list-group-flush">
+        ${Object.keys(address.channels)
+          .map((c) => {
+            return `<li class="list-group-item">${address.channels[c]}</li>`
+          })
+          .join('')}
+      </ul>
+      </li>`
+  })
+  addressesDiv.insertAdjacentHTML('beforeend', list.join(''))
+}
+
+async function fetchAddresses() {
+  if (!client) return
+  try {
+    const addressData = await client.getAddresses()
+    window.__addressData = addressData
+    updateAddressUI()
+  } catch (error) {
+    console.error('Unable to fetch addresses', error)
+  }
+}
+
+window.fetchNextAddresses = async () => {
+  const { nextPage } = window.__addressData
+  try {
+    const nextAddresses = await nextPage()
+    window.__addressData = nextAddresses
+    updateAddressUI()
+  } catch (error) {
+    console.error('Unable to fetch next addresses', error)
+  }
+}
+
+window.fetchPrevAddresses = async () => {
+  const { prevPage } = window.__addressData
+  try {
+    const prevAddresses = await prevPage()
+    window.__addressData = prevAddresses
+    updateAddressUI()
+  } catch (error) {
+    console.error('Unable to fetch prev addresses', error)
+  }
+}
diff --git a/views/index.ejs b/views/index.ejs
@@ -94,6 +94,7 @@
           </div>
         </div>
 
+        <!-- Room controls -->
         <div id="roomControls" class="card mt-4 d-none">
           <div class="card-body">
             <h5>Controls</h5>
@@ -164,15 +165,41 @@
             <canvas id="mic-meter" width="40" height="100"></canvas>
           </div>
         </div>
+        <!-- Room controls end -->
       </div>
 
       <div class="col-12 col-md-8 mt-4 mt-md-1">
+        <!-- Addresses -->
+        <div class="card" id="addressesCard">
+          <div class="card-body" id="addresses"></div>
+          <div class="d-flex justify-content-center pb-2 gap-2">
+            <button 
+              name="fetch-next-address" 
+              type="button" 
+              class="btn btn-light btn-sm" 
+              onclick="fetchPrevAddresses()">
+              Prev
+            </button>
+            <button 
+              name="fetch-prev-address" 
+              type="button" 
+              class="btn btn-light btn-sm" 
+              onclick="fetchNextAddresses()">
+              Next
+            </button>
+          </div>
+        </div>
+        <!-- Addresses end -->
+
+        <!-- Root element (for SDK video) -->
         <div class="row py-3">
           <div class="col-12">
             <div id="rootElement"></div>
           </div>
         </div>
+        <!-- Root element (for SDK video) end -->
 
+        <!-- Mic/Speaker volume controls -->
         <div id="controlSliders" class="row py-2 d-none">
           <div class="col-4">
             <label for="microphoneVolume" class="form-label">
@@ -194,7 +221,9 @@
               id="inputSensitivity" />
           </div>
         </div>
+        <!-- Mic/Speaker volume controls end -->
 
+        <!-- Device controls -->
         <div id="controlLayout" class="row py-2 d-none">
           <div class="col-4">
             <label for="cameraSelect" class="form-label">Camera</label>
@@ -209,7 +238,9 @@
             <select class="form-select" value="" id="speakerSelect" onchange="changeSpeaker(this)"></select>
           </div>
         </div>
+        <!-- Device controls end -->
 
+        <!-- Call record controls -->
         <div id="controlRecording" class="row py-2 d-none">
           <h6>Recording (<i id="recordingState">unknown</i>)</h6>
           <div class="col-12">
@@ -233,7 +264,9 @@
             </div>
           </div>
         </div>
+        <!-- Call record controls end -->
 
+        <!-- Call playback controls -->
         <div id="controlPlayback" class="row py-2 d-none">
           <h6>Playback URL</h6>
           <div class="form-group">
@@ -287,6 +320,7 @@
             </div>
           </div>
         </div>
+        <!-- Call playback controls end -->
       </div>
     </div>
     <hr />