<template>
<!-- Connection Widget -->
<div
id="connection"
class="mx-auto"
style="min-width:320px">
<!-- Connection Container -->
<div
id="connection-container"
class="rounded-lg"
style="border: 1px solid lightgray;">
<!-- Who Am I ? -->
<h4
id="who-am-i"
class="text-muted ml-1">
I am : {{ selfId }}
</h4>
<!-- Title -->
<h5 class="ml-1">
List of Robots:
</h5>
<!-- Container list -->
<div class="list-group">
<!-- Create a button per robot in room -->
<button
v-for="peer in peersTable"
:key="peer.peerId"
type="button"
class="list-group-item-action list-group-item d-flex justify-content-between
align-items-center peer-item"
@click="handlePeerConnection(peer.peerId)">
{{ peer.peerName }}
<!-- Tag -->
<span
v-if="peer.peerId == isConnectedToPeerId && waitingForConnectionState"
class="spinner-border spinner-border-sm text-warning" />
<span
v-else-if="peer.peerId == isConnectedToPeerId"
class="badge badge-success">Connected</span>
<span
v-else
class="badge badge-secondary">Not Connected</span>
</button>
</div>
</div>
</div>
</template>
<script>
/**
* Vue SFC used as a widget that shows the element in the array
* given in props in a html list. All list element are buttons
* that, when clicked, request a connection/emit an event on the
* bus (given in props). It manages the different state on the
* connection and change a badge to give visual feedback to the
* user on it. The array given should contains the name and the id
* of the easyRTC peers that are in the connected room. The component
* calling this one should manage the easyRTC part and the connection,
* this component only show peers and manage the connection selection.
* This component have the following dependencies : Bootstrap-Vue for styling.
*
* @module widget/Connection
* @vue-prop {Number} seflId - Application's easyrtc Id.
* @vue-prop {String[]} peersTable - Array of robot in the room.
* @vue-prop {Vue} bus - Vue bus use to emit event to other components.
* @vue-event {Number} peer-connection - Send the peer id to Layout for connection state change.
* @vue-data {Boolean} isConnected - Current connection state, only one connection is allowed.
* @vue-data {Number} isConnectedToPeerId - Peer Id, name should be change...
* @vue-data {Boolean} waitingForConnectionState - Indicate if connection in progress.
*/
/**
* Author(s): Edouard Legare <edouard.legare@usherbrooke.ca>,
* Anthony Parris <anthony.parris@usherbrooke.ca>,
* @version 1.0.0
*/
import Vue from 'vue';
export default {
name: 'connection',
props: {
selfId: {
type: Number,
required: true,
},
peersTable: {
type: Array,
required: true,
},
bus: {
type: Vue,
required: true,
},
},
data() {
return {
isConnected: false,
isConnectedToPeerId: null,
waitingForConnectionState: false,
};
},
// On component mounted, get html elements, set bus event.
mounted() {
this.bus.$on('connection-changed', this.handleConnectionChanged);
},
// On component destroyed, not use for now.
destroyed() {},
methods: {
/**
* Callback the connection-changed event.
* @method
* @param {String} state - New state of the connection.
* */
handleConnectionChanged(state) {
console.log(`Got event for connection : ${state}`);
switch (state) {
case 'connected':
console.log('Connected!');
this.waitingForConnectionState = false;
this.isConnected = true;
// this.switchPeerConnectionButtonHtmlState(this.isConnectedToPeerId, "Connected");
break;
case 'failed':
// Popup : Connection Failed...
console.log('Connection failed...');
this.waitingForConnectionState = false;
this.isConnectedToPeerId = null;
break;
case 'disconnected':
console.log('Disconnected!');
this.isConnected = false;
// this.switchPeerConnectionButtonHtmlState(this.isConnectedToPeerId, "Disconnected");
this.isConnectedToPeerId = null;
break;
case 'lost':
// This Id might not be available anymore... Might get a error...
// Popup : The connection was lost...
console.log('Connection lost...');
this.isConnectedToPeerId = null;
this.waitingForConnectionState = false;
this.isConnectedToPeerId = null;
break;
default:
console.log(`Something Something : ${state}`);
}
},
/**
* Ask to be connected to a peer by emitting event.
* @method
* @param {Number} peerId - Peer Id to connect to.
*/
connectToPeer(peerId) {
console.log(`Connecting to : ${peerId}`);
this.isConnectedToPeerId = peerId;
this.waitingForConnectionState = true;
this.bus.$emit('peer-connection', peerId);
console.log('Connecting...');
},
/**
* Ask to be disconnect from the current connected peer by emitting an event.
* @method
* @param {Number} peerId - Peer Id currently connected to.
*/
disconnectFromPeer(peerId) {
this.bus.$emit('peer-connection', peerId);
},
/**
* HTML button callback to handle the connection/disconnection to a peer.
* @method
* @param {Number} peerId - Peer Id associated with the button.
*/
handlePeerConnection(peerId) {
if (this.isConnected && peerId === this.isConnectedToPeerId) {
console.log('Disconnecting...');
this.disconnectFromPeer(this.isConnectedToPeerId);
} else if (this.isConnected) {
// Add popup message saying : "You are already connected to this.isConnectedToPeerId,
// disconnect from it to connect to an other robot"
console.log('Already connected to someone...');
} else if (this.waitingForConnectionState) {
// Popup saying : "Currently trying to connect to this.isConnectedToPeerId,
// please be patient..."
console.log('Waiting for state...');
} else {
this.connectToPeer(peerId);
}
},
},
};
</script>
<style>
/* Size for list item */
.peer-item{
min-width: 300px;
min-height: 30px;
}
</style>