chris/webinterface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Error Alert + design changes

Browse Source
This commit is contained in:
Christian Rute 2024-11-14 17:43:37 +01:00
parent a7dfbe2ebd
commit 7ca31ee604
8 changed files with 171 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/admin.html
View File

@ -14,7 +14,7 @@
<div class="header-buttons"> <div class="header-buttons">
<button id="loadUserListBtn" class="header-btn">Benutzerliste laden</button> <button id="loadUserListBtn" class="header-btn">Benutzerliste laden</button>
<button onclick="toWelcome()" class="header-btn">Zur Willkommensseite</button> <button id="welcomeButton" class="header-btn">Zur Willkommensseite</button>
<button id="logoutBtn" class="header-btn">Abmelden</button> <button id="logoutBtn" class="header-btn">Abmelden</button>
</div> </div>
</header> </header>
@ -23,7 +23,7 @@
<main> <main>
<div id="user-list" class="user-list"></div> <div id="user-list" class="user-list"></div>
</main> </main>
<script type="module" src="js/shared_functions.js"></script>
<script src="js/main.js"></script> <script type="module" src="js/main.js"></script>
</body> </body>
</html> </html>

84
client/css/styles.css
View File

@ -236,6 +236,7 @@ main {
/* Kleinere Sendetaste */ /* Kleinere Sendetaste */
.chat-send-button { .chat-send-button {
margin: 0.5rem;
padding: 8px 12px; /* Kleinere Abmessungen */ padding: 8px 12px; /* Kleinere Abmessungen */
background-color: #007bff; background-color: #007bff;
color: white; color: white;
@ -372,3 +373,86 @@ main {
} }
/* General alert styling */
/* General alert styling */
.custom-alert {
display: none; /* Hide by default */
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
border-radius: 8px;
padding: 20px;
max-width: 400px;
z-index: 9999;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
font-size: 16px;
animation: slideIn 0.3s ease-out;
}
/* Success-specific styling (green) */
.custom-alert.success {
background-color: #d4edda; /* Light green background */
color: #155724; /* Dark green text */
border: 1px solid #c3e6cb; /* Border for success message */
}
/* Error-specific styling (red) */
.custom-alert.error {
background-color: #f8d7da; /* Light red background */
color: #721c24; /* Dark red text */
border: 1px solid #f5c6cb; /* Border for error message */
}
/* Alert content styling */
.alert-content {
display: flex;
flex-direction: column;
align-items: center;
}
#alert-message {
margin-bottom: 15px;
text-align: center;
}
/* Button styling based on alert type */
.custom-alert.success .close-btn {
background-color: #4CAF50; /* Green button for success */
color: white;
}
.custom-alert.error .close-btn {
background-color: #f44336; /* Red button for error */
color: white;
}
/* Button common styles */
.close-btn {
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
/* Hover effect for the button */
.close-btn:hover {
opacity: 0.8;
}
/* Slide-in animation */
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}

12
client/index.html
View File

@ -7,6 +7,14 @@
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body> <body>
<!-- The modal for the alert -->
<div id="custom-alert" class="custom-alert">
<div class="alert-content">
<span id="alert-message"></span>
<button id="close-alert" class="close-btn">OK</button>
</div>
</div>
<div class="container"> <div class="container">
<h1>Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.</h1> <h1>Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.</h1>
@ -27,7 +35,7 @@
</form> </form>
</div> </div>
</div> </div>
<script type="module" src="js/shared_functions.js"></script>
<script src="js/auth.js"></script> <script type="module" src="js/auth.js"></script>
</body> </body>
</html> </html>

24
client/js/auth.js
View File

@ -1,3 +1,5 @@
import { showAlert } from './shared_functions.js';
// Registrierungs-Event // Registrierungs-Event
document.getElementById('registerForm').addEventListener('submit', async (event) => { document.getElementById('registerForm').addEventListener('submit', async (event) => {
event.preventDefault(); event.preventDefault();
@ -14,12 +16,18 @@ document.getElementById('registerForm').addEventListener('submit', async (event)
const data = await response.json(); const data = await response.json();
if (response.ok) { if (response.ok) {
alert('Registrierung erfolgreich! Bitte loggen Sie sich ein.'); showAlert('Registrierung erfolgreich! Bitte loggen Sie sich ein.', 'success');
} else { } else {
alert(data.message || 'Registrierung fehlgeschlagen'); showAlert(data.message || 'Registrierung fehlgeschlagen');
} }
} catch (error) { } catch (error) {
console.error('Fehler bei der Registrierung:', error); console.error('Fehler bei der Registrierung:', error);
// Check for network error
if (error.message.includes('Failed to fetch') || error.message.includes('ERR_CONNECTION_REFUSED')) {
showAlert('Verbindungsfehler: Die Verbindung zum Server wurde abgelehnt. Bitte überprüfen Sie die Serververbindung.');
} else {
showAlert('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
}
} }
}); });
@ -41,9 +49,19 @@ document.getElementById('loginForm').addEventListener('submit', async (event) =>
localStorage.setItem('token', data.token); // Token speichern localStorage.setItem('token', data.token); // Token speichern
window.location.href = 'welcome.html'; // Weiterleitung zur Willkommensseite window.location.href = 'welcome.html'; // Weiterleitung zur Willkommensseite
} else { } else {
alert(data.message || 'Login fehlgeschlagen'); showAlert(data.message || 'Login fehlgeschlagen');
} }
} catch (error) { } catch (error) {
console.error('Fehler beim Login:', error); console.error('Fehler beim Login:', error);
// Check for network error
if (error.message.includes('Failed to fetch') || error.message.includes('ERR_CONNECTION_REFUSED')) {
showAlert('Verbindungsfehler: Die Verbindung zum Server wurde abgelehnt. Bitte überprüfen Sie die Serververbindung.');
} else {
showAlert('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
}
} }
}); });

10
client/js/chat.js
View File

@ -1,3 +1,5 @@
import { showAlert } from './shared_functions.js';
let chatCount = 0; // Zähler für Chat-Sessions let chatCount = 0; // Zähler für Chat-Sessions
let currentChatId = null; // Aktuell angezeigte Chat-ID let currentChatId = null; // Aktuell angezeigte Chat-ID
let useMarkdown = true; let useMarkdown = true;
@ -220,7 +222,13 @@ async function getModels() {
return models.data[0].id return models.data[0].id
} catch (error) { } catch (error) {
console.error('Error fetching models:', error); if (error.message.includes('502')) {
showAlert("Server Error: 502 \nMaybe the LLM is offline?")
console.error('Bad Gateway: The server is acting as a gateway or proxy and received an invalid response from the upstream server.');
} else {
// Handle other errors here
console.error('Error fetching models:', error);
}
} }
} }

26
client/js/main.js
View File

@ -1,3 +1,5 @@
import { showAlert } from './shared_functions.js';
// IP-Adresse // IP-Adresse
const baseUrl = 'http://localhost:8015'; const baseUrl = 'http://localhost:8015';
@ -5,7 +7,7 @@ const baseUrl = 'http://localhost:8015';
async function loadUserData() { async function loadUserData() {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
if (!token) { if (!token) {
alert('Nicht autorisiert. Bitte einloggen.'); showAlert('Nicht autorisiert. Bitte einloggen.');
window.location.href = 'index.html'; window.location.href = 'index.html';
return; return;
} }
@ -38,7 +40,7 @@ async function loadUserData() {
} catch (error) { } catch (error) {
console.error(error); console.error(error);
alert('Sitzung abgelaufen. Bitte erneut einloggen.'); showAlert('Sitzung abgelaufen. Bitte erneut einloggen.');
localStorage.removeItem('token'); localStorage.removeItem('token');
window.location.href = 'index.html'; window.location.href = 'index.html';
} }
@ -51,6 +53,8 @@ document.getElementById('logoutBtn').addEventListener('click', () => {
}); });
// Funktion um auf die Willkommensseite zurückzukommen // Funktion um auf die Willkommensseite zurückzukommen
document.getElementById("welcomeButton").addEventListener("click", toWelcome);
function toWelcome() { function toWelcome() {
location.href = 'welcome.html'; location.href = 'welcome.html';
} }
@ -58,7 +62,7 @@ function toWelcome() {
async function loadAdminData() { async function loadAdminData() {
const token = localStorage.getItem('token'); const token = localStorage.getItem('token');
if (!token) { if (!token) {
alert('Nicht autorisiert. Bitte einloggen.'); showAlert('Nicht autorisiert. Bitte einloggen.');
window.location.href = 'index.html'; window.location.href = 'index.html';
return; return;
} }
@ -73,7 +77,7 @@ async function loadAdminData() {
}); });
if (!response.ok) { if (!response.ok) {
alert('Zugriff verweigert. Sie sind kein Admin.'); showAlert('Zugriff verweigert. Sie sind kein Admin.');
window.location.href = 'welcome.html'; window.location.href = 'welcome.html';
return; return;
} }
@ -82,7 +86,7 @@ async function loadAdminData() {
console.log(data.message); // "Willkommen, Admin!" console.log(data.message); // "Willkommen, Admin!"
} catch (error) { } catch (error) {
console.error(error); console.error(error);
alert('Sitzung abgelaufen. Bitte erneut einloggen.'); showAlert('Sitzung abgelaufen. Bitte erneut einloggen.');
localStorage.removeItem('token'); localStorage.removeItem('token');
window.location.href = 'index.html'; window.location.href = 'index.html';
} }
@ -112,7 +116,7 @@ async function loadUserList() {
userList.appendChild(userDiv); userList.appendChild(userDiv);
}); });
} else { } else {
alert('Fehler beim Laden der Benutzerliste'); showAlert('Fehler beim Laden der Benutzerliste');
} }
} }
@ -132,9 +136,9 @@ async function deleteUser(userId) {
}); });
if (response.ok) { if (response.ok) {
loadUserList(); // Liste aktualisieren await loadUserList(); // Liste aktualisieren
} else { } else {
alert('Fehler beim Löschen des Benutzers'); showAlert('Fehler beim Löschen des Benutzers');
} }
} catch (error) { } catch (error) {
console.error('Fehler beim Löschen des Benutzers:', error); console.error('Fehler beim Löschen des Benutzers:', error);
@ -143,9 +147,9 @@ async function deleteUser(userId) {
// Abhängig von der Seite entweder Admin- oder Benutzerdaten laden // Abhängig von der Seite entweder Admin- oder Benutzerdaten laden
if (window.location.pathname.includes('admin.html')) { if (window.location.pathname.includes('admin.html')) {
loadAdminData(); await loadAdminData();
loadUserList(); await loadUserList();
} else if (window.location.pathname.includes('welcome.html')) { } else if (window.location.pathname.includes('welcome.html')) {
loadUserData(); await loadUserData();
} }

19
client/js/shared_functions.js Normal file
View File

@ -0,0 +1,19 @@
// Alert Box
// Function to show the custom alert with a message and type
export function showAlert(message, type = 'error') {
const alertBox = document.getElementById('custom-alert');
const alertMessage = document.getElementById('alert-message');
const closeButton = document.getElementById('close-alert');
alertMessage.textContent = message; // Set the message to display
alertBox.style.display = 'block'; // Show the alert box
// Reset previous styles
alertBox.classList.remove('success', 'error');
alertBox.classList.add(type); // Add the appropriate class (success/error)
// Add event listener to close the alert box
closeButton.addEventListener('click', () => {
alertBox.style.display = 'none'; // Hide the alert box when the button is clicked
});
}

13
client/welcome.html
View File

@ -7,7 +7,13 @@
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body> <body>
<!-- The modal for the alert -->
<div id="custom-alert" class="custom-alert">
<div class="alert-content">
<span id="alert-message"></span>
<button id="close-alert" class="close-btn">OK</button>
</div>
</div>
<!-- Header für Benutzer-Info und Buttons --> <!-- Header für Benutzer-Info und Buttons -->
<header class="header"> <header class="header">
<h1 class="header-welcome">Ein simples Chat-Interface mit Fokus auf die Privatsphäre.</h1> <h1 class="header-welcome">Ein simples Chat-Interface mit Fokus auf die Privatsphäre.</h1>
@ -44,7 +50,8 @@
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="js/chat.js"></script> <script type="module" src="js/shared_functions.js"></script>
<script src="js/main.js"></script> <script type="module" src="js/chat.js"></script>
<script type="module" src="js/main.js"></script>
</body> </body>
</html> </html>