Composants Vue

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

Installation

npm install @wasto/vue-components

Prérequis

• Vue 3.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

<template>
  <Calendar
    city-id="city-uuid"
    lang="fr"
    theme="light"
    @day-click="handleDayClick"
  />
</template>

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

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

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

Événements

Événement	Payload	Description
day-click	(date: Date, wasteTypes: string[])	Émis lors du clic sur un jour

Exemple avec gestion d'événements

<template>
  <div>
    <Calendar
      city-id="city-uuid"
      place-id="place-uuid"
      lang="fr"
      @day-click="handleDayClick"
    />
    
    <div v-if="selectedDate">
      <h3>Collecte le {{ formatDate(selectedDate) }}</h3>
      <p>Types de déchets: {{ wasteTypes.join(', ') }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Calendar } from '@wasto/vue-components';

const selectedDate = ref(null);
const wasteTypes = ref([]);

const handleDayClick = (date, types) => {
  selectedDate.value = date;
  wasteTypes.value = types;
};

const formatDate = (date) => {
  return date.toLocaleDateString('fr-FR');
};
</script>

Composant Challenges

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

Utilisation de base

<template>
  <Challenges
    city-id="city-uuid"
    lang="fr"
    theme="light"
    @challenge-click="handleChallengeClick"
  />
</template>

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

const handleChallengeClick = (challengeId) => {
  console.log('Challenge cliqué:', challengeId);
};
</script>

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

Événements

Événement	Payload	Description
challenge-click	(challengeId: string)	Émis lors du clic sur un challenge
challenge-complete	(challengeId: string, score: number)	Émis lors de la complétion d'un challenge

Composant Quiz

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

Utilisation de base

<template>
  <Quiz
    city-id="city-uuid"
    challenge-id="challenge-uuid"
    :device-id="deviceId"
    lang="fr"
    theme="light"
    @complete="handleComplete"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Quiz } from '@wasto/vue-components';

const deviceId = ref('');

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

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

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

Événements

Événement	Payload	Description
complete	(score: number)	Émis à la fin du quiz

Exemple d'application complète

<template>
  <div>
    <nav>
      <button @click="view = 'calendar'">Calendrier</button>
      <button @click="view = 'challenges'">Challenges</button>
    </nav>

    <Calendar
      v-if="view === 'calendar'"
      city-id="city-uuid"
      lang="fr"
      @day-click="handleDayClick"
    />

    <Challenges
      v-if="view === 'challenges'"
      city-id="city-uuid"
      lang="fr"
      @challenge-click="handleChallengeClick"
    />

    <Quiz
      v-if="view === 'quiz' && selectedChallenge"
      city-id="city-uuid"
      :challenge-id="selectedChallenge"
      :device-id="deviceId"
      lang="fr"
      @complete="handleQuizComplete"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Calendar, Challenges, Quiz } from '@wasto/vue-components';

const view = ref('calendar');
const selectedChallenge = ref(null);
const deviceId = ref('');
const cityId = 'city-uuid';

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

const handleDayClick = (date, wasteTypes) => {
  console.log('Jour sélectionné:', date, wasteTypes);
};

const handleChallengeClick = (challengeId) => {
  selectedChallenge.value = challengeId;
  view.value = 'quiz';
};

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

Support

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