Using the Down state

templates/feedbackform.html

@@ -73,7 +73,7 @@
 <script type="text/javascript">
     var call = JSON.parse('{{ @call | raw }}');
     var call_url = call['data']['url'];
-    var intervall
+    var interval;
     function normalize_phone(phone) {
         if (phone.startsWith('+')) {
             return phone.replace('+', '00');
@@ -106,10 +106,10 @@
                 $('#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');
+                $('#callee').addClass('outline_green');
+                $('#step4').addClass('outline_green');
+                $('#step5').addClass('outline_green');
+                $('#step6').addClass('outline_green);
                 $('#step_callee').addClass('visible');
             };
         };
@@ -127,13 +127,27 @@
                 $('#wait').addClass('outline_green');
                 $('#step_wait').addClass('visible');
             } else {
-                $('#callee').addClass('red');
-                $('#step4').addClass('red');
-                $('#step5').addClass('red');
-                $('#step6').addClass('red');
+                $('#callee').addClass('green');
+                $('#step4').addClass('green');
+                $('#step5').addClass('green');
+                $('#step6').addClass('green');
                 $('#step_connected').addClass('visible');
             };
         };
+
+        if (call_state[0].startsWith('Down:')) {
+            // The call as ended
+            $('#caller').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#step1').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#step2').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#step3').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#wait').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#step4').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#step5').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#step6').removeClass('green').removeClass('outline_green').addClass('red');
+            $('#callee').removeClass('green').removeClass('outline_green').addClass('red');
+            clearInterval(interval);
+        }
         console.log(call_state[0]);
     };
     function fetch() {
@@ -148,6 +162,6 @@
     };
     $(document).ready(function() {
         update_call(call);
-        intervall = window.setInterval(fetch, 3000);
+        interval = window.setInterval(fetch, 3000);
     });
 </script>