Call bar is now working

app/SIP.php

@@ -14,7 +14,7 @@ class SIP extends Controller {
 
     function afterRoute($f3, $args) {
         // We return only JSON, so no templates
-        return;
+        echo $f3->get('response');
     }
     // Getting a call from the SIP_API
     function feedbacksip($f3, $args) {
@@ -27,12 +27,12 @@ class SIP extends Controller {
         try {
             $token = JWT::encode(array('api' => JWT_TOKEN), JWT_KEY);
             $res = $client->get("calls/$call_id", ['query' => $data]);
-            return (GuzzleHttp\Psr7\copy_to_string($res->getBody()));
+            $f3->set('response', (GuzzleHttp\Psr7\copy_to_string($res->getBody())));
         } catch (RequestException $e) {
             if ($e->hasResponse()) {
-                return Psr7\str($e->getResponse());
+                $f3->set('response', Psr7\str($e->getResponse()));
             }
-            return Psr7\str($e->getRequest());
+            $f3->set('response', Psr7\str($e->getRequest()));
         }
     }
 }

templates/feedbackform.html

@@ -74,29 +74,81 @@
 <script type="text/javascript">
     var call = JSON.parse('{{ @call | raw }}');
     var call_url = call['data']['url'];
-    function update_call(calls) {
-        var call_history = calls['data']['history'];
+    var intervall
+    function normalize_phone(phone) {
+        if (phone.startsWith('+')) {
+            return phone.replace('+', '00');
+        }
+        return phone;
+    }
+
+    function update_call(response) {
+        var call_history = response['data']['history'];
         var call_state = call_history.sort(function(a, b) {
             var date1 = new Date(a[1]);
             var date2 = new Date(b[1]);
-            return date1 - date2;
+            return date2 - date1;
         })[0];
         $('.step_text').removeClass('visible');
         if (call_state[0].startsWith('Created:Init')) {
-            $('#caller').addClass('outline_green');
             $('#step_init').addClass('visible');
         };
+
+        if (call_state[0].startsWith('Ringing:')) {
+            phone = normalize_phone(call_state[0].split(':')[1]);
+            caller = normalize_phone(response['data']['caller']);
+            callee = normalize_phone(response['data']['callee']);
+            if ( phone === caller) {
+                $('#caller').addClass('outline_green');
+                $('#step_caller').addClass('visible');
+            } else {
+                $('#step1').addClass('green');
+                $('#step2').addClass('green');
+                $('#step3').addClass('green');
+                $('#wait').addClass('green');
+                $('#callee').addClass('outline_red');
+                $('#step4').addClass('outline_red');
+                $('#step5').addClass('outline_red');
+                $('#step6').addClass('outline_red');
+                $('#step_callee').addClass('visible');
+            };
+        };
+
+        if (call_state[0].startsWith('Up:')) {
+            // Need to check if we're caller or callee
+            phone = normalize_phone(call_state[0].split(':')[1]);
+            caller = normalize_phone(response['data']['caller']);
+            callee = normalize_phone(response['data']['callee']);
+            if ( phone === caller) {
+                $('#caller').addClass('green');
+                $('#step1').addClass('outline_green');
+                $('#step2').addClass('outline_green');
+                $('#step3').addClass('outline_green');
+                $('#wait').addClass('outline_green');
+                $('#step_wait').addClass('visible');
+            } else {
+                $('#callee').addClass('red');
+                $('#step4').addClass('red');
+                $('#step5').addClass('red');
+                $('#step6').addClass('red');
+                $('#step_connected').addClass('visible');
+                window.clearInterval(intervall);
+            };
+        };
+        console.log(call_state);
     };
     function fetch() {
         $.ajax({
             method: 'GET',
             url: call_url,
             dataType: 'json',
-            success: update_call
+            complete: function(xhr, status) {
+                update_call(xhr.responseJSON);
+            }
         });
     };
     $(document).ready(function() {
         update_call(call);
-        window.setInterval(fetch, 2000);
+        intervall = window.setInterval(fetch, 3000);
     });
 </script>