this repo has no description
tangled.org
1{{ define "title" }}new comparison{{ end }}
2
3{{ define "repoContent" }}
4 <section>
5 <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
6 Compare changes
7 </h2>
8 <p>Choose any two refs to compare.</p>
9
10 <form id="compare-form">
11 <div class="flex items-center gap-2 py-4">
12 <div>
13 base:
14
15 <select
16 name="base"
17 id="base-select"
18 class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
19 onchange="triggerCompare()"
20 >
21 <optgroup
22 label="branches ({{ len .Branches }})"
23 class="bold text-sm"
24 >
25 {{ range .Branches }}
26 <option
27 value="{{ .Reference.Name }}"
28 class="py-1"
29 {{ if .IsDefault }}
30 selected
31 {{ end }}
32 >
33 {{ .Reference.Name }}
34 </option>
35 {{ end }}
36 </optgroup>
37 <optgroup
38 label="tags ({{ len .Tags }})"
39 class="bold text-sm"
40 >
41 {{ range .Tags }}
42 <option
43 value="{{ .Reference.Name }}"
44 class="py-1"
45 >
46 {{ .Reference.Name }}
47 </option>
48 {{ else }}
49 <option class="py-1" disabled>
50 no tags found
51 </option>
52 {{ end }}
53 </optgroup>
54 </select>
55 </div>
56
57 {{ i "arrow-left" "w-4 h-4" }}
58
59
60 <div>
61 compare:
62
63 <select
64 name="head"
65 id="head-select"
66 class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
67 onchange="triggerCompare()"
68 >
69 <option value="" selected disabled hidden>
70 select a branch or tag
71 </option>
72 <optgroup
73 label="branches ({{ len .Branches }})"
74 class="bold text-sm"
75 >
76 {{ range .Branches }}
77 <option
78 value="{{ .Reference.Name }}"
79 class="py-1"
80 >
81 {{ .Reference.Name }}
82 </option>
83 {{ end }}
84 </optgroup>
85 <optgroup
86 label="tags ({{ len .Tags }})"
87 class="bold text-sm"
88 >
89 {{ range .Tags }}
90 <option
91 value="{{ .Reference.Name }}"
92 class="py-1"
93 >
94 {{ .Reference.Name }}
95 </option>
96 {{ else }}
97 <option class="py-1" disabled>
98 no tags found
99 </option>
100 {{ end }}
101 </optgroup>
102 </select>
103 </div>
104 </div>
105 </form>
106 </section>
107 <section class="hidden"></section>
108
109 <script>
110 var templatedBase = `{{ .Base }}`;
111 var templatedHead = `{{ .Head }}`;
112 var selectedBase = "";
113 var selectedHead = "";
114
115 document.addEventListener('DOMContentLoaded', function() {
116 if (templatedBase && templatedHead) {
117 const baseSelect = document.getElementById('base-select');
118 const headSelect = document.getElementById('head-select');
119
120 // select the option that matches templated values
121 for(let i = 0; i < baseSelect.options.length; i++) {
122 if(baseSelect.options[i].value === templatedBase) {
123 baseSelect.selectedIndex = i;
124 break;
125 }
126 }
127
128 for(let i = 0; i < headSelect.options.length; i++) {
129 if(headSelect.options[i].value === templatedHead) {
130 headSelect.selectedIndex = i;
131 break;
132 }
133 }
134
135 triggerCompare();
136 }
137 });
138
139 function triggerCompare() {
140 // if user has selected values, use those
141 selectedBase = document.getElementById('base-select').value;
142 selectedHead = document.getElementById('head-select').value;
143
144 const baseToUse = templatedBase && !selectedBase ? templatedBase : selectedBase;
145 const headToUse = templatedHead && !selectedHead ? templatedHead : selectedHead;
146
147 if (baseToUse && headToUse) {
148 const url = `/{{ .RepoInfo.FullName }}/compare/diff/${baseToUse}/${headToUse}`;
149 htmx.ajax('GET', url, { target: '#compare-diff' });
150 }
151 }
152 </script>
153{{ end }}
154
155{{ define "repoAfter" }}
156 <div id="compare-diff"></div>
157{{ end }}