feat: add Google Maps integration with description and display status in settings

This commit is contained in:
Sean Morley
2025-06-01 23:09:48 -04:00
parent 0838a41156
commit 937db00226
4 changed files with 49 additions and 3 deletions

View File

@@ -70,6 +70,17 @@ export const load: PageServerLoad = async (event) => {
});
let socialProviders = await socialProvidersFetch.json();
let integrationsFetch = await fetch(`${endpoint}/api/integrations/`, {
headers: {
Cookie: `sessionid=${sessionId}`
}
});
if (!integrationsFetch.ok) {
return redirect(302, '/');
}
let integrations = await integrationsFetch.json();
let googleMapsEnabled = integrations.google_maps as boolean;
let publicUrlFetch = await fetch(`${endpoint}/public-url/`);
let publicUrl = '';
if (!publicUrlFetch.ok) {
@@ -86,7 +97,8 @@ export const load: PageServerLoad = async (event) => {
authenticators,
immichIntegration,
publicUrl,
socialProviders
socialProviders,
googleMapsEnabled
}
};
};

View File

@@ -9,6 +9,7 @@
import TotpModal from '$lib/components/TOTPModal.svelte';
import { appTitle, appVersion, copyrightYear } from '$lib/config.js';
import ImmichLogo from '$lib/assets/immich.svg';
import GoogleMapsLogo from '$lib/assets/google_maps.svg';
export let data;
console.log(data);
@@ -23,6 +24,7 @@
let new_email: string = '';
let public_url: string = data.props.publicUrl;
let immichIntegration = data.props.immichIntegration;
let googleMapsEnabled = data.props.googleMapsEnabled;
let activeSection: string = 'profile';
let newImmichIntegration: ImmichIntegration = {
@@ -762,11 +764,11 @@
</div>
<!-- Immich Integration -->
<div class="p-6 bg-base-200 rounded-xl">
<div class="p-6 bg-base-200 rounded-xl mb-4">
<div class="flex items-center gap-4 mb-4">
<img src={ImmichLogo} alt="Immich" class="w-8 h-8" />
<div>
<h3 class="text-xl font-bold">{$t('immich.immich_integration')}</h3>
<h3 class="text-xl font-bold">Immich</h3>
<p class="text-sm text-base-content/70">
{$t('immich.immich_integration_desc')}
</p>
@@ -873,6 +875,34 @@
</p>
</div>
</div>
<!-- Google maps integration - displayt only if its connected -->
<div class="p-6 bg-base-200 rounded-xl">
<div class="flex items-center gap-4 mb-4">
<img src={GoogleMapsLogo} alt="Google Maps" class="w-8 h-8" />
<div>
<h3 class="text-xl font-bold">Google Maps</h3>
<p class="text-sm text-base-content/70">
{$t('google_maps.google_maps_integration_desc')}
</p>
</div>
{#if googleMapsEnabled}
<div class="badge badge-success ml-auto">{$t('settings.connected')}</div>
{:else}
<div class="badge badge-error ml-auto">{$t('settings.disconnected')}</div>
{/if}
</div>
<div class="mt-4 p-4 bg-info/10 rounded-lg">
<p class="text-sm">
📖 {$t('immich.need_help')}
<a
class="link link-primary"
href="https://adventurelog.app/docs/configuration/google_maps_integration.html"
target="_blank">{$t('navbar.documentation')}</a
>
</p>
</div>
</div>
</div>
{/if}