Remove unused template files (dead code)
**Motivations :** - Les fichiers template n'étaient pas utilisés - Éviter le code mort dans le projet - Garder le codebase propre **Modifications :** - Suppression de src/templates/page-template.html - Suppression de src/utils/page-template.utils.ts - Suppression du dossier src/templates/ **Pages affectées :** - Aucune page affectée (code mort supprimé)
This commit is contained in:
parent
ad32875179
commit
edb850d586
@ -1,199 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="fr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>{{PAGE_TITLE}} - LeCoffre</title>
|
|
||||||
<link rel="stylesheet" href="../../4nk.css">
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
background: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 40px;
|
|
||||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
||||||
max-width: 600px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
text-align: center;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 1rem;
|
|
||||||
min-height: 60px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status.loading {
|
|
||||||
background: #e3f2fd;
|
|
||||||
color: #1976d2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status.success {
|
|
||||||
background: #e8f5e8;
|
|
||||||
color: #2e7d32;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status.error {
|
|
||||||
background: #ffebee;
|
|
||||||
color: #c62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
width: 100%;
|
|
||||||
height: 8px;
|
|
||||||
background: #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #4caf50, #8bc34a);
|
|
||||||
width: 0%;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps-container {
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-label {
|
|
||||||
flex: 1;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-value {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-status {
|
|
||||||
margin-left: 10px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-status.pending {
|
|
||||||
background: #fff3cd;
|
|
||||||
color: #856404;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-status.completed {
|
|
||||||
background: #d4edda;
|
|
||||||
color: #155724;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step-status.error {
|
|
||||||
background: #f8d7da;
|
|
||||||
color: #721c24;
|
|
||||||
}
|
|
||||||
|
|
||||||
.continue-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.continue-btn:hover:not(:disabled) {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.continue-btn:disabled {
|
|
||||||
background: #ccc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
transform: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-area {
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1>{{PAGE_ICON}} {{PAGE_TITLE}}</h1>
|
|
||||||
<p class="subtitle">{{PAGE_SUBTITLE}}</p>
|
|
||||||
|
|
||||||
<div class="status loading" id="status">
|
|
||||||
{{INITIAL_STATUS}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="progress-container" id="progressContainer" style="display: none;">
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div class="progress-fill" id="progressFill"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="steps-container" id="stepsContainer" style="display: none;">
|
|
||||||
<!-- Les étapes seront injectées ici dynamiquement -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-area" id="contentArea">
|
|
||||||
<!-- Le contenu spécifique à la page sera injecté ici -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="continue-btn" id="continueBtn" style="display: none;">
|
|
||||||
{{CONTINUE_BUTTON_TEXT}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="module" src="{{SCRIPT_PATH}}"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,211 +0,0 @@
|
|||||||
/**
|
|
||||||
* Utilitaire pour gérer le template standardisé des pages
|
|
||||||
*/
|
|
||||||
export class PageTemplate {
|
|
||||||
private container: HTMLElement;
|
|
||||||
private status: HTMLElement;
|
|
||||||
private progressContainer: HTMLElement;
|
|
||||||
private progressFill: HTMLElement;
|
|
||||||
private stepsContainer: HTMLElement;
|
|
||||||
private contentArea: HTMLElement;
|
|
||||||
private continueBtn: HTMLButtonElement;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.container = document.querySelector('.container') as HTMLElement;
|
|
||||||
this.status = document.getElementById('status') as HTMLElement;
|
|
||||||
this.progressContainer = document.getElementById('progressContainer') as HTMLElement;
|
|
||||||
this.progressFill = document.getElementById('progressFill') as HTMLElement;
|
|
||||||
this.stepsContainer = document.getElementById('stepsContainer') as HTMLElement;
|
|
||||||
this.contentArea = document.getElementById('contentArea') as HTMLElement;
|
|
||||||
this.continueBtn = document.getElementById('continueBtn') as HTMLButtonElement;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Met à jour le statut de la page
|
|
||||||
*/
|
|
||||||
updateStatus(message: string, type: 'loading' | 'success' | 'error' = 'loading'): void {
|
|
||||||
if (this.status) {
|
|
||||||
this.status.textContent = message;
|
|
||||||
this.status.className = `status ${type}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Cache le statut de la page
|
|
||||||
*/
|
|
||||||
hideStatus(): void {
|
|
||||||
if (this.status) {
|
|
||||||
this.status.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Affiche la barre de progression
|
|
||||||
*/
|
|
||||||
showProgress(): void {
|
|
||||||
if (this.progressContainer) {
|
|
||||||
this.progressContainer.style.display = 'block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Cache la barre de progression
|
|
||||||
*/
|
|
||||||
hideProgress(): void {
|
|
||||||
if (this.progressContainer) {
|
|
||||||
this.progressContainer.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Met à jour le pourcentage de progression
|
|
||||||
*/
|
|
||||||
updateProgress(percentage: number): void {
|
|
||||||
if (this.progressFill) {
|
|
||||||
this.progressFill.style.width = `${Math.min(100, Math.max(0, percentage))}%`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Affiche les étapes
|
|
||||||
*/
|
|
||||||
showSteps(): void {
|
|
||||||
if (this.stepsContainer) {
|
|
||||||
this.stepsContainer.style.display = 'block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Cache les étapes
|
|
||||||
*/
|
|
||||||
hideSteps(): void {
|
|
||||||
if (this.stepsContainer) {
|
|
||||||
this.stepsContainer.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Met à jour une étape
|
|
||||||
*/
|
|
||||||
updateStep(stepId: string, value: string, status: 'pending' | 'completed' | 'error' = 'pending'): void {
|
|
||||||
let stepElement = document.getElementById(stepId);
|
|
||||||
if (!stepElement) {
|
|
||||||
stepElement = document.createElement('div');
|
|
||||||
stepElement.id = stepId;
|
|
||||||
stepElement.className = 'step-item';
|
|
||||||
this.stepsContainer.appendChild(stepElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
stepElement.innerHTML = `
|
|
||||||
<span class="step-label">${this.getStepLabel(stepId)}</span>
|
|
||||||
<span class="step-value">${value}</span>
|
|
||||||
<span class="step-status ${status}">${this.getStatusText(status)}</span>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Affiche le bouton continuer
|
|
||||||
*/
|
|
||||||
showContinueButton(text: string = 'Continuer', onClick?: () => void): void {
|
|
||||||
if (this.continueBtn) {
|
|
||||||
this.continueBtn.textContent = text;
|
|
||||||
this.continueBtn.style.display = 'block';
|
|
||||||
this.continueBtn.disabled = false;
|
|
||||||
|
|
||||||
if (onClick) {
|
|
||||||
this.continueBtn.onclick = onClick;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Cache le bouton continuer
|
|
||||||
*/
|
|
||||||
hideContinueButton(): void {
|
|
||||||
if (this.continueBtn) {
|
|
||||||
this.continueBtn.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Désactive le bouton continuer
|
|
||||||
*/
|
|
||||||
disableContinueButton(): void {
|
|
||||||
if (this.continueBtn) {
|
|
||||||
this.continueBtn.disabled = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Active le bouton continuer
|
|
||||||
*/
|
|
||||||
enableContinueButton(): void {
|
|
||||||
if (this.continueBtn) {
|
|
||||||
this.continueBtn.disabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Injecte du contenu dans la zone de contenu
|
|
||||||
*/
|
|
||||||
setContent(html: string): void {
|
|
||||||
if (this.contentArea) {
|
|
||||||
this.contentArea.innerHTML = html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ajoute du contenu à la zone de contenu
|
|
||||||
*/
|
|
||||||
addContent(html: string): void {
|
|
||||||
if (this.contentArea) {
|
|
||||||
this.contentArea.innerHTML += html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Vide la zone de contenu
|
|
||||||
*/
|
|
||||||
clearContent(): void {
|
|
||||||
if (this.contentArea) {
|
|
||||||
this.contentArea.innerHTML = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Obtient le label d'une étape
|
|
||||||
*/
|
|
||||||
private getStepLabel(stepId: string): string {
|
|
||||||
const labels: Record<string, string> = {
|
|
||||||
'currentBlock': 'Bloc actuel',
|
|
||||||
'birthday': 'Date anniversaire',
|
|
||||||
'blocksToScan': 'Blocs à scanner',
|
|
||||||
'blocksScanned': 'Blocs scannés',
|
|
||||||
'lastScan': 'Dernier scan',
|
|
||||||
'syncStatus': 'Statut de synchronisation',
|
|
||||||
'walletStatus': 'Statut du wallet',
|
|
||||||
'credentialsStatus': 'Statut des credentials',
|
|
||||||
'pairingStatus': 'Statut du pairing'
|
|
||||||
};
|
|
||||||
return labels[stepId] || stepId;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Obtient le texte du statut
|
|
||||||
*/
|
|
||||||
private getStatusText(status: 'pending' | 'completed' | 'error'): string {
|
|
||||||
const texts: Record<string, string> = {
|
|
||||||
'pending': 'En cours',
|
|
||||||
'completed': 'Terminé',
|
|
||||||
'error': 'Erreur'
|
|
||||||
};
|
|
||||||
return texts[status] || status;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fonction utilitaire pour créer une instance de PageTemplate
|
|
||||||
*/
|
|
||||||
export function createPageTemplate(): PageTemplate {
|
|
||||||
return new PageTemplate();
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user