Skip to content
GeoViewer 5

Source AddDataPresets

Source AddDataPresets

Cette page est générée automatiquement à partir du dépôt local au moment de la génération de la documentation.

Fichiers inclus

packages/common/src/lib/widgets/add-data/add-data-presets/add-data-presets.declaration.ts

packages/common/src/lib/widgets/add-data/add-data-presets/add-data-presets.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type AddDataPresetsWidgetConfig, addDataPresetsWidgetConfigSchema } from './add-data-presets.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


export const declaration = {
    factory: () =>
        import('./AddDataPresetsWidget.svelte').then((AddDataPresetsWidget) =>
            widgetFactorySvelte(AddDataPresetsWidget),
        ),
    schema: () => addDataPresetsWidgetConfigSchema,
} satisfies WidgetDeclaration;


export type AddDataPresetsProps = WidgetProps<AddDataPresetsWidgetConfig>;

packages/common/src/lib/widgets/add-data/add-data-presets/add-data-presets.config.ts

packages/common/src/lib/widgets/add-data/add-data-presets/add-data-presets.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration/models/widget/widget-configuration.schema';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { i18nSchemaFrom } from '$lib/api/managers/i18n/i18n.schema';
import type { z } from 'zod';
import { addDataPresetsI18n } from '$lib/widgets/add-data/add-data-presets/add-data-presets.i18n';


export const addDataPresetsWidgetConfigSchema = defineWidgetConfig({
    i18n: i18nSchemaFrom(addDataPresetsI18n),
    title: addDataPresetsI18n['add-data-presets-title'],
    inToolbar: inToolbarSchemaFrom(false),
});


export type AddDataPresetsWidgetConfig = z.infer<typeof addDataPresetsWidgetConfigSchema>;

packages/common/src/lib/widgets/add-data/add-data-presets/add-data-presets.i18n.ts

packages/common/src/lib/widgets/add-data/add-data-presets/add-data-presets.i18n.ts
import type { I18nRegistry } from '$lib/api/managers/i18n';


export const addDataPresetsI18n = {
    'add-data-presets-title': {
        fr: 'Vues prédéfinies',
        nl: 'NL - Vues prédéfinies',
    },
    'confirm-message': {
        fr: "L'ajout de la vue prédéfinie va supprimer toutes les données présentes actuellement sur la carte. Voulez-vous poursuivre l'opération ?",
        nl: "NL - L'ajout de la vue prédéfinie va supprimer toutes les données présentes actuellement sur la carte. Voulez-vous poursuivre l'opération ?",
    },
    'confirm-label': {
        fr: 'Oui, ajouter la vue prédéfinie',
        nl: 'NL - Oui, ajouter la vue prédéfinie',
    },
    'confirm-title': {
        fr: 'Attention',
        nl: 'NL - Attention',
    },
    description: {
        fr: "Une vue prédéfinie permet d'ajouter un ensemble de données relatif à un thème choisi",
        nl: "NL - Une vue prédéfinie permet d'ajouter un ensemble de donénes relatif à un thème choisi",
    },
    'footer-warning': {
        fr: 'Attention, les données ajoutées auparavant seront supprimées de votre sélection afin de faire place à ce nouvel ensemble.',
        nl: 'NL - Attention, les données ajoutées auparavant seront supprimées de votre sélection afin de faire place à ce nouvel ensemble.',
    },
} satisfies I18nRegistry;


export type AddDataPresetsI18n = I18nRegistry<keyof typeof addDataPresetsI18n>;

packages/common/src/lib/widgets/add-data/add-data-presets/AddDataPresets.svelte

packages/common/src/lib/widgets/add-data/add-data-presets/AddDataPresets.svelte
<script lang="ts">
    import { getContextManager } from '$lib/api/managers/context';
    import { type ContextConfiguration, getConfigurationManager } from '$lib/api/managers/configuration';
    import type { AddDataPresetsI18n } from '$lib/widgets/add-data/add-data-presets/add-data-presets.i18n';
    import ConfirmDialog from '$lib/components/confirm-dialog/ConfirmDialog.svelte';
    import { getI18n } from '$lib/api/managers/i18n';
    import { cn } from '$lib/components/shadcn/utils';
    import IconComp from '$lib/components/icon/Icon.svelte';
    import { Button } from '$lib/components/shadcn/ui/button';
    import Info from 'lucide-svelte/icons/info';
    import { getMapManager } from '$lib/api/map';
    import { getTopicManager } from '$lib/api/managers/topic';
    import { tick } from 'svelte';


    interface Props {
        i18nRegistry: AddDataPresetsI18n;
    }


    let { i18nRegistry }: Props = $props();


    const configurationManager = getConfigurationManager();
    const contextManager = getContextManager();
    const i18n = getI18n(i18nRegistry);
    const mapManager = getMapManager();
    const topic = getTopicManager();


    const contexts = configurationManager.contextsConfiguration ?? [];


    let confirmOpened = $state<boolean>(false);
    let selectedContext: ContextConfiguration | undefined;


    function onContextClick(context: ContextConfiguration) {
        confirmOpened = true;
        selectedContext = context;
    }


    async function onContextConfirm() {
        if (selectedContext) {
            const context = selectedContext;
            const previousLayerIds = new Set(mapManager.layerList.list.map((layer) => layer.id));
            await contextManager.onContextChange(context);
            await tick();
            mapManager.layerList.list
                .filter((layer) => !previousLayerIds.has(layer.id))
                .forEach((layer) => {
                    topic.publish({
                        type: 'AddData-add-mapService-from-predefined-view',
                        layer,
                        context: {
                            id: context.id,
                            label: context.label,
                        },
                    });
                });
        }
    }
</script>


<div class="gv-mb-3">{i18n('description')}</div>


<div class="gv-flex gv-flex-col gv-gap-y-2">
    {#each contexts as context (context.id)}
        <div class="gv-border gv-border-grey-300 gv-w-full gv-p-2">
            <div class="gv-flex gv-flex-row">
                <div class="gv-w-1/5">
                    <IconComp
                        icon={context.icon}
                        alt={`${i18n.translate(context.label)}`}
                        class={cn('gv-h-24 gv-w-full gv-object-cover gv-m-auto')}
                    />
                </div>
                <div class="gv-w-3/5 gv-pl-2 gv-flex gv-flex-col gv-justify-between">
                    <div>
                        <div class="gv-font-bold">{i18n.translate(context.label)}</div>
                        <div class="gv-text-base gv-pt-1">{i18n.translate(context.description)}</div>
                    </div>
                    <div class="gv-mt-2 gv-self-start">
                        <Button variant="outline" onclick={() => onContextClick(context)} size="sm">
                            {i18n('common.select')}
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    {/each}
</div>


<div class="gv-text-secondary gv-text-sm gv-mt-2 gv-flex gv-items-center gv-align-top gv-gap-2">
    <Info class="gv-size-6 " />
    <p>{i18n('footer-warning')}</p>
</div>


<ConfirmDialog
    title={i18n('confirm-title')}
    message={i18n('confirm-message')}
    confirmLabel={i18n('confirm-label')}
    onConfirm={() => onContextConfirm()}
    bind:open={confirmOpened}
/>

packages/common/src/lib/widgets/add-data/add-data-presets/AddDataPresetsWidget.svelte

packages/common/src/lib/widgets/add-data/add-data-presets/AddDataPresetsWidget.svelte
<script lang="ts">
    import type { AddDataPresetsProps } from './add-data-presets.declaration';
    import AddDataPresets from './AddDataPresets.svelte';


    let { fullConfig }: AddDataPresetsProps = $props();
</script>


<AddDataPresets i18nRegistry={fullConfig.i18n} />

Aller plus loin