Note_de_frais.html

---
layout: default
---

<div class="home">
  <header class="post-header">
    <h1 class="post-title">Notes de frais</h1>
  </header>
  <ul class="pure-u-1" id="ndf">Loading...</ul>
  <div>
    <button id="downloadAsCSV" style="display: none">Download as CSV</button>
  </div>
  <br />
  <fieldset style="display:none" id="ndfDetailsFieldset">
    <legend>Details</legend>
    <p id="ndfInfosP" class="pure-u-1"></p>
    <table class="pure-table pure-table-horizontal" style="width:100%; margin-bottom:2em">
      <thead>
        <tr>
          <th>Description</th>
          <th>Justificatif</th>
          <th></th>
          <th class="amount">Price</th>
          <th class="amount">TVA</th>
        </tr>
      </thead>
      <tbody id="ndfClaimsTbody"></tbody>
    </table>
    <p class="pure-u-2-5" style="font-style:italic;">À rembourser à <span id="ndfClaimantSpan"></span></p>
    <ul class="pure-u-7-12" style="list-style-type: none; margin-left:0px; border: 1px solid black;" id="ndfSignaturesUl"></ul>
  </fieldset>
</div>
<script src="https://unpkg.com/papaparse@latest/papaparse.min.js"></script>
<script>
  const avatars = new Avatars(Avatars.sprites.identicon);
  window.onload = () => {
    getContent('Note_de_frais')
      .then(ndf => {
        const ndfUl = document.getElementById('ndf');
        ndfUl.textContent = '';
        ndf.forEach(n => {
          if(n.name.endsWith('.json')) {
            const nLi = document.createElement('li');
            const nA = document.createElement('a');
            nA.href = `#${n.name}`;
            nA.textContent = n.name;
            nLi.appendChild(nA);
            ndfUl.appendChild(nLi);
          }
        })
        if(location.hash.substr(1) !== '') {
          return loadNdf();
        }
      })
  };

  function loadNdf() {
    const ndf = location.hash.substr(1);
    let signatures = {};
    let members;
    let noteDeFraisSha;
    let noteDeFrais = {};
    getContent(`Note_de_frais/${ndf}`)
      .then(n => {
        noteDeFraisSha = n.sha;
        noteDeFrais = JSON.parse(b64DecodeUnicode(n.content));
        const ndfDetailsFieldset = document.getElementById('ndfDetailsFieldset');
        ndfDetailsFieldset.style.display = 'block';
        const ndfInfosP = document.getElementById('ndfInfosP');
        ndfInfosP.textContent = noteDeFrais.infos

        const justificatifPromises = [];
        noteDeFrais.claims.forEach(claim => {
          const justificatifSplitted = claim.doc.split('/');
          const justificatifName = justificatifSplitted[justificatifSplitted.length-1];
          justificatifSplitted.pop();
          const justificatifPath = justificatifSplitted.join('/');
          justificatifPromises.push(getContent(justificatifPath));
        })
        return Promise.all(justificatifPromises);
      })
      .then(justificatifs => {
        const ndfClaimsTbody = document.getElementById('ndfClaimsTbody');
        while (ndfClaimsTbody.firstChild) {
          ndfClaimsTbody.removeChild(ndfClaimsTbody.firstChild);
        }

        let total = 0;
        let taxes = 0;
        const entries = [];
        noteDeFrais.claims.forEach((claim, i) => {
          const entry = {
            label: claim.title,
            date: claim.date,
            amount: claim.amount_total,
            vat_amount: claim.amount_taxes,
            proof: `https://bug.builders/${encodeURI(claim.doc)}`,
            description: claim.description,
            issuer: claim.issuer,
            invoice_id: claim.invoice_id,
          }

          entries.push(entry)

          const justificatifSplitted = claim.doc.split('/');
          const justificatifName = justificatifSplitted[justificatifSplitted.length-1];

          const descriptionTd = document.createElement('td');
          const priceTd = document.createElement('td');
          const taxTd = document.createElement('td');
          const justificatifTd = document.createElement('td');
          const shaTd = document.createElement('td');

          descriptionTd.textContent = claim.description;
          const price = claim.amount_total/100;
          const tax = claim.amount_taxes/100;
          priceTd.textContent = price.toLocaleString('fr', currency)
          priceTd.className = 'amount';

          taxTd.className = 'vat_amount';
          taxTd.textContent = tax.toLocaleString('fr', currency)
          const justificatifA = document.createElement('a');
          justificatifA.textContent = justificatifName;
          justificatifA.href = claim.doc;
          justificatifTd.appendChild(justificatifA)
          if(justificatifs[i].find(justificatif => justificatif.name === justificatifName).sha === claim.sha){
            shaTd.textContent = '✔';
          } else {
            shaTd.textContent = '';
          }


          const claimTr = document.createElement('tr');
          claimTr.appendChild(descriptionTd)
          claimTr.appendChild(justificatifTd)
          claimTr.appendChild(shaTd);
          claimTr.appendChild(priceTd);
          claimTr.appendChild(taxTd);

          ndfClaimsTbody.appendChild(claimTr);

          total += claim.amount_total;
          taxes += claim.amount_taxes;
        })

        const asCSV = Papa.unparse(entries);
        document.getElementById('downloadAsCSV').style.display = 'inline';
        document.getElementById('downloadAsCSV').addEventListener('click', () => {
          const csvContent = 'data:text/csv;charset=utf-8;base64,' + btoa(asCSV);

          const linkElem = document.createElement('a');
          linkElem.href = csvContent;
          linkElem.download = ndf.replace('.json', '.csv');

          document.body.appendChild(linkElem);
          linkElem.click();
          document.body.removeChild(linkElem);
        })


        const claimTotalTr = document.createElement('tr');
        claimTotalTr.className = 'pure-table-odd';

        const claimTaxesTr = document.createElement('tr');
        claimTaxesTr.className = 'pure-table-odd';

        const totalTd = document.createElement('td');
        totalTd.colSpan = 3
        totalTd.textContent = 'Total TTC'

        const taxesTd = document.createElement('td');
        taxesTd.colSpan = 4
        taxesTd.textContent = 'Total TVA'

        const totalNTd = document.createElement('td');
        total = total/100;
        totalNTd.className = 'amount';
        totalNTd.textContent = total.toLocaleString('fr', currency);

        const taxesNTd = document.createElement('td');
        taxes = taxes/100;
        taxesNTd.className = 'amount';
        taxesNTd.textContent = taxes.toLocaleString('fr', currency);

        claimTotalTr.appendChild(totalTd);
        claimTotalTr.appendChild(totalNTd);
        claimTotalTr.appendChild(document.createElement('td'));

        claimTaxesTr.appendChild(taxesTd);
        claimTaxesTr.appendChild(taxesNTd);

        ndfClaimsTbody.appendChild(claimTotalTr);
        ndfClaimsTbody.appendChild(claimTaxesTr);

        const ndfClaimantSpan = document.getElementById('ndfClaimantSpan');
        ndfClaimantSpan.textContent = noteDeFrais.claimant;

        return getContent(`Note_de_frais/${ndf}.sig`)
      })
      .then(sigFile => {
        if(typeof(sigFile.content) !== 'undefined') {
          signatures = JSON.parse(b64DecodeUnicode(sigFile.content));
        }
        return getMembers()
      })
      .then(rMembers => {
        members = rMembers;
        const keyPromises = [];
        members.forEach(member => {
          keyPromises.push(getKeys(member.login))
        })
        return Promise.all(keyPromises);
      })
      .then(keys => {
        const signaturePromises = [];
        members.forEach((member, i) => {
          if(member.login in signatures) {
            signaturePromises.push(verify(noteDeFraisSha, keys[i], signatures[member.login]));
          } else {
            signaturePromises.push(Promise.resolve(false));
          }
        })
        return Promise.all(signaturePromises);
      })
      .then(verifications => {
        const ndfSignaturesUl = document.getElementById('ndfSignaturesUl');
        while (ndfSignaturesUl.firstChild) {
          ndfSignaturesUl.removeChild(ndfSignaturesUl.firstChild);
        }
        members.forEach((member, i) => {
          const loginLi = document.createElement('li')
          loginLi.className = 'pure-u-1';
          loginLi.style['padding'] = '0.5em';
          loginLi.style['line-height'] = '60px';
          loginLi.style['font-weight'] = '600';

          if(verifications[i]) {
            const signImg = document.createElement('img');
            signImg.width = 50;

            const svg = avatars.create(signatures[member.login]);
            const svgUri = `data:image/svg+xml;base64,${btoa(svg)}`;
            signImg.src = svgUri;
            const signP = document.createElement('span');
            signP.className = 'pure-u-4-5';
            signP.textContent = `Valid signature by ${member.login}`;
            loginLi.style.color = '#77ce44';
            loginLi.appendChild(signP);
            loginLi.appendChild(signImg);
          } else {
            if(member.login in signatures) {
              loginLi.textContent = `Invalid signature by ${member.login}`;
              loginLi.style.color = '#f95e5e';
            }
            else {
              loginLi.textContent = `Not signed by ${member.login}`;
            }
          }
          ndfSignaturesUl.appendChild(loginLi);
        })

      })
  }
  window.onhashchange = loadNdf;

</script>