Cockpit
Le cockpit est l'écran principal de Stockaj Kiosk. Il réunit les fonctions d'emprunt et de retour dans une interface à 3 colonnes avec des onglets.
screenshot-cockpit-overview.png — Vue complète du cockpit avec les 3 colonnes et les onglets.
Disposition de l'écran
L'écran est divisé en 3 colonnes :
| Colonne | Largeur | Contenu |
|---|---|---|
| Gauche | 360 px | Recherche de bénévole |
| Centre | Flexible | Onglets Emprunt / Retour |
| Droite | 300 px | Liste des emprunts ouverts |
┌──────────┬──────────────────────────────┬──────────┐
│ Recherche│ [Emprunt] [Retour] │ Emprunts │
│ bénévole │ │ ouverts │
│ │ │ │
│ ┌──────┐ │ Contenu de l'onglet actif │ #42 ─────│
│ │ 🔍 │ │ │ #38 ─────│
│ │ ... │ │ │ #35 ─────│
│ │ │ │ │ #31 ─────│
│ └──────┘ │ │ │
└──────────┴──────────────────────────────┴──────────┘
Colonne gauche — Recherche de bénévole
La colonne gauche permet de sélectionner le bénévole pour lequel effectuer un emprunt ou un retour.
Rechercher un bénévole
Tapez au moins 2 caractères dans le champ de recherche pour lancer une recherche par nom ou prénom. La recherche se déclenche automatiquement après 300 ms de saisie.
screenshot-cockpit-renter-search.png — Champ de recherche avec résultats de bénévoles.
Résultats de recherche
Chaque résultat affiche :
- Le nom du bénévole
- Son numéro de téléphone (si disponible)
- Un badge indiquant le nombre d'emprunts en cours (si applicable)
Sélection
Cliquez sur un bénévole pour le sélectionner. Il s'affiche alors avec une bordure colorée et un bouton ✕ pour le désélectionner. Les emprunts en cours du bénévole sont automatiquement chargés.
Navigation au clavier
| Touche | Action |
|---|---|
| ↓ Flèche bas | Sélectionner le résultat suivant |
| ↑ Flèche haut | Sélectionner le résultat précédent |
| Entrée | Confirmer la sélection |
Onglets centraux
La zone centrale comporte deux onglets avec des badges indiquant le nombre d'éléments :
- Emprunt — Badge : nombre d'articles dans le panier
- Retour — Badge : nombre d'emprunts actifs du bénévole sélectionné
Scanner intelligent
Le scanner de QR codes / codes-barres est toujours actif sur le cockpit. Le kiosk détermine automatiquement l'action :
| Situation | Comportement |
|---|---|
| L'article scanné fait partie d'un emprunt actif | Sélectionne le bénévole correspondant, bascule sur l'onglet Retour, charge ses emprunts |
| L'article scanné est disponible | Bascule sur l'onglet Emprunt, ajoute l'article au panier |
| L'article n'est pas trouvé | Affiche un message d'erreur |
Onglet Emprunt
L'onglet Emprunt permet de créer un prêt de matériel.
screenshot-cockpit-checkout-tab.png — Onglet Emprunt avec zone de scan, résultats et panier.
Ajouter des outils par scan
Scannez le QR code ou code-barres d'un outil pour l'ajouter au panier. Si l'outil est déjà dans le panier, sa quantité est incrémentée.
Ajouter des outils par recherche
Utilisez le champ « Rechercher un outil… » pour trouver un outil par son nom ou son code. La recherche nécessite au minimum 2 caractères et se déclenche après 350 ms.
Chaque résultat affiche :
- Le nom de l'outil
- Son code
- La disponibilité : « Dispo : N »
Cliquez sur un résultat pour l'ajouter au panier.
Le panier
Le panier affiche la liste des outils sélectionnés.
Panier vide
Lorsqu'aucun outil n'a été ajouté, un message invite à scanner un article :
🛒 Scannez un article pour l'ajouter
Outils dans le panier
Pour chaque outil ajouté, le panier affiche :
| Élément | Description |
|---|---|
| Nom | Nom de l'outil |
| Code | Code de l'article (texte gris) |
| − | Diminuer la quantité (désactivé si quantité = 1) |
| Quantité | Nombre d'unités |
| + | Augmenter la quantité |
| ✕ | Supprimer l'outil du panier |
screenshot-cockpit-cart.png — Panier avec plusieurs outils et contrôles de quantité.
Avertissement de stock
Si la quantité demandée dépasse le stock disponible, un avertissement s'affiche en rouge :
⚠️ Stock insuffisant (disponible : N)
Cet avertissement est informatif et n'empêche pas la validation de l'emprunt.
Valider l'emprunt
Le bouton « ✓ Confirmer l'emprunt » (vert) en bas de la zone centrale envoie la demande au serveur.
- Le bouton est désactivé si aucun bénévole n'est sélectionné ou si le panier est vide
- Un indicateur de chargement s'affiche pendant l'envoi
Onglet Retour
L'onglet Retour permet d'enregistrer la restitution de matériel emprunté.
screenshot-cockpit-return-tab.png — Onglet Retour avec liste des emprunts du bénévole sélectionné.
Pré-requis
Un bénévole doit être sélectionné dans la colonne de gauche. Ses emprunts actifs s'affichent alors sous forme de liste.
Sélection de l'emprunt
Chaque emprunt est affiché sous forme de carte contenant :
| Élément | Description |
|---|---|
| Emprunt #{id} | Identifiant de l'emprunt |
| Date | Date de création au format suisse (ex. : 15 janvier 2026) |
| Articles | Liste des articles empruntés avec quantité |
Cliquez sur une carte pour afficher le détail du retour.
Détail du retour
Pour chaque article de l'emprunt, vous pouvez indiquer s'il est rendu ou perdu :
Article en quantité unique (×1)
Deux boutons sont affichés :
| Bouton | Description |
|---|---|
| ✅ Rendu | L'article est restitué (sélectionné par défaut) |
| ⚠️ Perdu | L'article est déclaré perdu |
Article en quantité multiple (×N)
Deux compteurs sont affichés :
| Compteur | Description |
|---|---|
| Rendus : | Nombre d'unités rendues (boutons − et +) |
| Perdus : | Nombre d'unités perdues (boutons − et +) |
Les deux compteurs sont liés : la somme des rendus et perdus ne peut pas dépasser la quantité totale empruntée.
screenshot-cockpit-return-single.png — Article ×1 avec boutons « Rendu » / « Perdu ».
screenshot-cockpit-return-multi.png — Article ×N avec compteurs liés.
Valider le retour
Le bouton « ✓ Valider le retour » (vert) envoie le retour au serveur.
Colonne droite — Emprunts ouverts
La colonne droite affiche tous les emprunts ouverts de l'ensemble des bénévoles, pas seulement celui sélectionné. Un bouton « Rafraîchir » permet de recharger la liste.
screenshot-cockpit-open-rentals.png — Sidebar droite avec la liste de tous les emprunts ouverts.
Chaque carte affiche :
- Le nom du bénévole
- L'identifiant de l'emprunt
- Les articles empruntés
- Un badge de statut (En cours, En retard)
Cliquez sur un emprunt pour sélectionner automatiquement le bénévole correspondant et afficher ses retours.
Écran de confirmation
Après validation d'un emprunt ou d'un retour, un écran de confirmation plein écran s'affiche :
- ✅ Grande icône verte
- « Emprunt validé ! » ou « Retour validé ! »
- « Pour {nom du bénévole} »
screenshot-cockpit-success.png — Écran de confirmation après validation.
L'écran se ferme automatiquement après 3 secondes et réinitialise le cockpit. Vous pouvez aussi le fermer en cliquant n'importe où ou en appuyant sur Entrée / Espace.
Fonctionnement hors-ligne
Si le serveur est inaccessible au moment de la validation, l'opération est mise en file d'attente et sera synchronisée automatiquement à la reconnexion. L'écran de confirmation s'affiche quand même.
Pour en savoir plus, consultez la page Mode hors-ligne.