Skip to content

Instantly share code, notes, and snippets.

@Delivator

Delivator/disk-usage.php

Last active December 19, 2018 22:06
Show Gist options
  • Save Delivator/e007389d89e034c34416dc66dcac94bb to your computer and use it in GitHub Desktop.
Save Delivator/e007389d89e034c34416dc66dcac94bb to your computer and use it in GitHub Desktop.
Download ZIP
materialize based dashboard for my bananapi-nas
Raw
disk-usage.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Disk Usage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="material-icons.css" rel="stylesheet">
<link rel="stylesheet" href="materialize.min.css">
<style>
body {
margin-top: 3rem;
font-size: 125%;
}
.progress {
margin-top: 2rem;
}
.material-icons {
vertical-align: middle;
}
</style>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#263238">
</head>
<body class="blue-grey darken-4">
<div class="container">
<div class="row">
<div class="col xl6 offset-xl3 s12 m8 offset-m2">
<div class="card white-text blue-grey darken-3">
<div class="card-content">
<span class="card-title">Disk Usage</span>
<table>
<tr>
<th>Total <i class="material-icons">storage</i></th>
<th>Used <i class="material-icons">pie_chart</i></th>
<th>Free</th>
</tr>
<tr>
<td id="total">-/-</td>
<td id="used">-/-</td>
<td id="free">-/-</td>
</tr>
</table>
<div class="progress tooltipped " data-position="bottom">
<div id="progress" class="determinate" style="width: 70%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="materialize.min.js"></script>
<script>
const output = "<?php print_r(exec("df -h | grep sda1")); ?>";
const data = output.replace(/\s+/g,' ').trim().split(" ");
document.getElementById("total").innerHTML = data[1];
document.getElementById("used").innerHTML = `${data[2]} (${data[4]})`;
document.getElementById("free").innerHTML = data[3];
document.getElementById("progress").style = `width: ${data[4]}`;
document.addEventListener("DOMContentLoaded", (e) => {
M.Tooltip.init(document.querySelectorAll(".tooltipped"), {html: `${data[3]} / ${data[1]} Free, ${data[2]} (${data[4]}) Used`});
});
</script>
</body>
</html>
@Delivator
Copy link
Author

Screenshot

Screenshot

Screenshot when mouse hover

Screenshot when mouse hover

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment