From 9c5298aebf82b30002365595fed47814a0cae045 Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Sat, 16 Nov 2024 11:10:46 +0000
Subject: [PATCH] Add compact style for monitor widget

---
 docs/configuration.md                         |   8 ++
 .../images/monitor-widget-compact-preview.png | Bin 0 -> 15331 bytes
 internal/assets/static/main.css               |   1 +
 internal/assets/templates.go                  |   1 +
 .../assets/templates/monitor-compact.html     |  39 ++++++++++
 internal/widget/monitor.go                    |  71 ++++++++++--------
 6 files changed, 87 insertions(+), 33 deletions(-)
 create mode 100644 docs/images/monitor-widget-compact-preview.png
 create mode 100644 internal/assets/templates/monitor-compact.html

diff --git a/docs/configuration.md b/docs/configuration.md
index f8221b8..832d035 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -1149,11 +1149,19 @@ You can hover over the "ERROR" text to view more information.
 | Name | Type | Required | Default |
 | ---- | ---- | -------- | ------- |
 | sites | array | yes | |
+| style | string | no | |
 | show-failing-only | boolean | no | false |
 
 ##### `show-failing-only`
 Shows only a list of failing sites when set to `true`.
 
+##### `style`
+Used to change the appearance of the widget. Possible values are `compact`.
+
+Preview of `compact`:
+
+![](images/monitor-widget-compact-preview.png)
+
 ##### `sites`
 
 Properties for each site:
diff --git a/docs/images/monitor-widget-compact-preview.png b/docs/images/monitor-widget-compact-preview.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e81fce8e04b08db3f7ebf85cd17329126cd4705
GIT binary patch
literal 15331
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

literal 0
HcmV?d00001

diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css
index 3c342a0..3268a48 100644
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -1830,6 +1830,7 @@ details[open] .summary::after {
 .list               { --list-half-gap: 0rem; }
 .list-gap-2         { --list-half-gap: 0.1rem; }
 .list-gap-4         { --list-half-gap: 0.2rem; }
+.list-gap-8         { --list-half-gap: 0.4rem; }
 .list-gap-10        { --list-half-gap: 0.5rem; }
 .list-gap-14        { --list-half-gap: 0.7rem; }
 .list-gap-20        { --list-half-gap: 1rem; }
diff --git a/internal/assets/templates.go b/internal/assets/templates.go
index 324f8ca..4834078 100644
--- a/internal/assets/templates.go
+++ b/internal/assets/templates.go
@@ -32,6 +32,7 @@ var (
 	RSSHorizontalCardsTemplate    = compileTemplate("rss-horizontal-cards.html", "widget-base.html")
 	RSSHorizontalCards2Template   = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html")
 	MonitorTemplate               = compileTemplate("monitor.html", "widget-base.html")
+	MonitorCompactTemplate        = compileTemplate("monitor-compact.html", "widget-base.html")
 	TwitchGamesListTemplate       = compileTemplate("twitch-games-list.html", "widget-base.html")
 	TwitchChannelsTemplate        = compileTemplate("twitch-channels.html", "widget-base.html")
 	RepositoryTemplate            = compileTemplate("repository.html", "widget-base.html")
diff --git a/internal/assets/templates/monitor-compact.html b/internal/assets/templates/monitor-compact.html
new file mode 100644
index 0000000..327c978
--- /dev/null
+++ b/internal/assets/templates/monitor-compact.html
@@ -0,0 +1,39 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content" }}
+{{ if not (and .ShowFailingOnly (not .HasFailing)) }}
+<ul class="dynamic-columns list-gap-8">
+    {{ range .Sites }}
+    {{ if and $.ShowFailingOnly (eq .StatusStyle "ok" ) }}{{ continue }}{{ end }}
+    <div class="flex items-center gap-15">
+        {{ template "site" . }}
+    </div>
+    {{ end }}
+</ul>
+{{ else }}
+<div class="flex items-center justify-center gap-10 padding-block-5">
+    <p>All sites are online</p>
+    <svg class="shrink-0" style="width: 1.7rem;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ end }}
+{{ end }}
+
+{{ define "site" }}
+<a class="size-h3 color-highlight text-truncate block grow" href="{{ .URL }}" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
+{{ if not .Status.TimedOut }}<div>{{ .Status.ResponseTime.Milliseconds | formatNumber }}ms</div>{{ end }}
+{{ if eq .StatusStyle "ok" }}
+<div class="monitor-site-status-icon" title="{{ .Status.Code }}">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-positive)">
+        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ else }}
+<div class="monitor-site-status-icon" title="{{ if .Status.Error }}{{ .Status.Error }}{{ else }}{{ .Status.Code }}{{ end }}">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--color-negative)">
+        <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
+    </svg>
+</div>
+{{ end }}
+{{ end }}
diff --git a/internal/widget/monitor.go b/internal/widget/monitor.go
index 14b1d70..f769a4e 100644
--- a/internal/widget/monitor.go
+++ b/internal/widget/monitor.go
@@ -11,37 +11,6 @@ import (
 	"github.com/glanceapp/glance/internal/feed"
 )
 
-func statusCodeToText(status int, altStatusCodes []int) string {
-	if status == 200 || slices.Contains(altStatusCodes, status) {
-		return "OK"
-	}
-	if status == 404 {
-		return "Not Found"
-	}
-	if status == 403 {
-		return "Forbidden"
-	}
-	if status == 401 {
-		return "Unauthorized"
-	}
-	if status >= 400 {
-		return "Client Error"
-	}
-	if status >= 500 {
-		return "Server Error"
-	}
-
-	return strconv.Itoa(status)
-}
-
-func statusCodeToStyle(status int, altStatusCodes []int) string {
-	if status == 200 || slices.Contains(altStatusCodes, status) {
-		return "ok"
-	}
-
-	return "error"
-}
-
 type Monitor struct {
 	widgetBase `yaml:",inline"`
 	Sites      []struct {
@@ -54,8 +23,9 @@ type Monitor struct {
 		StatusStyle             string           `yaml:"-"`
 		AltStatusCodes          []int            `yaml:"alt-status-codes"`
 	} `yaml:"sites"`
-	ShowFailingOnly bool `yaml:"show-failing-only"`
-	HasFailing      bool `yaml:"-"`
+	Style           string `yaml:"style"`
+	ShowFailingOnly bool   `yaml:"show-failing-only"`
+	HasFailing      bool   `yaml:"-"`
 }
 
 func (widget *Monitor) Initialize() error {
@@ -96,5 +66,40 @@ func (widget *Monitor) Update(ctx context.Context) {
 }
 
 func (widget *Monitor) Render() template.HTML {
+	if widget.Style == "compact" {
+		return widget.render(widget, assets.MonitorCompactTemplate)
+	}
+
 	return widget.render(widget, assets.MonitorTemplate)
 }
+
+func statusCodeToText(status int, altStatusCodes []int) string {
+	if status == 200 || slices.Contains(altStatusCodes, status) {
+		return "OK"
+	}
+	if status == 404 {
+		return "Not Found"
+	}
+	if status == 403 {
+		return "Forbidden"
+	}
+	if status == 401 {
+		return "Unauthorized"
+	}
+	if status >= 400 {
+		return "Client Error"
+	}
+	if status >= 500 {
+		return "Server Error"
+	}
+
+	return strconv.Itoa(status)
+}
+
+func statusCodeToStyle(status int, altStatusCodes []int) string {
+	if status == 200 || slices.Contains(altStatusCodes, status) {
+		return "ok"
+	}
+
+	return "error"
+}