RTVE-API/agr-programas/demoid.html at master · UlisesGascon/RTVE-API · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE HTML>
<html>
  <head>
  	<meta charset="utf-8">
    <title>Agr-programa</title>
    <!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<style type="text/css">
		#datos{
			margin-top:40px;
		}
		.tarjeta{
			max-width: 430px;
		}
		.texto-apoyo{
			margin-top:20px;
		}
		.texto-titulo{
			min-height: 60px;
		}
	</style>

  </head>
  <body>

  	<div class="container">
  		<div class="row" id="datos">
  			<img id="cargando" src="https://ebarnette15.files.wordpress.com/2013/03/loading-3.gif%3Fw%3D150%26h%3D120">
  		</div>
	</div>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script type="text/javascript">

		function sacarVariablesUrl() {
			var vars = {};
			var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
				vars[key] = value;
			});
			return vars;
		};

		function iniciar () {
			id = sacarVariablesUrl()["id"] || "1130";
			var xmlHttp = new XMLHttpRequest();

			xmlHttp.onreadystatechange = function() {

			    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {

			        datos = JSON.parse(xmlHttp.responseText);
		        	var dato = datos.page.items[0];
		        	console.log(dato.name);
				    datosListos = '<div class="col-xs-6 col-lg-4"><div class="panel panel-info">';
					datosListos += '<div class="panel-body">';
					datosListos += '<div><h4>'+dato.name+'</h4></div>';
					datosListos += '<div><p><a class="glyphicon glyphicon-star btn btn-info" href="demoprogramas.html?id='+id+'" role="button"> Programas</a></p>';
					datosListos += '<p><a class="glyphicon glyphicon-facetime-video btn btn-info" href="demovideos.html?id='+id+'" role="button"> Videos</a></p>';
					datosListos += '<p><a class="glyphicon glyphicon-volume-down btn btn-info" href="demoaudios.html?id='+id+'" role="button"> Audios</a></p>';
					datosListos += '<p><a class="glyphicon glyphicon-flag btn btn-info" href="demomultimedias.html?id='+id+'" role="button"> Multimedias</a></p></div>';
					datosListos += '</div></div>';

					document.getElementById("datos").innerHTML += datosListos;
					document.getElementById("cargando").style.display = "none";

			    } else if (xmlHttp.readyState === 4 && xmlHttp.status === 400) {
			        datos = JSON.parse(xmlHttp.responseText);
			        console.error("ERROR! 400 - Solicitud incorrecta!");
			        document.getElementById("cargando").style.display = "none";
			        document.getElementById("datos").innerHTML += "<h3>ERROR! 400 - Solicitud incorrecta!</h3>";

			    } else if (xmlHttp.readyState === 4 && xmlHttp.status === 404) {
			        datos = JSON.parse(xmlHttp.responseText);
			        console.error("ERROR! 404 - No encontrado!");
			        document.getElementById("cargando").style.display = "none";
			        document.getElementById("datos").innerHTML += "<h3>ERROR! 404 - No encontrado!</h3>";
			    }
			};

			xmlHttp.open("GET", "http://www.rtve.es/api/agr-programas/"+id+".json", true);
			xmlHttp.send();
		};
		iniciar();
	</script>
  </body>
</html>