This is an old revision of the document!

---

<style>

  table.rekenblok td, table.rekenblok th {
      padding: 4px 8px;
      border: 1px solid #ccc;
      text-align: right;
  }
  table.rekenblok th {
      background-color: #f0f0f0;
  }

</style>

<h2>Spacematrix Rekenblok</h2>

<label>Oppervlak projectgebied (m²): <input id=“opp” type=“number” value=“10000”></label><br> <label>FSI: <input id=“fsi” type=“number” step=“0.01” value=“1.2”></label><br> <label>GSI: <input id=“gsi” type=“number” step=“0.01” value=“0.33”></label><br> <label>% BVO voor voorzieningen: <input id=“voorziening” type=“number” step=“0.01” value=“10”></label><br><br>

<table class=“rekenblok”>

  <thead>
      <tr>
          <th>Type</th>
          <th>% aandeel (van totaal aantal woningen)</th>
          <th>m² BVO / woning</th>
      </tr>
  </thead>
  <tbody id="woningtypes">
      <!-- Dynamisch gevuld via JS -->
  </tbody>

</table> <br> <button onclick=“bereken()”>Bereken</button>

<h3>Resultaat</h3> <div id=“output”></div>

<script>

  const types = [
      "egw sociaal", "egw goedkoop", "egw midden", "egw duur", "egw top",
      "mgw sociaal", "mgw goedkoop", "mgw midden", "mgw duur", "mgw top"
  ];

  const tbody = document.getElementById("woningtypes");
  types.forEach((type, i) => {
      const row = document.createElement("tr");
      row.innerHTML = `
          <td style="text-align: left;">${type}</td>
          <td><input type="number" step="1" id="perc_${i}" value="${i < 5 ? 5 : 10}"></td>
          <td><input type="number" step="1" id="bvo_${i}" value="${i < 5 ? 130 : 90}"></td>
      `;
      tbody.appendChild(row);
  });

  function bereken() {
      const opp = parseFloat(document.getElementById("opp").value);
      const fsi = parseFloat(document.getElementById("fsi").value);
      const voorzieningPerc = parseFloat(document.getElementById("voorziening").value) / 100;

      const laadvermogen = opp * fsi;
      const woonBVO = laadvermogen * (1 - voorzieningPerc);

      let gewogenBVO = 0;
      let totalPerc = 0;
      const details = [];

      for (let i = 0; i < types.length; i++) {
          const perc = parseFloat(document.getElementById(`perc_${i}`).value);
          const bvo = parseFloat(document.getElementById(`bvo_${i}`).value);
          gewogenBVO += (perc / 100) * bvo;
          totalPerc += perc;
          details.push({ type: types[i], perc, bvo });
      }

      if (totalPerc !== 100) {
          document.getElementById("output").innerHTML = `<p style="color:red;">Let op: totaal percentage is ${totalPerc}%, moet 100% zijn.</p>`;
          return;
      }

      const totaalWoningen = Math.round(woonBVO / gewogenBVO);
      let html = `<p><b>Gecorrigeerd laadvermogen (BVO):</b> ${woonBVO.toFixed(0)} m²<br>`;
      html += `<b>Gewogen BVO/ehd:</b> ${gewogenBVO.toFixed(1)} m²<br>`;
      html += `<b>Totaal aantal woningen:</b> ${totaalWoningen}</p>`;

      html += `<table class="rekenblok"><thead><tr><th>Type</th><th>Aantal woningen</th><th>Totale BVO</th></tr></thead><tbody>`;
      details.forEach(({ type, perc, bvo }) => {
          const aant = Math.round((perc / 100) * totaalWoningen);
          const bvoTot = aant * bvo;
          html += `<tr><td style="text-align:left;">${type}</td><td>${aant}</td><td>${bvoTot}</td></tr>`;
      });
      html += "</tbody></table>";

      document.getElementById("output").innerHTML = html;
  }

</script>