Skip to content

GitLab

piphone-front
piphone-front
Commit 45163032 authored by okhin's avatar okhin
Browse files
Options

Starting the work on the JS

parent f7c7cc33
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 39 deletions
app/Api.php
View file @ 45163032
...@@ -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());
}
}
}
}; };
app/Main.php
View file @ 45163032
...@@ -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 {
} }
}; };
;
app/SIP.php 0 → 100644
View file @ 45163032
<?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());
}
}
}
app/routes.ini
View file @ 45163032
...@@ -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
......
static/css/style.css
View file @ 45163032
...@@ -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;
}
templates/call.html
View file @ 45163032
...@@ -24,12 +24,11 @@ ...@@ -24,12 +24,11 @@
</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>
</div> </div>
</div> </div>
</div> </div>
templates/feedbackform.html
View file @ 45163032
...@@ -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>
</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>
</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> </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>
templates/footer.html
View file @ 45163032
<!-- 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>
templates/monitor.html 0 → 100644
View file @ 45163032
<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