colocando opção para enviar mensagens na webpage

Jailson Dias
1 parent 0f135ea7
Showing 3 changed files with 156 additions and 68 deletions Show diff stats
webpage/templates/webpages/relatorios.html
webpage/urls.py
webpage/views.py
@@ -7,6 +7,8 @@
     {{ block.super }}
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
+    var tabela_atual = true;
+
     var array_history = [];
     {%for data_json in json_history.data%}
@@ -22,11 +24,18 @@
     }
     var array_n_did = [];
+    var checkbox = {};
     {%for data_json in json_n_did.data%}
-        array_n_did.push(["{{data_json.0}}","{{data_json.1}}"]);
+        var input = '<div class="checkbox">\
+             <label for="{{data_json.0}}_google_table">\
+                <input id="{{data_json.0}}_google_table" name="{{data_json.0}}_google_table" type="checkbox"><span class="checkbox-material"><span class="check"></span></span>\
+            </label>\
+        </div>'
+        checkbox["{{data_json.0}}_google_table"] = "{{data_json.4}}";
+        array_n_did.push([input,"{{data_json.1}}","{{data_json.2}}","{{data_json.3}}"]);
     {% endfor%}
     var json_n_did = {"data":array_n_did};
-    var column_n_did = [{"string":'{% trans "User" %}'},{"string":'{% trans "Group" %}'}];
+    var column_n_did = [{"string":'<a href="javascript:void(0);" onclick="return openmodal();"> {% trans "Send message" %}</a>'},{"string":'{% trans "User" %}'},{"string":'{% trans "Group" %}'},{"string":"Action don't realized"}];
     </script>
@@ -58,28 +67,22 @@
            var selectedItem = chart.getSelection()[0];
            if (selectedItem) {
                var col = data.getColumnLabel(selectedItem.column);
-               var element = '<li id="link-history">\
-                                    <a id="call-history" href="javascript:void(0);" onclick="return backhistory();"> <i class="fa fa-arrow-left ta-fw">  </i> {{history_table}}</a>\
-                               </li>';
-               if (col == "{{n_did_table}}" && text("#title-table") != "{{n_did_table}}"){
-                   if (length("#link-history") <= 0){
-                       add(element,"#view-table",true);
-                   }
-                   altertitle("{{n_did_table}}");
+               if (col == "{{n_did_table}}"){
+                   tabela_atual = false;
                    search = [];
                    for (var i in json_n_did["data"]){
-                       search.push([json_n_did["data"][i][0],json_n_did["data"][i][1]]);
+                       search.push([json_n_did["data"][i][0],json_n_did["data"][i][1],
+                                    json_n_did["data"][i][2],json_n_did["data"][i][3]]);
                    }
-                   drawTable(column_n_did,pagination(json_n_did["data"],1),false);
-                    putpagination(json_n_did["data"]);
-
-               } else if (col == "{{did_table}}" && text("#title-table") != "{{did_table}}"){
+                   searcher(col, tabela_atual,true);
+               } else if (col == "{{did_table}}"){
+                   tabela_atual = true;
                    search = [];
                    for (var i in json_history["data"]){
                        search.push([json_history["data"][i][0],json_history["data"][i][1],
                                    json_history["data"][i][2],json_history["data"][i][3]]);
                    }
-                   searcher(col, true);
+                   searcher(col, tabela_atual,true);
                }
            }
           chart.setSelection([])
@@ -90,6 +93,7 @@
         chart.draw(data, options);
       }
+      var sortAscending = {0:false,1:false,2:false,3:false};
       function drawTable(columns = column_history,rows = pagination(json_history["data"],1),isdate = true,columndate = 3) {
           var data_table = new google.visualization.DataTable();
           for (var i in columns){
@@ -109,10 +113,34 @@
         //           }
         //       }
         //   console.log(methods.join(","));
+            var options = {
+                sort: "event",
+                allowHtml: true,
+                cssClassNames : {
+                    tableRow: 'text-center',
+                    tableCell: 'text-center',
+                    headerCell: 'text-center'
+                },
+                showRowNumber: true,
+                width: '100%',
+                height: '100%',
+            }
+            function ordenar(properties){
+                var columnIndex = properties['column'];
+                if (columnIndex > 0) {
+                    options["sortColumn"] = columnIndex;
+                    options["sortAscending"] = sortAscending[columnIndex];
+                    data_table.sort({column:columnIndex,desc:sortAscending[columnIndex]});
+                    sortAscending = {0:false,1:false,2:false,3:false};
+                    sortAscending[columnIndex] = !sortAscending[columnIndex];
+                    // console.log(sortAscending);
+                    table.draw(data_table, options);
+                }
+            }
           var table = new google.visualization.Table(document.getElementById('table_div'));
-
-          table.draw(data_table, {allowHtml: true, cssClassNames : {tableRow: 'text-center',tableCell: 'text-center', headerCell: 'text-center'},showRowNumber: true, width: '100%', height: '100%'});
+          google.visualization.events.addListener(table, 'sort', function(e) {ordenar(e)});
+          table.draw(data_table, options);
       }
     </script>
 {% endblock%}
@@ -148,24 +176,26 @@
             <div class="col-md-12 text-center">
                 <h4 style="margin-top: 15px; margin-bottom: 10px" ><strong>{% trans "Report of the resource " %}{{webpage}}</strong></h4>
             </div>
-            <div class="col-md-2 text-right">
-                <h4>{% trans "Select the period: " %}</h4>
-            </div>
-            <div class="col-md-8">
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+
+            <ul class="list-inline nav-justified">
                 <div id="general-parameters-div">
+                    <div class="general-parameters-field">
+                        <li class="text-right"><h4>{% trans "Select the period: " %}</h4></li>
+                    </div>
                     <form id="period-form" action="" method="get">
                         <div class="general-parameters-field">
-                               {# <label class="form-field-report"> {% trans "Initial Date" %} </label> #}
-                               <input class="form-control datetime-picker" name="init_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{init_date|date:'d/m/Y H:i'}} {% else %} {{init_date|date:'m/d/Y H:i P'}} {% endif %}">
-                       </div>
-
-                       <div class="general-parameters-field">
-                               {# <label class="form-field-report"> {% trans "Final Date" %} </label> #}
-                               <input id="inputdate" class="form-control datetime-picker" name="end_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{end_date|date:'d/m/Y H:i'}} {% else %} {{end_date|date:'m/d/Y H:i P'}} {% endif %}">
-                       </div>
-                        <input type="submit" value="{% trans 'Search' %}" style="margin-left: 15px;" class="btn btn-success btn-raised">
-                   </form>
+                            <li> <input class="form-control datetime-picker" name="init_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{init_date|date:'d/m/Y H:i'}} {% else %} {{init_date|date:'m/d/Y H:i P'}} {% endif %}"></li>
+                        </div>
+                        <div class="general-parameters-field">
+                            <li><input id="inputdate" class="form-control datetime-picker" name="end_date" type="text" required="" value="{% if LANGUAGE_CODE == 'pt-br' %}{{end_date|date:'d/m/Y H:i'}} {% else %} {{end_date|date:'m/d/Y H:i P'}} {% endif %}"></li>
+                        </div>
+                        <li><input type="submit" value="{% trans 'Search' %}" style="margin-left: 15px;" class="btn btn-success btn-raised"></li>
+                    </form>
                 </div>
+            <ul>
             </div>
         </div>
         <div class="row">
@@ -191,8 +221,9 @@
                         </li>
                     </ul>
                 </div>
-
-                <div id="table_div"></div>
+                <form id="google-chart-checkbox" action="" method="get">
+                    <div id="table_div"></div>
+                </form>
                 <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 text-center">
         		  	<ul class="pagination">
@@ -200,12 +231,44 @@
         		</div>
             </div>
         </div>
+
+        <!-- Modal (remember to change the ids!!!) -->
+        <div class="modal fade" id="send-message-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                   <!-- Modal Body -->
+              <div class="modal-body">
+                <!-- Put ONLY your content here!!!  -->
+                <h3>{% trans "Message: " %}</h3>
+                <form id="text_chat_form" action="" method="GET">
+                    <textarea id="message" name="message" rows="5" cols="80"></textarea>
+                </form>
+              </div>
+              <!-- Modal Footer -->
+              <div id="delete-category-footer"class="modal-footer">
+                <!-- Don't remove that!!!  -->
+                <button type="button" class="btn btn-default btn-raised" data-dismiss="modal">{% trans "Close" %}</button>
+                <a href="javascript:void(0)" onclick="return sendMessage()" form="text_chat_form" class="btn btn-success btn-raised erase-button">{% trans "Send" %}</a>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="row">
             <br><br>
         </div>
     </div>
     <script type="text/javascript">
+        $('#message').summernote({
+            dialogsInBody: true,
+            disableDragAndDrop: true,
+            height: 150,
+            toolbar: [
+                // [groupName, [list of button]]
+                ['style', ['bold', 'italic']],
+                ['insert', ['link']]
+            ]
+        });
         $("#title-table").text(search.length + " {% trans 'record(s)' %}");
         function putpagination(data = json_history["data"]){
             var len = Math.ceil(data.length / 20);
@@ -230,9 +293,6 @@
               .attr('value', '{{ LANGUAGE_CODE }}')
               .appendTo('#period-form');
         });
-        function altertitle(value) {
-            $("#title-table").text(value);
-        }
         function add(element,local, first = false){
             if (first) $(local).prepend(element);
             else $(local).append(element);
@@ -243,31 +303,19 @@
         function length(element) {
             return $(element).length;
         }
-        function backhistory(){
-            drawTable(column_history,json_history["data"],true,3);
-            $("#link-history").remove();
-            search = [];
-            for (var i in json_history["data"]){
-                search.push([json_history["data"][i][0],json_history["data"][i][1],
-                            json_history["data"][i][2],json_history["data"][i][3]]);
-            }
-            $("#title-table").text(search.length + " {% trans 'record(s)' %}");
-            putpagination(json_history["data"]);
-        }
-
         $("#search-input").on("keyup",function(){
             search = [];
             var text = $("#search-input").val();
-            searcher(text);
+            searcher(text,tabela_atual);
         });
-        function searcher(text, load_histoty = false){
-            if (load_histoty){
-                $("#link-history").remove();
+        function searcher(text, load_histoty = false,apaga=false){
+            if(apaga){
+                $("#search-input").val("");
             }
             var data = [];
-            if ($("#title-table").text() == "{{n_did_table}}" && !load_histoty){
+            if (!load_histoty){
                 data = $.map(json_n_did["data"], function (obj) {
                           return $.extend(true, {}, obj);
                       });
@@ -276,12 +324,12 @@
                       return $.extend(true, {}, obj);
                   });
             }
-            if (load_histoty || $("#title-table").text() != "{{n_did_table}}"){
+            if (load_histoty){
                 for (var i in data){
                     data[i][3] = moment(data[i][3]).format("DD/MM/YYYY HH:mm");
                 }
             }
-            if (load_histoty || $("#title-table").text() != "{{n_did_table}}"){
+            if (load_histoty){
                 for (var i in data){
                     if (data[i][0].toLowerCase().includes(text.toLowerCase())
                         || data[i][1].toLowerCase().includes(text.toLowerCase())
@@ -293,20 +341,20 @@
             }
             else {
                 for (var i in data){
-                    if (data[i][0].toLowerCase().includes(text.toLowerCase())
-                        || data[i][1].toLowerCase().includes(text.toLowerCase())){
+                    if (data[i][1].toLowerCase().includes(text.toLowerCase())
+                        || data[i][2].toLowerCase().includes(text.toLowerCase())
+                        || data[i][3].toLowerCase().includes(text.toLowerCase())){
                                 search.push(json_n_did["data"][i]);
                         }
                 }
             }
-            if (!load_histoty && ($("#title-table").text() == "{{n_did_table}}")){
+            console.log(search);
+            if (!load_histoty){
                 drawTable(column_n_did,pagination(search,1),false);
             } else {
                 drawTable(column_history,pagination(search,1),true,3);
             }
-            if (load_histoty || ($("#title-table").text() != "{{n_did_table}}")){
-                $("#title-table").text(search.length + " {% trans 'record(s)' %}");
-            }
+            $("#title-table").text(search.length + " {% trans 'record(s)' %}");
             putpagination(search);
         }
@@ -317,11 +365,12 @@
             var search = data.slice(first,end);
             return search;
         }
-        function clickPagination(pag){
+
+        function clickPagination(pag, load_histoty = false){
             $(".pagination > li").last().remove();
             $(".pagination > li").first().remove();
-            if (($("#title-table").text() == "{{n_did_table}}")){
+            if (!load_histoty){
                 drawTable(column_n_did,pagination(search,pag),false);
             } else {
                 drawTable(column_history,pagination(search,pag),true,3);
@@ -336,5 +385,26 @@
             $(".active").removeClass("active");
             $("#" + pag).addClass("active");
         }
+        function sendMessage(){
+            $("#send-message-modal").modal("hide");
+            var checked = $("#google-chart-checkbox").serializeArray();
+            var email = [];
+            for (var i in checked){
+                email.push(checkbox[checked[i]["name"]]);
+            }
+            var message = $("#text_chat_form").serializeArray()[0]["value"];
+            $.ajax({
+               type: "GET",
+               data: {"message":message,"users[]":email},
+               url: "{% url 'webpages:send_message' subject.slug %}",
+               success: function(msg){
+                   console.log(msg);
+                   $('#message').summernote("reset");
+               }
+           });
+        }
+        function openmodal(){
+            $("#send-message-modal").modal("show");
+        }
     </script>
 {% endblock %}
@@ -10,4 +10,5 @@ urlpatterns = [
 	url(r'^window_view/(?P<slug>[\w_-]+)/$', views.NewWindowView.as_view(), name = 'window_view'),
 	url(r'^view/(?P<slug>[\w_-]+)/$', views.InsideView.as_view(), name = 'view'),
     url(r'^chart/(?P<slug>[\w_-]+)/$', views.StatisticsView.as_view(), name = 'get_chart'),
+    url(r'^send-message/(?P<slug>[\w_-]+)/$', views.sendMessage, name = 'send_message'),
 ]
@@ -469,7 +469,6 @@ class StatisticsView(LoginRequiredMixin, LogMixin, generic.DetailView):
         else :
             start_date = datetime.datetime.strptime(self.request.GET.get('init_date',''),date_format)
             end_date = datetime.datetime.strptime(self.request.GET.get('end_date',''),date_format)
-        print (start_date,"     depois")
         context["init_date"] = start_date
         context["end_date"] = end_date
         alunos = webpage.students.all()
@@ -491,9 +490,10 @@ class StatisticsView(LoginRequiredMixin, LogMixin, generic.DetailView):
             json_history["data"] = data_history
         not_view = alunos.exclude(email__in=[log.user_email for log in vis_ou.distinct("user_email")])
-
+        index = 0
         for alun in not_view:
-            data_n_did.append([str(alun),", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=alun.email)]),str(_('View'))])
+            data_n_did.append([index,str(alun),", ".join([str(x) for x in webpage.topic.subject.group_subject.filter(participants__email=alun.email)]),str(_('View')), str(alun.email)])
+            index += 1
         json_n_did["data"] = data_n_did
@@ -505,10 +505,27 @@ class StatisticsView(LoginRequiredMixin, LogMixin, generic.DetailView):
         context['topic'] = webpage.topic
         context['subject'] = webpage.topic.subject
         context['db_data'] = re
-        context['title_chart'] = _('Students viewing the webpage')
+        context['title_chart'] = _('Actions about resource')
         context['title_vAxis'] = _('Quantity')
         context["n_did_table"] = n_did
         context["did_table"] = did
         context["history_table"] = history
         return context
+
+
+from chat.models import Conversation, TalkMessages
+from users.models import User
+from subjects.models import Subject
+def sendMessage(request, slug):
+    message = request.GET.get('message','')
+    users = request.GET.getlist('users[]','')
+    user = request.user
+    subject = get_object_or_404(Subject,slug = slug)
+
+    for u in users:
+        to_user = User.objects.get(email=u)
+        talk, create = Conversation.objects.get_or_create(user_one=user,user_two=to_user)
+        created = TalkMessages.objects.create(text=message,talk=talk,user=user,subject=subject)
+
+    return JsonResponse({"message":"ok"})
	@@ -10,4 +10,5 @@ urlpatterns = [		@@ -10,4 +10,5 @@ urlpatterns = [
10	url(r'^window_view/(?P<slug>[\w_-]+)/$', views.NewWindowView.as_view(), name = 'window_view'),	10	url(r'^window_view/(?P<slug>[\w_-]+)/$', views.NewWindowView.as_view(), name = 'window_view'),
11	url(r'^view/(?P<slug>[\w_-]+)/$', views.InsideView.as_view(), name = 'view'),	11	url(r'^view/(?P<slug>[\w_-]+)/$', views.InsideView.as_view(), name = 'view'),
12	url(r'^chart/(?P<slug>[\w_-]+)/$', views.StatisticsView.as_view(), name = 'get_chart'),	12	url(r'^chart/(?P<slug>[\w_-]+)/$', views.StatisticsView.as_view(), name = 'get_chart'),
		13	+ url(r'^send-message/(?P<slug>[\w_-]+)/$', views.sendMessage, name = 'send_message'),
13	]	14	]