Create footer-content.hbs

supplemental-ui/partials/footer-content.hbs

@@ -0,0 +1,138 @@
+
+<!-- OUTDATED LAB -->
+
+<style>
+/* 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); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 10;
+  top: 10%;
+  left: 1%;
+  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
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+  from {top:-300px; opacity:0} 
+  to {top:10%; opacity:1}
+}
+
+@keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:10%; 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;
+  cursor: pointer;
+}
+
+.modal-header {
+  padding: 2px 16px;
+  background-color: #FF0000;
+  color: white;
+}
+
+.modal-body {padding: 2px 16px;}
+</style>
+
+<!-- The Modal -->
+<div id="outdatedlab-modal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <div class="modal-header">
+      <span class="close">&times;</span>
+      <h2>Outdated Lab</h2>
+    </div>
+    <div class="modal-body">
+      <p>You're searching and old version of the lab.</p>
+      <p><a id="newlaburl" href="https://github.com/RHsyseng/5g-ran-deployments-on-ocp-lab/">Go to latest</a></p>
+    </div>
+  </div>
+
+</div>
+
+<script>
+// Get the modal
+var modal = document.getElementById("outdatedlab-modal");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+  modal.style.display = "none";
+}
+
+function getLatestLabURL(){
+  const repoUrl = 'https://api.github.com/repos/RHsyseng/5g-ran-deployments-on-ocp-lab';
+  return fetch(repoUrl)
+  .then(response => response.json())
+  .then(data => {
+    const defaultBranch = data.default_branch;
+    return defaultBranch;
+  })
+  .catch(error => {
+    return "notFound";
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const latestLabURLPromise = getLatestLabURL();
+  latestLabURLPromise.then(latestLabURL => {
+    if(latestLabURL != "notFound") {
+      var newLabUrl = document.getElementById("newlaburl");
+      newLabUrl.href = "https://labs.sysdeseng.com/5g-ran-deployments-on-ocp-lab/"+latestLabURL.replace("lab-","")+"/index.html"
+    }
+  });
+  modal.style.display = 'block';
+  });
+
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+}
+</script>
+
+<!-- ORIGINAL FOOTER -->
+
+<footer class="footer">
+  <a class="rhd-logo" href="https://redhat.com" target="_blank"></div>
+</footer>