Add Komoot activity import with guided browser-based batch flow #25

Open
McPringle wants to merge 23 commits from McPringle/komoot-import into main
Showing only changes of commit 6bd7ab8748 - Show all commits

View file

@ -69,13 +69,7 @@
<div class="mt-4 d-flex justify-content-end gap-2 flex-wrap"> <div class="mt-4 d-flex justify-content-end gap-2 flex-wrap">
<button type="submit" class="btn btn-primary" id="loadActivitiesBtn"> <button type="submit" class="btn btn-primary" id="loadActivitiesBtn">
<span id="loadActivitiesText"> <i class="bi bi-arrow-repeat"></i> Load Komoot Activities
<i class="bi bi-arrow-repeat"></i> Load Komoot Activities
</span>
<span id="loadActivitiesSpinner" class="d-none">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</span>
</button> </button>
<button type="button" class="btn btn-success" id="importFirstBtn" disabled> <button type="button" class="btn btn-success" id="importFirstBtn" disabled>
<span id="importFirstText"> <span id="importFirstText">
@ -94,6 +88,13 @@
</div> </div>
</div> </div>
<div id="loadingIndicator" class="text-center py-5 d-none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted mb-0">Loading Komoot activities...</p>
</div>
<div id="resultsSection" class="mt-4 d-none"> <div id="resultsSection" class="mt-4 d-none">
<div class="d-flex justify-content-between align-items-center mb-3"> <div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0"> <h4 class="mb-0">
@ -129,12 +130,11 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('komootImportForm'); const form = document.getElementById('komootImportForm');
const errorAlert = document.getElementById('errorAlert'); const errorAlert = document.getElementById('errorAlert');
const loadingIndicator = document.getElementById('loadingIndicator');
const resultsSection = document.getElementById('resultsSection'); const resultsSection = document.getElementById('resultsSection');
const resultsBody = document.getElementById('resultsBody'); const resultsBody = document.getElementById('resultsBody');
const resultCount = document.getElementById('resultCount'); const resultCount = document.getElementById('resultCount');
const loadActivitiesBtn = document.getElementById('loadActivitiesBtn'); const loadActivitiesBtn = document.getElementById('loadActivitiesBtn');
const loadActivitiesText = document.getElementById('loadActivitiesText');
const loadActivitiesSpinner = document.getElementById('loadActivitiesSpinner');
const importFirstBtn = document.getElementById('importFirstBtn'); const importFirstBtn = document.getElementById('importFirstBtn');
const importFirstText = document.getElementById('importFirstText'); const importFirstText = document.getElementById('importFirstText');
const importFirstSpinner = document.getElementById('importFirstSpinner'); const importFirstSpinner = document.getElementById('importFirstSpinner');
@ -149,8 +149,7 @@
function setLoading(loading) { function setLoading(loading) {
loadActivitiesBtn.disabled = loading; loadActivitiesBtn.disabled = loading;
loadActivitiesText.classList.toggle('d-none', loading); loadingIndicator.classList.toggle('d-none', !loading);
loadActivitiesSpinner.classList.toggle('d-none', !loading);
} }
function setImportLoading(loading) { function setImportLoading(loading) {