Added popup things

ui_templates/static/default.css

@@ -1,73 +1,165 @@
-@import url('fonts/Quicksand-Regular.ttf');
-body, html {
-    margin: 0px;
-    background-color: rgb(51, 51, 51);
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    font-family: 'Quicksand', sans-serif;
-    color:white;
+:root {
+    --backgroundGray: rgb(51, 51, 51);
+    --accentGray: rgba(36, 36, 36, 0.9); 
+    --accentGray2:rgba(20, 20, 20, 0.877); 
+  }
+
+@import url("fonts/Quicksand-Regular.ttf");
+body,
+html {
+  margin: 0px;
+  background-color: rgb(51, 51, 51);
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: "Quicksand", sans-serif;
+  color: white;
 }
 small {
-    font-size: 10px;
+  font-size: 10px;
 }
 
-.header-bar{
-    margin: 0px;
-    padding: 0px;
-    width: 100%;
-    height: 34px;
-    background-color: rgba(36, 36, 36, 0.9);
+.header-bar {
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 34px;
+  background-color: rgba(36, 36, 36, 0.9);
 }
 
 .header-clock {
-    padding: 2px;
-    padding-right: 4px;
+  padding: 2px;
+  padding-right: 4px;
 }
 
 .battery {
-    right: 80px;
-    position: fixed;
-    padding: 2px;
-    padding-right: 4px;
+  right: 80px;
+  position: fixed;
+  padding: 2px;
+  padding-right: 4px;
 }
 .loader1 {
-    position: fixed;
-    right: 80px;
+  position: fixed;
+  right: 80px;
 }
 
 .areaRight {
-    float: right;
+  float: right;
 }
 
 .dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f1f1f1;
-    min-width: 160px;
-    overflow: auto;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    z-index: 1;
-    right: 0px;
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  overflow: auto;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  right: 0px;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown a:hover {
+  background-color: #ddd;
+}
+
+.show {
+  display: block;
+}
+
+network,
+power {
+  cursor: pointer;
+}
+.popup-content {
+  background-color: rgba(36, 36, 36, 0.9);
+  position: fixed;
+  height: 10vh;
+  width: 10vw;
+}
+
+.headerIframe {
+  width: 100%;
+  border: 0px;
+  height: 2.5%;
+}
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }
   
-  .dropdown-content a {
-    color: black;
-    padding: 12px 16px;
+  /* Modal Content */
+  .modal-content {
+    position: relative;
+    background-color: var(--accentGray);;
+    color: white;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+  }
+
+  button .modal-footer{
+      height: 50px;
+  }
+  
+  /* Add Animation */
+  @-webkit-keyframes animatetop {
+    from {top:-300px; opacity:0} 
+    to {top:0; opacity:1}
+  }
+  
+  @keyframes animatetop {
+    from {top:-300px; opacity:0}
+    to {top:0; opacity:1}
+  }
+  
+  /* The Close Button */
+  .close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: #000;
     text-decoration: none;
-    display: block;
+    cursor: pointer;
   }
   
-  .dropdown a:hover {background-color: #ddd;}
-
-  .show {display: block;}
-  
-  network{
-      cursor: pointer;
+  .modal-header {
+    padding: 2px 16px;
+    background-color: var(--accentGray2);
+    color: white;
+  }
+  
+  .modal-body {padding: 2px 16px;}
+  
+  .modal-footer {
+    padding: 2px 16px;
+    background-color: var(--accentGray2);
+    color: white;
   }
-
-  .headerIframe{
-      width: 100%;
-      border: 0px;
-      height: 2.5%;
-  }

ui_templates/static/js/helper.js

@@ -20,4 +20,37 @@ function updateTime(k) {
   } else {
     return k;
   }
+}
+
+function createModalPopup(titel, body, actions){
+  // Creates a modal popup and makes sure only one layer of "darking" is applied.
+  // Returns the modals id
+  modalsList = JSON.parse(document.getElementById("modals").innerHTML)
+  const idTime = Date.now();
+  modalsList.open.push(idTime);
+  
+  let modal = document.getElementById("mainModal");
+  modal.style.display = "block";
+  // modal.innerHTML += '<div class="modal-content" id="modal-' + String(idTime) + '">  <span class="close" onclick="closeModal(' + String(idTime) + ')">&times;</span>' + body + '<br><button>Shutdown</button><button>Lock</button><button onclick="">Close Software</button></div>'
+  modal.innerHTML += '<div class="modal-content" id="modal-' + String(idTime) + '"> \
+   <div class="modal-header"> \
+   <span class="close" onclick="closeModal(' + String(idTime) + ')">&times;</span> \
+   <h2>' + titel + '</h2>\
+   </div>\
+   <div class="modal-body"><p>' + body + '</p></div>  \
+   <div class="modal-footer"><center>' + actions + '</center></div> \
+   </div>'
+  document.getElementById("modals").innerHTML = JSON.stringify(modalsList)
+  return(idTime)
+}
+
+function closeModal(id){
+  modalsList = JSON.parse(document.getElementById("modals").innerHTML)
+  document.getElementById("modal-" + String(id)).remove()
+  modalsList.open.pop(String(id))
+  document.getElementById("modals").innerHTML = JSON.stringify(modalsList)
+  if(modalsList.open.length == 0){
+    let modal = document.getElementById("mainModal");
+    modal.style.display = "none";
+  }
 }