Move system in single line on large screens
This commit is contained in:
Florian Hoss
parent
5e341732a8
commit
85d284accb
10 changed files with 42 additions and 52 deletions
|
|
@ -6,9 +6,9 @@ import (
|
|||
)
|
||||
|
||||
func (server *Server) setupRouter() {
|
||||
server.Router.Get("/", launchpad)
|
||||
server.Router.Get("/", goDash)
|
||||
server.Router.Get("/ws", webSocket)
|
||||
|
||||
|
||||
server.serveStatic("static")
|
||||
server.serveStatic("storage/icons")
|
||||
|
||||
|
|
|
|||
|
|
@ -19,14 +19,16 @@ type launchpadInformation struct {
|
|||
System system.System
|
||||
}
|
||||
|
||||
func launchpad(w http.ResponseWriter, r *http.Request) {
|
||||
func goDash(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
files.ParseAndServeHtml(w, "index.gohtml", launchpadInformation{
|
||||
context := launchpadInformation{
|
||||
Title: "GoDash",
|
||||
Bookmarks: bookmark.Bookmarks,
|
||||
Weather: weather.CurrentWeather,
|
||||
System: system.Sys,
|
||||
})
|
||||
}
|
||||
context.System.Live.Uptime.SecondsPercent = float32(context.System.Live.Uptime.Seconds) / 60 * 100
|
||||
files.ParseAndServeHtml(w, "index.gohtml", context)
|
||||
}
|
||||
|
||||
func webSocket(w http.ResponseWriter, r *http.Request) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
@apply bg-primary-content h-1 rounded-full mt-1;
|
||||
}
|
||||
.system-icon {
|
||||
@apply h-8 w-8 shrink-0 mr-3;
|
||||
@apply h-8 w-8 shrink-0 mr-3 opacity-90;
|
||||
}
|
||||
.extra-icon {
|
||||
@apply h-3 w-3 shrink-0 mr-2;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const systemRamPercentage = document.getElementById("systemRamPercentage");
|
|||
const systemRamValue = document.getElementById("systemRamValue");
|
||||
const systemDiskPercentage = document.getElementById("systemDiskPercentage");
|
||||
const systemDiskValue = document.getElementById("systemDiskValue");
|
||||
const systemUptimePercentage = document.getElementById("systemUptimePercentage");
|
||||
const uptimeDays = document.getElementById("uptimeDays");
|
||||
const uptimeHours = document.getElementById("uptimeHours");
|
||||
const uptimeMinutes = document.getElementById("uptimeMinutes");
|
||||
|
|
@ -58,6 +59,7 @@ function replaceSystem(parsed) {
|
|||
systemRamValue.innerText = parsed.ram.value;
|
||||
systemDiskPercentage.style = "width:" + parsed.disk.percentage + "%";
|
||||
systemDiskValue.innerText = parsed.disk.value;
|
||||
systemUptimePercentage.style = "width:" + (parsed.uptime.seconds / 60) * 100 + "%";
|
||||
uptimeDays.style = "--value:" + parsed.uptime.days;
|
||||
uptimeHours.style = "--value:" + parsed.uptime.hours;
|
||||
uptimeMinutes.style = "--value:" + parsed.uptime.minutes;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import (
|
|||
"github.com/shirou/gopsutil/v3/disk"
|
||||
"math"
|
||||
"strconv"
|
||||
"strings"
|
||||
)
|
||||
|
||||
func staticDisk() Disk {
|
||||
|
|
@ -26,10 +25,6 @@ func (s *System) liveDisk() {
|
|||
if err != nil {
|
||||
return
|
||||
}
|
||||
used := d.Used
|
||||
s.Live.Disk.Value = humanize.IBytes(d.Used)
|
||||
if strings.HasSuffix(s.Live.Disk.Value, strings.Split(s.Static.Disk.Total, " ")[1]) {
|
||||
s.Live.Disk.Value = strings.Split(s.Live.Disk.Value, " ")[0]
|
||||
}
|
||||
s.Live.Disk.Percentage = math.RoundToEven(percent.PercentOfFloat(float64(used), float64(d.Total)))
|
||||
s.Live.Disk.Percentage = math.RoundToEven(percent.PercentOfFloat(float64(d.Used), float64(d.Total)))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import (
|
|||
"github.com/dustin/go-humanize"
|
||||
"github.com/shirou/gopsutil/v3/mem"
|
||||
"math"
|
||||
"strings"
|
||||
)
|
||||
|
||||
func staticRam() Ram {
|
||||
|
|
@ -28,10 +27,6 @@ func (s *System) liveRam() {
|
|||
if err != nil {
|
||||
return
|
||||
}
|
||||
used := r.Used
|
||||
s.Live.Ram.Value = humanize.IBytes(r.Used)
|
||||
if strings.HasSuffix(s.Live.Ram.Value, strings.Split(s.Static.Ram.Total, " ")[1]) {
|
||||
s.Live.Ram.Value = strings.Split(s.Live.Ram.Value, " ")[0]
|
||||
}
|
||||
s.Live.Ram.Percentage = math.RoundToEven(percent.PercentOfFloat(float64(used), float64(r.Total)))
|
||||
s.Live.Ram.Percentage = math.RoundToEven(percent.PercentOfFloat(float64(r.Used), float64(r.Total)))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,10 +17,11 @@ type LiveInformation struct {
|
|||
}
|
||||
|
||||
type Uptime struct {
|
||||
Days uint64 `json:"days"`
|
||||
Hours uint64 `json:"hours"`
|
||||
Minutes uint64 `json:"minutes"`
|
||||
Seconds uint64 `json:"seconds"`
|
||||
Days uint64 `json:"days"`
|
||||
Hours uint8 `json:"hours"`
|
||||
Minutes uint8 `json:"minutes"`
|
||||
Seconds uint8 `json:"seconds"`
|
||||
SecondsPercent float32 `json:"seconds_percent"`
|
||||
}
|
||||
|
||||
type CPU struct {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ func (s *System) uptime() {
|
|||
return
|
||||
}
|
||||
s.Live.Uptime.Days = i.Uptime / 84600
|
||||
s.Live.Uptime.Hours = (i.Uptime % 86400) / 3600
|
||||
s.Live.Uptime.Minutes = ((i.Uptime % 86400) % 3600) / 60
|
||||
s.Live.Uptime.Seconds = ((i.Uptime % 86400) % 3600) % 60
|
||||
s.Live.Uptime.Hours = uint8((i.Uptime % 86400) / 3600)
|
||||
s.Live.Uptime.Minutes = uint8(((i.Uptime % 86400) % 3600) / 60)
|
||||
s.Live.Uptime.Seconds = uint8(((i.Uptime % 86400) % 3600) % 60)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,14 +50,14 @@
|
|||
d="M16 11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V9.51c0-.418.105-.83.305-1.197l2.472-4.531A1.5 1.5 0 0 1 4.094 3h7.812a1.5 1.5 0 0 1 1.317.782l2.472 4.53c.2.368.305.78.305 1.198V11zM3.655 4.26 1.592 8.043C1.724 8.014 1.86 8 2 8h12c.14 0 .276.014.408.042L12.345 4.26a.5.5 0 0 0-.439-.26H4.094a.5.5 0 0 0-.44.26zM1 10v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="power" viewBox="0 0 16 16">
|
||||
<path fill="currentColor" d="M7.5 1v7h1V1h-1z" />
|
||||
<path fill="currentColor" d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z" />
|
||||
</symbol>
|
||||
<symbol id="server" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h1v2H2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-1V7h1a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm.5 3a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm2 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-2 7a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm2 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zM12 7v2H4V7h8z"
|
||||
d="M11.5 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5Zm2 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5Zm-10 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6ZM5 3a1 1 0 0 0-1 1h-.5a.5.5 0 0 0 0 1H4v1h-.5a.5.5 0 0 0 0 1H4a1 1 0 0 0 1 1v.5a.5.5 0 0 0 1 0V8h1v.5a.5.5 0 0 0 1 0V8a1 1 0 0 0 1-1h.5a.5.5 0 0 0 0-1H9V5h.5a.5.5 0 0 0 0-1H9a1 1 0 0 0-1-1v-.5a.5.5 0 0 0-1 0V3H6v-.5a.5.5 0 0 0-1 0V3Zm0 1h3v3H5V4Zm6.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-2Z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M1 2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 9H1V8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6H1V5H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 2H1Zm1 11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v11Z"
|
||||
/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ if .System.Static.CPU.Name }}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-8 md:mb-12 select-none">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-8 md:mb-12 select-none">
|
||||
<div class="flex items-center">
|
||||
<svg class="system-icon">
|
||||
<use xlink:href="#cpu"></use>
|
||||
|
|
@ -77,6 +77,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<svg class="system-icon">
|
||||
<use xlink:href="#disk"></use>
|
||||
|
|
@ -93,33 +94,27 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center ">
|
||||
<div class="flex items-center">
|
||||
<svg class="system-icon">
|
||||
<use xlink:href="#power"></use>
|
||||
<use xlink:href="#server"></use>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="flex gap-3 text-normal md:text-xl">
|
||||
<div>
|
||||
<span class="countdown font-mono"><span id="uptimeDays" style="--value:{{ .System.Live.Uptime.Days }};"></span></span> days
|
||||
</div>
|
||||
<div>
|
||||
<span class="countdown font-mono"><span id="uptimeHours" style="--value:{{ .System.Live.Uptime.Hours }};"></span></span> hours
|
||||
</div>
|
||||
<div>
|
||||
<span class="countdown font-mono"><span id="uptimeMinutes" style="--value:{{ .System.Live.Uptime.Minutes }};"></span></span> min
|
||||
</div>
|
||||
<div>
|
||||
<span class="countdown font-mono"><span id="uptimeSeconds" style="--value:{{ .System.Live.Uptime.Seconds }};"></span></span> sec
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full truncate">
|
||||
<div class="flex items-center gap-5 text-xs">
|
||||
<div class="flex items-center">
|
||||
<svg class="extra-icon">
|
||||
<use xlink:href="#server"></use>
|
||||
</svg>
|
||||
<div class="truncate">
|
||||
<div class="text-primary">{{ .System.Static.Host.Architecture }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 truncate">
|
||||
<div class="truncate">
|
||||
<span class="countdown"><span id="uptimeDays" style="--value:{{ .System.Live.Uptime.Days }};"></span> days</span>
|
||||
<span class="countdown"><span id="uptimeHours" style="--value:{{ .System.Live.Uptime.Hours }};"></span> hours</span>
|
||||
<span class="countdown"><span id="uptimeMinutes" style="--value:{{ .System.Live.Uptime.Minutes }};"></span> min</span>
|
||||
<span class="countdown"><span id="uptimeSeconds" style="--value:{{ .System.Live.Uptime.Seconds }};"></span> sec</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-bar-wrapper">
|
||||
<div id="systemUptimePercentage" class="progress-bar" style="width: {{ .System.Live.Uptime.SecondsPercent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue