<!DOCTYPE html> <html> <head> <title>Chats Protocols - AIL</title> <link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}"> <!-- Core CSS --> <link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/dataTables.bootstrap.min.css') }}" rel="stylesheet"> <!-- JS --> <script src="{{ url_for('static', filename='js/jquery.js')}}"></script> <script src="{{ url_for('static', filename='js/popper.min.js')}}"></script> <script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script> <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js')}}"></script> <script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js')}}"></script> <script src="{{ url_for('static', filename='js/d3.min.js')}}"></script> <script src="{{ url_for('static', filename='js/d3/heatmap_week_hour.js')}}"></script> <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> </head> <body> {% include 'nav_bar.html' %} <div class="container-fluid"> <div class="row"> {% include 'sidebars/sidebar_objects.html' %} <div class="col-12 col-lg-10" id="core_content"> {% with meta=chat %} {% include 'chats_explorer/card_chat.html' %} {% endwith %} {% if chat['subchannels'] %} <h4 class="mt-2">Sub-Channels:</h4> <table id="tablesubchannels" class="table"> <thead class="bg-dark text-white"> <tr> <th>Icon</th> <th>Name</th> <th>ID</th> <th>Created at</th> <th>First Seen</th> <th>Last Seen</th> <th><i class="fas fa-comment-dots"></i></th> </tr> </thead> <tbody style="font-size: 15px;"> {% for meta in chat["subchannels"] %} <tr> <td> <img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ meta['id'] }}" width="40" height="40"> </td> <td> <b>{{ meta['name'] }}</b> {% if meta['translation_name'] %} <div class="text-secondary">{{ meta['translation_name'] }}</div> {% endif %} </td> <td><a href="{{ url_for('chats_explorer.objects_subchannel_messages') }}?subtype={{ meta['subtype'] }}&id={{ meta['id'] }}">{{ meta['id'] }}</a></td> <td>{{ meta['created_at'] }}</td> <td> {% if meta['first_seen'] %} {{ meta['first_seen'][0:4] }}-{{ meta['first_seen'][4:6] }}-{{ meta['first_seen'][6:8] }} {% endif %} </td> <td> {% if meta['last_seen'] %} {{ meta['last_seen'][0:4] }}-{{ meta['last_seen'][4:6] }}-{{ meta['last_seen'][6:8] }} {% endif %} </td> <td>{{ meta['nb_messages'] }}</td> </tr> {% endfor %} </tbody> </table> {% endif %} <h5 class="mx-5 mt-2 text-secondary">All Messages:</h5> <div id="heatmapweekhourall"></div> {% if not chat['subchannels'] %} <h5 class="mx-5 text-secondary">This week:</h5> <div id="heatmapweekhour"></div> {% endif %} {% with translate_url=url_for('chats_explorer.chats_explorer_chat', subtype=chat['subtype']), obj_id=chat['id'], pagination=chat['pagination'] %} {% include 'chats_explorer/block_translation.html' %} {% endwith %} {% if chat['messages'] %} <span class="mt-3"> {% include 'objects/image/block_blur_img_slider.html' %} </span> {% with obj_subtype=chat['subtype'], obj_id=chat['id'], url_endpoint=url_for("chats_explorer.chats_explorer_chat"), nb=chat['pagination']['nb'] %} {% set date_from=chat['first_seen'] %} {% set date_to=chat['last_seen'] %} {% include 'block_obj_time_search.html' %} {% endwith %} {% with endpoint_url=url_for('chats_explorer.chats_explorer_chat', subtype=chat['subtype']), pagination=chat['pagination'] %} {% set endpoint_url = endpoint_url + "&id=" + chat['id'] + "&nb=" + chat['pagination']['nb'] | string %} {% if translation_target %} {% set endpoint_url = endpoint_url + "&target=" + translation_target %} {% endif %} {% include 'chats_explorer/pagination.html' %} {% endwith %} <div class="position-relative"> <div class="chat-messages p-2"> {% for date in chat['messages'] %} <div class="divider d-flex align-items-center mb-4"> <p class="text-center h2 mx-3 mb-0" style="color: #a2aab7;"> <span class="badge badge-secondary mb-2" id="date_section_{{ date }}">{{ date }}</span> </p> </div> {% for mess in chat['messages'][date] %} {% with message=mess %} {% include 'chats_explorer/block_message.html' %} {% endwith %} {% endfor %} <br> {% endfor %} </div> </div> {% with endpoint_url=url_for('chats_explorer.chats_explorer_chat', subtype=chat['subtype']), pagination=chat['pagination'] %} {% set endpoint_url = endpoint_url + "&id=" + chat['id'] + "&nb=" + chat['pagination']['nb'] | string %} {% if translation_target %} {% set endpoint_url = endpoint_url + "&target=" + translation_target %} {% endif %} {% include 'chats_explorer/pagination.html' %} {% endwith %} {% endif %} </div> </div> </div> <script> $(document).ready(function(){ $("#page-Decoded").addClass("active"); $("#nav_chat").addClass("active"); {% if chat['subchannels'] %} $('#tablesubchannels').DataTable({ "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]], "iDisplayLength": 10, "order": [[ 5, "desc" ]] }); {% endif %} }); function toggle_sidebar(){ if($('#nav_menu').is(':visible')){ $('#nav_menu').hide(); $('#side_menu').removeClass('border-right') $('#side_menu').removeClass('col-lg-2') $('#core_content').removeClass('col-lg-10') }else{ $('#nav_menu').show(); $('#side_menu').addClass('border-right') $('#side_menu').addClass('col-lg-2') $('#core_content').addClass('col-lg-10') } } </script> <script> d3.json("{{ url_for('chats_explorer.chats_explorer_messages_stats_week_all') }}?type=chat&subtype={{ chat['subtype'] }}&id={{ chat['id'] }}") .then(function(data) { create_heatmap_week_hour('#heatmapweekhourall', data); }) {% if not chat['subchannels'] %} d3.json("{{ url_for('chats_explorer.chats_explorer_messages_stats_week') }}?type=chat&subtype={{ chat['subtype'] }}&id={{ chat['id'] }}") .then(function(data) { create_heatmap_week_hour('#heatmapweekhour', data); }) {% endif %} /* // set the dimensions and margins of the graph const margin = {top: 30, right: 30, bottom: 30, left: 30}, width = 450 - margin.left - margin.right, height = 450 - margin.top - margin.bottom; // append the svg object to the body of the page const svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Labels of row and columns const myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"] const myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"] //Read the data d3.csv("").then( function(data) { // Labels of row and columns -> unique identifier of the column called 'group' and 'variable' const myGroups = Array.from(new Set(data.map(d => d.group))) const myVars = Array.from(new Set(data.map(d => d.variable))) // Build X scales and axis: const x = d3.scaleBand() .range([ 0, width ]) .domain(myGroups) .padding(0.05); svg.append("g") .style("font-size", 15) .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x).tickSize(0)) .select(".domain").remove() // Build Y scales and axis: const y = d3.scaleBand() .range([ height, 0 ]) .domain(myVars) .padding(0.01); svg.append("g") .style("font-size", 15) .call(d3.axisLeft(y).tickSize(0)) .select(".domain").remove() // Build color scale const myColor = d3.scaleSequential() .interpolator(d3.interpolateInferno) .domain([1,100]) // create a tooltip const tooltip = d3.select("#my_dataviz") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "white") .style("border", "solid") .style("border-width", "2px") .style("border-radius", "5px") .style("padding", "5px") // Three function that change the tooltip when user hover / move / leave a cell const mouseover = function(event,d) { tooltip.style("opacity", 1) d3.select(this) .style("stroke", "black") .style("opacity", 1) } const mousemove = function(event,d) { tooltip.html("The exact value of<br>this cell is: " + d) .style("left", (event.x)/2 + "px") .style("top", (event.y)/2 + "px") } const mouseleave = function(d) { tooltip.style("opacity", 0) d3.select(this) .style("stroke", "none") .style("opacity", 0.8) } svg.selectAll() .data(data, function(d) {return d.group+':'+d.variable;}) .join("rect") .attr("x", function(d) { return x(d.group) }) .attr("y", function(d) { return y(d.variable) }) .attr("rx", 4) .attr("ry", 4) .attr("width", x.bandwidth() ) .attr("height", y.bandwidth() ) .style("fill", function(d) { return myColor(d.value)} ) .style("stroke-width", 4) .style("stroke", "none") .style("opacity", 0.8) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave) }) */ </script> </body> </html>