checkbox clickable et modification des textes
This commit is contained in:
Pierre Marx
238
index.html
238
index.html
@@ -1,131 +1,153 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>SimpleConnect - Gestion Centralisée des Plannings</title>
|
<title>SimpleConnect - Gestion Centralisée des Plannings</title>
|
||||||
<link rel="stylesheet" href="choices.min.css">
|
<link rel="stylesheet" href="choices.min.css" />
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Page de connexion -->
|
<!-- Page de connexion -->
|
||||||
<div id="loginPage" class="page active">
|
<div id="loginPage" class="page active">
|
||||||
<div class="login-container">
|
<div class="login-container">
|
||||||
<h1>SimpleConnect</h1>
|
<h1>SimpleConnect</h1>
|
||||||
<div class="signalr-status">
|
<div class="signalr-status">
|
||||||
<span class="signalr-indicator" id="signalrIndicator"></span>
|
<span class="signalr-indicator" id="signalrIndicator"></span>
|
||||||
<span class="signalr-text" id="signalrText">Connexion au serveur...</span>
|
<span class="signalr-text" id="signalrText"
|
||||||
</div>
|
>Connexion au serveur...</span
|
||||||
<h2>Connexion Agent</h2>
|
>
|
||||||
<form id="loginForm">
|
|
||||||
<input type="text" id="accessCode" placeholder="Code d'accès" required>
|
|
||||||
<input type="password" id="password" placeholder="Mot de passe" required>
|
|
||||||
<select id="terminal" required>
|
|
||||||
<option value="" placeholder>Chargement des postes...</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<!-- Option de déconnexion forcée -->
|
|
||||||
<div class="force-disconnect-container">
|
|
||||||
<label class="checkbox-label">
|
|
||||||
<input type="checkbox" id="forceDisconnect">
|
|
||||||
<span>Déconnexion</span>
|
|
||||||
</label>
|
|
||||||
<small class="checkbox-hint">Cochez si vous rencontrez des problèmes de connexion ou si votre session est bloquée</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit">Se connecter</button>
|
|
||||||
<div id="loginError" class="error-message"></div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h2>Connexion Agent</h2>
|
||||||
|
<form id="loginForm">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="accessCode"
|
||||||
|
placeholder="Code d'accès"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
placeholder="Mot de passe"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<select id="terminal" required>
|
||||||
|
<option value="" placeholder>Chargement des postes...</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Option de déconnexion forcée -->
|
||||||
|
<div class="force-disconnect-container">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<input type="checkbox" id="forceDisconnect" />
|
||||||
|
<span>Déconnexion</span>
|
||||||
|
</label>
|
||||||
|
<small class="checkbox-hint"
|
||||||
|
>À cocher en cas de problème de connexion ou de session
|
||||||
|
bloquée.</small
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit">Se connecter</button>
|
||||||
|
<div id="loginError" class="error-message"></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Page principale -->
|
<!-- Page principale -->
|
||||||
<div id="mainPage" class="page">
|
<div id="mainPage" class="page">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<header>
|
<header>
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<h1>SimpleConnect</h1>
|
<h1>SimpleConnect</h1>
|
||||||
<span id="agentName" class="agent-name"></span>
|
<span id="agentName" class="agent-name"></span>
|
||||||
</div>
|
|
||||||
<div class="header-center">
|
|
||||||
<div id="callStatus" class="call-status">
|
|
||||||
<span class="status-indicator" id="statusIndicator"></span>
|
|
||||||
<span id="statusText">En attente</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<button id="simulateCallBtn" class="btn-secondary">Simuler un appel</button>
|
|
||||||
<button id="logoutBtn" class="btn-secondary">Déconnexion</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- Zone d'alerte appel entrant -->
|
|
||||||
<div id="incomingCallAlert" class="incoming-call-alert">
|
|
||||||
<div class="call-icon">📞</div>
|
|
||||||
<div class="call-info">
|
|
||||||
<div class="call-title">APPEL ENTRANT</div>
|
|
||||||
<div class="call-center" id="callCenterName"></div>
|
|
||||||
<div class="call-patient" id="callPatientInfo"></div>
|
|
||||||
</div>
|
|
||||||
<button id="acceptCallBtn" class="btn-accept">Prendre l'appel</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
<!-- Conteneur principal -->
|
<div id="callStatus" class="call-status">
|
||||||
<div class="main-container">
|
<span class="status-indicator" id="statusIndicator"></span>
|
||||||
<!-- Sidebar avec la liste des centres -->
|
<span id="statusText">En attente</span>
|
||||||
<aside class="sidebar">
|
</div>
|
||||||
<h3>Mes Centres</h3>
|
|
||||||
<div id="centersList" class="centers-list"></div>
|
|
||||||
<div class="sidebar-footer">
|
|
||||||
<h4>Statistiques du jour</h4>
|
|
||||||
<div id="dailyStats" class="daily-stats">
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">Appels traités:</span>
|
|
||||||
<span class="stat-value" id="callCount">0</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<span class="stat-label">RDV pris:</span>
|
|
||||||
<span class="stat-value" id="appointmentCount">0</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Zone principale avec les webviews -->
|
|
||||||
<main class="content">
|
|
||||||
<!-- Onglets des centres -->
|
|
||||||
<div class="tabs" id="centerTabs"></div>
|
|
||||||
|
|
||||||
<!-- Container des webviews -->
|
|
||||||
<div id="webviewContainer" class="webview-container">
|
|
||||||
<div class="no-center-selected">
|
|
||||||
<p>Sélectionnez un centre ou attendez un appel entrant</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Zone de notes rapides -->
|
|
||||||
<div class="notes-section">
|
|
||||||
<h4>Notes rapides</h4>
|
|
||||||
<textarea id="quickNotes" placeholder="Prenez des notes ici..."></textarea>
|
|
||||||
<button id="saveNotesBtn" class="btn-small">Sauvegarder</button>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<button id="simulateCallBtn" class="btn-secondary">
|
||||||
|
Simuler un appel
|
||||||
|
</button>
|
||||||
|
<button id="logoutBtn" class="btn-secondary">Déconnexion</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Zone d'alerte appel entrant -->
|
||||||
|
<div id="incomingCallAlert" class="incoming-call-alert">
|
||||||
|
<div class="call-icon">📞</div>
|
||||||
|
<div class="call-info">
|
||||||
|
<div class="call-title">APPEL ENTRANT</div>
|
||||||
|
<div class="call-center" id="callCenterName"></div>
|
||||||
|
<div class="call-patient" id="callPatientInfo"></div>
|
||||||
|
</div>
|
||||||
|
<button id="acceptCallBtn" class="btn-accept">Prendre l'appel</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Conteneur principal -->
|
||||||
|
<div class="main-container">
|
||||||
|
<!-- Sidebar avec la liste des centres -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
<h3>Mes Centres</h3>
|
||||||
|
<div id="centersList" class="centers-list"></div>
|
||||||
|
<div class="sidebar-footer">
|
||||||
|
<h4>Statistiques du jour</h4>
|
||||||
|
<div id="dailyStats" class="daily-stats">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">Appels traités:</span>
|
||||||
|
<span class="stat-value" id="callCount">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-label">RDV pris:</span>
|
||||||
|
<span class="stat-value" id="appointmentCount">0</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Zone principale avec les webviews -->
|
||||||
|
<main class="content">
|
||||||
|
<!-- Onglets des centres -->
|
||||||
|
<div class="tabs" id="centerTabs"></div>
|
||||||
|
|
||||||
|
<!-- Container des webviews -->
|
||||||
|
<div id="webviewContainer" class="webview-container">
|
||||||
|
<div class="no-center-selected">
|
||||||
|
<p>Sélectionnez un centre ou attendez un appel entrant</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Zone de notes rapides -->
|
||||||
|
<div class="notes-section">
|
||||||
|
<h4>Notes rapides</h4>
|
||||||
|
<textarea
|
||||||
|
id="quickNotes"
|
||||||
|
placeholder="Prenez des notes ici..."
|
||||||
|
></textarea>
|
||||||
|
<button id="saveNotesBtn" class="btn-small">Sauvegarder</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Modal de simulation d'appel -->
|
<!-- Modal de simulation d'appel -->
|
||||||
<div id="callSimulationModal" class="modal">
|
<div id="callSimulationModal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close">×</span>
|
<span class="close">×</span>
|
||||||
<h2>Simuler un appel entrant</h2>
|
<h2>Simuler un appel entrant</h2>
|
||||||
<div id="simulatedCallsList" class="simulated-calls-list"></div>
|
<div id="simulatedCallsList" class="simulated-calls-list"></div>
|
||||||
<button id="customCallBtn" class="btn-secondary">Appel personnalisé</button>
|
<button id="customCallBtn" class="btn-secondary">
|
||||||
</div>
|
Appel personnalisé
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="choices.min.js"></script>
|
<script src="choices.min.js"></script>
|
||||||
<script src="renderer.js"></script>
|
<script src="renderer.js"></script>
|
||||||
<script src="cti-simulator.js"></script>
|
<script src="cti-simulator.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -127,7 +127,7 @@ async function handleLogin(e) {
|
|||||||
|
|
||||||
// Désactiver le bouton pendant la connexion
|
// Désactiver le bouton pendant la connexion
|
||||||
loginBtn.disabled = true;
|
loginBtn.disabled = true;
|
||||||
loginBtn.textContent = forceDisconnect ? 'Déconnexion forcée et reconnexion...' : 'Connexion en cours...';
|
loginBtn.textContent = forceDisconnect ? 'Reconnexion...' : 'Connexion en cours...';
|
||||||
errorDiv.textContent = '';
|
errorDiv.textContent = '';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
|||||||
22
styles.css
22
styles.css
@@ -408,8 +408,11 @@ body {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 0;
|
height: 18px;
|
||||||
width: 0;
|
width: 18px;
|
||||||
|
left: 0;
|
||||||
|
top: 1px;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Checkbox personnalisée */
|
/* Checkbox personnalisée */
|
||||||
@@ -427,14 +430,21 @@ body {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Checkbox cochée */
|
/* Checkbox cochée - fond violet */
|
||||||
.checkbox-label input[type="checkbox"]:checked ~ ::before {
|
.checkbox-label input[type="checkbox"]:checked + span::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 1px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
background: #667eea;
|
background: #667eea;
|
||||||
border-color: #667eea;
|
border: 2px solid #667eea;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icône de check */
|
/* Icône de check */
|
||||||
.checkbox-label input[type="checkbox"]:checked ~ ::after {
|
.checkbox-label input[type="checkbox"]:checked + span::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 6px;
|
left: 6px;
|
||||||
|
|||||||
Reference in New Issue
Block a user