phone: add UI for taking & releasing lines (#8788)

welco/sources/phone/templates/welco/phone_home.html

@@ -1,7 +1,25 @@
 {% load i18n %}
 <h2>{% trans 'Phone Call' %}</h2>
-<div data-source-type="{{ source_type.id }}">
+<div data-source-type="{{ source_type.id }}" data-zone-url="{% url 'phone-zone' %}">
 
+<div id="source-sidebar" class="phonelines">
+{% if phonelines|length %}
+<h2>{% trans 'Active Lines:' %}</h2>
+<ul>
+{% for phoneline in phonelines %}
+<li>{{ phoneline.callee }}
+  <a data-action-url="{% url 'phone-release-line' %}" data-callee="{{phoneline.callee}}"
+     class="release-line">({% trans 'release' %})</a></li>
+{% endfor %}
+</ul>
+{% endif %}
+<div id="takephone">
+{% trans 'Take phone line' %}<br/> <input name="phoneline" size="10"/>
+<button data-action-url="{% url 'phone-take-line' %}" id="take-phoneline">take</button>
+</div>
+</div>
+
+<div id="source-mainarea">
 <h1>{% trans 'Current Call:' %} <strong>01 02 03 04 05</strong></h1>
 
 <h3>{% trans 'Past Calls' %}</h3>
@@ -9,6 +27,7 @@
   <li>16 juillet 2015 11:23:21</li>
   <li>15 juillet 2015 16:36:42</li>
 </ul>
+</div>
 
 <script>
 $(function() {

welco/sources/phone/urls.py

@@ -20,6 +20,7 @@ from . import views
 
 urlpatterns = patterns(
     '',
+    url(r'^ajax/phone/zone/$', views.zone, name='phone-zone'),
     url(r'^api/phone/call-event/$', views.call_event, name='phone-call-event'),
     url(r'^api/phone/current-calls/$', views.current_calls, name='phone-current-calls'),
     url(r'^api/phone/take-line/$', views.take_line, name='phone-take-line'),

welco/sources/phone/views.py

@@ -24,6 +24,7 @@ from django.views.decorators.csrf import csrf_exempt
 from django.contrib.auth.decorators import login_required
 from django.http import HttpResponseBadRequest, HttpResponse
 from django.utils.timezone import now
+from django.views.generic import TemplateView
 
 from .models import PhoneCall, PhoneLine
 
@@ -37,10 +38,24 @@ class Home(object):
     def render(self):
         context = RequestContext(self.request)
         context['source_type'] = ContentType.objects.get_for_model(PhoneCall)
+        context['phonelines'] = PhoneLine.objects.filter(users__id=self.request.user.id)
         tmpl = template.loader.get_template('welco/phone_home.html')
         return tmpl.render(context)
 
 
+class PhoneZone(TemplateView):
+    template_name = 'welco/phone_home.html'
+
+    def get_context_data(self, **kwargs):
+        context = super(PhoneZone, self).get_context_data(**kwargs)
+        context['source_type'] = ContentType.objects.get_for_model(PhoneCall)
+        context['phonelines'] = PhoneLine.objects.filter(users__id=self.request.user.id)
+        return context
+
+zone = csrf_exempt(PhoneZone.as_view())
+
+
+
 @csrf_exempt
 def call_event(request):
     '''Log a new call start or stop, input is JSON:
@@ -143,6 +158,7 @@ def current_calls(request):
     return response
 
 
+@csrf_exempt
 @login_required
 def take_line(request):
     '''Take a line, input is JSON:
@@ -163,6 +179,7 @@ def take_line(request):
     return HttpResponse(json.dumps({'err': 0}), content_type='application/json')
 
 
+@csrf_exempt
 @login_required
 def release_line(request):
     '''Release a line, input is JSON:

welco/static/css/style.css

@@ -43,12 +43,6 @@ body.welco-home div#content {
 	position: relative;
 }
 
-.source-phone .cell,
-.source-phone .cell.top {
-	width: 50%;
-	height: 50%;
-}
-
 .mail-table .cell {
 	height: 20%;
 }
@@ -81,6 +75,7 @@ div#content .cell.document iframe {
 	border: none;
 }
 
+div#content .source-phone .cell.document > div,
 div#content .source-mail .cell.document > div {
 	display: flex;
 	height: calc(100% - 3em);
@@ -465,3 +460,14 @@ p.keywords {
 	margin-top: 1em;
 	border-top: 1px dotted #D8D8D8;
 }
+
+div#takephone {
+	position: absolute;
+	bottom: 0;
+	padding: 1ex;
+}
+
+div#takephone button {
+	position: relative;
+	top: -3px;
+}

welco/static/js/welco.js

@@ -317,4 +317,50 @@ $(function() {
      });
   }
 
+  $('.document').delegate('button#take-phoneline', 'click', function() {
+    var zone = $(this).parents('[data-zone-url]');
+    var callee = $('input[name=phoneline]').val();
+    if (callee == '') return false;
+    $.ajax({url: $(this).data('action-url'),
+          data: JSON.stringify({callee: callee}),
+          method: 'POST',
+          contentType: 'application/json',
+          async: true,
+          dataType: 'json',
+          success: function(data) {
+                  $.ajax({url: zone.data('zone-url'),
+                          dataType: 'html',
+                          success: function(data) {
+                            $(zone).parent('div').html(data);
+                          }
+                  });
+          },
+          error: function(error) { console.log(':(', error); }
+    });
+    return false;
+  });
+
+  $('.document').delegate('a.release-line', 'click', function() {
+    var zone = $(this).parents('[data-zone-url]');
+    var callee = $(this).data('callee');
+    $.ajax({url: $(this).data('action-url'),
+          data: JSON.stringify({callee: callee}),
+          method: 'POST',
+          contentType: 'application/json',
+          async: true,
+          dataType: 'json',
+          success: function(data) {
+                  $.ajax({url: zone.data('zone-url'),
+                          dataType: 'html',
+                          success: function(data) {
+                            $(zone).parent('div').html(data);
+                          }
+                  });
+          },
+          error: function(error) { console.log(':(', error); }
+    });
+    return false;
+
+  });
+
 });

welco/templates/welco/home.html

@@ -23,7 +23,7 @@
 	</div>
 
 <script>
-$('div.cell h2').on('click', function() {
+$('div.cell').delegate('h2', 'click', function() {
 	$('div.cell').removeClass('top');
 	$(this).parents('div.cell').addClass('top');
 });