96 lines
3.2 KiB
Plaintext
96 lines
3.2 KiB
Plaintext
<h2>Single templates</h2>
|
|
|
|
{{ 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({{.}}); --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({{.}}); --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({{.}}); --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({{.}}); --brick-height: calc(var(--d)/5)"
|
|
>
|
|
X
|
|
</div>
|
|
{{ end }}
|
|
|
|
<h2>For each type</h2>
|
|
{{ range .Bricks }}
|
|
<div class="border-2">for {{ .Name }}</div>
|
|
<div
|
|
class="border-2 p-3 flex flex-row gap-x-3"
|
|
style="--brick-color: var({{ .ColorClass }})"
|
|
>
|
|
{{ template "inactiveBrick" .ColorClass }} {{ template "raisedBrick"
|
|
.ColorClass }} {{ template "speakerBrick" .ColorClass }} {{ template
|
|
"markBrick" .ColorClass }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
<h2>Now for BrickData taking parametrized template name</h2>
|
|
{{ define "brick" }}
|
|
{{ if eq .TemplateType "inactiveBrick" }}
|
|
{{ template "inactiveBrick" .ColorClass }}
|
|
{{ else if eq .TemplateType "raisedBrick" }}
|
|
{{template "raisedBrick" .ColorClass }}
|
|
{{ else if eq .TemplateType "speakerBrick"}}
|
|
{{ template "speakerBrick" .ColorClass }}
|
|
{{ else if eq .TemplateType "markBrick" }}
|
|
{{ template "markBrick" .ColorClass }}
|
|
{{ end }}
|
|
{{end}}
|
|
|
|
<h2>Now for a person</h2>
|
|
<p>expected to be called with personData</p>
|
|
{{ define "personBlocks" }}
|
|
|
|
<div class="person-bricks" id="person-{{.Index}}" style="--i: {{ .Index }}">
|
|
{{ range .BricksForPerson }} {{ template "brick" . }} {{ end }}
|
|
<p>{{ .Name }}({{.Index}})</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>
|
|
{{ define "roomPeople" }}
|
|
<div
|
|
class="circle-container relative"
|
|
style="--tan: {{ .Tangens }}; --m: {{ .Total }};"
|
|
>
|
|
{{ with .ArrowData }}
|
|
<svg height="{{.Height}}" width="{{.Width}}"
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<g>
|
|
<rect height="{{.Height}}" width="{{.Width}}" fill="#EEE" />
|
|
<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 }}
|
|
{{ range .Persons }} {{ template "personBlocks" . }} {{ end }}
|
|
</div>
|
|
{{end}}
|