peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Attempt to improve initial page load by adding defer attribute to scripts, will attempt to add defer to inline scripts as well soon

Browse Source
This commit is contained in:
Peter Stockings
2023-08-15 22:31:08 +10:00
parent d3df532570
commit c6c9925da0
7 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
templates/base.html
View File

@@ -6,27 +6,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Workout Tracker</title> <title>Workout Tracker</title>
<script src="/static/js/plotly-basic-2.20.0.min.js"></script> <script src="/static/js/plotly-basic-2.20.0.min.js" defer></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link href="/static/css/tw-elements.min.css" rel="stylesheet"> <link href="/static/css/tw-elements.min.css" rel="stylesheet">
<script src="/static/js/tailwindcss@3.2.4.js"></script> <script src="/static/js/tailwindcss@3.2.4.js" defer></script>
<script> <script>
tailwind.config = { window.addEventListener('DOMContentLoaded', _ => {
darkMode: "class", tailwind.config = {
theme: { darkMode: "class",
fontFamily: { theme: {
sans: ["Roboto", "sans-serif"], fontFamily: {
body: ["Roboto", "sans-serif"], sans: ["Roboto", "sans-serif"],
mono: ["ui-monospace", "monospace"], body: ["Roboto", "sans-serif"],
mono: ["ui-monospace", "monospace"],
},
}, },
}, corePlugins: {
corePlugins: { preflight: false,
preflight: false, },
}, };
}; });
</script> </script>
<link href="/static/css/style.css" rel="stylesheet"> <link href="/static/css/style.css" rel="stylesheet">
<script src="/static/js/tw-elements.min.js"></script> <script src="/static/js/tw-elements.min.js" defer></script>
<script src="/static/js/htmx.min.js" defer></script>
<script src="/static/js/hyperscript.min.js" defer></script>
<script src="/static/js/sweetalert2@11.js" defer></script>
<script> <script>
function debounce(func, timeout = 300) { function debounce(func, timeout = 300) {
@@ -185,9 +190,6 @@
</div> </div>
</template> </template>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/hyperscript.min.js"></script>
<script src="/static/js/sweetalert2@11.js"></script>
</body> </body>
</html> </html>

2
templates/calendar.html
View File

@@ -49,7 +49,7 @@
<option value="all">All</option> <option value="all">All</option>
</select> </select>
<script> <script>
te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("{{ selected_view | safe }}"); window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("{{ selected_view | safe }}"));
</script> </script>
</div> </div>
</div> </div>

8
templates/dashboard.html
View File

@@ -22,7 +22,7 @@
</select> </select>
</div> </div>
</div> </div>
<script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ selected_person_ids | list_to_string | safe}})</script> <script>window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ selected_person_ids | list_to_string | safe}}))</script>
</div> </div>
</div> </div>
<div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0"> <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
@@ -43,7 +43,7 @@
</select> </select>
</div> </div>
</div> </div>
<script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ selected_exercise_ids | list_to_string | safe}})</script> <script> window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ selected_exercise_ids | list_to_string | safe}}))</script>
</div> </div>
</div> </div>
<div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0"><label <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0"><label
@@ -129,13 +129,13 @@
<div id="person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}" <div id="person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"
class="w-full mt-2 aspect-video"></div> class="w-full mt-2 aspect-video"></div>
<script> <script>
Plotly.newPlot(document.getElementById("person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"), [{ window.addEventListener('DOMContentLoaded', _ => Plotly.newPlot(document.getElementById("person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"), [{
x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace('"', "'") | safe }}, x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace('"', "'") | safe }},
y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace('"', "'") | safe }}, y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace('"', "'") | safe }},
text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace('"', "'") | safe }}, text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace('"', "'") | safe }},
name: "{{ p['PersonName'] }} - {{ e['ExerciseName'] }}", name: "{{ p['PersonName'] }} - {{ e['ExerciseName'] }}",
hovertemplate hovertemplate
}], layout, config); }], layout, config));
</script> </script>
{% endif %} {% endif %}
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">

2
templates/partials/topset.html
View File

@@ -19,7 +19,7 @@
</select> </select>
</div> </div>
<script> <script>
te.Select.getOrCreateInstance(document.querySelector("#topset-exercise-select-{{ topset_id }}")).setValue("{{ exercise_id }}"); window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#topset-exercise-select-{{ topset_id }}")).setValue("{{ exercise_id }}"));
</script> </script>
{% endif %} {% endif %}
</td> </td>

2
templates/partials/workout_modal.html
View File

@@ -124,7 +124,7 @@
</select> </select>
</div> </div>
<script> <script>
te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select-{{ workout['WorkoutId'] }}")); window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select-{{ workout['WorkoutId'] }}")));
</script> </script>
</div> </div>
</div> </div>

2
templates/partials/workout_tags.html
View File

@@ -48,7 +48,7 @@
</select> </select>
</div> </div>
<script> <script>
te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout_id }}")).setValue({{ selected_workout_tag_ids| list_to_string | safe }}); window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout_id }}")).setValue({{ selected_workout_tag_ids| list_to_string | safe }}));
</script> </script>
</div> </div>
</div> </div>

6
templates/person.html
View File

@@ -25,7 +25,7 @@
<option value="all" selected>All</option> <option value="all" selected>All</option>
</select> </select>
<script> <script>
te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("all"); window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("all"));
</script> </script>
</div> </div>
</div> </div>
@@ -56,7 +56,7 @@
</select> </select>
</div> </div>
<script> <script>
te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ selected_exercise_ids| list_to_string | safe }}); window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ selected_exercise_ids| list_to_string | safe }}));
</script> </script>
</div> </div>
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0"> <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
@@ -117,7 +117,7 @@
</select> </select>
</div> </div>
<script> <script>
te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }}); window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }}));
</script> </script>
</div> </div>
</div> </div>