Composants Svelte

Les composants Svelte Wast-o permettent d'intégrer nativement les fonctionnalités Wast-o dans votre application Svelte.

Installation

npm install @wasto/svelte-components

Prérequis

• Svelte 4.0 ou supérieur

Composant Calendar

Le composant Calendar affiche un calendrier mensuel avec les jours de collecte par type de déchet.

Utilisation de base

<script>
  import { Calendar } from '@wasto/svelte-components';
</script>

<Calendar
  cityId="city-uuid"
  lang="fr"
  theme="light"
/>

Props

Prop	Type	Requis	Défaut	Description
cityId	string	Oui	-	Identifiant unique de la ville (UUID)
placeId	string	Non	-	Identifiant du lieu de collecte spécifique
apiBaseUrl	string	Non	'https://api.wast-o.org'	URL de base de l'API
lang	'fr' | 'en'	Non	'fr'	Langue d'affichage
theme	'light' | 'dark'	Non	'light'	Thème d'affichage
className	string	Non	''	Classe CSS supplémentaire

Exemple avec gestion d'événements

<script>
  import { Calendar } from '@wasto/svelte-components';
  import { onMount } from 'svelte';

  let selectedDate = null;
  let wasteTypes = [];

  function handleDayClick(event) {
    selectedDate = event.detail.date;
    wasteTypes = event.detail.wasteTypes;
    console.log('Jour sélectionné:', selectedDate, wasteTypes);
  }
</script>

<Calendar
  cityId="city-uuid"
  placeId="place-uuid"
  lang="fr"
  on:dayClick={handleDayClick}
/>

{#if selectedDate}
  <div>
    <h3>Collecte le {selectedDate.toLocaleDateString('fr-FR')}</h3>
    <p>Types de déchets: {wasteTypes.join(', ')}</p>
  </div>
{/if}

Composant Challenges

Le composant Challenges affiche la liste des challenges disponibles pour une ville.

Utilisation de base

<script>
  import { Challenges } from '@wasto/svelte-components';
</script>

<Challenges
  cityId="city-uuid"
  lang="fr"
  theme="light"
/>

Props

Prop	Type	Requis	Défaut	Description
cityId	string	Oui	-	Identifiant unique de la ville (UUID)
apiBaseUrl	string	Non	'https://api.wast-o.org'	URL de base de l'API
lang	'fr' | 'en'	Non	'fr'	Langue d'affichage
theme	'light' | 'dark'	Non	'light'	Thème d'affichage
className	string	Non	''	Classe CSS supplémentaire

Composant Quiz

Le composant Quiz affiche un quiz interactif pour un challenge spécifique.

Utilisation de base

<script>
  import { Quiz } from '@wasto/svelte-components';
  import { onMount } from 'svelte';

  let deviceId = '';

  onMount(() => {
    const storedId = localStorage.getItem('wasto_device_id');
    if (storedId) {
      deviceId = storedId;
    } else {
      const newId = 'web_' + crypto.randomUUID();
      localStorage.setItem('wasto_device_id', newId);
      deviceId = newId;
    }
  });

  function handleComplete(event) {
    const score = event.detail.score;
    console.log('Quiz terminé avec un score de', score, '%');
  }
</script>

<Quiz
  cityId="city-uuid"
  challengeId="challenge-uuid"
  {deviceId}
  lang="fr"
  on:complete={handleComplete}
/>

Props

Prop	Type	Requis	Défaut	Description
cityId	string	Oui	-	Identifiant unique de la ville (UUID)
challengeId	string	Oui	-	Identifiant du challenge
serieId	string	Non	-	Identifiant de la série de questions
apiBaseUrl	string	Non	'https://api.wast-o.org'	URL de base de l'API
lang	'fr' | 'en'	Non	'fr'	Langue d'affichage
theme	'light' | 'dark'	Non	'light'	Thème d'affichage
deviceId	string	Non	-	Identifiant de l'appareil pour sauvegarder la progression
className	string	Non	''	Classe CSS supplémentaire

Exemple d'application complète

<script>
  import { Calendar, Challenges, Quiz } from '@wasto/svelte-components';
  import { onMount } from 'svelte';

  let view = 'calendar';
  let selectedChallenge = null;
  let deviceId = '';
  const cityId = 'city-uuid';

  onMount(() => {
    const storedId = localStorage.getItem('wasto_device_id');
    if (storedId) {
      deviceId = storedId;
    } else {
      const newId = 'web_' + crypto.randomUUID();
      localStorage.setItem('wasto_device_id', newId);
      deviceId = newId;
    }
  });

  function handleDayClick(event) {
    console.log('Jour sélectionné:', event.detail.date, event.detail.wasteTypes);
  }

  function handleChallengeClick(event) {
    selectedChallenge = event.detail.challengeId;
    view = 'quiz';
  }

  function handleQuizComplete(event) {
    console.log('Score:', event.detail.score);
    view = 'challenges';
    selectedChallenge = null;
  }
</script>

<nav>
  <button on:click={() => view = 'calendar'}>Calendrier</button>
  <button on:click={() => view = 'challenges'}>Challenges</button>
</nav>

{#if view === 'calendar'}
  <Calendar cityId={cityId} lang="fr" on:dayClick={handleDayClick} />
{/if}

{#if view === 'challenges'}
  <Challenges cityId={cityId} lang="fr" on:challengeClick={handleChallengeClick} />
{/if}

{#if view === 'quiz' && selectedChallenge}
  <Quiz
    cityId={cityId}
    challengeId={selectedChallenge}
    {deviceId}
    lang="fr"
    on:complete={handleQuizComplete}
  />
{/if}

Support

Pour toute question ou problème, consultez la documentation API ou contactez le support technique.