|
|
@@ -64,6 +64,8 @@
|
|
|
data: {
|
|
|
meetingID: '<?= $meetingID ?>',
|
|
|
participantID: '<?= $participantID ?>',
|
|
|
+ socket: null,
|
|
|
+ stompClient: null,
|
|
|
time: 0,
|
|
|
startTime: 0,
|
|
|
started: false,
|
|
|
@@ -75,7 +77,7 @@
|
|
|
id: 1,
|
|
|
name: 'You',
|
|
|
image: '/images/person/you.jpg',
|
|
|
- status: 'active',
|
|
|
+ status: 'connecting',
|
|
|
},
|
|
|
],
|
|
|
pros: [
|
|
|
@@ -87,7 +89,6 @@
|
|
|
status: 'connecting',
|
|
|
}
|
|
|
]
|
|
|
- // pros: []
|
|
|
},
|
|
|
methods: {
|
|
|
setActiveView: function(_type, _participant) {
|
|
|
@@ -102,55 +103,150 @@
|
|
|
minutes = parseInt(seconds / 60, 10);
|
|
|
seconds = parseInt(seconds % 60, 10);
|
|
|
return minutes + " min, " + seconds + " sec";
|
|
|
- }
|
|
|
- },
|
|
|
- mounted: function() {
|
|
|
- this.activeType = 'guest';
|
|
|
- this.activeParticipant = this.guests[0];
|
|
|
+ },
|
|
|
+ connectToFirstPro: function() {
|
|
|
+ console.log('Connecting to first pro ...');
|
|
|
+ this.pros = [];
|
|
|
+ this.addPro();
|
|
|
+ $.post('/api/meeting/request-dial-pro', {
|
|
|
+ meetingUid: this.meetingID,
|
|
|
+ }, function(_data) {
|
|
|
+ console.log('Response to /api/meeting/request-dial-pro');
|
|
|
+ console.log(_data);
|
|
|
+ }, 'json');
|
|
|
+ },
|
|
|
+ addPro: function() {
|
|
|
+ this.pros.push({
|
|
|
+ id: '0',
|
|
|
+ name: 'Pro',
|
|
|
+ type: 'Receptionist',
|
|
|
+ image: '/images/person/nancy.jpg',
|
|
|
+ status: 'connecting',
|
|
|
+ });
|
|
|
+ return this.pros[this.pros.length - 1];
|
|
|
+ },
|
|
|
+ onProJoined: function(_pID) {
|
|
|
|
|
|
- var self = this;
|
|
|
+ var found = false;
|
|
|
|
|
|
- // after 2 seconds, connect recep
|
|
|
- window.setTimeout(function() {
|
|
|
- self.pros[0].status = 'active';
|
|
|
- self.started = true;
|
|
|
- self.startTime = new Date().getTime();
|
|
|
- self.activeType = 'pro';
|
|
|
- self.activeParticipant = self.pros[0];
|
|
|
- window.setInterval(function() {
|
|
|
- self.time = new Date().getTime() - self.startTime;
|
|
|
- }, 1000);
|
|
|
-
|
|
|
- // after 1 second, add 2 docs in connecting state
|
|
|
- window.setTimeout(function() {
|
|
|
- self.pros.push({
|
|
|
- id: 2,
|
|
|
- name: 'Dr. Strange',
|
|
|
- type: 'Dietitian',
|
|
|
- image: '/images/person/strange.0.jpg',
|
|
|
- status: 'connecting',
|
|
|
- });
|
|
|
- self.pros.push({
|
|
|
- id: 3,
|
|
|
- name: 'Dr. Do Little',
|
|
|
- type: 'Cardiologist',
|
|
|
- image: '/images/person/dl.jpg',
|
|
|
- status: 'connecting',
|
|
|
+ // find pro with participant id
|
|
|
+ var pro = this.pros.filter(function(_pro) {
|
|
|
+ return _pro.id === _pID;
|
|
|
+ });
|
|
|
+
|
|
|
+ // no pro with id, find first one with id = 0
|
|
|
+ if(!pro.length) {
|
|
|
+ pro = this.pros.filter(function(_pro) {
|
|
|
+ return _pro.id === "0";
|
|
|
});
|
|
|
+ }
|
|
|
+
|
|
|
+ // no pro with id = 0, create one
|
|
|
+ if(!pro.length) {
|
|
|
+ pro = this.addPro();
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ pro = pro[0];
|
|
|
+ }
|
|
|
+
|
|
|
+ pro.id = _pID;
|
|
|
+ pro.status = 'active';
|
|
|
+
|
|
|
+ // TODO: init pro stream
|
|
|
+ },
|
|
|
+ playDemo: function() {
|
|
|
+ this.activeType = 'guest';
|
|
|
+ this.activeParticipant = this.guests[0];
|
|
|
+
|
|
|
+ var self = this;
|
|
|
|
|
|
- // after a second, connect strange
|
|
|
+ // after 2 seconds, connect recep
|
|
|
+ window.setTimeout(function() {
|
|
|
+ self.pros[0].status = 'active';
|
|
|
+ self.started = true;
|
|
|
+ self.startTime = new Date().getTime();
|
|
|
+ self.activeType = 'pro';
|
|
|
+ self.activeParticipant = self.pros[0];
|
|
|
+ window.setInterval(function() {
|
|
|
+ self.time = new Date().getTime() - self.startTime;
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ // after 1 second, add 2 docs in connecting state
|
|
|
window.setTimeout(function() {
|
|
|
- self.pros[1].status = 'active';
|
|
|
+ self.pros.push({
|
|
|
+ id: 2,
|
|
|
+ name: 'Dr. Strange',
|
|
|
+ type: 'Dietitian',
|
|
|
+ image: '/images/person/strange.0.jpg',
|
|
|
+ status: 'connecting',
|
|
|
+ });
|
|
|
+ self.pros.push({
|
|
|
+ id: 3,
|
|
|
+ name: 'Dr. Do Little',
|
|
|
+ type: 'Cardiologist',
|
|
|
+ image: '/images/person/dl.jpg',
|
|
|
+ status: 'connecting',
|
|
|
+ });
|
|
|
|
|
|
+ // after a second, connect strange
|
|
|
window.setTimeout(function() {
|
|
|
- self.pros[2].status = 'active';
|
|
|
+ self.pros[1].status = 'active';
|
|
|
+
|
|
|
+ window.setTimeout(function() {
|
|
|
+ self.pros[2].status = 'active';
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
}, 1000);
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
- }, 1000);
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+
|
|
|
+ this.pros = [];
|
|
|
+
|
|
|
+ // this.playDemo();
|
|
|
+
|
|
|
+ var self = this;
|
|
|
+
|
|
|
+ // connect to WS
|
|
|
+ self.socket = new SockJS('http://localhost:8080/ws');
|
|
|
+ self.stompClient = Stomp.over(self.socket);
|
|
|
+ self.stompClient.connect({}, function (frame) {
|
|
|
+ console.log('Connected: ' + frame);
|
|
|
+
|
|
|
+ // join self
|
|
|
+ self.stompClient.send(
|
|
|
+ "/app/meeting-participant-join-meeting",
|
|
|
+ {},
|
|
|
+ JSON.stringify({meetingParticipantUid: self.participantID})
|
|
|
+ );
|
|
|
+
|
|
|
+ // set self as active
|
|
|
+ self.guests[0].id = '<?= $participantID ?>';
|
|
|
+ self.guests[0].status = 'active';
|
|
|
+
|
|
|
+ // TODO: init own stream
|
|
|
+
|
|
|
+ // attempt to connect to first pro if "start"
|
|
|
+ @if(request('start'))
|
|
|
+ self.connectToFirstPro();
|
|
|
+ @endif
|
|
|
+
|
|
|
+ // subscribe to on pro joined WS event
|
|
|
+ self.stompClient.subscribe("/topic/on-pro-join-meeting", function(message){
|
|
|
+ console.log("on-pro-join-meeting:", message);
|
|
|
+
|
|
|
+ message = JSON.parse(message.body);
|
|
|
+ console.log(message.meetingParticipantUid);
|
|
|
+
|
|
|
+ self.onProJoined(message.meetingParticipantUid);
|
|
|
+
|
|
|
+ });
|
|
|
|
|
|
- }, 2000);
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
</script>
|
