bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify since the design is identical

Browse Source
This commit is contained in:
Jorge Manrubia
2025-06-06 09:19:51 +02:00
parent f742749b0f
commit 15d3c0e724
2 changed files with 18 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/controllers/bubble_controller.js
+5 -11
View File
@@ -4,7 +4,7 @@ import { signedDifferenceInDays } from "helpers/date_helpers"
const REFRESH_INTERVAL = 3_600_000 // 1 hour (in milliseconds)
export default class extends Controller {
static targets = [ "entropy", "entropyTop", "entropyCenter", "entropyBottom", "stalled", "stalledTop", "stalledCenter", "stalledBottom" ]
static targets = [ "entropy", "stalled", "top", "center", "bottom" ]
static values = { entropy: Object, stalled: Object }
#timer
@@ -39,21 +39,16 @@ export default class extends Controller {
#showEntropy() {
this.#render({
target: "entropy",
top: this.#entropyCleanupInDays < 1 ? this.entropyValue.action : `${this.entropyValue.action} in`,
center: this.#entropyCleanupInDays < 1 ? "!" : this.#entropyCleanupInDays,
bottom: this.#entropyCleanupInDays < 1 ? "Today" : (this.#entropyCleanupInDays === 1 ? "day" : "days"),
})
}
#render({ target, top, center, bottom }) {
this[`${target}TopTarget`].innerHTML = top
this[`${target}CenterTarget`].innerHTML = center
this[`${target}BottomTarget`].innerHTML = bottom
const entropyTarget = target === "entropy"
this.entropyTarget.toggleAttribute("hidden", !entropyTarget)
this.stalledTarget.toggleAttribute("hidden", entropyTarget)
#render({ top, center, bottom }) {
this.topTarget.innerHTML = top
this.centerTarget.innerHTML = center
this.bottomTarget.innerHTML = bottom
this.#show()
}
@@ -64,7 +59,6 @@ export default class extends Controller {
#showStalled() {
this.#render({
target: "stalled",
top: "Stalled for",
center: signedDifferenceInDays(new Date(this.stalledValue.lastActivitySpikeAt), new Date()),
bottom: "days"
app/views/cards/display/preview/_bubble.html.erb
+13 -33
View File
@@ -6,39 +6,19 @@
bubble_stalled_value: stalled_bubble_options_for(card)&.to_json
} do %>
<div data-bubble-target="entropy">
<svg viewBox="0 0 200 100">
<path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100"/>
<text text-anchor="middle" fill="currentColor">
<textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyTop"></textPath>
</text>
</svg>
<svg viewBox="0 0 200 100">
<path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100"/>
<text text-anchor="middle" fill="currentColor">
<textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="top"></textPath>
</text>
</svg>
<span class="bubble__number" data-bubble-target="entropyCenter"></span>
<span class="bubble__number" data-bubble-target="center"></span>
<svg viewBox="0 0 200 100">
<path id="bottom-half" d="M 20,0 A 80,80 0 0,0 180,0" fill="transparent"/>
<text text-anchor="middle" fill="currentColor">
<textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyBottom"></textPath>
</text>
</svg>
</div>
<div data-bubble-target="stalled">
<svg viewBox="0 0 200 100">
<path id="top-half" fill="transparent" d="M 20,100 A 80,80 0 0,1 180,100"/>
<text text-anchor="middle" fill="currentColor">
<textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="stalledTop"></textPath>
</text>
</svg>
<span class="bubble__number" data-bubble-target="stalledCenter"></span>
<svg viewBox="0 0 200 100">
<path id="bottom-half" d="M 20,0 A 80,80 0 0,0 180,0" fill="transparent"/>
<text text-anchor="middle" fill="currentColor">
<textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="stalledBottom"></textPath>
</text>
</svg>
</div>
<svg viewBox="0 0 200 100">
<path id="bottom-half" d="M 20,0 A 80,80 0 0,0 180,0" fill="transparent"/>
<text text-anchor="middle" fill="currentColor">
<textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="bottom"></textPath>
</text>
</svg>
<% end %>