From 58a35ee6a35fdb7c676bcf78ae0a01d56f8ee82b Mon Sep 17 00:00:00 2001
From: Samu <samurey@gmail.com>
Date: Sun, 28 Jul 2013 19:33:27 +0000
Subject: despues de mucho un commit

---
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>");
 		        }
--
cgit v0.9.1