From 9d6782f8b5d0837a4ea3aae582d711154cf97180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Escalera=20Garc=C3=ADa?= <vicescgar@us.es>
Date: Wed, 8 May 2024 21:59:24 +0200
Subject: [PATCH] usp textual/widget api externa 3

---
 .../integrations/basketProxyVEG/+page.svelte  | 85 +++++++++++++++++++
 .../integrations/f1DataVEG/+page.svelte       |  4 +-
 .../integrations/youtubeDataVEG/+page.svelte  |  2 +-
 index.js                                      | 30 +++++--
 4 files changed, 113 insertions(+), 8 deletions(-)
 create mode 100644 front/src/routes/integrations/basketProxyVEG/+page.svelte

diff --git a/front/src/routes/integrations/basketProxyVEG/+page.svelte b/front/src/routes/integrations/basketProxyVEG/+page.svelte
new file mode 100644
index 0000000..f40644f
--- /dev/null
+++ b/front/src/routes/integrations/basketProxyVEG/+page.svelte
@@ -0,0 +1,85 @@
+<svelte:head>
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+</svelte:head>
+
+<script>
+    import { onMount } from 'svelte';
+    import axios from 'axios';
+    import { dev } from '$app/environment';
+    import { Container, ListGroup, ListGroupItem } from '@sveltestrap/sveltestrap';
+
+    let players = [];
+
+    onMount(async () => {
+        try {
+            let API = 'https://sos2324-14.appspot.com'; 
+            if (dev) API = 'http://localhost:10002'; 
+
+            const response = await axios.get(`${API}/proxyBasketVEG`);
+            players = response.data.results;
+
+            if (players.length > 0) {
+                const chartData = {
+                    labels: players.map(player => player.entity.name),
+                    series: players.map(player => player.score)
+                };
+
+                const options = {
+                    chart: {
+                        type: 'pie',
+                        height: 400
+                    },
+                    labels: chartData.labels,
+                    series: chartData.series,
+                    responsive: [{
+                        breakpoint: 480,
+                        options: {
+                            chart: {
+                                width: 200
+                            },
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }]
+                };
+
+                new ApexCharts(document.querySelector('#chart'), options).render();
+            }
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    });
+</script>
+
+<Container>
+    <h1>Uso Textual/Widget API Externa 3 (Basket API): con proxy</h1>
+    <h5>Detalles de jugadores con nombre "Kevin"</h5>
+    {#if players.length > 0}
+        <ListGroup>
+            {#each players as player}
+                <ListGroupItem>
+                    <p>Nombre: {player.entity.name}</p>
+                    <p>Equipo: {player.entity.team.name}</p>
+                    <p>Posición: {player.entity.position}</p>
+                    <p>Puntuación: {player.score}</p>
+                </ListGroupItem>
+            {/each}
+        </ListGroup>
+    {:else}
+        <p>No hay datos disponibles.</p>
+    {/if}
+
+    <div id="chart"></div>
+</Container>
+
+<style>
+    #chart {
+        margin-top: 20px;
+        width: 100%;
+        height: 400px;
+    }
+</style>
+
+
+
diff --git a/front/src/routes/integrations/f1DataVEG/+page.svelte b/front/src/routes/integrations/f1DataVEG/+page.svelte
index 0642e2b..071b81c 100644
--- a/front/src/routes/integrations/f1DataVEG/+page.svelte
+++ b/front/src/routes/integrations/f1DataVEG/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import axios from 'axios';
 	import { onMount } from 'svelte';
-	import { Container, ListGroup, ListGroupItem } from '@sveltestrap/sveltestrap';
+	import { Container } from '@sveltestrap/sveltestrap';
 
 	let pilotData = [];
 
@@ -69,7 +69,7 @@
 </svelte:head>
 
 <Container>
-    <h1>Integración API Externa 2(F1 Live Motorsport Data)</h1>
+    <h1>Uso Widget API Externa 2(F1 Live Motorsport Data): sin proxy</h1>
     <h5>Clasificación mundial de pilotos por temporada (2024)</h5>
 	<div id="chart"></div>
 
diff --git a/front/src/routes/integrations/youtubeDataVEG/+page.svelte b/front/src/routes/integrations/youtubeDataVEG/+page.svelte
index 3952dfe..9baf935 100644
--- a/front/src/routes/integrations/youtubeDataVEG/+page.svelte
+++ b/front/src/routes/integrations/youtubeDataVEG/+page.svelte
@@ -64,7 +64,7 @@
 </script>
 
 <Container>
-    <h1>Uso API Externa 1 (YouTube Data)</h1>
+    <h1>Uso Textual API Externa 1 (YouTube Data): sin proxy</h1>
     <h5>Detalles de un canal</h5>
     {#if channelDetails}
         <ListGroup>
diff --git a/index.js b/index.js
index ffc6c2c..4f81b38 100644
--- a/index.js
+++ b/index.js
@@ -24,13 +24,24 @@ const PORT = (process.env.PORT || 10002);
 
 app.use(cors());
 
-//Proxy VEG
-app.use("/proxyVEG", function(req,res){
-    var url = "https://sos2324-14.appspot.com/api/v1/youtube-trends";
-    console.log("piped: " + req.url);
-    req.pipe(request(url)).pipe(res);
+
+//Proxy BasketVEG
+app.use("/proxyBasketVEG", function(req, res) {
+    var url = "https://basketapi1.p.rapidapi.com/api/basketball/search/kevin"; // URL de la API de baloncesto
+    console.log("Proxying to: " + url);
+    
+    // Realizar la solicitud a la API de baloncesto
+    request({
+        url: url,
+        qs: req.query, // Pasar los parámetros de la solicitud
+        headers: {
+            'X-RapidAPI-Key': 'c4dcccf12bmshb28d319bf18afe1p17ebd3jsn3d5ff8dfec68',
+            'X-RapidAPI-Host': 'basketapi1.p.rapidapi.com'
+        }
+    }).pipe(res); // Enviar la respuesta de la API de baloncesto de vuelta al cliente
 });
 
+
 //Proxy NRM
 app.use("/proxyNRM", function(req,res){
     var url = "https://sos2324-14.appspot.com/api/v2/ufc-events-data";
@@ -53,6 +64,15 @@ app.listen(PORT,()=>{
     console.log(`Server listening on port ${PORT}.`);
 });
 
+
+
+//Middleware para el proxy de la API VEG (para hacer pruebas)
+app.use("/proxyVEG", function(req, res) {
+    var url = "https://sos2324-14.appspot.com/api/v1/youtube-trends" + req.url;
+    console.log("Proxying to: " + url);
+    req.pipe(request(url)).pipe(res);
+});
+
 // Nicolas Redondo Moreno
 // API v1
 api_NRM(app, dbUfc);