mirror of
https://github.com/liamcottle/reticulum-meshchat.git
synced 2026-04-27 16:10:32 +00:00
migrate main ui calls info to new telephone status
This commit is contained in:
liamcottle
parent
99ece9040e
commit
b3d938fec3
1 changed files with 28 additions and 41 deletions
|
|
@ -265,25 +265,22 @@ dark:bg-zinc-800 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outli
|
|||
<div>
|
||||
<div>Status</div>
|
||||
<div class="text-sm text-gray-700 dark:text-white">
|
||||
<div v-if="activeAudioCalls.length > 0" class="flex space-x-2">
|
||||
<span v-if="activeInboundAudioCalls.length > 0">{{ activeInboundAudioCalls.length }} Incoming {{ activeInboundAudioCalls.length === 1 ? 'Call' : 'Calls' }}</span>
|
||||
<span v-else>{{ activeOutboundAudioCalls.length }} Outgoing {{ activeOutboundAudioCalls.length === 1 ? 'Call' : 'Calls' }}</span>
|
||||
</div>
|
||||
<div v-if="activeCall">1 Active Call</div>
|
||||
<div v-else>Hung up, waiting for call...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeAudioCalls.length > 0" class="ml-auto my-auto mr-1 space-x-2">
|
||||
<div v-if="activeCall" class="ml-auto my-auto mr-1 space-x-2">
|
||||
|
||||
<!-- view incoming calls -->
|
||||
<a href="../call.html" target="_blank" title="View Incoming Calls" class="my-auto inline-flex items-center gap-x-1 rounded-full 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">
|
||||
<a href="../call.html" target="_blank" title="View Incoming Call" class="my-auto inline-flex items-center gap-x-1 rounded-full 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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
|
||||
<path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z" clip-rule="evenodd" />
|
||||
<path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- hangup all calls -->
|
||||
<button title="Hangup all Calls" @click="hangupAllCalls" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-full bg-red-500 p-2 text-sm font-semibold text-white shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500">
|
||||
<!-- hangup call -->
|
||||
<button title="Hangup Call" @click="hangupCall" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-full bg-red-500 p-2 text-sm font-semibold text-white shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 rotate-[135deg] translate-y-0.5">
|
||||
<path fill-rule="evenodd" d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
|
@ -335,7 +332,7 @@ export default {
|
|||
config: null,
|
||||
appInfo: null,
|
||||
|
||||
audioCalls: [],
|
||||
activeCall: null,
|
||||
propagationNodeStatus: null,
|
||||
|
||||
};
|
||||
|
|
@ -354,12 +351,12 @@ export default {
|
|||
WebSocketConnection.on("message", this.onWebsocketMessage);
|
||||
|
||||
this.getAppInfo();
|
||||
this.updateCallsList();
|
||||
this.getTelephoneStatus();
|
||||
this.updatePropagationNodeStatus();
|
||||
|
||||
// update info every few seconds
|
||||
this.reloadInterval = setInterval(() => {
|
||||
this.updateCallsList();
|
||||
this.getTelephoneStatus();
|
||||
this.updatePropagationNodeStatus();
|
||||
}, 3000);
|
||||
|
||||
|
|
@ -382,6 +379,18 @@ export default {
|
|||
NotificationUtils.showIncomingCallNotification();
|
||||
break;
|
||||
}
|
||||
case 'telephone_ringing': {
|
||||
this.getTelephoneStatus();
|
||||
break;
|
||||
}
|
||||
case 'telephone_call_established': {
|
||||
this.getTelephoneStatus();
|
||||
break;
|
||||
}
|
||||
case 'telephone_call_ended': {
|
||||
this.getTelephoneStatus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
async getAppInfo() {
|
||||
|
|
@ -513,38 +522,31 @@ export default {
|
|||
formatSecondsAgo: function(seconds) {
|
||||
return Utils.formatSecondsAgo(seconds);
|
||||
},
|
||||
async updateCallsList() {
|
||||
async getTelephoneStatus() {
|
||||
try {
|
||||
|
||||
// fetch calls
|
||||
const response = await axios.get("/api/v1/calls");
|
||||
const response = await axios.get("/api/v1/telephone/status");
|
||||
|
||||
// update ui
|
||||
this.audioCalls = response.data.audio_calls;
|
||||
this.activeCall = response.data.active_call;
|
||||
|
||||
} catch(e) {
|
||||
// do nothing on error
|
||||
}
|
||||
},
|
||||
async hangupAllCalls() {
|
||||
|
||||
// confirm user wants to hang up calls
|
||||
if(!await DialogUtils.confirm("Are you sure you want to hang up all incoming and outgoing calls?")){
|
||||
return;
|
||||
}
|
||||
|
||||
async hangupCall() {
|
||||
try {
|
||||
|
||||
// hangup all calls
|
||||
await axios.get(`/api/v1/calls/hangup-all`);
|
||||
// hangup call
|
||||
await axios.get(`/api/v1/telephone/hangup`);
|
||||
|
||||
// reload calls list
|
||||
await this.updateCallsList();
|
||||
// update ui
|
||||
await this.getTelephoneStatus();
|
||||
|
||||
} catch(e) {
|
||||
// ignore error hanging up call
|
||||
}
|
||||
|
||||
},
|
||||
onAppNameClick() {
|
||||
// user may be on mobile, and is unable to scroll back to sidebar, so let them tap app name to do it
|
||||
|
|
@ -559,21 +561,6 @@ export default {
|
|||
unreadConversationsCount() {
|
||||
return GlobalState.unreadConversationsCount;
|
||||
},
|
||||
activeAudioCalls() {
|
||||
return this.audioCalls.filter(function(audioCall) {
|
||||
return audioCall.is_active;
|
||||
});
|
||||
},
|
||||
activeInboundAudioCalls() {
|
||||
return this.activeAudioCalls.filter(function(audioCall) {
|
||||
return !audioCall.is_outbound;
|
||||
});
|
||||
},
|
||||
activeOutboundAudioCalls() {
|
||||
return this.activeAudioCalls.filter(function(audioCall) {
|
||||
return audioCall.is_outbound;
|
||||
});
|
||||
},
|
||||
isSyncingPropagationNode() {
|
||||
return [
|
||||
"path_requested",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue