Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-27 08:49:36 +02:00
Code Issues Releases Activity

feat: enhance CategoryModal with loading state and remove unused activities route

Browse source
This commit is contained in:
Sean Morley 2025-01-21 19:01:45 -05:00
parent 64d2bdebce
commit f9cf92041d
4 changed files with 25 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/lib/components/CategoryModal.svelte
View file

@ -6,14 +6,14 @@
let modal: HTMLDialogElement; let modal: HTMLDialogElement;
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import InformationSlabCircle from '~icons/mdi/information-slab-circle';
export let categories: Category[] = []; export let categories: Category[] = [];
let category_to_edit: Category | null = null; let category_to_edit: Category | null = null;
let is_changed: boolean = false; let is_changed: boolean = false;
let has_loaded: boolean = false;
onMount(async () => { onMount(async () => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement; modal = document.getElementById('my_modal_1') as HTMLDialogElement;
if (modal) { if (modal) {
@ -21,6 +21,7 @@
} }
let category_fetch = await fetch('/api/categories/categories'); let category_fetch = await fetch('/api/categories/categories');
categories = await category_fetch.json(); categories = await category_fetch.json();
has_loaded = true;
// remove the general category if it exists // remove the general category if it exists
// categories = categories.filter((c) => c.name !== 'general'); // categories = categories.filter((c) => c.name !== 'general');
}); });
@ -77,6 +78,7 @@
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0"> <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">{$t('categories.manage_categories')}</h3> <h3 class="font-bold text-lg">{$t('categories.manage_categories')}</h3>
{#if has_loaded}
{#each categories as category} {#each categories as category}
<div class="flex justify-between items-center mt-2"> <div class="flex justify-between items-center mt-2">
<span>{category.display_name} {category.icon}</span> <span>{category.display_name} {category.icon}</span>
@ -97,6 +99,11 @@
{#if categories.length === 0} {#if categories.length === 0}
<p>{$t('categories.no_categories_found')}</p> <p>{$t('categories.no_categories_found')}</p>
{/if} {/if}
{:else}
<div class="flex items-center justify-center">
<span class="loading loading-spinner loading-lg m-4"></span>
</div>
{/if}
{#if category_to_edit} {#if category_to_edit}
<h2 class="text-center text-xl font-semibold mt-2 mb-2">{$t('categories.edit_category')}</h2> <h2 class="text-center text-xl font-semibold mt-2 mb-2">{$t('categories.edit_category')}</h2>

51
frontend/src/routes/activities/+page.server.ts
View file

@ -1,51 +0,0 @@
import { redirect, type Actions } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { fetchCSRFToken } from '$lib/index.server';
const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
export const load = (async (event) => {
if (!event.locals.user) {
return redirect(302, '/login');
}
let csrfToken = await fetchCSRFToken();
let allActivities: string[] = [];
let res = await event.fetch(`${endpoint}/api/activity-types/types/`, {
headers: {
'X-CSRFToken': csrfToken,
Cookie: `csrftoken=${csrfToken}`
},
credentials: 'include'
});
console.log(res);
let data = await res.json();
if (data) {
allActivities = data;
}
return {
props: {
activities: allActivities
}
};
}) satisfies PageServerLoad;
export const actions: Actions = {
getActivities: async (event) => {
let csrfToken = await fetchCSRFToken();
let allActivities: string[] = [];
let res = await fetch(`${endpoint}/api/activity-types/types/`, {
headers: {
'X-CSRFToken': csrfToken,
'Content-Type': 'application/json',
Cookie: `csrftoken=${csrfToken}`,
Referer: event.url.origin // Include Referer header
}
});
console.log(res);
let data = await res.json();
if (data) {
allActivities = data;
}
return { activities: allActivities };
}
};

38
frontend/src/routes/activities/+page.svelte
View file

@ -1,38 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import type { PageData } from './$types';
import { t } from 'svelte-i18n';
export let data: PageData;
let activities: string[] = data.props.activities;
</script>
<!-- make a table with pinned rows -->
<table class="table table-compact">
<thead>
<tr>
<th>{$t('navbar.tag')}</th>
<th>{$t('adventures.actions')}</th>
</tr>
</thead>
<tbody>
{#each activities as activity}
<tr>
<td>{activity}</td>
<td>
<button
class="btn btn-sm btn-primary"
on:click={() => goto(`/search?query=${activity}&property=activity_types`)}
>{$t('adventures.see_adventures')}</button
>
</td>
</tr>
{/each}
</tbody>
</table>
<svelte:head>
<title>My Tags</title>
<meta name="description" content="View my tags." />
</svelte:head>

2
frontend/src/routes/adventures/[id]/+page.svelte
View file

@ -58,8 +58,6 @@
console.error(`Error processing GPX file ${gpxfile}:`, error); console.error(`Error processing GPX file ${gpxfile}:`, error);
} }
} }
// Log the final GeoJSON for debugging
} }
} }