Gestion du Temps de Travail - Version PWA

Application web progressive (PWA) pour la gestion du temps de travail hebdomadaire.

Version 2.0.0 - Version PWA (Janvier 2026) Migré depuis Electron pour meilleure légèreté, performance et compatibilité cross-platform.

🚀 Démarrage rapide

Prérequis

• Node.js 16+
• npm ou yarn

Installation

npm install
npm run dev

L'application s'ouvre automatiquement sur http://localhost:3000

🌐 Déploiement

Mode Production

npm start
# Serveur sur http://localhost:3000

Autres ports

npm run serve      # Port 8080
npm run preview    # Port 5000

📱 Installation comme App

Sur Desktop

1. Ouvrir l'application dans le navigateur
2. Clic sur l'icône "Installer" (ou ⋮ → "Installer cette application")
3. L'app apparaît dans vos applications

Sur Mobile (Android)

1. Ouvrir dans Chrome/Firefox
2. Appuyer sur "Ajouter à l'écran d'accueil"
3. L'app s'ajoute à côté des autres apps

Sur iOS (iPhone/iPad)

1. Ouvrir dans Safari
2. Partage → "Sur l'écran d'accueil"
3. Ajouter l'app

✨ Fonctionnalités

⏰ Saisie des Horaires

• ✅ Sélecteurs intelligents (mini-dropdowns)
• ✅ Saisie hybride (frappe ou sélection)
• ✅ Contrainte 5 minutes (arrondi auto)
• ✅ Options contextuelles (heures pertinentes)
• ✅ Sauvegarde temps réel

📊 Gestion des Données

• ✅ Calcul intelligent des heures
• ✅ Badge compteur (X/5 jours)
• ✅ Gestion demi-journées
• ✅ Vue semaine avec totaux
• ✅ Export CSV et JSON
• ✅ Sauvegarde automatique (localStorage)

📁 Stockage

• Local : localStorage du navigateur (stockage permanent)
• Offline : Fonctionne sans internet (Service Worker)
• Export : CSV/JSON pour portabilité

🖥️ Interface

• ✅ Design responsive (desktop, tablet, mobile)
• ✅ Bouton "Aujourd'hui" (retour rapide)
• ✅ Synchronisation totale des champs
• ✅ Navigation clavier complète
• ✅ Thème clair/sombre/auto
• ✅ PWA complète (instalable)

⚡ Raccourcis Clavier

• Ctrl+N (Cmd+N) : Nouvelle journée
• Ctrl+S (Cmd+S) : Enregistrer
• Ctrl+R (Cmd+R) : Recharger
• F12 : Outils de développement

📂 Structure des Fichiers

gestion_temps_pwa/
├── index.html           # Interface utilisateur
├── app.js              # Logique métier
├── styles.css          # Styles CSS
├── service-worker.js   # Cache offline (PWA)
├── manifest.json       # Configuration PWA
├── package.json        # Dépendances npm
├── assets/             # Icônes et ressources
├── README.md           # Cette documentation
└── .gitignore          # Fichiers ignorés git

🎯 Avantages PWA vs Electron

✅ PWA (Actuel)

• ✨ Léger : ~500 KB vs 100 MB (Electron)
• 🚀 Rapide : Démarrage instantané
• 🌐 Cross-platform : Fonctionne partout (desktop, mobile, tablette)
• 🔄 Mise à jour automatique : Plus besoin de réinstaller
• 📱 Installable : Icône sur écran d'accueil
• 🔌 Offline : Fonctionne sans internet (Service Worker)

❌ Avantages Electron (non utilisés ici)

• ⚙️ Accès système natif (fichiers, impression complexe)
• 🎨 Menu natif
• 🔐 Sécurité renforcée (sandbox)

💾 Stockage des Données

• Automatique : localStorage (pas besoin configurer)
• Export : CSV/JSON pour backup
• Import : Restauration depuis CSV/JSON
• Cloud (optionnel) : Peut être ajouté si besoin

🔧 Configuration du Planning

Planning par défaut dans app.js :

const PLANNING_HORAIRES_DEFAULT = {
    'lundi': { arrivee: '08:00', sortieMidi: '12:00', retourMidi: '13:30', sortie: '17:15' },
    'mardi': { ... },
    'mercredi': { arrivee: '08:00', sortieMidi: '12:00' }, // demi-journée
    'jeudi': { ... },
    'vendredi': { ... }
};

🚀 Déploiement en Production

Option 1 : Serveur Statique (Recommandé)

# Sur Netlify, Vercel, GitHub Pages (gratuit)
npm run build
# Déployer les fichiers statiques

Option 2 : Serveur Personnel

npm start
# Servir sur port 3000

Option 3 : Docker (avancé)

FROM node:16-alpine
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 3000
CMD ["npm", "start"]

📋 Configuration

Thème

Options dans interface :

• Auto (suit système)
• Clair
• Sombre

Sauvegarde Automatique

Toujours activée (localStorage)

Planning Personnalisé

Supporté par semaine (config dans interface)

🐛 Troubleshooting

Service Worker ne se charge pas

// Vérifier en console navigateur
navigator.serviceWorker.getRegistrations()

Cache à effacer

// En console
caches.keys().then(names =>
  names.forEach(name => caches.delete(name))
)

Données perdues

• Exporter avant en CSV/JSON
• localStorage persiste normalement
• Vérifier paramètres navigateur (ne pas effacer données)

🔗 Liens

• GitHub : https://github.com/gizmo38/gestion_temps_pwa
• Ancien version (Electron) : https://github.com/gizmo38/gestion_temps

📝 Changelog

v2.0.0 (2026-01-XX)

• ✨ Migration Electron → PWA
• ✨ Ajouter Service Worker (offline)
• ✨ Ajouter PWA manifest
• ✨ Simplifier package.json
• ✨ Performance améliorée (~200x plus léger)

v1.1.1 (2025-12-XX)

• Electron version précédente
• Voir CHANGELOG_ELECTRON.md

👨‍💻 Développement

Pour modifier l'application :

1. Éditer les fichiers sources
2. Recharger le navigateur (Ctrl+R)
3. Les changements sont pris en compte immédiatement

Service Worker met en cache les fichiers. Pour forcer un refresh :

// En console
self.skipWaiting();
location.reload();

📤 Distribution

Partager simplement l'URL :

• Desktop : Ouvre l'app en navigateur + option "Installer"
• Mobile : Option "Ajouter à l'écran d'accueil"

Pas besoin de télécharger/installer comme Electron !

---

Version : 2.0.0 Développé par : Excelae Technologie : PWA (HTML/CSS/JS vanilla) Léger. Rapide. Portable.