RTVE-API/agr-programas/demoprogramas.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
89
90
91
92
93
94
95
96
<!DOCTYPE HTML>
<html>
  <head>
  	<meta charset="utf-8">
    <title>Programas por 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">
  			<h1>Programas</h1>
  			<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);
			        console.log(datos);

			        for (var i = 0; i < datos.page.numElements; i++) {
			        	var dato = datos.page.items[i];
			        	console.log(dato);

				        dato = datos.page.items[i];
					    datosListos = '<div class="col-xs-6 col-lg-4"><div class="panel panel-info">';
						datosListos += '<div class="panel-heading" id="titulo"><strong>'+dato.shortTitle+'</strong></div>';
						datosListos += '<div class="panel-body"><img class="img-responsive" src="'+dato.imgPoster+'" alt="'+dato.shortTitle+'">';
						datosListos += '<div class="texto-titulo text-justify"><p>'+dato.description+'</p></div><hr>'
						datosListos += '<p class="texto-apoyo text-center"><a target="_blank" href="'+dato.htmlUrl+'">';
						datosListos += '<span>Ver más</span></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+"/programas.json?size=60", true);
			xmlHttp.send();
		};
		iniciar();
	</script>
  </body>
</html>