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

Tidy up controller and make sure the different targets are properly separated

Browse Source 
If not, it wouldn't show stalled if there were entropy bubbles in the page
This commit is contained in:
Jorge Manrubia
2025-06-06 09:15:51 +02:00
parent 6287acf5ba
commit f742749b0f
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/controllers/bubble_controller.js
+4 -4
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", "top", "center", "bottom", "stalled" ]
static targets = [ "entropy", "entropyTop", "entropyCenter", "entropyBottom", "stalled", "stalledTop", "stalledCenter", "stalledBottom" ]
static values = { entropy: Object, stalled: Object }
#timer
@@ -47,9 +47,9 @@ export default class extends Controller {
}
#render({ target, top, center, bottom }) {
this.topTarget.innerHTML = top
this.centerTarget.innerHTML = center
this.bottomTarget.innerHTML = 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)
app/views/cards/display/preview/_bubble.html.erb
+6 -6
View File
@@ -10,16 +10,16 @@
<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>
<textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyTop"></textPath>
</text>
</svg>
<span class="bubble__number" data-bubble-target="center"></span>
<span class="bubble__number" data-bubble-target="entropyCenter"></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="bottom"></textPath>
<textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="entropyBottom"></textPath>
</text>
</svg>
</div>
@@ -28,16 +28,16 @@
<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>
<textPath href="#top-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="stalledTop"></textPath>
</text>
</svg>
<span class="bubble__number" data-bubble-target="center"></span>
<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="bottom"></textPath>
<textPath href="#bottom-half" startOffset="50%" dominant-baseline="middle" data-bubble-target="stalledBottom"></textPath>
</text>
</svg>
</div>