99 lines
No EOL
3.2 KiB
HTML
99 lines
No EOL
3.2 KiB
HTML
{{define "title"}}
|
|
GoWatch {{ .Watch.Name }}
|
|
{{end}}
|
|
|
|
{{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">
|
|
<div class="card-title text-center h4">
|
|
{{ .Watch.Name }}
|
|
<a href="/watch/edit/{{ .Watch.ID }}" class="btn btn-sm btn-success">Edit</a>
|
|
</div>
|
|
{{ if not .Watch.CronEntry }}
|
|
<h5>No Schedule</h5>
|
|
{{ else }}
|
|
<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>
|
|
{{ end }}
|
|
|
|
</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 colors = [
|
|
"rgba(255, 0, 41, 1)",
|
|
"rgba(55, 126, 184, 1)",
|
|
"rgba(102, 166, 30, 1)",
|
|
"rgba(152, 78, 163, 1)",
|
|
"rgba(0, 210, 213, 1)",
|
|
"rgba(255, 127, 0, 1)",
|
|
"rgba(175, 141, 0, 1)",
|
|
"rgba(127, 128. 205, 1)",
|
|
"rgba(179, 233, 0, 1)",
|
|
"rgba(196, 46, 96, 1)",
|
|
"rgba(166, 86, 40, 1)",
|
|
"rgba(247, 129, 191, 1)",
|
|
"rgba(141, 211, 199, 1)",
|
|
"rgba(190, 186, 218, 1)",
|
|
"rgba(251, 128, 114, 1)",
|
|
"rgba(128. 177, 211, 1)"
|
|
];
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
datasets:[
|
|
{{ range $name, $values := .ValueMap }}
|
|
{
|
|
label: {{ $name }},
|
|
fill: false,
|
|
borderColor: colors[{{ index $.colorMap $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'
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
},
|
|
}
|
|
}
|
|
});
|
|
}
|
|
document.addEventListener('DOMContentLoaded', canvasInit, false);
|
|
</script>
|
|
{{ end }} |