Skip to content

Commit

Permalink
Merge pull request #56 from fedecarboni7/ui-ux-updates
Browse files Browse the repository at this point in the history 
fix: Update team skills table and radar chart when swapping players
  • Loading branch information
@fedecarboni7
fedecarboni7 authored Aug 28, 2024
2 parents 8617fef + cc32e12 commit 0ef51bb
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 39 deletions.
60 changes: 29 additions & 31 deletions static/js/script-v1.0.4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -526,15 +526,15 @@ function compartirEquipos(button) {

// Mostrar u ocultar detalles de los equipos
function toggleStats(button) {
const container = button.parentNode.nextElementSibling;
const contentContainer = button.parentNode.nextElementSibling;
const textSpan = button.querySelector('span');

if (container.style.display === "none" || container.style.display === "") {
container.style.display = "flex";
if (contentContainer.style.display === "none" || contentContainer.style.display === "") {
contentContainer.style.display = "flex";
textSpan.textContent = "Ocultar detalles";
createRadarChart(container);
createRadarChart(contentContainer);
} else {
container.style.display = "none";
contentContainer.style.display = "none";
textSpan.textContent = "Mostrar detalles";
}
}
Expand Down Expand Up @@ -579,22 +579,24 @@ function swapPlayer(player, fromTeamIndex, toTeamIndex) {
toTeamList.appendChild(newPlayerElement);
}

// Actualizar la tabla de habilidades
updateSkillsTable(fromTeamIndex, toTeamIndex);

// Actualizar el gráfico de radar
var container = document.querySelector('.chart-container').parentElement;
createRadarChart(container);
}

function updateSkillsTable(fromTeamIndex, toTeamIndex) {
// Definir equipo 1 y equipo 2
var team1Index = fromTeamIndex;
var team2Index = toTeamIndex;
if (fromTeamIndex > toTeamIndex) {
team1Index = toTeamIndex;
team2Index = fromTeamIndex;
}

// Actualizar la tabla de habilidades
updateSkillsTable(team1Index, team2Index);

// Actualizar el gráfico de radar
var containerNumber = Math.floor(team1Index / 2) + 1;
var contentContainer = document.getElementById('content-container' + containerNumber);
createRadarChart(contentContainer);
}

function updateSkillsTable(team1Index, team2Index) {
team1List = document.querySelector(`.team-list[data-index='${team1Index}']`);
team2List = document.querySelector(`.team-list[data-index='${team2Index}']`);

Expand All @@ -610,8 +612,9 @@ function updateSkillsTable(fromTeamIndex, toTeamIndex) {
var team1Skills = getTeamSkills(team1Players);
var team2Skills = getTeamSkills(team2Players);

// Actualizar la tabla de habilidades id = "skills-table"
var table = document.getElementById("skills-table");
// Actualizar la tabla específica de habilidades que representa la comparación de ambos equipos
var tableNumber = Math.floor(team1Index / 2) + 1;
var table = document.getElementById("skills-table" + tableNumber);
var rows = table.querySelectorAll("tbody tr");
var skills = ["velocidad", "resistencia", "control", "pases", "tiro", "defensa", "habilidad_arquero", "fuerza_cuerpo", "vision", "total"];
for (var i = 0; i < skills.length; i++) {
Expand Down Expand Up @@ -652,22 +655,17 @@ function getTeamSkills(players) {
return skills;
}

let radarChart; // Variable global para almacenar el gráfico
let radarCharts = {}; // Objeto global para almacenar gráficos por número de contenedor

// Crear gráfico de radar
function createRadarChart(container) {
const tableContainer = container.querySelector('.table-container');
const chartContainer = container.querySelector('.chart-container');
function createRadarChart(contentContainer) {
const tableContainer = contentContainer.querySelector('.table-container');
const chartContainer = contentContainer.querySelector('.chart-container');
const canvas = chartContainer.querySelector('canvas');
const contenedor = document.getElementById('resultados-equipos' + 1);
const listasJugadores = contenedor.querySelectorAll('li');
const resultadosEquiposContainer = document.getElementById('resultados-equipos1');
const listasJugadores = resultadosEquiposContainer.querySelectorAll('li');
const cantidadJugadores = Math.floor(listasJugadores.length / 2);

// Asignar un ID único al canvas si no tiene uno
if (!canvas.id) {
canvas.id = 'radarChart' + Math.floor(Math.random() * 1000);
}

const containerNumber = parseInt(contentContainer.id.replace('content-container', ''));
const ctx = canvas.getContext('2d');

// Obtén los datos de la tabla
Expand All @@ -681,12 +679,12 @@ function createRadarChart(container) {
team2Data.pop();

// Destruir el gráfico existente si ya existe
if (radarChart) {
radarChart.destroy();
if (radarCharts[containerNumber]) {
radarCharts[containerNumber].destroy();
}

// Create the new radar chart
radarChart = new Chart(ctx, {
radarCharts[containerNumber] = new Chart(ctx, {
type: 'radar',
data: {
labels: skills,
Expand Down
16 changes: 8 additions & 8 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,23 +164,23 @@ <h1>Armar Equipos</h1>
<div class="team-container" id="resultados-equipos{{ i // 2 + 1 }}">
<div class="team">
<h2>Equipo 1</h2>
<ul class="team-list" data-team="team1" data-index="{{ i // 2 + 1 }}">
<ul class="team-list" data-index="{{ i }}">
{% for player in teams[i][0] %}
<li class="player-item">
<span class="player-name">{{ player }}</span>
<button type="button" class="swap-button" onclick="swapPlayer('{{ player }}', '{{ i // 2 + 1 }}', '{{ i // 2 + 2 }}')"><i class="fa-solid fa-right-left"></i></button>
<button type="button" class="swap-button" onclick="swapPlayer('{{ player }}', '{{ i }}', '{{ i + 1 }}')"><i class="fa-solid fa-right-left"></i></button>
</li>
{% endfor %}
</ul>
</div>

<div class="team">
<h2>Equipo 2</h2>
<ul class="team-list" data-team="team2" data-index="{{ i // 2 + 2 }}">
<ul class="team-list" data-index="{{ i + 1 }}">
{% for player in teams[i + 1][0] %}
<li class="player-item">
<span class="player-name">{{ player }}</span>
<button type="button" class="swap-button" onclick="swapPlayer('{{ player }}', '{{ i // 2 + 2 }}', '{{ i // 2 + 1 }}')"><i class="fa-solid fa-right-left"></i></button>
<button type="button" class="swap-button" onclick="swapPlayer('{{ player }}', '{{ i + 1 }}', '{{ i }}')"><i class="fa-solid fa-right-left"></i></button>
</li>
{% endfor %}
</ul>
Expand All @@ -192,13 +192,13 @@ <h2>Equipo 2</h2>
<i class="fas fa-chart-bar" style="padding-right: 5px;"></i>
<span>Mostrar detalles</span>
</button>
<button type="button" id="shareButton{{ i // 2 + 1 }}" onclick="compartirEquipos(this)">
<button type="button" id="shareButton{{ i // 2 + 1 }}" onclick="compartirEquipos(this)">
<i class="fas fa-share" style="padding-right: 5px;"></i> Enviar equipos
</button>
</div>
<div class="content-container" style="display: none;">
<div class="content-container" id="content-container{{ i // 2 + 1 }}" style="display: none;">
<div class="table-container">
<table id="skills-table">
<table id="skills-table{{ i // 2 + 1 }}">
<thead>
<tr>
<th>Habilidad</th>
Expand All @@ -223,7 +223,7 @@ <h2>Equipo 2</h2>
</table>
</div>
<div class="chart-container">
<canvas id="radarChart"></canvas>
<canvas></canvas>
</div>
</div>
</div>
Expand Down

0 comments on commit 0ef51bb

Please sign in to comment.