refactor: toggling state by same button

This commit is contained in:
efim
2023-11-24 05:13:39 +00:00
parent 4680d96a97
commit 1b91b9f083
3 changed files with 39 additions and 67 deletions

View File

@@ -48,31 +48,19 @@
</div>
{{/* This is personal hand controls */}}
<div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
{{ range .Gestures }}
{{ block "controls" .Gestures }}
{{ range . }}
{{ if not .IsSelected }}
{{/* expects routes.GestureData */}}
{{ block "inactiveButton" . }}
<button
{{ if not .IsSelected }}
hx-get="{{ .Url }}"
hx-swap="outerHTML"
class="bg-white rounded border-[hsl(var(--border-color))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
style="--border-color: var({{.Gesture.GetGestureInfo.Color}});
--text-color: var({{.Gesture.GetGestureInfo.ColorDark}})
">
<img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
class="h-full"
/>
<p class="px-5 text-l">{{ .Gesture.String }} </p>
</button>
{{ end }}
{{ else }}
{{/* expects routes.GestureData */}}
{{ block "activeButton" . }}
<button
hx-get="/rooms/releaseHand?gesture={{ printf "%d" .Gesture}}"
hx-swap="outerHTML"
class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
class="bg-white rounded border-[hsl(var(--color))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
{{ else }}
hx-get="/rooms/releaseHand"
class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
{{ end }}
hx-target="#controls"
style="--color: var({{.Gesture.GetGestureInfo.Color}});
--color-dark: var({{.Gesture.GetGestureInfo.ColorDark}})
">
@@ -81,10 +69,9 @@
/>
<p class="px-5 text-l">{{ .Gesture.String }} </p>
</button>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
</div>
</div>
</main>