From 9fbd3f4bb6c87cafaac26cc6962c7734bc998825 Mon Sep 17 00:00:00 2001
From: terrtia <or1994@hotmail.fr>
Date: Thu, 16 Nov 2023 14:50:03 +0100
Subject: [PATCH] chg: [chats] add message and blur blocks

---
 bin/importer/feeders/abstract_chats_feeder.py |  2 +-
 bin/lib/chats_viewer.py                       |  2 +-
 .../templates/chats_explorer/ChatMessage.html | 48 ++--------
 .../chats_explorer/SubChannelMessages.html    | 50 ++---------
 .../chats_explorer/block_message.html         | 74 +++++++++++++++
 .../chats_explorer/chat_instance.html         |  2 +-
 .../templates/chats_explorer/chat_viewer.html | 89 ++-----------------
 .../chats_explorer/chats_instance.html        |  2 +-
 .../chats_explorer/chats_protocols.html       |  2 +-
 .../objects/image/block_blur_img_slider.html  | 34 +++++++
 10 files changed, 134 insertions(+), 171 deletions(-)
 create mode 100644 var/www/templates/chats_explorer/block_message.html
 create mode 100644 var/www/templates/objects/image/block_blur_img_slider.html

diff --git a/bin/importer/feeders/abstract_chats_feeder.py b/bin/importer/feeders/abstract_chats_feeder.py
index f62500c7..c075a312 100755
--- a/bin/importer/feeders/abstract_chats_feeder.py
+++ b/bin/importer/feeders/abstract_chats_feeder.py
@@ -258,7 +258,7 @@ class AbstractChatFeeder(DefaultFeeder, ABC):
                 obj.add(date, message)
                 obj.set_parent(obj_global_id=message.get_global_id())
 
-        for obj in objs:  # TODO PERF avoid parsing metas multpile times
+        for obj in objs:  # TODO PERF avoid parsing metas multiple times
 
             # CHAT
             chat = self.process_chat(obj, date, timestamp, reply_id=reply_id)
diff --git a/bin/lib/chats_viewer.py b/bin/lib/chats_viewer.py
index bae98988..8c201c4b 100755
--- a/bin/lib/chats_viewer.py
+++ b/bin/lib/chats_viewer.py
@@ -337,7 +337,7 @@ def api_get_message(message_id):
     message = Messages.Message(message_id)
     if not message.exists():
         return {"status": "error", "reason": "Unknown uuid"}, 404
-    meta = message.get_meta({'chat', 'content', 'icon', 'link', 'parent', 'parent_meta', 'user-account'})
+    meta = message.get_meta({'chat', 'content', 'icon', 'images', 'link', 'parent', 'parent_meta', 'user-account'})
     # if meta['chat']:
     #     print(meta['chat'])
     #     # meta['chat'] =
diff --git a/var/www/templates/chats_explorer/ChatMessage.html b/var/www/templates/chats_explorer/ChatMessage.html
index 0e96015c..5a129e66 100644
--- a/var/www/templates/chats_explorer/ChatMessage.html
+++ b/var/www/templates/chats_explorer/ChatMessage.html
@@ -134,6 +134,9 @@
                 </div>
 
 
+                {% include 'objects/image/block_blur_img_slider.html' %}
+
+
                 <div class="position-relative">
                     <div class="chat-messages p-2">
 
@@ -143,48 +146,9 @@
                                 </p>
                             </div>
 
-                        <div class="chat-message-left pb-1">
-                            <div>
-                                <img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ meta['user-account']['id'] }}" width="40" height="40">
-                                <div class="text-muted small text-nowrap mt-2">{{ meta['hour'] }}</div>
-                            </div>
-                            <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
-                                <div class="font-weight-bold mb-1">
-                                    {% if meta['user-account']['username'] %}
-                                        {{ meta['user-account']['username']['id'] }}
-                                    {% else %}
-                                        {{ meta['user-account']['id'] }}
-                                    {% endif %}
-                                </div>
-                                {% if meta['reply_to'] %}
-                                    <div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
-                                        <div class="font-weight-bold mb-1">
-                                            {% if meta['reply_to']['user-account']['username'] %}
-                                                {{ meta['reply_to']['user-account']['username']['id'] }}
-                                            {% else %}
-                                                {{ meta['reply_to']['user-account']['id'] }}
-                                            {% endif %}
-                                        </div>
-                                        <pre class="my-0">{{ meta['reply_to']['content'] }}</pre>
-                                        {% for tag in meta['reply_to']['tags'] %}
-                                            <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
-                                        {%  endfor %}
-                                        <div class="text-muted small text-nowrap">{{ meta['reply_to']['full_date'] }}</div>
-{#                                                <div class="">#}
-{#                                                    <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['reply_to']['type'] }}&subtype={{ mess['reply_to']['subtype'] }}&id={{ mess['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
-{#                                                    <a class="btn btn-light btn-sm text-secondary py-0" href="{{ mess['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
-{#                                                </div>#}
-                                    </div>
-                                {% endif %}
-                                <pre class="my-0">{{ meta['content'] }}</pre>
-                                {% for tag in meta['tags'] %}
-                                    <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
-                                {%  endfor %}
-                                <div class="">
-                                    <a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ meta['type'] }}&subtype={{ meta['subtype'] }}&id={{ meta['id'] }}"><i class="fas fa-project-diagram"></i></a>
-                                </div>
-                            </div>
-                        </div>
+                        {% with message=meta %}
+                            {% include 'chats_explorer/block_message.html' %}
+                        {% endwith %}
 
                     </div>
                 </div>
diff --git a/var/www/templates/chats_explorer/SubChannelMessages.html b/var/www/templates/chats_explorer/SubChannelMessages.html
index 198ad504..922b52da 100644
--- a/var/www/templates/chats_explorer/SubChannelMessages.html
+++ b/var/www/templates/chats_explorer/SubChannelMessages.html
@@ -144,6 +144,10 @@
                     </div>
                 </div>
 
+                <span class="mt-3">
+                    {% include 'objects/image/block_blur_img_slider.html' %}
+                </span>
+
                 <div class="position-relative">
                     <div class="chat-messages p-2">
 
@@ -157,49 +161,9 @@
 
                             {% for mess in subchannel['messages'][date] %}
 
-                                <div class="chat-message-left pb-1">
-                                    <div>
-                                        <img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ mess['user-account']['id'] }}" width="40" height="40">
-                                        <div class="text-muted small text-nowrap mt-2">{{ mess['hour'] }}</div>
-                                    </div>
-                                    <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
-                                        <div class="font-weight-bold mb-1">
-                                            {% if mess['user-account']['username'] %}
-                                            	{{ mess['user-account']['username']['id'] }}
-                                            {% else %}
-                                            	{{ mess['user-account']['id'] }}
-                                            {% endif %}
-                                        </div>
-                                        {% if mess['reply_to'] %}
-                                            <div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
-                                                <div class="font-weight-bold mb-1">
-                                                    {% if mess['reply_to']['user-account']['username'] %}
-                                                        {{ mess['reply_to']['user-account']['username']['id'] }}
-                                                    {% else %}
-                                                        {{ mess['reply_to']['user-account']['id'] }}
-                                                    {% endif %}
-                                                </div>
-                                                <pre class="my-0">{{ mess['reply_to']['content'] }}</pre>
-                                                {% for tag in mess['reply_to']['tags'] %}
-                                                    <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
-                                                {%  endfor %}
-                                                <div class="text-muted small text-nowrap">{{ mess['reply_to']['full_date'] }}</div>
-{#                                                <div class="">#}
-{#                                                    <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['reply_to']['type'] }}&subtype={{ mess['reply_to']['subtype'] }}&id={{ mess['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
-{#                                                    <a class="btn btn-light btn-sm text-secondary py-0" href="{{ mess['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
-{#                                                </div>#}
-                                            </div>
-                                        {% endif %}
-                                        <pre class="my-0">{{ mess['content'] }}</pre>
-                                        {% for tag in mess['tags'] %}
-                                            <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
-                                        {%  endfor %}
-                                        <div class="">
-                                            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['type'] }}&subtype={{ mess['subtype'] }}&id={{ mess['id'] }}"><i class="fas fa-project-diagram"></i></a>
-                                            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ mess['link'] }}"><i class="fas fa-eye"></i></a>
-                                        </div>
-                                    </div>
-                                </div>
+                                {% with message=mess %}
+                                    {% include 'chats_explorer/block_message.html' %}
+                                {% endwith %}
 
                             {% endfor %}
                             <br>
diff --git a/var/www/templates/chats_explorer/block_message.html b/var/www/templates/chats_explorer/block_message.html
new file mode 100644
index 00000000..df2c4d30
--- /dev/null
+++ b/var/www/templates/chats_explorer/block_message.html
@@ -0,0 +1,74 @@
+
+<style>
+    .chat-message-left,
+    .chat-message-right {
+        display: flex;
+        flex-shrink: 0;
+    }
+    .chat-message-right {
+        flex-direction: row-reverse;
+        margin-left: auto
+        }
+    .divider:after,
+    .divider:before {
+        content: "";
+        flex: 1;
+        height: 2px;
+        background: #eee;
+    }
+    .message_image {
+        max-width: 50%;
+        filter: blur(5px);
+    }
+</style>
+
+
+
+<div class="chat-message-left pb-1">
+    <div>
+        <img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ message['user-account']['id'] }}" width="40" height="40">
+        <div class="text-muted small text-nowrap mt-2">{{ message['hour'] }}</div>
+    </div>
+    <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
+        <div class="font-weight-bold mb-1">
+            {% if message['user-account']['username'] %}
+                {{ message['user-account']['username']['id'] }}
+            {% else %}
+                {{ message['user-account']['id'] }}
+            {% endif %}
+        </div>
+        {% if message['reply_to'] %}
+            <div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
+                <div class="font-weight-bold mb-1">
+                    {% if message['reply_to']['user-account']['username'] %}
+                        {{ message['reply_to']['user-account']['username']['id'] }}
+                    {% else %}
+                        {{ message['reply_to']['user-account']['id'] }}
+                    {% endif %}
+                </div>
+                <pre class="my-0">{{ message['reply_to']['content'] }}</pre>
+                {% for tag in message['reply_to']['tags'] %}
+                    <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
+                {%  endfor %}
+                <div class="text-muted small text-nowrap">{{ message['reply_to']['full_date'] }}</div>
+    {#              <div class="">#}
+    {#                  <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ message['reply_to']['type'] }}&subtype={{ message['reply_to']['subtype'] }}&id={{ message['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
+    {#                  <a class="btn btn-light btn-sm text-secondary py-0" href="{{ message['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
+    {#              </div>#}
+            </div>
+        {% endif %}
+        {% if message['images'] %}
+            <img class="message_image mb-1" src="{{ url_for('objects_image.image', filename=message['images'][0])}}">
+        {% endif %}
+        <pre class="my-0">{{ message['content'] }}</pre>
+        {% for tag in message['tags'] %}
+            <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
+        {%  endfor %}
+        <div class="">
+            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ message['type'] }}&subtype={{ message['subtype'] }}&id={{ message['id'] }}"><i class="fas fa-project-diagram"></i></a>
+            <a class="btn btn-light btn-sm text-secondary px-1" href="{{ message['link'] }}"><i class="fas fa-eye"></i></a>
+        </div>
+    </div>
+</div>
+
+
diff --git a/var/www/templates/chats_explorer/chat_instance.html b/var/www/templates/chats_explorer/chat_instance.html
index 419b8116..d70df757 100644
--- a/var/www/templates/chats_explorer/chat_instance.html
+++ b/var/www/templates/chats_explorer/chat_instance.html
@@ -106,7 +106,7 @@
 <script>
     $(document).ready(function(){
         $("#page-Decoded").addClass("active");
-        $("#nav_cve").addClass("active");
+        $("#nav_explorer_chat").addClass("active");
 
         $('#tablechats').DataTable({
             "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
diff --git a/var/www/templates/chats_explorer/chat_viewer.html b/var/www/templates/chats_explorer/chat_viewer.html
index c1a330ae..bf3df43a 100644
--- a/var/www/templates/chats_explorer/chat_viewer.html
+++ b/var/www/templates/chats_explorer/chat_viewer.html
@@ -152,27 +152,7 @@
                 {% if chat['messages'] %}
 
                     <span class="mt-3">
-                        <div class="card border-secondary">
-                            <div class="card-body py-2">
-                                <div class="row">
-                                    <div class="col-md-3 text-center px-0">
-                                        <button class="btn btn-sm btn-secondary" onclick="blur_slider.val(0);blur_images();">
-                                            <i class="fas fa-eye-slash"></i>
-                                            <span class="label-icon">Hide</span>
-                                        </button>
-                                    </div>
-                                    <div class="col-md-6 text-center pl-0 pt-1">
-                                        <input type="range" min="0" max="15" step="0.1" value="10" id="blur-slider" onchange="blur_images();">
-                                    </div>
-                                    <div class="col-md-3 text-center">
-                                        <button class="btn btn-sm btn-secondary" onclick="blur_slider.val(15);blur_images();">
-                                            <i class="fas fa-image"></i>
-                                            <span class="label-icon">Full</span>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                        {% include 'objects/image/block_blur_img_slider.html' %}
                     </span>
 
                     <div class="position-relative">
@@ -188,52 +168,9 @@
 
                                 {% for mess in chat['messages'][date] %}
 
-                                    <div class="chat-message-left pb-1">
-                                        <div>
-                                            <img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ mess['user-account']['id'] }}" width="40" height="40">
-                                            <div class="text-muted small text-nowrap mt-2">{{ mess['hour'] }}</div>
-                                        </div>
-                                        <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
-                                            <div class="font-weight-bold mb-1">
-                                                {% if mess['user-account']['username'] %}
-                                                    {{ mess['user-account']['username']['id'] }}
-                                                {% else %}
-                                                    {{ mess['user-account']['id'] }}
-                                                {% endif %}
-                                            </div>
-                                            {% if mess['reply_to'] %}
-                                                <div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
-                                                    <div class="font-weight-bold mb-1">
-                                                        {% if mess['reply_to']['user-account']['username'] %}
-                                                            {{ mess['reply_to']['user-account']['username']['id'] }}
-                                                        {% else %}
-                                                            {{ mess['reply_to']['user-account']['id'] }}
-                                                        {% endif %}
-                                                    </div>
-                                                    <pre class="my-0">{{ mess['reply_to']['content'] }}</pre>
-                                                    {% for tag in mess['reply_to']['tags'] %}
-                                                        <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
-                                                    {%  endfor %}
-                                                    <div class="text-muted small text-nowrap">{{ mess['reply_to']['full_date'] }}</div>
-    {#                                                <div class="">#}
-    {#                                                    <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['reply_to']['type'] }}&subtype={{ mess['reply_to']['subtype'] }}&id={{ mess['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
-    {#                                                    <a class="btn btn-light btn-sm text-secondary py-0" href="{{ mess['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
-    {#                                                </div>#}
-                                                </div>
-                                            {% endif %}
-                                            {% if mess['images'] %}
-                                                <img class="message_image mb-1" src="{{ url_for('objects_image.image', filename=mess['images'][0])}}">
-                                            {% endif %}
-                                            <pre class="my-0">{{ mess['content'] }}</pre>
-                                            {% for tag in mess['tags'] %}
-                                                <span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
-                                            {%  endfor %}
-                                            <div class="">
-                                                <a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['type'] }}&subtype={{ mess['subtype'] }}&id={{ mess['id'] }}"><i class="fas fa-project-diagram"></i></a>
-                                                <a class="btn btn-light btn-sm text-secondary px-1" href="{{ mess['link'] }}"><i class="fas fa-eye"></i></a>
-                                            </div>
-                                        </div>
-                                    </div>
+                                    {% with message=mess %}
+                                        {% include 'chats_explorer/block_message.html' %}
+                                    {% endwith %}
 
                                 {% endfor %}
                                 <br>
@@ -252,7 +189,7 @@
 <script>
     $(document).ready(function(){
         $("#page-Decoded").addClass("active");
-        $("#nav_cve").addClass("active");
+        $("#nav_chat").addClass("active");
 
         {% if chat['subchannels'] %}
             $('#tablesubchannels').DataTable({
@@ -277,16 +214,6 @@ function toggle_sidebar(){
 	}
 }
 
-
-const blur_slider = $('#blur-slider');
-function blur_images(){
-    let blurValue = blur_slider.val();
-    blurValue = 15 - blurValue;
-    let images = document.getElementsByClassName('message_image');
-    for(i = 0; i < images.length; i++) {
-        images[i].style.filter = "blur(" + blurValue + "px)";
-    }
-}
 </script>
 
 
@@ -442,15 +369,15 @@ d3.json("{{ url_for('chats_explorer.chats_explorer_messages_stats_week') }}?uuid
         tooltip.style("opacity", 1)
         d3.select(this)
             .style("stroke", "black")
-            .style("opacity", 1)
+            //.style("stroke-opacity", 1)
 
         tooltip.html(d.date + " " + d.hour + "-" + (d.hour + 1) + "h: <b>" + d.count + "</b> messages")
     }
     const mouseleave = function(d) {
         tooltip.style("opacity", 0)
         d3.select(this)
-            .style("stroke", "none")
-            .style("opacity", 0.8)
+            .style("stroke", "white")
+            //.style("stroke-opacity", 0.8)
     }
 
 ///////////////////////////////////////////////////////////////////////////
diff --git a/var/www/templates/chats_explorer/chats_instance.html b/var/www/templates/chats_explorer/chats_instance.html
index f7b56e39..a68fab7b 100644
--- a/var/www/templates/chats_explorer/chats_instance.html
+++ b/var/www/templates/chats_explorer/chats_instance.html
@@ -57,7 +57,7 @@
 <script>
     $(document).ready(function(){
         $("#page-Decoded").addClass("active");
-        $("#nav_cve").addClass("active");
+        $("#nav_explorer_chat").addClass("active");
   });
 
 function toggle_sidebar(){
diff --git a/var/www/templates/chats_explorer/chats_protocols.html b/var/www/templates/chats_explorer/chats_protocols.html
index 401d2624..a2c25ded 100644
--- a/var/www/templates/chats_explorer/chats_protocols.html
+++ b/var/www/templates/chats_explorer/chats_protocols.html
@@ -59,7 +59,7 @@
 <script>
     $(document).ready(function(){
         $("#page-Decoded").addClass("active");
-        $("#nav_cve").addClass("active");
+        $("#nav_explorer_chat").addClass("active");
   });
 
 function toggle_sidebar(){
diff --git a/var/www/templates/objects/image/block_blur_img_slider.html b/var/www/templates/objects/image/block_blur_img_slider.html
new file mode 100644
index 00000000..1341f877
--- /dev/null
+++ b/var/www/templates/objects/image/block_blur_img_slider.html
@@ -0,0 +1,34 @@
+<div class="card border-secondary">
+    <div class="card-body py-2">
+        <div class="row">
+            <div class="col-md-3 text-center px-0">
+                <button class="btn btn-sm btn-secondary" onclick="blur_slider.val(0);blur_images();">
+                    <i class="fas fa-eye-slash"></i>
+                    <span class="label-icon">Hide</span>
+                </button>
+            </div>
+            <div class="col-md-6 text-center pl-0 pt-1">
+                <input type="range" min="0" max="15" step="0.1" value="10" id="blur-slider" onchange="blur_images();">
+            </div>
+            <div class="col-md-3 text-center">
+                <button class="btn btn-sm btn-secondary" onclick="blur_slider.val(15);blur_images();">
+                    <i class="fas fa-image"></i>
+                    <span class="label-icon">Full</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    const blur_slider = $('#blur-slider');
+    function blur_images(){
+        let blurValue = blur_slider.val();
+        blurValue = 15 - blurValue;
+        let images = document.getElementsByClassName('message_image');
+        for(i = 0; i < images.length; i++) {
+            images[i].style.filter = "blur(" + blurValue + "px)";
+        }
+    }
+</script>
\ No newline at end of file