go-watch/templates/watch/view.html

68 lines
No EOL
2.2 KiB
HTML

{{define "content"}}
{{ if .error }}
Could not find entry
{{ end }}
<div class="row">
<div class="d-flex justify-content-around">
<div class="card d-flex justify-content-around">
<div class="card-body">
<h4 class="card-title text-center">{{ .Watch.Name }}</h4>
<div class="row">
<div class="col-4">Previous</div>
<div class="col-8">{{ .Watch.CronEntry.Prev.Format "2006-01-02 15:04:05" }}</div>
</div>
<div class="row">
<div class="col-4">Next</div>
<div class="col-8">{{ .Watch.CronEntry.Next.Format "2006-01-02 15:04:05" }}</div>
</div>
</div>
</div>
</div>
</div>
<canvas id="chartCanvas">
</canvas>
{{end}}
{{ define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
<script>
function canvasInit() {
const ctx = document.getElementById("chartCanvas").getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets:[{
{{ range $name, $values := .ValueMap }}
label: {{ $name }},
data: [
{{ range $value := $values }}
{x: luxon.DateTime.fromISO('{{ $value.Time.Format "2006-01-02T15:04:05Z07:00" }}'), y: '{{ $value.Value }}'},
{{ end }}
],
{{ end }}
}]
},
options: {
scales: {
x: {
type: 'time',
distribution: 'series',
},
y: {
beginAtZero: true,
},
}
}
});
console.log(chart);
}
document.addEventListener('DOMContentLoaded', canvasInit, false);
</script>
{{ end }}