Fixed loading message

src/static/index.html

@@ -13,6 +13,7 @@
             <option value="0">Wird Geladen</option>
         </select>
         <button id="export-button" onclick="exportReport()">Exportieren</button>
+        <p id="export-status"></p>
     </div>
     <div id="calendar-div">
         <div class="ueberschrift">

src/static/index.js

@@ -10,6 +10,8 @@ const exportButton = document.getElementById('export-button');
 const calendarDiv = document.getElementById('calendar-div');
 const untisDiv = document.getElementById('untis-div');
 
+const exportStatus = document.getElementById('export-status');
+
 fetch('/show')
     .then(response => {
         if (response.ok) {
@@ -72,13 +74,14 @@ function copyToClipboard(button, textarea) {
 
 function loading() {
     exportButton.disabled = true;
-    calendarTextarea.value = 'Wird geladen';
+    exportStatus.innerHTML = 'Wird geladen';
+    calendarTextarea.value = '';
     untisTextarea.value = '';
     loadingInterval = setInterval(() => {
-        if (calendarTextarea.value != 'Wird geladen...') {
+        if (exportStatus.innerHTML != 'Wird geladen...') {
-            calendarTextarea.value += '.';
+            exportStatus.innerHTML += '.';
         } else {
-            calendarTextarea.value = 'Wird geladen';
+            exportStatus.innerHTML = 'Wird geladen';
         }
     }, 500);
 }
@@ -86,7 +89,7 @@ function loading() {
 function loaded() {
     exportButton.disabled = false;
     clearInterval(loadingInterval);
-    calendarTextarea.value = '';
+    exportStatus.innerHTML = '';
 }
 
 function exportReport() {
@@ -99,7 +102,7 @@ function exportReport() {
             if (response.ok) {
                 return response.text();
             } else {
-                calendarTextarea.value = 'Error während des Abrufs';
+                exportStatus.innerHTML = 'Error während des Abrufs';
                 throw new Error('Error während des Abrufs');
             }
         }).then(text => {

src/static/style.css

@@ -18,6 +18,8 @@ h4 {
 
 .selector {
     margin-bottom: 10px;
+    display: flex;
+    align-items: center;
 }
 
 select::-webkit-scrollbar {
@@ -34,6 +36,11 @@ select::-webkit-scrollbar {
     overflow-y: scroll;
 }
 
+.selector p {
+    margin: 0;
+    margin-left: 10px;
+}
+
 button {
     font-size: 16px;
     height: 30px;