despues de mucho un commitsamu

4 files changed, 476 insertions, 7 deletions

diff --git a/EjercitarWeb/WebContent/js/attc.css b/EjercitarWeb/WebContent/js/attc.css
new file mode 100644
index 0000000..ac12ee0
--- /dev/null
+++ b/EjercitarWeb/WebContent/js/attc.css
@@ -0,0 +1,99 @@
+@media screen {

+/* override css in main */

+body{

+	margin-left: auto; margin-right: auto;

+	margin-top:20px;

+	width:100%;

+	position:relative;

+	left:0px;

+	top:0px;

+	z-index:0;

+	background-color:#FFFFFF;

+	color:#47535E;

+	font-size:0.7em;

+	font-family:Arial, sans-serif;

+}

+

+div.mainContent{

+	margin-left: auto; margin-right: auto;

+	width:800px;

+}

+table{

+	margin-left: auto; margin-right: auto;

+	width:98%;

+	border:1px solid #E6E6E6;

+	border-radius:5px;

+	box-sizing: border-box;

+	background-color:#F6F6F6;

+	border-collapse: collapse;

+}

+table td,table th{

+	border:1px solid #E6E6E6;

+	border-top:1px solid #FFFFFF;

+}

+table th{

+	background-color:#FFFFFF;

+}

+/*attc classes*/

+/*attc classes*/

+div.attcControls{

+	width:100%;

+	border:1px solid #E6E6E6;

+	border-radius:5px;

+	box-sizing: border-box;

+	background-color:#F6F6F6;

+}

+div.attcControls ul{

+	overflow:hidden;

+	padding:2px 2px 2px 2px;

+	margin:0px;

+}

+div.attcControls ul li{

+	margin:0px;

+	padding:0px 0px 0px 10px;

+	list-style-type: none;

+	display: inline;

+	float:right;

+	clear:none;

+}

+div.attcControls ul li a{

+	border:1px solid #9CDFF7;

+	border-radius:3px;

+	box-sizing: border-box;

+	background-color:#86D6F5;

+	padding:2px;

+	color:white;

+	text-decoration:none;

+	display:inline-block;

+	background-image:none;

+	font-weight:normal;

+}

+div.attcControls ul li a:hover{

+	border:1px solid white;

+	color:#47535E;

+}

+div.attcControls ul li fieldset{

+	border:1px solid #9CDFF7;

+	border-radius:3px;

+	box-sizing: border-box;

+	background-color:#86D6F5;

+	padding:2px;

+	margin:0px;

+	color:white;

+	text-decoration:none;

+}

+div.attcControls ul li fieldset label{

+	padding-right:5px;	

+}

+div.attcControls ul li fieldset select{

+	font-size:1em;

+	padding:0px;

+	margin:0px;

+}

+

+input.attcEditCheckRadioBoxes{

+	display: block;

+    margin-left: auto;

+    margin-right: auto;

+}

+}
\ No newline at end of file
diff --git a/EjercitarWeb/WebContent/js/attc.googleCharts.js b/EjercitarWeb/WebContent/js/attc.googleCharts.js
new file mode 100644
index 0000000..c8bd0fb
--- /dev/null
+++ b/EjercitarWeb/WebContent/js/attc.googleCharts.js
@@ -0,0 +1,302 @@
+google.load("visualization", "1", {packages:["corechart"]});

+(function( $ ){

+	  $.fn.attc = function(options) {

+	  	var numPattern = /[^0-9\.]/g;

+	    var tableEl = this;

+	    var dataArray=new Array();

+	    var numRows = tableEl.find('tbody tr').length;

+	    //defaults

+	    var settings = $.extend( {

+	      'location':tableEl.attr('id'),

+	      'hideTable' : false,

+	      'hideChart' : false,

+	      'type':'bar',

+	      'googleOptions':new Object(),

+	      'controls':{

+			showHide:true,

+			create:true,

+			chartType:true

+		  },

+	      'controlsLabels':{

+	      	showChart:"Show chart",

+	      	hideChart:"Hide chart",

+	      	showTable:"Show table",

+	      	hideTable:"Hide table",

+	      	createChart:"Edit chart",

+	      	changeChart:"Change chart"

+	      },

+	      chartOptionList:'<option value="bar">Bar</option><option value="pie">Pie</option><option value="column">Column</option><option value="area">Area</option><option value="line">Line</option>'

+	    }, options);

+	   	//set editing attribute to false so it can be tested:

+	   	tableEl.attr('data-attc-editing',false);

+	   	//function to create a table

+	   	var CreateChart = function(type,location,tableEl)

+  			{

+  				var dataArray=new Array();

+		    	switch(type){

+		    		case 'pie':

+		    		//console.log("making a pie");

+		    		var headerValues=$('#'+tableEl.attr('data-attc-colvalues'));

+		    		var headerDesc=tableEl.attr('data-attc-colDescription');

+		    		if(headerDesc.split(',').length >0){

+		    			headerDesc=$('#'+headerDesc.split(',')[0]);

+		    		}else{

+		    			headerDesc=$('#'+headerDesc);

+		    		}

+		    		var colIndexValues=headerValues.index()+1;

+		    		var colIndexDesc=headerDesc.index()+1;

+		    		dataArray[0]=[headerDesc.text(), headerValues.text()];

+		    		for(i=1;i <=numRows;i++){

+		    			//loop values and description to get array

+		    			var value=tableEl.find('tbody tr:nth-child('+i+') td:nth-child('+colIndexValues+')').text();

+		    			value=parseFloat(value.replace(numPattern,''));

+		    			var description=tableEl.find('tbody tr:nth-child('+i+') td:nth-child('+colIndexDesc+')').text();

+		    			//console.log(colIndexDesc+ ':'+description);

+		    			dataArray[i]=[description,value];

+		    		}

+		    		var chart = new google.visualization.PieChart(document.getElementById(location));

+		    		break;

+		    		

+		    		case 'bar':

+		    		case 'column':

+		    		case 'area':

+		    		case 'line':

+		    		var headerDesc=$('#'+tableEl.attr('data-attc-colDescription'));

+		    		var colIndexDesc=headerDesc.index()+1;

+		    		var headerValuesArray=tableEl.attr('data-attc-colvalues').split(',');

+		    		//var headerValuesArray=$('#'+tableEl.attr('data-attc-colvalues')).split(',');

+		    		var headerIndexArray=new Array();

+		    		var colIndexValues=0;

+		    		var value="";

+		    		var description="";

+		    		//get index for each column

+		    		for(x=0;x<headerValuesArray.length;x++){

+		    			headerIndexArray.push($('#'+headerValuesArray[x]).index()+1);

+		    		}

+		    		//console.log(headerIndexArray);

+		    		var theadEls = tableEl.find('thead th');

+		    		var headArray=new Array();

+		    		description=tableEl.find('thead tr:nth-child(1) th:nth-child('+colIndexDesc+')').text();	

+		    		headArray.push(description);

+		    		for(x=0;x<headerValuesArray.length;x++){

+	    				colIndexValues=headerIndexArray[x];

+	    				value=tableEl.find('thead tr:nth-child(1) th:nth-child('+colIndexValues+')').text();

+		    			headArray.push(value);

+	    			}

+	    			dataArray[0]=headArray;

+		    		for(i=1;i <=numRows;i++){

+		    			var rowArray=new Array();

+		    			description=tableEl.find('tbody tr:nth-child('+i+') td:nth-child('+colIndexDesc+')').text();

+		    			

+		    			rowArray.push(description);

+		    			for(x=0;x<headerValuesArray.length;x++){

+		    				colIndexValues=headerIndexArray[x];

+		    				value=tableEl.find('tbody tr:nth-child('+i+') td:nth-child('+colIndexValues+')').text();

+			    			value=parseFloat(value.replace(numPattern,''));

+			    			//console.log(colIndexDesc+ ':'+description);

+			    			rowArray.push(value);

+		    			}

+		    			dataArray[i]=rowArray;

+		    			

+		    		}

+		    		

+		    		switch(type){

+		    			case 'bar':

+		    			var chart = new google.visualization.BarChart(document.getElementById(location));

+		    			break;

+			    		case 'column':

+			    		var chart = new google.visualization.ColumnChart(document.getElementById(location));

+			    		break;

+			    		case 'area':

+			    		var chart = new google.visualization.AreaChart(document.getElementById(location));

+			    		break;

+			    		case 'line':

+			    		var chart = new google.visualization.LineChart(document.getElementById(location));

+			    		break;

+			    		

+			    		default:

+			    		var chart = new google.visualization.BarChart(document.getElementById(location));

+			    		break;

+		    		}

+		    		break;

+		    		

+		    		default:

+		    		break;

+		    	}

+		    	

+		    	var data = google.visualization.arrayToDataTable(dataArray);

+    			chart.draw(data, settings.googleOptions);

+	    	};

+	   	

+	    if(tableEl.attr('title')!='' && settings.googleOptions.title==undefined){

+	    	settings.googleOptions.title=tableEl.attr('title');

+	    }

+	     

+	    //look for the settings in the data-attc-googleOptions

+	    if(tableEl.attr('data-attc-googleOptions')!=undefined){

+	    	settings.googleOptions=jQuery.parseJSON(tableEl.attr('data-attc-googleOptions'));

+	    }

+	    //look for the settings in the data-attc-controls

+	    if(tableEl.attr('data-attc-controls')!=undefined){

+	    	settings.controls=jQuery.parseJSON(tableEl.attr('data-attc-controls'));

+	    }

+	    //look for type in data-attc-type

+	    if(tableEl.attr('data-attc-type')!=undefined){

+	    	settings.type=tableEl.attr('data-attc-type');

+	    }

+	   

+	    if(tableEl.attr('data-attc-hideTable')!=undefined){

+	    	settings.hideTable=tableEl.attr('data-attc-hideTable');

+	    }

+	    if(tableEl.attr('data-attc-hideChart')!=undefined){

+	    	settings.hideChart=tableEl.attr('data-attc-hideChart');

+	    }

+	    //look for location in data-attc-location

+	    if(tableEl.attr('data-attc-location')!=undefined){

+	    	settings.location=tableEl.attr('data-attc-location');

+	    }

+

+	    if(tableEl.length>0 ){

+	    	if(tableEl.get(0).tagName=='TABLE'){

+		    	//fork depending on the setting

+		    	CreateChart(settings.type,settings.location,tableEl);

+		

+		    	//hide the table

+		    	if(settings.hideTable=="true"){

+		    		tableEl.hide();

+		    	}

+		    	if(settings.hideChart=="true"){

+		    		$('#'+settings.location).hide();

+		    	}

+		    	//start making the controls

+		    	var controls='';

+		    	if(settings.controls.showHide){

+		    		controls+='<li><a href="#" \

+		    		 data-attc-textShow="'+settings.controlsLabels.showChart+'" \

+		    		 data-attc-textHide="'+settings.controlsLabels.hideChart+'" \

+		    		 data-attc-controls-showHide="'+settings.location+'" \

+		    		 class="attcChartIcon">'+(settings.hideChart ? settings.controlsLabels.showChart : settings.controlsLabels.hideChart)+'</a></li>';

+		    		

+		    		controls+='<li><a href="#" \

+		    		data-attc-textShow="'+settings.controlsLabels.showTable+'" \

+		    		data-attc-textHide="'+settings.controlsLabels.hideTable+'" \

+		    		data-attc-controls-showHide="'+tableEl.attr('id')+'" \

+		    		class="attcTableIcon">'+(settings.hideTable ? settings.controlsLabels.showTable : settings.controlsLabels.hideTable)+'</a></li>';

+		    	}

+		    	//start making the controls

+		    	if(settings.controls.create){

+		    		controls+='<li><a href="#" \

+		    		data-attc-controls-addCreateOptions="'+tableEl.attr('id')+'" \

+		    		class="attcTableIcon">'+(settings.controlsLabels.createChart)+'</a></li>'

+		    	}

+		    	if(settings.controls.chartType){

+		    		controls+='<li><fieldset><label>'+settings.controlsLabels.changeChart+'</label><select data-attc-controls-updateChart="'+tableEl.attr('id')+'" class="attcUpdateChart">'+settings.chartOptionList+'</select></fieldset></li>';

+		    	}

+		    	//if there are any controls to show

+		    	if(controls !=''){

+		    		controls='<div class="attcControls"><ul>'+controls+'</ul><div>';

+		    		var controlsEl=$(controls);

+		    		//set the select list to show current selected chart

+		    		controlsEl.find("select[data-attc-controls-updateChart]").val(settings.type);

+		    		//

+		    		controlsEl.on("click", "a[data-attc-controls-showHide]", function(e){

+		    			e.preventDefault();

+		    			var el=$('#'+$(this).attr('data-attc-controls-showHide'));

+		    			el.find('tbody').show();

+						el.toggle();

+						$(this).text(el.is(':visible') ? $(this).attr('data-attc-textHide') : $(this).attr('data-attc-textShow'));

+					});

+					controlsEl.on("change", "select[data-attc-controls-updateChart]", function(){

+						//update chart type for other functions

+						tableEl.attr('data-attc-type',$(this).val());

+		    			//grab the new chart and re-run the creation

+		    			CreateChart($(this).val(),settings.location,tableEl);

+		    			//if editing then update the editing controls

+		    			if(tableEl.attr('data-attc-editing')=='true'){

+		    				controlsEl.find("a[data-attc-controls-addCreateOptions]").click();

+		    			}

+					});

+					controlsEl.find("a[data-attc-controls-addCreateOptions]").on("click", function(e){

+						e.preventDefault();

+		    			if(!tableEl.is(':visible')){

+		    				//show the thead only

+		    				tableEl.show();

+		    				tableEl.find('tbody').hide();

+		    			}

+		    			//set table as editing

+		    			tableEl.attr('data-attc-editing',true);

+		    			//remove existing edit boxes

+		    			tableEl.find('thead th input.attcEditCheckRadioBoxes').remove();

+		    			//add check boxes to the th elements

+		    			tableEl.find('thead th').each(function(index) {

+			    			//find col type by adding all values together and checking if it's not NaN

+			    			var items=0;

+			    			var col=index+1;

+			    			var inputType='checkbox';

+			    			var inputColType='value';

+			    			var descriptionCol=tableEl.attr('data-attc-colDescription');

+			    			var valuesCols=tableEl.attr('data-attc-colvalues').split(',');

+			    			valuesCols.push(descriptionCol);

+							tableEl.find('tbody>tr>td:nth-child('+col+')').each( function(){

+							   items+=parseFloat($(this).text().replace(numPattern,''));      

+							});

+							

+							if(isNaN(items)){

+								inputType='radio';

+								inputColType='desc';

+							}

+							//force back to radio if pie chart

+							if(tableEl.attr('data-attc-type')=='pie'){

+								inputType='radio';

+							}

+		    				var appendEl='<input data-attc-colType="'+inputColType+'" type="'+inputType+'" name=attc'+inputColType+'" value="'+index+'"';

+		    				if($.inArray($(this).attr('id'), valuesCols)>-1){

+		    					appendEl+=' checked="checked"';

+		    				}

+		    				appendEl+=' class="attcEditCheckRadioBoxes"/>';

+		    				appendEl=$(appendEl).on("click", function(){

+		    						//give this col an id if it doesn't have one

+		    						var myId='attcCol'+$(this).val();

+		    						if($(this).parents('th').attr('id')!= undefined){

+		    							myId=$(this).parents('th').attr('id');

+		    						}else{

+		    							$(this).parents('th').attr('id',myId);

+		    						}

+		    						//change the attribute to this column

+		    						if($(this).attr('data-attc-colType')=='desc'){

+		    							tableEl.attr('data-attc-colDescription',myId);

+		    						}else{

+		    							//todo remove value if unchecked

+		    							if(tableEl.attr('data-attc-type') =='pie'){

+		    								tableEl.attr('data-attc-colValues',myId);

+		    							}else{

+		    								//select all the checked inputs

+		    								var checkedIds=tableEl.find('input[data-attc-colType=value]:checked').parents('th').map(function() { return this.id; }).get().toString();

+		    								tableEl.attr('data-attc-colValues',checkedIds);

+		    							}

+		    						}

+		    						//re-create chart

+		    						CreateChart(tableEl.attr('data-attc-type'),settings.location,tableEl);

+		    					});

+						    $(this).prepend(appendEl);

+						    

+						    

+						});

+					});

+		    		//add controls above the table el

+		    		tableEl.before(controlsEl);

+		    	}

+		    }else{

+	    		alert(tableEl.attr('id')+' is not a table it\'s a: ' + tableEl.get(0).tagName);

+	    	}

+	    }else{

+	    	//

+	    }

+	    //maintain chain

+	    return this

+	  };

+})( jQuery );

+

+$(document).ready(function(){

+	$('[data-attc-createChart]').attc();

+});
\ No newline at end of file
diff --git a/EjercitarWeb/WebContent/ver_resultados.jsp b/EjercitarWeb/WebContent/ver_resultados.jsp
index da3b642..2c53c0c 100644
--- a/EjercitarWeb/WebContent/ver_resultados.jsp
+++ b/EjercitarWeb/WebContent/ver_resultados.jsp
@@ -6,14 +6,33 @@
 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

 <title>Resultados</title>

+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

+

+    <script src="js/attc.googleCharts.js"></script>

+

 	<script src="http://code.jquery.com/jquery-latest.js"></script>

+	<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>

+	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>

+	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css" type="text/css" />

 <%@page import="java.util.List" import="model.Tema"  import="model.Profesor"%> 

 

 </head>

 <body>

 

 <div id="content">

+<div id="tabs">

+  <ul>

+    <li><a href="#tabs-1">General</a></li>

+    <li><a href="#tabs-2">Alumnos por tema </a></li>

+    <li><a href="#tabs-3">Individual</a></li>

+  </ul>

+  

+<div id=tabs-1>

+	<p> holas </p>

+

+</div>

 

+<div id=tabs-2>

  <form id="form1" name="form1" method="post" action="">

  		<fieldset>

 				<legend> Seleccione un tema </legend>

@@ -28,11 +47,42 @@
 		</fieldset>

 		<br>	

 		

-<div id="tabla">

+	<div id="tabla" > 

+	

+	

+	</div>

+	<div id="grafico"> </div>

+	<input type="button" onclick="boton()" value="boton">

+	</form>

+</div>	

 

 

+<div id=tabs-3>

+	<div id="tabs-individual">

+		<ul>

+		    <li><a href="#tabs-1">General</a></li>

+		    <li><a href="#tabs-2">Alumnos por tema </a></li>

+		    <li><a href="#tabs-3">Individual</a></li>

+		</ul>

+	  

+		<div id=tabs-1>

+			<p> holas1 </p>

+		

+		</div>

+		<div id=tabs-2>

+			<p> holas2 </p>

+		

+		</div>

+		<div id=tabs-3>

+			<p> holas3 </p>

+		

+		</div>

+	</div>

 </div>

-	</form>

+</div>

+

+	

+	

 </div>

 	<script type="text/javascript">

 

@@ -43,9 +93,18 @@
                

                 $("#tabla").load("CargarResultadosServlet", {asignatura:asignatura, tema_id:tema_id});

                 //$("#conceptos").multiselect("refresh");

+                $("#grafico").attc();

                 

             }

 

+            function boton(){

+            	$("#grafico").attc();

+            }

+

+              $( "#tabs" ).tabs();

+              $( "#tabs-individual" ).tabs();

+

+

      </script>

 

 </body>

diff --git a/EjercitarWeb/src/src/CargarResultadosServlet.java b/EjercitarWeb/src/src/CargarResultadosServlet.java
index 1dec8a3..a06b5ff 100644
--- a/EjercitarWeb/src/src/CargarResultadosServlet.java
+++ b/EjercitarWeb/src/src/CargarResultadosServlet.java
@@ -66,11 +66,20 @@ public class CargarResultadosServlet extends HttpServlet {
 		

 		try {

 			

-			out.printf("<table class='tbl1 scroll'>");

-			out.printf("<thead");

+			out.printf("<table title=\"Resultados\"" +

+					"summary=\"Resultados por alumno por tema\"" +

+					"data-attc-createChart=\"true\" " +

+					"data-attc-colDescription=\"nombre\" " +

+					"data-attc-colValues=\"tema\"" +

+					"data-attc-location=\"grafico\" " +

+					"data-attc-hideTable=\"false\" " +

+					"data-attc-type=\"pie\" " +

+					"data-attc-googleOptions='{\"is3D\":true}'" +

+					"data-attc-controls='{\"showHide\":true,\"create\":true,\"chartType\":true}'>");

+			out.printf("<thead>");

 			out.printf("<tr>");

 			

-			out.printf("<th>");

+			out.printf("<th id=\"nombre\">");

 			out.printf("Nombre");

 			out.printf("</th>");

 			

@@ -78,7 +87,7 @@ public class CargarResultadosServlet extends HttpServlet {
 			out.printf("Apellido");

 			out.printf("</th>");

 			

-			out.printf("<th>");

+			out.printf("<th id=\"tema\">");

 			out.printf("Tema");

 			out.printf("</th>");

 			

@@ -88,7 +97,7 @@ public class CargarResultadosServlet extends HttpServlet {
 					.setParameter("tema", tema).getResultList();

 			

 			for (Concepto concepto : conceptoList) {

-		        	out.printf("<th>");

+		        	out.printf("<th >");

 					out.printf(concepto.getNombre());

 					out.printf("</th>");

 		        }