Appearance
🎠Système de Templating Mustache ​
L'application intègre le moteur de rendu Mustache pour permettre la personnalisation dynamique des contenus provenant du CMS (Directus). Cela permet d'injecter des variables techniques ou contextuelles directement dans les textes, URLs et configurations.
📖 Concept ​
Mustache est un système de "logic-less templates". Dans le CMS, les intégrateurs peuvent insérer des balises entre doubles accolades, par exemple {{uid}}, qui seront remplacées côté client par la valeur réelle correspondante.
Exemple d'usage ​
Une URL de portail captif définie dans le CMS : https://hotspot.hotel.com/login?mac={{mac}}&room={{room_number}}
Deviendra pour l'utilisateur : https://hotspot.hotel.com/login?mac=00:11:22:33:44:55&room=102
🗄️ Variables disponibles ​
Le contexte Mustache est alimenté par le contextStore, qui fusionne plusieurs sources de données.
1. Variables Système & Device ​
| Variable | Description | Exemple |
|---|---|---|
{{uid}} | Identifiant unique du device (UID). | 550e8400-e29b... |
{{mac}} | Adresse MAC physique de l'appareil. | AA:BB:CC:DD:EE:FF |
{{ip}} | Adresse IP locale de l'appareil. | 192.168.1.15 |
{{appVersion}} | Version actuelle de l'application. | 27.1.13 |
{{server}} | Identifiant du serveur de rattachement. | tvcast_server_01 |
2. Variables de Localisation ​
| Variable | Description | Exemple |
|---|---|---|
{{locale}} | Code langue complet (format long). | fr-FR, en-US |
{{lang}} | Code langue court (ISO 2). | fr, en |
3. Variables CMS (Etablissement / Zone) ​
| Variable | Description |
|---|---|
{{facilityId}} | ID interne de l'Ă©tablissement. |
{{facilityIdExternal}} | ID externe (PMS/MĂ©tier) de l'Ă©tablissement. |
{{areaId}} | ID interne de la zone (étage, bâtiment). |
{{areaIdExternal}} | ID externe de la zone. |
{{souscriptionUrl}} | URL de souscription configurée. |
4. Variables Dynamiques (data_general) ​
Toutes les paires clé/valeur définies dans le champ "Data General" de l'établissement ou de la zone dans Directus sont automatiquement injectées dans le contexte. Exemple : si vous ajoutez wifi_password: "1234" dans Directus, vous pouvez utiliser {{wifi_password}} dans vos contenus.
🛠️ Intégration Technique ​
Composant Svelte MustacheText ​
Pour afficher du texte parsé par Mustache dans l'interface :
svelte
<script>
import MustacheText from '$lib/components/MustacheText.svelte';
</script>
<MustacheText text="Bienvenue dans la chambre {{ room }} !" />Rendu programmatique d'objets ​
Le helper renderObjectWithMustache permet de transformer récursivement toutes les chaînes de caractères d'un objet (utile pour les configurations complexes) :
typescript
import { renderObjectWithMustache } from '$lib/utils';
const config = { url: 'https://api.site.com/{{uid}}' };
const rendered = renderObjectWithMustache(config, $contextStore.data);
// Resultat : { url: "https://api.site.com/abc-123" }