DEV Community

marcosblg
marcosblg

Posted on

I replaced three IT spreadsheets with three single-file HTML tools

Every small IT team has the same three spreadsheets: one for the racks, one for the IP addresses and one for the inventory. None of them is ever up to date.

So I built three tools. Each one is a single index.html you open in any browser β€” no server, no database, no account.

RackScope β€” where each device is

Racks with their devices at their real height in U and their real number of ports. Click any port and it tells you where the cable goes: the device, the exact port, the rack, the cable type and your note. Used ports take the colour of their cable, free U are counted for you, and cables can run between rooms.

RackScope

πŸ‘‰ Live demo Β· GitHub

SubnetScope β€” which IP it has

One cell per IP, coloured by state: free, assigned, reserved, DHCP, leased, gateway. VLANs, subnets from /16 to /30 with overlap warnings, dual-stack IPv6 and documented NAT rules. It imports DHCP leases, reservations and pools from MikroTik, Windows Server, pfSense and Kea exports β€” without ever connecting to the server.

SubnetScope

πŸ‘‰ Live demo Β· GitHub

AssetScope β€” what it is and when it expires

It doesn't open on a table, it opens on a traffic light: what has already expired, what expires within 90 days and what is covered β€” warranties, manufacturer support and maintenance contracts. Device records with serial numbers, a fleet report in PDF with the renewal cost of whatever expires this year, and printable QR labels.

AssetScope

πŸ‘‰ Live demo Β· GitHub

Why a single HTML file?

Because the people who need these tools are often not allowed to install a server just to document the network. You double-click the file and it works. Data saves to a JSON file of your own (the File System Access API rewrites it on every change), so it can live on a network share. Each page ships with a Content-Security-Policy of connect-src 'none': the browser itself guarantees nothing leaves your machine.

A few things I learnt along the way

  • QR codes without a library. AssetScope's labels use a QR encoder written from scratch inside the HTML (byte mode, error correction M). Keeping the payload short β€” inventory number, name, model, serial β€” made each module about 20 % bigger, and the labels became readable from much further away.
  • Importing "real" Excel files. Spanish Excel saves CSV with ;, in Windows-1252, with a title row on top and prices like 1.150,00 €. The importer looks for the header row, detects the encoding and recognises Spanish and English column names.
  • Translating without touching the app code. The apps are written in Spanish. A small MutationObserver swaps every on-screen string for its English version as it's rendered, and an EN / ES button lets you switch.

All three are open source (AGPL-3.0) and work in English and Spanish. The live demos open with sample data, so you can try them in ten seconds.

What would you add? Feature requests are very welcome in the GitHub issues β€” most of what people have asked for so far is already in.

Top comments (1)

Collapse
 
aaaasds profile image
DEV VERIFY πŸ‘‡ •

tr.ee/dev-to