123 lines
3.9 KiB
Svelte
123 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import Datepicker from "$lib/components/base/datepicker.svelte";
|
|
import Modal from "$lib/components/base/modal.svelte";
|
|
import TextField from "$lib/components/base/text_field.svelte";
|
|
import Toggle from "$lib/components/base/toggle.svelte";
|
|
import { StravaSchema } from "$lib/models/api/integration_schema";
|
|
import type {
|
|
Integration,
|
|
StravaIntegration,
|
|
} from "$lib/models/integration";
|
|
import { validator } from "@felte/validator-zod";
|
|
import { createForm } from "felte";
|
|
import { _ } from "svelte-i18n";
|
|
|
|
interface Props {
|
|
integration?: Integration;
|
|
onsave?: (stravaIntegration: StravaIntegration) => void;
|
|
}
|
|
|
|
let { integration, onsave }: Props = $props();
|
|
|
|
let modal: Modal;
|
|
|
|
export function openModal() {
|
|
errors.set({});
|
|
modal.openModal();
|
|
}
|
|
|
|
const {
|
|
form,
|
|
errors,
|
|
data: formData,
|
|
} = createForm({
|
|
initialValues: {
|
|
clientId: integration?.strava?.clientId ?? "",
|
|
clientSecret: integration?.strava?.clientSecret ?? "",
|
|
routes: integration?.strava?.routes ?? true,
|
|
activities: integration?.strava?.activities ?? true,
|
|
active: integration?.strava?.active ?? false,
|
|
after: integration?.strava?.after,
|
|
},
|
|
extend: validator({
|
|
schema: StravaSchema,
|
|
}),
|
|
onSubmit: async (form) => {
|
|
form.active = integration?.strava?.active ?? form.active;
|
|
onsave?.(form);
|
|
modal.closeModal();
|
|
},
|
|
});
|
|
|
|
function clearAfterDate() {
|
|
($formData as any).after = undefined;
|
|
}
|
|
</script>
|
|
|
|
<Modal
|
|
id="strava-settings-modal"
|
|
size="md:min-w-lg"
|
|
title={"strava " + $_("settings")}
|
|
bind:this={modal}
|
|
>
|
|
{#snippet content()}
|
|
<form id="strava-settings-form" class="space-y-2" use:form>
|
|
<TextField
|
|
label="Client-ID"
|
|
placeholder="000000"
|
|
name="clientId"
|
|
error={$errors.clientId}
|
|
></TextField>
|
|
<TextField
|
|
label="Client Secret"
|
|
placeholder={integration?.strava
|
|
? `(${$_("unchanged")})`
|
|
: "de8b3789bd7116d..."}
|
|
name="clientSecret"
|
|
type="password"
|
|
error={$errors.clientSecret}
|
|
></TextField>
|
|
<div class="flex gap-x-4">
|
|
<Toggle name="routes" label={$_("route", { values: { n: 2 } })}
|
|
></Toggle>
|
|
<Toggle
|
|
name="activities"
|
|
label={$_("activity", { values: { n: 2 } })}
|
|
></Toggle>
|
|
</div>
|
|
<p
|
|
class="text-xs text-gray-500 max-w-lg pt-4 pb-1 border-t border-input-border"
|
|
>
|
|
{$_("strava-integration-after-date-hint")}
|
|
</p>
|
|
<div class="flex items-end relative gap-x-2">
|
|
<Datepicker
|
|
error={$errors.after}
|
|
label={$_("after")}
|
|
bind:value={$formData.after}
|
|
></Datepicker>
|
|
<button
|
|
class="btn-icon mb-[10px]"
|
|
type="button"
|
|
onclick={clearAfterDate}
|
|
aria-label="Clear 'after' date"
|
|
><i class="fa fa-close"></i></button
|
|
>
|
|
</div>
|
|
</form>
|
|
{/snippet}
|
|
{#snippet footer()}
|
|
<div class="flex items-center gap-4">
|
|
<button class="btn-secondary" onclick={() => modal.closeModal()}
|
|
>{$_("cancel")}</button
|
|
>
|
|
<button
|
|
class="btn-primary"
|
|
form="strava-settings-form"
|
|
type="submit"
|
|
name="save">{$_("save")}</button
|
|
>
|
|
</div>
|
|
{/snippet}</Modal
|
|
>
|