Commit 45163032 authored by okhin's avatar okhin 🚴

Starting the work on the JS

parent f7c7cc33
......@@ -76,5 +76,22 @@ class Api {
return json_decode($json, true);
}
// Getting a call from the SIP_API
static function get_sip_call($call_id, $token) {
$data = array('api' => JWT_TOKEN,
'token' => $token
);
$client = new GuzzleHttp\Client(['base_uri' => SIP_ARI]);
try {
$res = $client->get("calls/$call_id", ['query' => $data]);
return (GuzzleHttp\Psr7\copy_to_string($res->getBody()));
} catch (RequestException $e) {
return Psr7\str($e->getRequest());
if ($e->hasResponse()) {
echo Psr7\str($e->getResponse());
}
}
}
};
......@@ -67,20 +67,7 @@ class Main extends Controller {
*/
function feedbacksip($f3, $args) {
//GET
$token = JWT::encode(array('api' => JWT_TOKEN), JWT_KEY);
$call_id = $args['callid'];
// Create the call
$data = array('api' => 'piphone', 'token' => $token);
$client = new GuzzleHttp\Client(['base_uri' => SIP_API]);
try {
$res = $client->get("calls/$call_id", ['query' => $data]);
return (GuzzleHttp\Psr7\copy_to_string($res->getBody()));
} catch (RequestException $e) {
echo Psr7\str($e->getRequest());
if ($e->hasResponse()) {
echo Psr7\str($e->getResponse());
}
}
}
/*
......@@ -144,3 +131,4 @@ class Main extends Controller {
}
};
;
<?php
use \Firebase\JWT\JWT;
use Psr\Http\Message\ResponseInterface;
use GuzzleHttp\Client;
use GuzzleHttp\Psr7;
use GuzzleHttp\Exception\RequestException;
class SIP extends Controller {
function beforeRoute($f3, $args) {
// Include configuration
require_once('config.php');
}
function afterRoute($f3, $args) {
// We return only JSON, so no templates
return;
}
// Getting a call from the SIP_API
function feedbacksip($f3, $args) {
$token = JWT::encode(array('api' => JWT_TOKEN), JWT_KEY);
$call_id = $args['callid'];
$data = array('api' => JWT_TOKEN,
'token' => $token
);
$client = new GuzzleHttp\Client(['base_uri' => SIP_API]);
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()));
} catch (RequestException $e) {
if ($e->hasResponse()) {
return Psr7\str($e->getResponse());
}
return Psr7\str($e->getRequest());
}
}
}
......@@ -4,7 +4,7 @@ GET @home:/=Main->home
GET|POST @feedback:/feedback=Main->feedbackform
GET|POST @call:/call/@id=Main->call
GET @contactslist:/contactslist=Main->contactslist
GET @feedbacksip:/feedbacksip/@callid=Main->feedbacksip
GET @feedbacksip:/calls/@callid=SIP->feedbacksip
GET @argumentation:/argumentation=Main->argumentation
; Fake REST API
......
......@@ -95,3 +95,49 @@ display: inline-block;
background-color: #ccc;
padding: .5em 1em;
}
/* Step styling */
.step_bar {
line-height: 2ex;
vertical-align: middle;
text-align: center;
}
.step {
color: white;
text-shadow: 0 2px 0 grey, 0 -2px 0 grey, 2px 0 0 grey, -2px 0 0 grey;
font-size: 2em;
}
#caller {
transform: rotate(45deg);
}
#callee {
transform: rotate(225deg);
}
.step.outline_green {
text-shadow: 0 2px 0 green, 0 -2px 0 green, 2px 0 0 green, -2px 0 0 green;
}
.step.outline_red {
text-shadow: 0 2px 0 red, 0 -2px 0 red, 2px 0 0 red, -2px 0 0 red;
}
.step.green {
color: green;
text-shadow: none;
}
.step.red {
color: green;
text-shadow: none;
}
.step_text {
display: none;
}
.visible {
display: inherit;
}
......@@ -24,12 +24,11 @@
</div>
<div class="col-sm-6">
<h2>{{ _("Call at your expense") }}</h2>
<p>{{ _("If you don't want to call for free, here is the number of the current MEP (you can either dial it from your phone or push the button if any VoIP client is installed on your device.") }}</p>
<a class="btn btn-default" href="tel:{{ @contact.phone }}" target="_blank">☎ {{ @contact.phone }}</a>
<p>{{ _("If you don't want to call for free, here is the number of the current MEP - you can either dial it from your phone or push the button if any VoIP client is installed on your device.") }}</p>
<a class="btn btn-default" href="tel:{{ @contact.phone }}" target="_blank">☎ {{ @contact.phone }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -10,7 +10,6 @@
<h4>{{ _("Currently calling") }}</h4>
</div>
<div class="panel-body">
<div>
<p class="text-center">{{ @contact.first_name }} {{ @contact.last_name }}</p>
<p class="lead text-center">
<abbr title="{{ _("Phone number") }}">{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a>
......@@ -30,22 +29,74 @@
</check>
</repeat>
</ul>
</div>
<p id="step_init" class="step_text text-center">{{ _("Initialising the call") }}</p>
<p id="step_caller" class="step_text text-center">{{ _("Calling you") }}</p>
<p id="step_wait" class="step_text text-center">{{ _("When ready, please dial 1 on your phone") }}</p>
<p id="step_callee" class="step_text text-center">{{ _(" Calling ")}}{{ @contact.full_name }}</p>
<p id="step_connected" class="step_text text-center">{{ _("Connected to ") }}{{ @contact.full_name }}</p>
<h3 aria-hidden="true" class="step_bar lead text-center">
<span id="caller" class="step glyphicon glyphicon-earphone"></span>
<span id="step1" class="step">&#x25CF;</span>
<span id="step2" class="step">&#x25CF;</span>
<span id="step3" class="step">&#x25CF;</span>
<span id="wait" class="step glyphicon glyphicon-time"></span>
<span id="step4" class="step">&#x25CF;</span>
<span id="step5" class="step">&#x25CF;</span>
<span id="step6" class="step">&#x25CF;</span>
<span id="callee" class="step glyphicon glyphicon-earphone"></span>
</h3>
<p>{{ @call }}</p>
</div>
</div>
<div class="feedback panel panel-default">
<!-- Form in order to feedback your call -->
<div class="panel-heading">
<h4>{{ _("Feedback Form") }}</h4>
<p class="small">{{ _("Please tell us what happened if you were able to talk to someone. Your feedback is important to us.") }}</p>
</div>
<div class="panel-body">
<form class="form" method="post" action="/feedback/" >
<input type="hidden" id="contact_id" name="contact_id" value="{{ @contact_id }}" />
<repeat group="{{ @feedback_categories }}" value="{{ @feedback_category }}">
<div class="form-group">
<label><input required class="form-control" type="radio" name="feedback_category" value="{{ @feedback_category.id }}"/>{{ @feedback_category.name }}</label>
</div>
</repeat>
<textarea class="form-control" id="feedback" name="feedback"></textarea>
<input type="submit" class="btn btn-primary" name="go" value="{{ _("Send my feedback") }}" />
</form>
</div>
</div>
<!-- Form in order to feedback your call -->
<p>{{ @call }}</p>
<p>{{ _("Please tell us what happened if you were able to talk to someone. Your feedback is important to us.") }}</p>
<h2>{{ _("Feedback Form") }}</h2>
<form method="post" action="/feedback/" >
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact_id }}" />
<repeat group="{{ @feedback_categories }}" value="{{ @feedback_category }}">
<input type="radio" name="feedback_category" value="{{ @feedback_category.id }}" />
{{ @feedback_category.name }}
</repeat>
<p> <textarea id="feedback" name="feedback"></textarea> </p>
<input type="submit" name="go" value="{{ _("Send my feedback") }}" />
</form>
</div>
</div>
</div>
<!-- Let's include a script -->
<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 call_state = call_history.sort(function(a, b) {
var date1 = new Date(a[1]);
var date2 = new Date(b[1]);
return date1 - date2;
})[0];
$('.step_text').removeClass('visible');
if (call_state[0].startsWith('Created:Init')) {
$('#caller').addClass('outline_green');
$('#step_init').addClass('visible');
};
};
function fetch() {
$.ajax({
method: 'GET',
url: call_url,
dataType: 'json',
success: update_call
});
};
$(document).ready(function() {
update_call(call);
window.setInterval(fetch, 2000);
});
</script>
<!-- jQuery -->
<script src="/static/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
<script>
var call = JSON.parse("{{ @call | raw }}");
function update_call(call) {
var call_url = call['data']['call_url'];
var call_history = call['data']['history'];
// call_states is now a list of states, each of them is a
// tuple of the form 'state, date'
// getting the current state is a matter of sorting this list of
// tuple on the second element of the tuple
call_state = call_history.sort(function(a, b) {
var date1 = new Date(a[1]);
var date2 = new Date(b[1]);
return date1 - date2;
})[0];
console.log(call_state);
};
$(document).ready(update_call);
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment