Add Loadscreen

2 years ago · cef031e51f
parent e2fdb63cb1
commit cef031e51f
5 changed files with 27 additions and 47 deletions
--- a/main/static/css/styles.css
+++ b/main/static/css/styles.css
@ -20,42 +20,9 @@ img.pb {
    height: auto;
 }

-.load_body{
-    position: absolute;
+.gif {
    top: 50%;
-    left: 45%;
-    transform: translate(-50%,-50%);
-    background-color: #2a9d8f;
+    left: 50%;
+    position: fixed;
+    transform: translate(-50%, -50%);
 } 
-.progress{
-    position: relative;
-    height: 10px;
-    width: 1110%;
-    border: 10px solid #f4a261;
-    border-radius: 15px;
-}
-.progress .color{
-    position: absolute;
-    background-color: #ffffff;
-    width: 0px;
-    height: 10px;
-    border-radius: 15px;
-    animation: progres 4s infinite linear;    
-}
-@keyframes progres{
-    0%{
-      width: 0%;
-    }
-    25%{
-        width: 50%;
-    }
-    50%{
-        width: 75%;
-    }
-    75%{
-        width: 85%;
-    }
-    100%{
-        width: 100%;
-    }
-};
--- a/main/static/img/1484.gif
+++ b/main/static/img/1484.gif
--- a/main/templates/main/base.html
+++ b/main/templates/main/base.html
@ -16,11 +16,21 @@
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <title>Meeting Organizer</title>
 </head>
-<body>
+<body style="overflow: hidden;">
    
    {% block pushup %}
    {% endblock %}

+    <div id="loading" class="load_body d-none" style="width: 100%; height: 110vh; position: absolute; background-color: white; z-index: 100; margin-top: -2rem;">
+        <!-- <img src="{% static 'img/1484.gif' %}" class="gif" alt="load"> -->
+        <div class="gif">
+            <h2 style="color: black;">Daten Speichern und Senden...</h2>
+        </div>
+    </div>
+
+    <script>
+    </script>
+
    <div class="container" style="max-width: 100%;">
        <div class="top_line row justify-content-between">
            <div class="title col-6 text-start dropdown">
@ -51,11 +61,7 @@
                  </ul>  
              </div>
        </div>
-        <div class="load_body">
-            <div class="progress">
-                <div class="color"></div>
-            </div>
-        </div>
+    
        {% block content %}
        {% endblock %}
        
--- a/main/templates/main/index.html
+++ b/main/templates/main/index.html
@ -447,8 +447,15 @@
        </table>
    </div>
    <p style="display: none;">!Technik_END!</p>
+    <script>
+        function sendform(){
+            document.getElementById('loading').classList.remove("d-none")
+            document.getElementById("formsend").click()
+        }
+    </script>
    <div class="formcontrol">
-        <button type="submit" class="btn btn-secondary" name="formsend">Speichern</button>
+        <button type="button" onclick="sendform()" class="btn btn-secondary" name="">Speichern</button>
+        <button type="submit" class="btn btn-secondary d-none" name="formsend" id="formsend">Speichern</button>
    </div>
 </form>
 </div>
--- a/theocbase_templates/COMBO_MO_PC.htm
+++ b/theocbase_templates/COMBO_MO_PC.htm
@ -664,10 +664,10 @@

 		const req = new XMLHttpRequest();
 		req.open("GET", "http://mo.samuelzielke.de/api/", false);
-		req.send();
+		req.send()

 		myDATA = JSON.parse(req.response);
-		console.log(myDATA)
+		
 		setData(myDATA)
 	</script>
 </body>