internal/gaby/tmpl/actionlog.tmpl - oscar - Git at Google

 <!--
 Copyright 2024 The Go Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
 <!doctype html>
 <html>
   {{template "head" .}}
   <body>
     <div class="section" id="header">
       {{template "nav-title" .}}
       <p>All times are in <span id="tz"></span>.</p>
       <script>
         var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         document.getElementById("tz").innerHTML = timezone;
       </script>
       {{template "actionlog-form" .}}
     </div>
     {{template "actionlog-result" .}}
    </body>
 </html>

 {{define "dur-unit"}}
   <option value="minutes"{{if eq . "minutes"}} selected{{end}}>minutes</option>
   <option value="hours"{{if eq . "hours"}} selected{{end}}>hours</option>
   <option value="days"{{if eq . "days"}} selected{{end}}>days</option>
   <option value="weeks"{{if eq . "weeks"}} selected{{end}}>weeks</option>
 {{end}}

 {{define "actionlog-form"}}
 <form id="form" action="{{.ID.Endpoint}}" method="GET">
   <input type="hidden" id="form-tz" name="timezone" value=""/>
   <script>
     document.getElementById("form-tz").setAttribute("value", timezone);
   </script>
   <span>
     <label for="filter">Filter</label>
     <input id="filter" type="text" size=75 name="filter" value="{{.Filter}}"/>
   </span>
   <div style="font-size: smaller; margin-top: 0.5rem; margin-bottom: 1rem">
     Examples: <code>Kind:Fixer</code>, <code>RequiresApproval=true</code><br/>
     Case matters. Boolean fields must be compared with <code>=true</code> or <code>=false</code>.
     OR, AND and NOT must be in all caps.<br/>
     See <a href="https://google.aip.dev/160">AIP 160</a> for more.
   </div>
   <table>
     <tr>
       <td>
         {{- /* Resist the temptation to factor out the endpoint controls into
               a single template. That will require that id values are substituted
               in, which causes safehtml to complain that they aren't safe identifiers.
               It ends up being more complicated than it's worth.
         */ -}}
         <fieldset>
           <legend>Start</legend>
           <div>
             <input type="radio" name="start" id="start-fixed" value="fixed"
               {{if eq .Start.Radio "fixed"}}checked{{end}}/>
             <label for="start-fixed">Beginning</label>
           </div>
           <div>
             <input type="radio" name="start" id="start-dur" value="dur"
               {{if eq .Start.Radio "dur"}}checked{{end}}/>
             <input type="text" id="start-dur" size="4" name="start-dur-num" value="{{.Start.DurNum}}" autofocus/>
               <select name="start-dur-unit">
                 {{template "dur-unit" .Start.DurUnit}}
               </select>
             <label for="start-dur">before end</label>
           </div>
           <div>
             <input type="radio" name="start" id="start-date" value="date"
               {{if eq .Start.Radio "date"}}checked{{end}}/>
             <label for="start-date">From</label>
             <input type="datetime-local" name="start-date" value="{{.Start.Date}}"/>
           </div>
         </fieldset>
       </td>

       <td>
         <fieldset>
           <legend>End</legend>
           <div>
             <input type="radio" name="end" id="end-fixed" value="fixed"
               {{if eq .End.Radio "fixed"}}checked{{end}}/>
             <label for="end-fixed">End</label>
           </div>
           <div>
             <input type="radio" name="end" id="end-dur" value="dur"
               {{if eq .End.Radio "dur"}}checked{{end}}/>
               <input type="text" id="end-dur" size="4" name="end-dur-num" value="1" autofocus/>
               <select name="end-dur-unit">
                 {{template "dur-unit" .End.DurUnit}}
               </select>
             <label for="end-dur">after start</label>
           </div>
           <div>
             <input type="radio" name="end" id="end-date" value="date"
               {{if eq .End.Radio "date"}}checked{{end}}/>
             <label for="end-date">To</label>
             <input type="datetime-local" name="end-date" value="{{.End.Date}}"ga/>
           </div>
         </fieldset>
       </td>

       <td> {{template "submit" .}} </td>
     </tr>
   </table>
 </form>
 {{end}}

 {{define "actionlog-result"}}
 <script>
   // Toggle the hidden state of a row containing the action.
   // Also change the button label accordingly.
   function toggleAction(event) {
     let row = document.getElementById(event.target.dataset.rowid);
     row.hidden = !row.hidden;
     // event.target is the button.
     event.target.value = row.hidden? 'Show': 'Hide';
   }
 </script>

 {{if .StartTime}}
 <div class="section" id="result">
   <h2>Action Log from {{.StartTime}} to {{.EndTime}}</h2>

   {{with .Entries}}
   <table style="max-width:100%">
     <thead>
       <tr>
         <th>Created</th>
         <th>Kind</th>
         <th>Key</th>
         <th>Action</th>
         <th>Approval Req</th>
         <th>Approved</th>
         <th>Done</th>
         <th>Result</th>
         <th>Error</th>
       </tr>
     </thead>
     {{range $i, $e := .}}
       <tr>
         <td>{{$e.Created | fmttime}}</td>
         <td>{{$e.Kind}}</td>
         <td>{{$e.Key | fmtkey}}</td>
         <td>
           {{- /* clicking the button shows/hides the action on the following row */ -}}
           <input type="button" value="Show"
                   data-rowid="id-action-{{$i}}"
                   onclick="toggleAction(event)"/>
         </td>
         <td>{{$e.ApprovalRequired}}</td>
         <td>{{$e.Approved}}</td>
         <td>{{$e.Done | fmttime}}</td>
         <td><pre class="wrap">{{$e.Result | fmtval}}</pre></td>
         <td>{{$e.Error}}</td>
       </tr>
       <tr id="{{(print "action-" $i) | safeid}}" hidden="true">
         <td colspan="7">
           <pre class="wrap">{{$e.ActionForDisplay}}</pre>
         </td>
       </tr>
     {{end}}
     </table>
   {{else}}
     No entries.
   {{end}}
 </div>
 {{end}}

 {{end}}
	<!--
	Copyright 2024 The Go Authors. All rights reserved.
	Use of this source code is governed by a BSD-style
	license that can be found in the LICENSE file.
	-->
	<!doctype html>
	<html>
	{{template "head" .}}
	<body>
	<div class="section" id="header">
	{{template "nav-title" .}}
	<p>All times are in <span id="tz"></span>.</p>
	<script>
	var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
	document.getElementById("tz").innerHTML = timezone;
	</script>
	{{template "actionlog-form" .}}
	</div>
	{{template "actionlog-result" .}}
	</body>
	</html>

	{{define "dur-unit"}}
	<option value="minutes"{{if eq . "minutes"}} selected{{end}}>minutes</option>
	<option value="hours"{{if eq . "hours"}} selected{{end}}>hours</option>
	<option value="days"{{if eq . "days"}} selected{{end}}>days</option>
	<option value="weeks"{{if eq . "weeks"}} selected{{end}}>weeks</option>
	{{end}}

	{{define "actionlog-form"}}
	<form id="form" action="{{.ID.Endpoint}}" method="GET">
	<input type="hidden" id="form-tz" name="timezone" value=""/>
	<script>
	document.getElementById("form-tz").setAttribute("value", timezone);
	</script>
	<span>
	<label for="filter">Filter</label>
	<input id="filter" type="text" size=75 name="filter" value="{{.Filter}}"/>
	</span>
	<div style="font-size: smaller; margin-top: 0.5rem; margin-bottom: 1rem">
	Examples: <code>Kind:Fixer</code>, <code>RequiresApproval=true</code><br/>
	Case matters. Boolean fields must be compared with <code>=true</code> or <code>=false</code>.
	OR, AND and NOT must be in all caps.<br/>
	See <a href="https://google.aip.dev/160">AIP 160</a> for more.
	</div>
	<table>
	<tr>
	<td>
	{{- /* Resist the temptation to factor out the endpoint controls into
	a single template. That will require that id values are substituted
	in, which causes safehtml to complain that they aren't safe identifiers.
	It ends up being more complicated than it's worth.
	*/ -}}
	<fieldset>
	<legend>Start</legend>
	<div>
	<input type="radio" name="start" id="start-fixed" value="fixed"
	{{if eq .Start.Radio "fixed"}}checked{{end}}/>
	<label for="start-fixed">Beginning</label>
	</div>
	<div>
	<input type="radio" name="start" id="start-dur" value="dur"
	{{if eq .Start.Radio "dur"}}checked{{end}}/>
	<input type="text" id="start-dur" size="4" name="start-dur-num" value="{{.Start.DurNum}}" autofocus/>
	<select name="start-dur-unit">
	{{template "dur-unit" .Start.DurUnit}}
	</select>
	<label for="start-dur">before end</label>
	</div>
	<div>
	<input type="radio" name="start" id="start-date" value="date"
	{{if eq .Start.Radio "date"}}checked{{end}}/>
	<label for="start-date">From</label>
	<input type="datetime-local" name="start-date" value="{{.Start.Date}}"/>
	</div>
	</fieldset>
	</td>

	<td>
	<fieldset>
	<legend>End</legend>
	<div>
	<input type="radio" name="end" id="end-fixed" value="fixed"
	{{if eq .End.Radio "fixed"}}checked{{end}}/>
	<label for="end-fixed">End</label>
	</div>
	<div>
	<input type="radio" name="end" id="end-dur" value="dur"
	{{if eq .End.Radio "dur"}}checked{{end}}/>
	<input type="text" id="end-dur" size="4" name="end-dur-num" value="1" autofocus/>
	<select name="end-dur-unit">
	{{template "dur-unit" .End.DurUnit}}
	</select>
	<label for="end-dur">after start</label>
	</div>
	<div>
	<input type="radio" name="end" id="end-date" value="date"
	{{if eq .End.Radio "date"}}checked{{end}}/>
	<label for="end-date">To</label>
	<input type="datetime-local" name="end-date" value="{{.End.Date}}"ga/>
	</div>
	</fieldset>
	</td>

	<td> {{template "submit" .}} </td>
	</tr>
	</table>
	</form>
	{{end}}

	{{define "actionlog-result"}}
	<script>
	// Toggle the hidden state of a row containing the action.
	// Also change the button label accordingly.
	function toggleAction(event) {
	let row = document.getElementById(event.target.dataset.rowid);
	row.hidden = !row.hidden;
	// event.target is the button.
	event.target.value = row.hidden? 'Show': 'Hide';
	}
	</script>

	{{if .StartTime}}
	<div class="section" id="result">
	<h2>Action Log from {{.StartTime}} to {{.EndTime}}</h2>

	{{with .Entries}}
	<table style="max-width:100%">
	<thead>
	<tr>
	<th>Created</th>
	<th>Kind</th>
	<th>Key</th>
	<th>Action</th>
	<th>Approval Req</th>
	<th>Approved</th>
	<th>Done</th>
	<th>Result</th>
	<th>Error</th>
	</tr>
	</thead>
	{{range $i, $e := .}}
	<tr>
	<td>{{$e.Created \| fmttime}}</td>
	<td>{{$e.Kind}}</td>
	<td>{{$e.Key \| fmtkey}}</td>
	<td>
	{{- /* clicking the button shows/hides the action on the following row */ -}}
	<input type="button" value="Show"
	data-rowid="id-action-{{$i}}"
	onclick="toggleAction(event)"/>
	</td>
	<td>{{$e.ApprovalRequired}}</td>
	<td>{{$e.Approved}}</td>
	<td>{{$e.Done \| fmttime}}</td>
	<td><pre class="wrap">{{$e.Result \| fmtval}}</pre></td>
	<td>{{$e.Error}}</td>
	</tr>
	<tr id="{{(print "action-" $i) \| safeid}}" hidden="true">
	<td colspan="7">
	<pre class="wrap">{{$e.ActionForDisplay}}</pre>
	</td>
	</tr>
	{{end}}
	</table>
	{{else}}
	No entries.
	{{end}}
	</div>
	{{end}}

	{{end}}