103 lines
3.5 KiB
Plaintext
103 lines
3.5 KiB
Plaintext
<h2>Single templates</h2>
|
|
|
|
|
|
{{/* takes in rooms.GestureInfo as parameter */}}
|
|
|
|
{{ define "inactiveBrick" }}
|
|
<div
|
|
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
|
|
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
|
|
></div>
|
|
{{ end }}
|
|
{{ define "raisedBrick" }}
|
|
<div
|
|
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25"
|
|
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
|
|
></div>
|
|
{{ end }}
|
|
{{ define "speakerBrick" }}
|
|
<div
|
|
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/50 shadow-[0_0_15px_rgba(0,_0,_0,_0.5)] shadow-[hsl(var(--brick-color))] animate-pulse"
|
|
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
|
|
></div>
|
|
{{ end }}
|
|
{{ define "markBrick" }}
|
|
<div
|
|
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
|
|
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
|
|
>
|
|
X
|
|
</div>
|
|
{{ end }}
|
|
{{ define "markAndRaisedBrick" }}
|
|
<div
|
|
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
|
|
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
|
|
>
|
|
X
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{/* takes in router.brickState as parameter */}}
|
|
<h2>Now for BrickData taking parametrized template name</h2>
|
|
{{ define "brick" }}
|
|
{{ if eq .TemplateType "inactiveBrick" }}
|
|
{{ template "inactiveBrick" .Gesture.GetGestureInfo }}
|
|
{{ else if eq .TemplateType "raisedBrick" }}
|
|
{{template "raisedBrick" .Gesture.GetGestureInfo }}
|
|
{{ else if eq .TemplateType "speakerBrick"}}
|
|
{{ template "speakerBrick" .Gesture.GetGestureInfo }}
|
|
{{ else if eq .TemplateType "markBrick" }}
|
|
{{ template "markBrick" .Gesture.GetGestureInfo }}
|
|
{{ else if eq .TemplateType "markAndRaisedBrick" }}
|
|
{{ template "markAndRaisedBrick" .Gesture.GetGestureInfo }}
|
|
{{ end }}
|
|
{{end}}
|
|
|
|
<h2>Now for a person</h2>
|
|
<p>expected to be called with personData</p>
|
|
{{ define "personBlocks" }}
|
|
<div class="person-bricks flex flex-col items-center"
|
|
id="person-{{.Index}}" style="--i: {{ .Index }}">
|
|
{{ range .BricksForPerson }} {{ template "brick" . }} {{ end }}
|
|
<p
|
|
{{ if eq 0 .Index }} class="font-bold" {{ end }}
|
|
>{{ .Name }}</p>
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
<h2>And now i'll want to get all persons for a room</h2>
|
|
<p>expected be called with room *roomTableData</p>
|
|
<div class="h-4/5">
|
|
{{ define "roomPeople" }}
|
|
<div
|
|
class="circle-container "
|
|
style="--tan: {{ .Tangens }}; --m: {{ .Total }};"
|
|
>
|
|
{{ with .ArrowData }}
|
|
{{ if .IsVisible }}
|
|
<svg height="{{.Height}}" width="{{.Width}}"
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<g>
|
|
<path
|
|
d="M {{.StartX}} {{.StartY}}
|
|
A {{.Radius}} {{.Radius}} 0, {{.LargeArcFlag}}, 1, {{.EndX}} {{.EndY}}"
|
|
stroke="tomato"
|
|
stroke-width="2"
|
|
fill="transparent"
|
|
/>
|
|
|
|
<line x1="{{.EndX}}" y1="{{.EndY}}" x2="{{.Angle1X}}" y2="{{.Angle1Y}}" stroke="tomato" stroke-width="2" />
|
|
<line x1="{{.EndX}}" y1="{{.EndY}}" x2="{{.Angle2X}}" y2="{{.Angle2Y}}" stroke="tomato" stroke-width="2" />
|
|
</g>
|
|
</svg>
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ range .Persons }} {{ template "personBlocks" . }} {{ end }}
|
|
</div>
|
|
{{end}}
|
|
|
|
</div>
|