Family in profile

familyark/app/public/css/main.css

@@ -100,7 +100,15 @@ td.options-table-species{
         text-align: center;
 }
 
-
 table.info{
 	margin: auto;
+}
+
+#a-father button, .Male{
+	background-color: blue;
+	color: white;
+}
+
+#a-mother button, .Female{
+	background-color: pink;
 }

familyark/app/public/js/buttons.js

@@ -4,6 +4,14 @@ $('document').ready(function(){
 	// Botones
 	$("#home").click(function(){
 		$( "#body" ).load( "/templates/home.html" );
+		$.get("/info", function( data ) {
+			var text = "<table class=\"info\">"
+			$.each(data, function(i, obj) {
+				text += "<tr><td>"+i+"</td><td> "+obj+"</td></tr>";
+			});
+			text += "</table>"
+			$( "#info" ).html( text );
+		});
 	});
 
 	$("#animals").click(function(){
@@ -16,11 +24,20 @@ $('document').ready(function(){
 
 				$( "#body" ).html("<h1>Yours Dinos</h1><button id='animal-add' class='btn btn-success btn-sm float-right'>+ New Dino</button><br><br><table id='animals-table'></table>");
 				$( "#animal-add").click(function(){
-					$( "#body" ).load( "/templates/animal-form.html" );
+					$( "#body" ).load( "/templates/animal-form.html", function (){
+						set_animal_include("");
+					});
 				})
 				dataSet = data.data.map(function(item) {
 					return [item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]];
 				});
+
+				// dataSet = data.data.reduce(function(acc, item, i) {
+				// 	if(i == 1) acc = []
+				// 	acc.push([item._id, item.name, item.initial_level + " - " + item.level, species[item.specie]]);
+				// 	return acc
+				// });
+
 				$('#animals-table').DataTable({
 					data: dataSet,
 					responsive: true,

familyark/app/public/js/functions.js

@@ -13,7 +13,7 @@ function onSubmitAnimal(form){
 			type: "PUT",
 			url: "/animal/"+data._id,
 			data: JSON.stringify(data),
-			success: function() { $("#animals").click() },
+			success: function() { showAnimal(data._id) },
 			contentType : "application/json"
 		});
 	}else{
@@ -39,47 +39,40 @@ function editAnimal(id){
 					if(key == "father" || key == "mother" || key == "specie" || key == "sex"){
 						let a = key;
 						setTimeout(function(){
-							$('#a-'+a+' option[value='+data.data[0][a]+']').attr('selected','selected');
+							$('#a-'+a+' option[value='+animal[a]+']').attr('selected','selected');
 						}, 200)
 					}else{
-						$('input[name='+key+']').val( data.data[0][key] ? data.data[0][key].$numberDecimal ? data.data[0][key].$numberDecimal :  data.data[0][key] : "");
+						$('input[name='+key+']').val( animal[key] ?animal[key].$numberDecimal ? animal[key].$numberDecimal : animal[key] : "");
 					}
 				}
 			}
-			
+			set_animal_include(animal._id);
-			$.get( "/species", function( data ) {
-				data.data.map(function(item){
-					$("#a-specie").append("<option value='"+item._id+"'>"+item.name+"</option>");
-				})
-			});
 			paint_male_female(animal.specie, animal._id);
-
-			$("#a-specie").change(function(e){
-				paint_male_female($( this ).val(), animal._id);
-			})
 		});
 	});
 }
 
 function showAnimal(id){
         $( "#body" ).load( "/templates/animal-show.html", function(){
-		var text = "<table><tr>";
+		var text = "<table>";
 		$.get( "/animal/"+ id, function( data ) {
 			var animal = data.data,
 				j = 1;
 			$.each(animal, function(i, val) {
-				text += "<td>"+i+"</td><td>"+(val ? val.$numberDecimal ? val.$numberDecimal :  val : "")+"</td>";
+				
-				if(j % 3 == 0) text += "</tr><tr>"
+				if(i != "_id" && i != "__v" && i.indexOf("initial") < 0) 
+					text += "<tr><td>"+i+"</td><td>"+(val ? val.$numberDecimal ? val.$numberDecimal :  val : "")+"</td></tr>";
+				// if(j % 3 == 0) text += "</tr><tr>"
 				j++;
 			});
-			text += "</tr></table>";
+			text += "</table>";
-			$("#a-name").html(  );
+			
+			$("#button").html('<button class="btn btn-info btn-sm float-right" onclick="editAnimal(\''+ animal._id +'\')">Edit</button>')
+			$(".a-name").html( animal.name );
 			$("#data").append( text );
-			// console.log(11)
+			
 			get_parrents(animal);
-			// console.log(22)
 			get_childrens(animal);
-			// console.log(33)
 		});
 		
 	});
@@ -114,17 +107,26 @@ function paint_male_female(specie, id){
 function get_parrents(animal){
 	$.get( "/animal/parrents/" + animal._id, function( data ) {
 		data.data.map(function(item){
-			console.log(item);
+			$(item.sex == "Male" ? "#a-father" : "#a-mother").html("<button onclick=\"showAnimal('"+ item._id +"')\">" + item.name+" - "+ item.level + "</button>");
 		});
 	});
 }
 
-
-
 function get_childrens(animal){
 	$.get( "/animal/childrens/" + animal._id, function( data ) {
 		data.data.map(function(item){
-			console.log(item)
+			$("#a-childrens").append("<div class=\"col-6\"><button class=\"" + item.sex + "\" onclick=\"showAnimal('"+ item._id +"')\">" + item.name + " - " + item.level + "</button></div>");
 		})
 	});
+}
+
+function set_animal_include(id){
+	$.get( "/species", function( data ) {
+		data.data.map(function(item){
+			$("#a-specie").append("<option value='"+item._id+"'>"+item.name+"</option>");
+		});
+	});
+	$("#a-specie").change(function(e){
+		paint_male_female($( this ).val(), id);
+	});
 }

familyark/app/public/templates/animal-show.html

@@ -1,6 +1,24 @@
 <h1 class="a-name">Un dino</h1>
 <div class="row">
-	<div id="data" class="col-12"></div>
+	<div id="button" class="col-12"></div>
-	<div id="tree" class="col-6"></div>
+	<div id="data" class="col-6"></div>
+	<div id="tree" class="col-6">
+		<div class="col-12">
+			<div class="row">
+				<div class="col-6">
+					<b>Father</b>
+					<div id="a-father">---</div>
+				</div>
+				<div class="col-6">
+					<b>Mother</b>
+					<div id="a-mother">---</div>
+				</div>
+			</div>
+		</div>
+		<div class="col-6">
+			<div><b>Childrens</b></div>
+			<div id="a-childrens" class="row"></div>
+		</div>
+	</div>
 	<div id="chart" class="col-12"><h5>Aqui vendran graficas de cada atributo con el inicial y el actual, para que se pueda ver el crecimiento.</h5></div>
 </div>