people: Update design of conference page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/backend/talk.py b/src/backend/talk.py
index 4215e7d5a18d81bcdcd3a19bcece8495ccc05a26..e37fb8543bc77e742c49ef0b2d58179ae86abd0e 100644 (file)
--- a/src/backend/talk.py
+++ b/src/backend/talk.py
@@ -320,6 +320,16 @@ class Conference(object):
        def sip_id(self):
                return 900 + self.number
 
+       @property
+       def sip_url(self):
+               return "%s@ipfire.org" % self.sip_id
+
+       @property
+       def phone_numbers(self):
+               return [
+                       "+4923636035%s" % self.sip_id,
+               ]
+
        @lazy_property
        def channels(self):
                return self.freeswitch._get_channels("SELECT * FROM channels \

diff --git a/src/templates/people/conferences.html b/src/templates/people/conferences.html
index b382c5d0400fc55ed13f08efab73ad2a88bf8127..33ca062af3233f2612640d0024c0d4718d26bc0e 100644 (file)
--- a/src/templates/people/conferences.html
+++ b/src/templates/people/conferences.html
@@ -2,56 +2,92 @@
 
 {% block title %}{{ _("Conferences") }}{% end block %}
 
-{% block content %}
-       <div class="row justify-content-center">
-               <div class="col col-md-8">
+{% block container %}
+       <div class="header">
+               <div class="container">
                        <h1>{{ _("Conferences") }}</h1>
+               </div>
+       </div>
+
+       <div class="container">
+               <section>
+                       <div class="row justify-content-center">
+                               <div class="col-12 col-lg-8">
+                                       {% if conferences %}
+                                               {% for c in conferences %}
+                                                       <div class="card mb-4" name="{{ c.handle }}">
+                                                               <div class="card-body">
+                                                                       <div class="row">
+                                                                               <div class="col-12 col-md-6 col-xl-8">
+                                                                                       <h5 class="card-title mb-1">{{ _("Room %s") % c.number }}</h5>
+
+                                                                                       <h6 class="card-subtitle text-muted mb-1">
+                                                                                               {{ _("One Participant", "%(num)s Participants", len(c)) % { "num" : len(c) } }}
+                                                                                       </h6>
+                                                                               </div>
+
+                                                                               <div class="col-12 col-md-6 col-xl-4">
+                                                                                       <ul class="list-unstyled mb-0">
+                                                                                               <li>
+                                                                                                       <i class="fas fa-phone-square fa-fw"></i>
+
+                                                                                                       <a href="sip:{{ c.sip_url }}">
+                                                                                                               {{ c.sip_id }}
+                                                                                                       </a>
+                                                                                               </li>
+
+                                                                                               {% for phone_number in c.phone_numbers %}
+                                                                                                       <li>
+                                                                                                               <i class="fas fa-phone fa-fw"></i>
 
-                       {% if conferences %}
-                               {% for c in conferences %}
-                                       <div class="card mb-3" name="{{ c.handle }}">
-                                               <div class="card-body">
-                                                       <h5 class="card-title">{{ _("Conference Room %s") % c.number }}</h5>
-
-                                                       <p class="card-text small text-muted">
-                                                               {{ _("This conference room has one participant", "This conference room has %(num)s participants", len(c)) % { "num" : len(c) } }}
-                                                       </p>
-                                               </div>
-
-                                               <ul class="list-group list-group-flush">
-                                                       {% for chan in c.channels %}
-                                                               <li class="list-group-item">
-                                                                       <div class="d-flex w-100 justify-content-between">
-                                                                               <div>
+                                                                                                               <a href="tel:{{ phone_number }}">
+                                                                                                                       {{ format_phone_number(phone_number) }}
+                                                                                                               </a>
+                                                                                                       </li>
+                                                                                               {% end %}
+                                                                                       </ul>
+                                                                               </div>
+                                                                       </div>
+                                                               </div>
+
+                                                               <ul class="list-group list-group-flush">
+                                                                       {% for chan in c.channels %}
+                                                                               <li class="list-group-item">
                                                                                        {% if chan.caller %}
                                                                                                <a href="/users/{{ chan.caller.uid }}">{{ chan.caller }}</a>
                                                                                        {% else %}
                                                                                                {{ chan.caller_name }}
+
+                                                                                               <span class="text-muted">({{ format_phone_number(chan.caller_number) }})</span>
                                                                                        {% end %}
-               
-                                                                                       <span class="text-muted">({{ format_phone_number(chan.caller_number) }})</span>
-                                                                               </div>
 
-                                                                               <span>{{ format_time(chan.duration) }}</span>
-                                                                       </div>
+                                                                                       <ul class="list-inline small mb-0">
+                                                                                               <li class="list-inline-item">
+                                                                                                       {{ format_time(chan.duration) }}
+                                                                                               </li>
 
-                                                                       <span class="text-muted small">
-                                                                               {% if chan.is_secure() %}
-                                                                                       <span class="fas fa-lock" title="{{ chan.secure }}"></span>
-                                                                               {% end %}
-       
-                                                                               {{ chan.codec }}
-                                                                       </span>
-                                                               </li>
-                                                       {% end %}
-                                               </ul>
-                                       </div>
-                               {% end %}
-                       {% else %}
-                               <p class="text-muted text-center my-5">
-                                       {{ _("There are currently no conferences") }}
-                               </p>
-                       {% end %}
-               </div>
+                                                                                               {% if chan.is_secure() %}
+                                                                                                       <li class="list-inline-item">
+                                                                                                               <span class="fas fa-lock" title="{{ chan.secure }}"></span>
+                                                                                                       </li>
+                                                                                               {% end %}
+
+                                                                                               <li class="list-inline-item">
+                                                                                                       {{ chan.codec }}
+                                                                                               </li>
+                                                                                       </ul>
+                                                                               </li>
+                                                                       {% end %}
+                                                               </ul>
+                                                       </div>
+                                               {% end %}
+                                       {% else %}
+                                               <p class="text-muted text-center my-5">
+                                                       {{ _("There are currently no conferences") }}
+                                               </p>
+                                       {% end %}
+                               </div>
+                       </div>
+               </section>
        </div>
 {% end block %}