Commit 45163032 authored by okhin's avatar okhin

Starting the work on the JS

parent f7c7cc33
...@@ -76,5 +76,22 @@ class Api { ...@@ -76,5 +76,22 @@ class Api {
return json_decode($json, true); 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 { ...@@ -67,20 +67,7 @@ class Main extends Controller {
*/ */
function feedbacksip($f3, $args) { function feedbacksip($f3, $args) {
//GET //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 { ...@@ -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 ...@@ -4,7 +4,7 @@ GET @home:/=Main->home
GET|POST @feedback:/feedback=Main->feedbackform GET|POST @feedback:/feedback=Main->feedbackform
GET|POST @call:/call/@id=Main->call GET|POST @call:/call/@id=Main->call
GET @contactslist:/contactslist=Main->contactslist GET @contactslist:/contactslist=Main->contactslist
GET @feedbacksip:/feedbacksip/@callid=Main->feedbacksip GET @feedbacksip:/calls/@callid=SIP->feedbacksip
GET @argumentation:/argumentation=Main->argumentation GET @argumentation:/argumentation=Main->argumentation
; Fake REST API ; Fake REST API
......
...@@ -95,3 +95,49 @@ display: inline-block; ...@@ -95,3 +95,49 @@ display: inline-block;
background-color: #ccc; background-color: #ccc;
padding: .5em 1em; 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,9 +24,8 @@ ...@@ -24,9 +24,8 @@
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<h2>{{ _("Call at your expense") }}</h2> <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> <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> <a class="btn btn-default" href="tel:{{ @contact.phone }}" target="_blank">☎ {{ @contact.phone }}</a>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
<h4>{{ _("Currently calling") }}</h4> <h4>{{ _("Currently calling") }}</h4>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div>
<p class="text-center">{{ @contact.first_name }} {{ @contact.last_name }}</p> <p class="text-center">{{ @contact.first_name }} {{ @contact.last_name }}</p>
<p class="lead text-center"> <p class="lead text-center">
<abbr title="{{ _("Phone number") }}">{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a> <abbr title="{{ _("Phone number") }}">{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a>
...@@ -30,22 +29,74 @@ ...@@ -30,22 +29,74 @@
</check> </check>
</repeat> </repeat>
</ul> </ul>
<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> </div>
</div> <div class="feedback panel panel-default">
<!-- Form in order to feedback your call --> <!-- Form in order to feedback your call -->
<p>{{ @call }}</p> <div class="panel-heading">
<p>{{ _("Please tell us what happened if you were able to talk to someone. Your feedback is important to us.") }}</p> <h4>{{ _("Feedback Form") }}</h4>
<h2>{{ _("Feedback Form") }}</h2> <p class="small">{{ _("Please tell us what happened if you were able to talk to someone. Your feedback is important to us.") }}</p>
<form method="post" action="/feedback/" > </div>
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact_id }}" /> <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 }}"> <repeat group="{{ @feedback_categories }}" value="{{ @feedback_category }}">
<input type="radio" name="feedback_category" value="{{ @feedback_category.id }}" /> <div class="form-group">
{{ @feedback_category.name }} <label><input required class="form-control" type="radio" name="feedback_category" value="{{ @feedback_category.id }}"/>{{ @feedback_category.name }}</label>
</div>
</repeat> </repeat>
<p> <textarea id="feedback" name="feedback"></textarea> </p> <textarea class="form-control" id="feedback" name="feedback"></textarea>
<input type="submit" name="go" value="{{ _("Send my feedback") }}" /> <input type="submit" class="btn btn-primary" name="go" value="{{ _("Send my feedback") }}" />
</form> </form>
</div> </div>
</div> </div>
</div>
</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> </body>
</html> </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