internal/web/templates/index.html
{{ define "index.html" }}
</head>
<script src="/fs/public/js/heatmap.js"></script>
<script src="/fs/public/js/index.js"></script>
<script src="/fs/public/js/weight-chart.js"></script>
<link rel="stylesheet" type="text/css" href="/fs/public/css/index.css" />
<body>
<!-- Add Weight Modal -->
<div class="modal" id="mWeight">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add weight</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<form action="/weight/" method="post" name="sets">
<table class="table table-borderless">
<tr>
<td>Date</td>
<td><input name="date" type="date" class="form-control" id="weightDate"></td>
</tr>
<tr>
<td>Weight</td>
<td><input name="weight" type="number" step="any" min="0" class="form-control"></td>
</tr>
<tr>
<td>
<button type="submit" class="btn btn-primary">Save</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<!-- End Modal -->
<div class="container-lg mt-4">
<div class="row">
<div class="col-md-8 mb-4">
<div class="card border-primary">
<div class="card-body">
<div class="horiz-scroll">
<div style="height: 100px; width: 770px;">
<canvas id="matrix-chart" style="height: 100%; width: 100%;"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card border-primary">
<div class="card-body" style="overflow-x: scroll;">
<div class="d-flex justify-content-evenly">
<div class="col-md-8">
<div class="chart-container" style="max-width: fit-content">
<canvas id="weight-chart" style="max-height: 100px;"></canvas>
</div>
</div>
<div class="col-md-2">
<button class="btn del-set-button" title="Add weight" data-bs-toggle="modal" data-bs-target="#mWeight" onclick='setWeightDate()'>
<h4><i class="bi bi-window-plus"></i></h4>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md mb-4">
<div class="accordion">
{{ range $gr, $grID := .GroupMap }}
<div class="accordion-item border-primary">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $grID }}" aria-expanded="false" aria-controls="{{ $grID }}">
{{ $gr }}
</button>
</h2>
<div id="{{ $grID }}" class="accordion-collapse collapse">
<div class="accordion-body">
<div class="row">
<div class="col-md-11">
{{ range $.ExData.Exs }}
{{ if eq .Group $gr }}
<div class="hstack gap-2">
<a href="/exercise/?id={{ .ID }}"><button class="btn del-set-button" title="Edit">
<i class="bi bi-pencil-square"></i>
</button></a>
<!-- Button trigger modal -->
<button class="btn add-exercise-button" title="Show details" data-bs-toggle="modal" data-bs-target="#modal{{ .ID }}">
<i class="bi bi-window-desktop"></i>
</button>
<!-- Modal -->
<div class="modal" id="modal{{ .ID }}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ .Name }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"></span>
</button>
</div>
<div class="modal-body">
<div class="col">
<p>Description: {{ .Descr }}</p>
<p>Weight (default): {{ .Weight }}</p>
<p>Reps (default): {{ .Reps }}</p>
</div>
<div class="col">
<img src="{{ .Image }}" style="max-width: 100%;max-height: 100%;" alt="Exercise Image"></img>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal -->
<button class="btn exercise-button" onclick='addExercise("{{ .Name }}", "{{ .Weight }}", "{{ .Reps }}")' title="Weight: {{ .Weight }}; Reps: {{ .Reps }};">{{ .Name }}</button>
<button class="btn add-exercise-button" onclick='addExercise("{{ .Name }}", "{{ .Weight }}", "{{ .Reps }}")' title="Add">
<i class="bi bi-arrow-right-square"></i>
</button>
</div>
{{ end }}
{{ end }}
</div>
<div class="col-md-1">
<button class="btn del-set-button" title="Add group" onclick='addAllGroup({{ $.ExData.Exs }}, {{ $gr }})'>
<i class="bi bi-chevron-compact-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
{{ end }}
</div>
</div>
<div class="col-md mb-4">
<div class="card border-primary">
<div class="card-header">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md hstack">
<button onclick='moveDayLeftRight(-1, {{ .ExData.Sets }})' class="btn del-set-button">
<i class="bi bi-arrow-left-square"></i>
</button>
<input type="date" class="m-auto form-control" onchange='setFormDate({{ .ExData.Sets }})' id="realDate" style="width: 70%;">
<button onclick='moveDayLeftRight(+1, {{ .ExData.Sets }})' class="btn del-set-button">
<i class="bi bi-arrow-right-square"></i>
</button>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="card-body">
<form action="/set/" method="post" name="sets">
<input name="date" type="hidden" id="formDate">
<div class="table-responsive">
<table class="table table-borderless">
<thead>
<th class="col-5">Name</th>
<th class="col-3">Weight</th>
<th class="col-3">Reps</th>
<th class="col-1"></th>
</thead>
<tbody id="todayEx"></tbody>
</table>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
setFormDate({{ .ExData.Sets }});
generateWeightChart({{ .ExData.Weight }}, {{ .Config.HeatColor }}, -7);
makeChart({{ .HeatMap }}, {{ .Config.HeatColor }}, {{ .ExData.Sets }});
</script>
{{ template "footer.html" }}
{{ end }}