#125 #126: Fix CSS problems in tables listing & Add course name to courses list analysis

src/adega/static/adega/css/styles.css

@@ -166,4 +166,11 @@ footer h3 {
 
 .content {
     padding: 2em;
+}
+
+
+.paginate_button{
+    margin-left:10px;
+    margin-right:10px;
+    cursor: pointer;
 }
\ No newline at end of file

src/adega/static/datatables/dataTables.bootstrap.min.css

+table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody>table>thead .sorting:after,div.dataTables_scrollBody>table>thead .sorting_asc:after,div.dataTables_scrollBody>table>thead .sorting_desc:after{display:none}div.dataTables_scrollBody>table>tbody>tr:first-child>th,div.dataTables_scrollBody>table>tbody>tr:first-child>td{border-top:none}div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}

src/adega/static/datatables/dataTables.bootstrap.min.js

+/*!
+ DataTables Bootstrap 3 integration
+ ©2011-2015 SpryMedia Ltd - datatables.net/license
+*/
+(function(b){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return b(a,window,document)}):"object"===typeof exports?module.exports=function(a,d){a||(a=window);if(!d||!d.fn.dataTable)d=require("datatables.net")(a,d).$;return b(d,a,a.document)}:b(jQuery,window,document)})(function(b,a,d,m){var f=b.fn.dataTable;b.extend(!0,f.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",renderer:"bootstrap"});b.extend(f.ext.classes,
+{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm",sProcessing:"dataTables_processing panel panel-default"});f.ext.renderer.pageButton.bootstrap=function(a,h,r,s,j,n){var o=new f.Api(a),t=a.oClasses,k=a.oLanguage.oPaginate,u=a.oLanguage.oAria.paginate||{},e,g,p=0,q=function(d,f){var l,h,i,c,m=function(a){a.preventDefault();!b(a.currentTarget).hasClass("disabled")&&o.page()!=a.data.action&&o.page(a.data.action).draw("page")};
+l=0;for(h=f.length;l<h;l++)if(c=f[l],b.isArray(c))q(d,c);else{g=e="";switch(c){case "ellipsis":e="&#x2026;";g="disabled";break;case "first":e=k.sFirst;g=c+(0<j?"":" disabled");break;case "previous":e=k.sPrevious;g=c+(0<j?"":" disabled");break;case "next":e=k.sNext;g=c+(j<n-1?"":" disabled");break;case "last":e=k.sLast;g=c+(j<n-1?"":" disabled");break;default:e=c+1,g=j===c?"active":""}e&&(i=b("<li>",{"class":t.sPageButton+" "+g,id:0===r&&"string"===typeof c?a.sTableId+"_"+c:null}).append(b("<a>",{href:"#",
+"aria-controls":a.sTableId,"aria-label":u[c],"data-dt-idx":p,tabindex:a.iTabIndex}).html(e)).appendTo(d),a.oApi._fnBindAction(i,{action:c},m),p++)}},i;try{i=b(h).find(d.activeElement).data("dt-idx")}catch(v){}q(b(h).empty().html('<ul class="pagination"/>').children("ul"),s);i!==m&&b(h).find("[data-dt-idx="+i+"]").focus()};return f});

src/adega/templates/adega/navbar.html

-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-  <div class="col-md-2">
+<nav class="navbar-expand-lg navbar-dark bg-primary">
+    <div class="col-md-2">
     <a class="navbar-brand" href="{% url 'dashboard' %}">ADEGA</a>
   </div>
   <div class="collapse navbar-collapse" id="navbartoggle">

src/adega/templates/base.html

@@ -6,17 +6,22 @@
     <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon" />
     <title>{% if title %}{{ title}} | {% endif %}A.D.E.G.A.</title>
 
-    <link rel="stylesheet" href="{% static 'flatly/bootstrap.min.css' %}"/>
-    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="{% static 'flatly/bootstrap.css' %}"/>
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
     <link rel="stylesheet" href="{% static 'fontawesome5/css/fa-regular.min.css' %}"/>
     <link rel="stylesheet" href="{% static 'adega/css/styles.css' %}"/>
 
     <script defer src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-
     <script defer src="{% static 'bootstrap4/js/bootstrap.bundle.min.js' %}"></script>
+    
     <script defer src="{% static 'adega/js/scripts.js' %}"></script>
 
     <link rel="preload" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic" as="style"/>
+    
+    
+
   </head>
   <body>
     <section id="header">
@@ -66,8 +71,20 @@
       </div>
     </footer>
   </body>
+
   <script src="{% static 'adega/js/plotly-latest.min.js' %}"></script>
+  <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
+  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
+  
   <script src="{% static 'adega/js/adega-chart.js' %}"></script>
+
+
+  <link rel="stylesheet" href="{% static 'datatables/dataTables.bootstrap.min.css' %}"/>
+  <script src="{% static 'datatables/jquery.dataTables.min.js' %}"></script>
+    
+  
+
   {% block js-foot %}
     
   {% endblock js-foot %}

src/admission/templates/admission/index.html

@@ -9,7 +9,7 @@
 <div class="row">
 	<div class="col-md-12">
 		<h2>Turmas de Ingresso</h2>
-		<table class="table datatable">
+		<table class="table table-striped table-bordered" id="admission_table">
             <thead>
                 <tr>
                     <th>Ano/Semestre</th>
@@ -41,3 +41,14 @@
 	</div>
 </div>
 {% endblock content %}
+
+{% block js-foot %}
+<script>
+	$('#admission_table').dataTable({
+      "bPaginate": true,
+      "bInfo": false,
+      "aaSorting": [[ 1, "desc" ]],
+      "responsive": true
+    });
+</script>
+{% endblock js-foot %}
\ No newline at end of file

src/course/templates/course/index.html

@@ -9,7 +9,7 @@
 <div class="row">
 	<div class="col-md-12">
 		<h2>Disciplinas</h2>
-		<table id="lista_disciplinas" class="table">
+		<table id="course_table" class="table table-striped table-bordered">
 			<thead>
 				<tr>
 					<th>Código</th>
@@ -23,7 +23,7 @@
 						<td>
 							<a href="{% url 'course:detail' degree_id=degree.code codigo_disciplina=key %}">{{key}}</a>
 						</td>
-						<td> {{key}} </td>
+						<td> {{value.name}} </td>
 						<td> {{value.nota.0 | floatformat:2}} &plusmn {{value.nota.1 | floatformat:2}} </td>
 					</tr>
 				{% endfor %}
@@ -31,5 +31,16 @@
 		</table>
 	</div>
 </div>
-	
+
 {% endblock content %}
+
+{% block js-foot %}
+<script>
+	$('#course_table').dataTable({
+      "bPaginate": true,
+      "bInfo": false,
+      "aaSorting": [[ 1, "desc" ]],
+      "responsive": true
+    });
+</script>
+{% endblock js-foot %}

src/course/views.py

@@ -28,7 +28,10 @@ def index(request, degree_id):
     if not (degree in request.user.educator.degree.all()):
         return redirect("adega:dashboard")
 
+    analysis_result = get_list_courses(request.session, degree)
+    courses_list = analysis_result["cache"]
+
     return render(request, 'course/index.html', {
-        "courses": get_list_courses(request.session, degree)["cache"],
+        "courses": courses_list,
         "degree": degree
     })

src/script/analysis/course_analysis.py

@@ -247,10 +247,13 @@ def listagem_disciplina(df,lista_disciplinas):
 
 	for disciplina in lista_disciplinas.keys(): 
 		disciplina_dict = lista_disciplinas[disciplina] 
-		cache[disciplina] = {"nota":disciplina_dict["nota"],
-				"taxa_reprovacao_absoluta":disciplina_dict["taxa_reprovacao_absoluta"],
-				"taxa_reprovacao_frequencia":disciplina_dict["taxa_reprovacao_frequencia"],
-				"taxa_trancamento":disciplina_dict["taxa_trancamento"] }  
+		cache[disciplina] = {
+			"name": disciplina_dict["disciplina_nome"],
+			"nota": disciplina_dict["nota"],
+			"taxa_reprovacao_absoluta": disciplina_dict["taxa_reprovacao_absoluta"],
+			"taxa_reprovacao_frequencia": disciplina_dict["taxa_reprovacao_frequencia"],
+			"taxa_trancamento": disciplina_dict["taxa_trancamento"]
+		}
 		compara_disciplina = [] 
 		compara_nota[disciplina]= lista_disciplinas[disciplina]["compara_nota"]  
 		#calcula aprovacao semestral

src/script/analysis/student_analysis.py

@@ -140,6 +140,7 @@ class StudentAnalysis:
 		
 		aux = df.groupby(["MATR_ALUNO"])
 		students = {}
+		#TODO: Calculate the real value
 		for x in aux:
 			students[x[0]] = None
 		return students

src/student/templates/student/detail.html

@@ -12,10 +12,10 @@
         </h1>
         <div>
             <!-- Nav tabs -->
-            <ul class="nav nav-tabs" role="tablist">
-            <li role="presentation" class="active"><a href="#resumo" aria-controls="resumo" role="tab" data-toggle="tab">Resumo</a></li>
-            <li role="presentation"><a href="#disciplinas" aria-controls="disciplinas" role="tab" data-toggle="tab">Lista de Disciplinas</a></li>
-            </ul>
+            <div class="nav nav-tabs" role="tablist">
+             <a class="nav-item nav-link active" href="#resumo" aria-controls="resumo" data-toggle="tab">Resumo</a>
+             <a class="nav-item nav-link" href="#disciplinas" aria-controls="disciplinas" data-toggle="tab">Lista de Disciplinas</a>
+            </div>
         </div>
         <div class="tab-content">
             <div role="tabpanel" class="tab-pane active" id="resumo">
@@ -55,7 +55,7 @@
                         {% elif analysis_result.student.forma_evasao == 'Formatura' %}
                             <span class="data">Formado</span>
                         {% else %}
-                            <span class="data">Jubilado</span>
+                            <span class="data">Desconhecido</span>
                         {% endif %}
                     </div>
 
@@ -69,10 +69,12 @@
                     </div>
                 </div>
             </div>
+            
+            <br>
 
             <div role="tabpanel" class="tab-pane" id="disciplinas">
                 <h1>Disciplinas Feitas</h1>
-                <table id="lista_disciplinas" class="table">
+                <table id="course_list" class="table table-striped table-bordered">
                     <thead>
                         <tr>
                             <th>Código</th>
@@ -131,12 +133,9 @@
 <div id="myChart2"></div>
 {% endblock content %}
 
-
-
 {% block js-foot %}
   <script>
     
-    
     var chart1 = new AdegaChart({
       data: {{analysis_result.ira_semestral|safe}},
       div_target: "ira_semestral",
@@ -177,5 +176,14 @@
     chart4.transformToAcumulation();
 
     
+
+    $('#course_list').dataTable({
+      "bPaginate": true,
+      "bInfo": false,
+      "aaSorting": [[ 4, "desc" ]],
+      "responsive": true
+    });
+
+
   </script>
 {% endblock js-foot %}
\ No newline at end of file

src/student/templates/student/index.html

@@ -10,24 +10,23 @@
 	<div class="col-md-12">
 
 		<h1>Listagem dos Alunos</h1>
-		<div>
-				<!-- Nav tabs -->
-				<ul class="nav nav-tabs" role="tablist">
-					<li role="presentation" class="active"><a href="#sem_evasao" aria-controls="sem_evasao" role="tab" data-toggle="tab">Sem Evasão</a></li>
-					<li role="presentation"><a href="#formados" aria-controls="formados" role="tab" data-toggle="tab">Formados</a></li>
-					<li role="presentation"><a href="#abandono" aria-controls="abandono" role="tab" data-toggle="tab">Abandono</a></li>
-					<li role="presentation"><a href="#desistencia" aria-controls="desistencia" role="tab" data-toggle="tab">Desistência</a></li>
-					<li role="presentation"><a href="#outras" aria-controls="outras" role="tab" data-toggle="tab">Outras Formas de Evasão</a></li>
-				</ul>
+		<div class="nav nav-tabs" role="tablist">
+			<a class="nav-item nav-link active" href="#sem_evasao" aria-controls="sem_evasao" data-toggle="tab">Sem Evasão</a>
+			<a class="nav-item nav-link" href="#formados" aria-controls="formados" data-toggle="tab">Formados</a>
+			<a class="nav-item nav-link" href="#abandono" aria-controls="abandono" data-toggle="tab">Abandono</a>
+			<a class="nav-item nav-link" href="#desistencia" aria-controls="desistencia" data-toggle="tab">Desistência</a>
+			<a class="nav-item nav-link" href="#outras" aria-controls="outras" data-toggle="tab">Outras Formas de Evasão</a>
 		</div>
+		<br>
+		
 		<div class="tab-content">
 				<div role="tabpanel" class="tab-pane active" id="sem_evasao">
-						<table class="table datatable">
+						<table class="table table-striped table-bordered" id="sem_evasao_table">
 				            <thead>
 				                <tr>
 				                    <th class="col-md-2">GRR</th>
 				                    <th class="col-md-4">Nome</th>
-				                    <th class="col-md-2">ira</th>
+				                    <th class="col-md-2">IRA</th>
 				                    <th class="col-md-2">Forma evasão</th>
 				                </tr>
 				            </thead>
@@ -44,7 +43,7 @@
 						</table>
 				</div>
 				<div role="tabpanel" class="tab-pane" id="formados">
-					<table class="table datatable">
+					<table class="table table-striped table-bordered" id="formados_table">
 									<thead>
 											<tr>
 												<th class="col-md-2">GRR</th>
@@ -66,7 +65,7 @@
 					</table>
 				</div>
 				<div role="tabpanel" class="tab-pane" id="abandono">
-					<table class="table datatable">
+					<table class="table table-striped table-bordered" id="abandono_table">
 									<thead>
 											<tr>
 												<th class="col-md-2">GRR</th>
@@ -88,7 +87,7 @@
 					</table>
 				</div>
 				<div role="tabpanel" class="tab-pane" id="desistencia">
-					<table class="table datatable">
+					<table class="table table-striped table-bordered" id="desistencia_table">
 									<thead>
 											<tr>
 												<th class="col-md-2">GRR</th>
@@ -110,7 +109,7 @@
 					</table>
 				</div>
 				<div role="tabpanel" class="tab-pane" id="outras">
-					<table class="table datatable">
+					<table class="table table-striped table-bordered" id="outros_table">
 									<thead>
 											<tr>
 												<th class="col-md-2">GRR</th>
@@ -134,6 +133,28 @@
 		</div>
 	</div>
 </div>
+{% endblock content %}
+
 
+{% block js-foot %}
+<script>
+	var table_names = [
+		$("#sem_evasao_table"),
+		$("#formados_table"),
+		$("#abandono_table"),
+		$("#desistencia_table"),
+		$("#outros_table")
+	];
+	$(table_names).each(function(i,x){
+		x.dataTable({
+			"bPaginate": true,
+			"bInfo": false,
+			"aaSorting": [[ 1, "desc" ]],
+			"responsive": true
+		});
+	});
 	
-{% endblock content %}
+	
+</script>
+	
+{% endblock js-foot %}