kot.pink
1{{ define "repo/fragments/compareForm" }}
2<div id="compare-select">
3 <h2 class="font-bold text-sm mb-2 uppercase dark:text-white">
4 Compare changes
5 </h2>
6 <p>Choose any two refs to compare.</p>
7
8 <form id="compare-form" class="flex items-center gap-2 py-4">
9 <div>
10 <span class="hidden md:inline">base:</span>
11 {{ block "dropdown" (list $ "base" $.Base) }} {{ end }}
12 </div>
13 <span class="flex-shrink-0">
14 {{ i "arrow-left" "w-4 h-4" }}
15 </span>
16 <div>
17 <span class="hidden md:inline">compare:</span>
18 {{ block "dropdown" (list $ "head" $.Head) }} {{ end }}
19 </div>
20 <button
21 id="compare-button"
22 class="btn disabled:opacity-50 disabled:cursor-not-allowed"
23 type="button"
24 hx-boost="true"
25 onclick="
26 const base = document.getElementById('base-select').value;
27 const head = document.getElementById('head-select').value;
28 window.location.href = `/{{$.RepoInfo.FullName}}/compare/${encodeURIComponent(base)}...${encodeURIComponent(head)}`;
29 ">
30 go
31 </button>
32 </form>
33</div>
34<script>
35 const baseSelect = document.getElementById('base-select');
36 const headSelect = document.getElementById('head-select');
37 const compareButton = document.getElementById('compare-button');
38
39 function toggleButtonState() {
40 compareButton.disabled = baseSelect.value === headSelect.value;
41 }
42
43 baseSelect.addEventListener('change', toggleButtonState);
44 headSelect.addEventListener('change', toggleButtonState);
45
46 // Run once on page load
47 toggleButtonState();
48</script>
49{{ end }}
50
51{{ define "dropdown" }}
52{{ $root := index . 0 }}
53{{ $name := index . 1 }}
54{{ $default := index . 2 }}
55 <select name="{{$name}}" id="{{$name}}-select" class="p-1 border max-w-32 md:max-w-64 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
56 <optgroup label="branches ({{ len $root.Branches }})" class="bold text-sm">
57 {{ range $root.Branches }}
58 <option value="{{ .Reference.Name }}" class="py-1" {{if eq .Reference.Name $default}}selected{{end}}>
59 {{ .Reference.Name }}
60 </option>
61 {{ end }}
62 </optgroup>
63 <optgroup label="tags ({{ len $root.Tags }})" class="bold text-sm">
64 {{ range $root.Tags }}
65 <option value="{{ .Reference.Name }}" class="py-1" {{if eq .Reference.Name $default}}selected{{end}}>
66 {{ .Reference.Name }}
67 </option>
68 {{ else }}
69 <option class="py-1" disabled>no tags found</option>
70 {{ end }}
71 </optgroup>
72 </select>
73{{ end }}