skill book extract

skillbook-table.js

const dupStudentCells = $('.allskills-table thead th.student-name').toArray();
const studentCells = dupStudentCells.slice(0, dupStudentCells.length / 2);
const studentNames = studentCells.map(c => c.innerText);
const skillCells = $('.allskills-table .skill-row').toArray()
  .map(row => $(row).find('td').toArray().slice(2));

const isDone = td => $(td).hasClass('done');
const isOngoing = td => $(td).hasClass('ongoing');
const [TO_GAIN, ONGOING, DONE] = ['TO_GAIN', 'ONGOING', 'DONE'];

const getStatus = (cell) => {
  if (isDone(cell)) return DONE;
  if (isOngoing(cell)) return ONGOING;
  return TO_GAIN;
};

const studentStats = studentNames.map((studentName, index) => {
  const studentSkills = skillCells.reduce((carry, row) => {
    const cell = row[index];
    const status = getStatus(cell);
    const skills = [...carry.skills, status];
    const stats = { ...carry.stats, [status]: carry.stats[status] + 1 };
    return { skills, stats };
  }, { skills: [], stats: { TO_GAIN: 0, ONGOING: 0, DONE: 0 } });
  const { skills, stats } = studentSkills;
  return { name: studentName, skills, stats };
});

studentStats.sort((a, b) => {
  if(a.stats.DONE < b.stats.DONE) return -1;
  if(a.stats.DONE > b.stats.DONE) return 1;
  if(a.stats.ONGOING < b.stats.ONGOING) return -1;
  if(a.stats.ONGOING > b.stats.ONGOING) return 1;
  return 0;
});

const toPercent = (num, total) => Math.floor(1000 * num / total) / 10;
const htmlStats = studentStats.map(({ name, skills, stats }) => {
  const done = toPercent(stats.DONE, skills.length);
  const ongoing = toPercent(stats.ONGOING, skills.length);
  const toGain = toPercent(stats.TO_GAIN, skills.length);
  return (
  `<tr>
     <th>${name}</th>
     <td style="background: #afa">${done}%</td>
     <td style="background: #ffa">${ongoing}%</td>
     <td style="background: #faa">${toGain}%</td>
   </tr>`
   );
}).join('\n');
const modal = `
<div class="ui modal">
  <i class="close icon"></i>
  <div class="content">
  <table class="ui celled table">${htmlStats}</table>
  </div>
  <div class="actions">
    <div class="ui positive right labeled icon button">
      OK
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>`;
$('body').append(modal);
$('.main-content').append('<button class="ui button" id="toggle-modal">Stats</button>');
$('#toggle-modal').click(() => $('.ui.modal').modal('show'));