QS 0.9.1 Chat noch ein wenig verbessert

chat/templates/chat/chat_content.html

@@ -1,8 +1,8 @@
 {% load counter_tag %}
 {% if roomdata.creator == user %}
-<h4 id="chattitle">{{roomdata.chatmember_single.first_name}} {{roomdata.chatmember_single.last_name}}</h4>  
+<h4 id="chattitle" style="margin-top: -3px;">{{roomdata.chatmember_single.first_name}} {{roomdata.chatmember_single.last_name}}</h4>  
 {% else %}
-<h4 id="chattitle">{{roomdata.creator.first_name}} {{roomdata.creator.last_name}}</h4>    
+<h4 id="chattitle" style="margin-top: -3px;">{{roomdata.creator.first_name}} {{roomdata.creator.last_name}}</h4>    
 {% endif %}
 
     <hr>

chat/templates/chat/chat_content_groupchat.html

@@ -1,8 +1,10 @@
 {% load counter_tag %}
 <h4 id="chattitle" style="margin-top: -3px">{{roomdata.roomname}}
   {% if user in roomdata.chatmembers_admin.all or user == roomdata.creator %}
+  <span style="margin-top: -10px">
   <button  class="btn btn-secondary btn-sm ml-2 " style="float: right;" onclick="javascript:$('#confirm-delete_{{roomdata.pk}}').modal('toggle')"><small><i class="fas fa-trash"></i></small></button>
   <button  class="btn btn-secondary btn-sm " onclick="window.location.href='{% url 'chat:chat-update' roomdata.pk %}'" style="float: right;"><small><i class="fas fa-pen"></i></small></button>
+</span>
   {% endif %}
 </h4>  
 

chat/templates/chat/chatmanagement.html

@@ -55,16 +55,16 @@
 }
 </style>
 <div class="content-section col-12">
-  <h3>Chat&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verwalten Sie hier Ihre Chatverläufe und starten Sie neue Unterhaltungen mit Mitarbeitern und anderen Agenturen." class="far fa-question-circle"></i></small>
+  <h3>Chat&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verwalten Sie hier Ihre Chatverläufe und starten Sie neue Unterhaltungen mit Mitarbeitern und anderen Agenturen. Alle Nachrichten werden verschlüsselt übertragen und in der Datenbank ebenfalls verschlüsselt gespeichert." class="far fa-question-circle"></i></small>
-  </h3>
+  </h3>  
-  <small><b>ACHTUNG! Der Chat befindet sich im Beta-Stadium! Bitte vermeiden Sie es daher, persönliche oder intime Informationen zu verschicken, bis alle Funktionen ausreichend erprobt sind. Vielen Dank!</b></small>
   <hr>
 </div>
 
 <div class="row col">
-  <div class="col-3">    
+
-    <h5>Mitarbeiter      
+  <div class="col-3">  
-    </h5>        
+  <!--  
+    <h5>Mitarbeiter</h5>        
     <hr>
     {% for user in usersofagency %}
     <div class="card mb-2 hoverchatcard" id="userchat_{{user.pk}}">
@@ -109,16 +109,133 @@
             </div> 
           </div>
         </div>
-
-
         {% endif %}
       {% endfor %}
+    -->
+  
+
+<div id="accordion">
+  <div class="card">
+    <div class="card-header" id="users">
+      <h5 class="mb-0">
+        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+          Mitarbeiter
+        </button>
+      </h5>
+    </div>
+    <div id="collapseOne" class="collapse show" aria-labelledby="users" data-parent="#accordion">
+      <div class="card-body">
+        {% for user in usersofagency %}
+        <div class="card mb-2 hoverchatcard" id="userchat_{{user.pk}}">
+          <div class="card-body" style="margin: -15px !important;" >
+            <div style="float: left;" class="col-12 ">
+              <div class='icon-container mr-2'>
+                <img class="img-profile roundimg" src="{{ user.profile.get_photo_url }}">
+                <div class='status-circle' id="userstatus_circle_{{user.pk}}" style="background-color: {% if user in onlineusers %} 
+                      {% if user.profile.onlinestatus == 0 %}
+                        green
+                      {% elif user.profile.onlinestatus == 1 %}
+                        red
+                      {% elif user.profile.onlinestatus == 2 %}
+                        orange
+                      {% elif user.profile.onlinestatus == 3 %}
+                        grey
+                      {% endif %}
+                  {% else %} grey {% endif %};">
+                </div>       
+              </div>
+              <h5 class="mt-3">{{user.first_name}} {{user.last_name}}</h5>      
+            </div> 
+          </div>
+        </div>
+      {% endfor %} 
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="card-header" id="chatrooms">
+      <h5 class="mb-0">
+        <button class="btn btn-link" data-toggle="collapse" data-target="#rooms" aria-expanded="true" aria-controls="rooms">
+          Chaträume
+        </button>
+        <button class="btn btn-primary btn-sm" style="float: right; " data-toggle="tooltip" data-placement="top" title="Erstellen Sie einen Gruppenchat." onclick="window.location.href='{% url 'chat:chat-addgroup' %}'"><i class="fas fa-plus"></i></button>
+      </h5>
+    </div>
+    <div id="rooms" class="collapse" aria-labelledby="chatrooms" data-parent="#accordion">
+      <div class="card-body">
+        {% for chatroom in chatrooms %}
+        {% if user in chatroom.chatmembers.all or user in chatroom.chatmembers_admin.all or user == chatroom.creator and chatroom.chatroomtype == 1 %}
+        <div class="card mb-2 hoverchatcard" id="groupchat_{{chatroom.pk}}">
+          <div class="card-body" style="margin: -15px !important;">
+            <div style="float: left;" class="col-12 ">              
+              <h5 class="mt-3">{{chatroom.roomname}}                                
+              </h5>                    
+              <small style="font-size: 10pt;">{% for member in chatroom.chatmembers.all %}
+                  {{member.first_name}} {{member.last_name}}{% if forloop.counter < chatroom.chatmembers.all|length %}, {% endif %}
+                {% endfor %}                
+              </small>
+            </div> 
+          </div>
+        </div>
+        {% endif %}
+      {% endfor %}
+      </div>
+    </div>
   </div>
-  <div class="col-9" style="" id="mainchatcontent">
-    
-  </div><!-- END CHATAREA -->
 </div>
 
+
+
+  </div>
+<div class="col-9" style="" id="mainchatcontent"></div><!-- END CHATAREA -->
+</div>
+
+<!-- LOADER OVERLAY -->
+<div id="overlay" style="display: none;">
+  <div class="loader"></div>
+</div>
+<style>
+.loader {
+  position: relative;
+  border: 7px solid #d3d3d3;
+  border-radius: 50%;
+  border-top: 7px solid red;
+  width: 70px;
+  height: 70px;
+  left:50%;
+  top:35%;
+  -webkit-animation: spin 1s linear infinite; /* Safari */
+  animation: spin 1s linear infinite;
+}
+#overlay{
+    position: absolute;
+    top:0px;
+    left:0px;
+    width: 100%;
+    height: 100%;
+    background: black;
+    opacity: .4;
+}
+.container{
+    position:relative;
+    height: 300px;
+    width: 200px;
+    border:1px solid red;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
+
 <script type="text/javascript">
 
   creator_id = false;
@@ -147,8 +264,12 @@
             new_chat_userid : $(this)[0]["id"].split("_")[1],
             is_basechat : 0
           },
+         beforeSend: function(request) {
+            $("#overlay").fadeIn();
+          },
           success: function( data ) 
           { 
+               $("#overlay").fadeOut();
             if(creator_id != false && chatmember_id != false){
               chatwebsocket.close();
             }
@@ -167,8 +288,12 @@
             groupchatid : clickedroomid,
             is_basechat : 0
           },
+          beforeSend: function(request) {
+            $("#overlay").fadeIn();
+          },
           success: function( data ) 
           { 
+               $("#overlay").fadeOut();
             if(creator_id != false && chatmember_id != false){
               chatwebsocket.close();
             }