<!DOCTYPE html><html><head><title>Φορτίο v{{.Version}}</title>
<script src="{{.ChartJSPath}}"></script>
<link rel="icon" href="../favicon.ico" />
<style>
a:link {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1 {
  font-size: 120%;
}
</style>
</head>
<body style="background: linear-gradient(to right, #d8aa20 , #c75228);">
<a href="http://fortio.org/"><img src="{{.LogoPath}}" alt="." height="69" width="45" align="right" /></a>
<img src="{{.LogoPath}}" alt="." height="92" width="60" align="right" />
<img src="{{.LogoPath}}" alt="istio logo" height="123" width="80" align="right" />
<h1>Φορτίο (fortio) v{{.Version}}{{.Extra}}</h1>
<script src="{{.Version}}/static/js/fortio_chart.js"></script>
<script>
var res
var data
function fortio_load(url) {
  var multi = document.getElementById("files")
  var list = [url]
  if (multi && multi.selectedOptions !== undefined) {
    list = multi.selectedOptions
  }
  if (list.length == 0) {
    return
  }
  if (list.length == 1) {
    fetch("data/"+url).then(doc => doc.json()).then((out) => {
      res = out
      data = fortioResultToJsChartData(res)
      showChart(data)
      var urldiv = document.getElementById('url')
      urldiv.innerHTML = "<a href='browse?url=" + url + "'>" + url + "</a> (<a href='data/" + url +"'>json</a>)"
    }).catch(err => { throw err })
  } else {
    var urldiv = document.getElementById('url')
    urldiv.innerHTML = "Multiple runs..."
    makeMultiChart()
    var promises = []
    for (var i = 0, len = list.length; i < len; i++) {
      var v = list[len-i-1].value;
      (function (idx, u) {
        promises.push(fetch("data/"+u).then(doc => doc.json()).then((out) => {
          fortioAddToMultiResult(idx, out)
        }))
      })(i, v)
    }
    Promise.all(promises).then( () => {
      endMultiChart(list.length)
    }).catch(err => { throw err })
  }
}
</script>
{{if .DoRender}}
<p><div id="url">Loading {{.URL}}...</div></p>
<p /><!-- TODO: find a way to flush/not need two p to get the form visible! -->
<br />
<p />
<br />
<script>
fortio_load('{{.URL}}')
</script>
{{else}}
<table><tr><td valign="top">
List of saved results:<br />
<br />
Filter:<form><input id="searchinp" name="s" type="text" size=20 value="{{.Search}}" /></form>
</td><td>
<select id="files" size=7 onchange="fortio_load(value);" multiple>
{{range $f := .DataList}}
  <option value="{{$f}}.json">{{$f}}</option>
{{end}}
</select>
</td><td valign="top">
Graph link: <div id="url">...</div>
</tr></table>
<script>
const files = document.getElementById('files');
const allFiles = Array.from(files.options);
const search = document.getElementById('searchinp');
function findMatches (search, allFiles) {
  const regex = new RegExp(search, 'gi');
  return allFiles.filter(fileOption => {
    return fileOption.text.match(regex);
  });
}
function filterFiles () {
  allFiles.forEach(fileOption => {
    fileOption.remove();
    fileOption.selected = false;
  });
  const filteredFiles = findMatches(this.value, allFiles);
  files.append(...filteredFiles);
}
search.addEventListener('change', filterFiles);
search.addEventListener('keyup', filterFiles);
</script>
{{end}}
<div class="chart-container" id="cc1" style="position: relative; height:75vh; width:98vw; visibility: hidden">
<canvas style="background-color: #fff" id="chart1"></canvas>
</div>
<div id="running">
<br/>
Select or multi select to graph...
</div>
<div id="update">
<form id="updtForm" action="javascript:updateChart()">
<input type="submit" value="Update:" />
Time axis min <input type="text" name="xmin" size="5" /> ms,
max <input type="text" name="xmax" size="5" /> ms,
logarithmic: <input name="xlog" type="checkbox" onclick="updateChart()" /> -
Count axis logarithmic: <input name="ylog" type="checkbox" onclick="updateChart()" />
</form>
</div>
{{if .DoSearch}}
<script>
filterFiles.call(search)
for (var i = 0; i < files.options.length; i++) {
  files.options[i].selected = true;
}
fortio_load(files.value)
</script>
{{end}}
<p>Go to <a href='./'>Top</a>.</p>
</body>
</html>
