JSFiddle - React, Tailwind, and code Playground

by Biduleohm

HTML

<p>
    Drive size: <input type="text" id="drive_size_tb" style="width:20px;" value="1">TB<br />
    Number of drives: <input type="text" id="drives_number" style="width:20px;" value="2"><br />
    RAID type: <select id="raid_type">
        <option value="raidz1">RAID-Z1</option>
        <option value="raidz2">RAID-Z2</option>
        <option value="raidz3">RAID-Z3</option>
        <option value="mirror">Mirror</option>
        <option value="mirror3">3 Drives Mirror</option>
        <option value="mirror4">4 Drives Mirror</option>
        <option value="stripe">Stripe</option>
    </select> (requires at least <span id="min_drives">3</span> drives)
</p>
<br />
<p>
    Drive size: <span id="drive_size_tib">0</span> TiB
</p>
<p>
    Total parity space: <span id="parity_space_tib">0</span> TiB (<span id="parity_space_tb">0</span> TB)<br />
    Total data space: <span id="data_space_tib">0</span> TiB (<span id="data_space_tb">0</span> TB)
</p>
<p>
    Data space minus checksums overhead: <span id="data_space_mcsoh_tib">0</span> TiB (<span id="data_space_mcsoh_tb">0</span> TB)<br />
    Data space minus blocks overhead: <span id="data_space_mboh_tib">0</span> TiB (<span id="data_space_mboh_tb">0</span> TB)
</p>
<p>
    Maximum recommended usable data space: <span id="data_space_maxrec_tib">0</span> TiB (<span id="data_space_maxrec_tb">0</span> TB)
</p>

JavaScript

$(document).ready(function() {
    var tibTbRatio = 0.9095;
    var checksumsOverhead = 0.04;
    var blocksOverhead = 0.08;
    var maxRecommendedUsage = 0.8;

    function round(nbr) {
        var abs = Math.abs(nbr);
        if (abs < 10) {
            return Math.round(nbr * 1000) / 1000;
        } else if (abs < 100) {
            return Math.round(nbr * 100) / 100;
        } else if (abs < 1000) {
            return Math.round(nbr * 10) / 10;
        }
        return Math.round(nbr);
    }

    function toAbsInt(nbr) {
        nbr = parseInt(nbr, 10);
        if (isNaN(nbr)) {
            return 0;
        }
        return Math.abs(nbr);
    }

    $("#drive_size_tb, #drives_number, #raid_type").on('change keyup', function() {
        var driveSizeTb = toAbsInt($("#drive_size_tb").val());
        var drivesNumber = toAbsInt($("#drives_number").val());
        var raidType = $("#raid_type").val();
        if (raidType == "raidz1") {
            $("#min_drives").html("3");
            var parityDrives = 1;
            var dataDrives = drivesNumber - 1;
        } else if (raidType == "raidz2") {
            $("#min_drives").html("4");
            var parityDrives = 2;
            var dataDrives = drivesNumber - 2;
        } else if (raidType == "raidz3") {
            $("#min_drives").html("5");
            var parityDrives = 3;
            var dataDrives = drivesNumber - 3;
        } else if (raidType == "mirror") {
            $("#min_drives").html("2");
            var parityDrives = drivesNumber / 2;
            var dataDrives = parityDrives;
        } else if (raidType == "mirror3") {
            $("#min_drives").html("3");
            var parityDrives = (drivesNumber / 3) * 2;
            var dataDrives = drivesNumber / 3;
        } else if (raidType == "mirror4") {
            $("#min_drives").html("4");
            var parityDrives = (drivesNumber / 4) * 3;
            var dataDrives = drivesNumber / 4;
        } else {
           ...