jasonhirsch/dev-manufaktur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard V2

Browse Source
This commit is contained in:
Jason Hirsch
2025-02-19 17:27:01 +01:00
parent 14423e0497
commit 2b53b40778
7 changed files with 684 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
Dashboard_V2/templates/dashboard.html
View File

@@ -1,4 +1,3 @@
<!-- templates/dashboard.html -->
{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
@@ -23,16 +22,17 @@
<div id="clock" class="text-xl sm:text-2xl font-semibold"></div>
</div>
<!-- Websuche unter dem Datum -->
<!-- Websuche: ohne Input-BG/Border -->
<div class="glassmorphism p-4 shadow-lg mb-6 w-full max-w-lg">
<form id="searchForm" class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 items-center justify-center">
<input type="text" id="searchInput" placeholder="Suche..."
class="flex-grow p-2 border rounded text-gray-800" />
<select id="searchEngine" class="p-2 border rounded text-gray-800">
<form id="searchForm" style="background-color: transparent !important;" class="flex flex-col sm:flex-row items-center justify-center">
<input type="text" style="background-color: transparent !important;" id="searchInput" placeholder="Suche..."
class="flex-grow bg-transparent border-0 outline-none placeholder-gray-500 text-gray-800
dark:placeholder-gray-300" />
<select id="searchEngine" style="background-color: transparent !important;" class="bg-transparent border-0 outline-none text-gray-800 dark:text-white ml-2">
<option value="qwant">Qwant</option>
<option value="google">Google</option>
</select>
<button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
<button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 ml-2">
Los
</button>
</form>
@@ -138,7 +138,7 @@
<i class="fas fa-home text-white text-xl"></i>
</button>
<!-- Falls du trotzdem einen "Support" willst, kannst du es hier lassen -->
<!-- Support-Button (öffnet Support-Modal V1) -->
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-purple-500 hover:bg-purple-600 rounded-xl
transition-colors duration-200" data-modal="supportModal">
<i class="fas fa-question-circle text-white text-xl"></i>
@@ -152,9 +152,17 @@
<i class="fas fa-user-shield text-white text-xl"></i>
</a>
{% endif %}
<!-- Einstellungen (öffnet Settings-Modal V1) -->
<button class="dock-icon w-12 h-12 flex items-center justify-center bg-yellow-700 hover:bg-yellow-800 rounded-xl
transition-colors duration-200" data-modal="settingsModal">
<i class="fas fa-cog text-white text-xl"></i>
</button>
</div>
<!-- Modals (z.B. Home, Support usw.) -->
<!-- =========================== MODALS =========================== -->
<!-- Home Modal -->
<div id="homeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded max-w-md w-full mx-auto">
<h2 class="text-2xl font-bold mb-4">Willkommen Zuhause!</h2>
@@ -172,13 +180,78 @@
</div>
</div>
<!-- Support Modal (aus V1, mit ProblemType/E-Mail/Nachricht + sendSupportMessage) -->
<div id="supportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded max-w-md w-full mx-auto">
<h2 class="text-2xl font-bold mb-4">Support</h2>
<p class="mb-4">Beschreiben Sie Ihr Problem</p>
<!-- ... -->
<button class="mt-4 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-800 text-gray-800 dark:text-white
font-bold py-2 px-4 rounded close-modal">
<div class="glassmorphism bg-white dark:bg-gray-800 p-8 rounded-lg max-w-md w-full mx-auto shadow-lg">
<h2 class="text-2xl font-bold mb-4">Support kontaktieren</h2>
<!-- Dropdown zur Kategorisierung des Problems -->
<label for="problemType" class="block mb-2 text-lg font-semibold">Art des Problems</label>
<select id="problemType" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white">
<option value="Technisches Problem">Technisches Problem</option>
<option value="Account Problem">Account Problem</option>
<option value="Sonstiges">Sonstiges</option>
</select>
<!-- Eingabefeld für E-Mail -->
<label for="emailInput" class="block mb-2 text-lg font-semibold">Ihre E-Mail</label>
<input type="email" id="emailInput" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white"
placeholder="Ihre E-Mail-Adresse" />
<!-- Eingabefeld für Nachricht -->
<label for="messageInput" class="block mb-2 text-lg font-semibold">Nachricht</label>
<textarea id="messageInput" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white" rows="4"
placeholder="Beschreiben Sie Ihr Problem"></textarea>
<!-- Button zum Senden der Nachricht -->
<button id="sendSupportMessage" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600 transition-colors duration-200">
Nachricht senden
</button>
<!-- Schließen-Button -->
<button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors duration-200 close-modal">
Schließen
</button>
</div>
</div>
<!-- Settings Modal (aus V1, mit Wallpaper-Auswahl, Stadt, etc.) -->
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center overflow-auto z-50">
<div class="glassmorphism bg-white dark:bg-gray-800 p-6 rounded-lg w-full max-w-md max-h-screen overflow-y-auto mx-4 shadow-lg">
<h2 class="text-2xl font-bold mb-4">Einstellungen</h2>
<p>Hier können Sie Ihre Einstellungen anpassen und das System nach Ihren Wünschen konfigurieren.</p>
<!-- Hintergrundbild auswählen -->
<h3 class="text-lg font-semibold mb-2 mt-4">Hintergrundbild auswählen</h3>
<div id="wallpaperSelection" class="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-4">
{% for i in range(1, 27) %}
<img src="{{ url_for('static', filename=i ~ '.png') }}" alt="Wallpaper {{ i }}"
class="w-full h-auto wallpaper-thumb cursor-pointer border-2
{% if wallpaper == i ~ '.png' %}border-blue-500{% else %}border-transparent{% endif %}
rounded"
data-wallpaper="{{ i }}.png">
{% endfor %}
</div>
<!-- Stadt ändern -->
<h3 class="text-lg font-semibold mb-2">Stadt ändern</h3>
<input type="text" id="cityInput" class="w-full p-2 border rounded mb-4 text-gray-800 dark:bg-gray-700 dark:text-white"
placeholder="Ihre Stadt" value="{{ city }}" />
<!-- Unsichtbarer Wetter-Toggle (V1-Fallback) -->
<div style="display: none;">
<h3 class="text-lg font-semibold mb-2">Wochenvorhersage anzeigen</h3>
<label class="inline-flex items-center mt-2">
<input type="checkbox" id="weatherForecastToggle" class="form-checkbox h-5 w-5 text-blue-600"
{% if show_forecast %}checked{% endif %} />
<span class="ml-2 text-gray-700 dark:text-gray-300">Wochenvorhersage anzeigen</span>
</label>
</div>
<button id="saveSettings" class="mt-4 bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 transition-colors duration-200">
Speichern
</button>
<button class="mt-4 ml-2 bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition-colors duration-200 close-modal">
Schließen
</button>
</div>
@@ -227,7 +300,7 @@
});
});
// Modals (Home, Support)
// Modals (Home, Support, Settings)
const modals = document.querySelectorAll('[id$="Modal"]');
const modalTriggers = document.querySelectorAll('[data-modal]');
const closeModalButtons = document.querySelectorAll('.close-modal');
@@ -256,7 +329,7 @@
});
});
// Websuche
// Websuche (inline)
const searchForm = document.getElementById('searchForm');
const searchInput = document.getElementById('searchInput');
const searchEngine = document.getElementById('searchEngine');
@@ -272,5 +345,82 @@
}
window.open(url, '_blank');
});
// Support Modal: Nachricht senden (aus V1)
const sendSupportMessage = document.getElementById('sendSupportMessage');
if (sendSupportMessage) {
sendSupportMessage.addEventListener('click', () => {
const email = document.getElementById('emailInput').value.trim();
const problemType = document.getElementById('problemType').value;
const message = document.getElementById('messageInput').value.trim();
if (email && message) {
fetch('/send_support_message', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, problemType, message })
}).then(response => {
if (response.ok) {
alert('Ihre Nachricht wurde erfolgreich gesendet.');
const modal = document.getElementById('supportModal');
modal.classList.remove('flex');
modal.classList.add('hidden');
} else {
alert('Fehler beim Senden der Nachricht.');
}
});
} else {
alert('Bitte E-Mail und Nachricht ausfüllen.');
}
});
}
// Settings Modal (Wallpaper, Stadt, etc.) aus V1
// Lese/Schreibe Settings per '/get_settings' und '/save_settings'
let selectedWallpaper = '{{ wallpaper }}';
// Markiere ausgewähltes Wallpaper
const wallpaperThumbs = document.querySelectorAll('.wallpaper-thumb');
wallpaperThumbs.forEach(thumb => {
thumb.addEventListener('click', function() {
wallpaperThumbs.forEach(t => t.classList.remove('border-blue-500'));
wallpaperThumbs.forEach(t => t.classList.add('border-transparent'));
this.classList.remove('border-transparent');
this.classList.add('border-blue-500');
selectedWallpaper = this.getAttribute('data-wallpaper');
});
});
const saveSettingsBtn = document.getElementById('saveSettings');
if (saveSettingsBtn) {
saveSettingsBtn.addEventListener('click', () => {
const city = document.getElementById('cityInput').value.trim();
const showForecast = document.getElementById('weatherForecastToggle').checked;
// Alte Settings laden
fetch('/get_settings')
.then(response => response.json())
.then(settings => {
const bookmarks = settings.bookmarks || [];
// Neue Settings absenden
fetch('/save_settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
wallpaper: selectedWallpaper,
city: city,
show_forecast: showForecast,
bookmarks: bookmarks
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
} else {
alert('Fehler beim Speichern der Einstellungen.');
}
});
});
});
}
</script>
{% endblock content %}