bokoFs/web/components/disks.html

<div id="disk-list">
    <div class="ts-box ts-content disk-info">
        <div class="ts-grid mobile:is-stacked">
            <div class="column is-fluid">
                <div class="ts-item">
                    <div class="ts-header">DiskName</div>
                    <span>Size</span>
                    <span>Status</span>
                </div>
            </div>
            <div class="column is-6-wide">
                <div class="ts-wrap is-middle-aligned">
                    <div class="ts-gauge is-small is-circular">
                        <div class="bar" style="--value: 38">
                            <div class="text">38%</div>
                        </div>
                    </div>
                    <div>
                        <div class="ts-text is-bold">空間</div>
                        19.12 GB / 50 GB
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function humanFileSize(size) {
        var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
        return +((size / Math.pow(1024, i)).toFixed(1)) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
    }

    function loadDiskInfo(){
        $.get("./api/info/list", function(data){
            if (data) {
                var disks = data;
                var diskList = $("#disk-list");
                diskList.empty();
                for (var i = 0; i < disks.length; i++) {
                    var disk = disks[i];
                    $(diskList).append(`<div class="ts-box ts-content has-top-spaced-small disk-info">
                            <div class="ts-grid mobile:is-stacked">
                                <div class="column is-fluid">
                                    <div class="ts-item">
                                        <div class="ts-header">${disk.model}</div>
                                        <div class="ts-text is-description has-top-spaced-small">
                                            ${disk.identifier} 
                                        </div>
                                        <span>/dev/${disk.name} （含 ${disk.partitions.length} 個分割區）</span>
                                    </div>
                                </div>
                                <div class="column is-6-wide">
                                    <div class="ts-wrap is-middle-aligned">
                                        <div class="ts-gauge is-small is-circular">
                                            <div class="bar" style="--value: ${parseInt(disk.used / disk.size * 100)}">
                                                <div class="text">${parseInt(disk.used / disk.size * 100)}%</div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="ts-text is-bold">已使用空間</div>
                                        ${humanFileSize(disk.used)} / ${humanFileSize(disk.size)}
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>`);
                }
            } else {
                console.error("Failed to load disk info: " + data.message);
            }
        });
    }
    loadDiskInfo();
</script>