From b1ec6ac608c149d52ab3de6b17ddebd3ed8102fb Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Mon, 20 May 2024 23:48:47 +1200
Subject: [PATCH] add ui to initiate a new call to provided destination

---
 public/call.html | 49 ++++++++++++++++++++++++++++++++++++++----------
 web.py           |  1 +
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/public/call.html b/public/call.html
index 32194a9..164377d 100644
--- a/public/call.html
+++ b/public/call.html
@@ -92,14 +92,14 @@
                             <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
                         </svg>
                     </div>
-                    <div class="my-auto">Reticulum Phone</div>
+                    <div class="my-auto">Start a new Call</div>
                 </div>
                 <div class="flex text-gray-900 p-2 space-x-2">
                     <div class="flex-1">
-                        <input v-model="callHash" type="text" placeholder="Enter Call Hash" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
+                        <input v-model="destinationHash" type="text" placeholder="Enter Destination Hash" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
                     </div>
-                    <button @click="joinExistingCall" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 p-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                        Join Existing Call
+                    <button @click="initiateCall(destinationHash)" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-green-500 p-2 text-sm font-semibold text-white shadow-sm hover:bg-green-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500">
+                        <span>Initiate Call</span>
                     </button>
                 </div>
             </div>
@@ -109,7 +109,7 @@
                 <div class="flex border-b border-gray-300 text-gray-700 p-2">
                     <div class="my-auto mr-2">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
                         </svg>
                     </div>
                     <div class="my-auto">Call Log</div>
@@ -152,6 +152,8 @@
 
                 audioCalls: [],
 
+                isInitiatingCall: false,
+
                 isWebsocketConnected: false,
                 callHash: null,
                 txBytes: 0,
@@ -180,15 +182,42 @@
 
         },
         methods: {
-            async joinExistingCall() {
+            async initiateCall(destinationHash) {
 
-                // make sure call hash provided
-                if(!this.callHash) {
-                    alert("Enter hash of existing call.");
+                // do nothing if already initiating call
+                // todo: support cancelling in progress call initiation
+                if(this.isInitiatingCall){
+                    alert("Call is already initiating...");
                     return;
                 }
 
-                await this.joinCall(this.callHash);
+                // make sure call hash provided
+                if(!destinationHash) {
+                    alert("Enter destination hash to call.");
+                    return;
+                }
+
+                // show loading
+                this.isInitiatingCall = true;
+
+                try {
+
+                    // initiate call
+                    const response = await axios.get(`/api/v1/calls/initiate/${destinationHash}`);
+
+                    // get call hash from response
+                    const hash = response.data.hash;
+
+                    // join call
+                    await this.joinCall(hash);
+
+                } catch(e) {
+                    alert("failed to initiate call");
+                    console.log(e);
+                } finally {
+                    // hide loading
+                    this.isInitiatingCall = false;
+                }
 
             },
             async joinCall(callHash) {
diff --git a/web.py b/web.py
index b1dbe8d..576f08a 100644
--- a/web.py
+++ b/web.py
@@ -156,6 +156,7 @@ class ReticulumWebChat:
             return websocket_response
 
         # handle websocket clients for initiating a call
+        # todo: remove
         @routes.get("/call/initiate/{destination_hash}")
         async def ws(request):