Skip to content

Commit

Permalink
need to align
Browse files Browse the repository at this point in the history
  • Loading branch information
kreynoldsf5 committed May 2, 2024
1 parent 26c94eb commit 076b40c
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 14 deletions.
17 changes: 3 additions & 14 deletions labapp/app/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<img src="/static/logo.png" width="100" height="auto" alt="Logo">
<span class="fs-5 fw-semibold">MCN Practical</span>
<span class="fs-6 fw-semibold">App Connect</span>
</a>
<ul class="list-unstyled ps-0">
<li class="mb-1">
Expand All @@ -44,7 +44,7 @@
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#appconnect-collapse" aria-expanded="false">
App Connect
Exercises
</button>
<div class="collapse show" id="appconnect-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
Expand All @@ -55,26 +55,15 @@
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#netconnect-collapse" aria-expanded="false">
Network Connect
</button>
<div class="collapse show" id="netconnect-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="/vnet" class="link-dark rounded">Virtual Networks</a></li>
<li><a href="/netpolicy" class="link-dark rounded">Network Policy</a></li>
</ul>
</div>
</li>
<li class="border-top my-3"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#status-collapse" aria-expanded="false">
Miscellaneous
</button>
<div class="collapse show" id="status-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="/ref" class="link-dark rounded">Reference</a></li>
<li><a href="/score" class="link-dark rounded">Scoreboard</a></li>
<li><a href="/ref" class="link-dark rounded">Reference</a></li>
</ul>
</div>
</li>
Expand Down
151 changes: 151 additions & 0 deletions labapp/app/templates/future_base.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{{ title }}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">

<link rel="stylesheet" href="/static/dracula.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/http.min.js"></script>
<script>hljs.highlightAll();</script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<link href="/static/custom.css" rel="stylesheet">
<script src="/static/helpers.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-auto bg-light sidebar" id="sidebar">
<div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<img src="/static/logo.png" width="100" height="auto" alt="Logo">
<span class="fs-5 fw-semibold">MCN Practical</span>
</a>
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#home-collapse" aria-expanded="false">
Home
</button>
<div class="collapse show" id="home-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="/" class="link-dark rounded">Welcome</a></li>
<li><a href="/overview" class="link-dark rounded">Overview</a></li>
<li><a href="/setup" class="link-dark rounded">Setup</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#appconnect-collapse" aria-expanded="false">
App Connect
</button>
<div class="collapse show" id="appconnect-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="/lb" class="link-dark rounded">Load Balancing</a></li>
<li><a href="/route" class="link-dark rounded">Routing</a></li>
<li><a href="/manipulation" class="link-dark rounded">Manipulation</a></li>
<li><a href="/portability" class="link-dark rounded">Portability</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#netconnect-collapse" aria-expanded="false">
Network Connect
</button>
<div class="collapse show" id="netconnect-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="/vnet" class="link-dark rounded">Virtual Networks</a></li>
<li><a href="/netpolicy" class="link-dark rounded">Network Policy</a></li>
</ul>
</div>
</li>
<li class="border-top my-3"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed disabled" data-bs-toggle="collapse-null" data-bs-target="#status-collapse" aria-expanded="false">
Miscellaneous
</button>
<div class="collapse show" id="status-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="/ref" class="link-dark rounded">Reference</a></li>
<li><a href="/score" class="link-dark rounded">Scoreboard</a></li>
</ul>
</div>
</li>

{% if config['UDF'] %}
<script>
function fetchAndUpdateStatus() {
fetch('/_ce_status')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
if (!data.err) {
document.getElementById('siteName').textContent = data.site_name;
document.getElementById('statusImage').src = data.state === "PROVISIONED" ? "/static/good.png" : "/static/bad.png";

// Update cookies
setCookie('siteNameCache', data.site_name, 1);
setCookie('stateCache', data.state, 1);
} else {
document.getElementById('siteName').textContent = 'CE info unavailable';
document.getElementById('statusImage').src = "/static/bad.png";
}
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
document.getElementById('siteName').textContent = 'Error';
document.getElementById('statusImage').src = "/static/bad.png";
});
}
document.addEventListener('DOMContentLoaded', function() {
let cachedSiteName = getCookie('siteNameCache');
let cachedState = getCookie('stateCache');

if (cachedSiteName && cachedState) {
document.getElementById('siteName').textContent = cachedSiteName;
document.getElementById('statusImage').src = cachedState === "PROVISIONED" ? "/static/good.png" : "/static/bad.png";
} else {
fetchAndUpdateStatus();
}

setInterval(fetchAndUpdateStatus, 20000);
});
</script>
<li class="border-top my-3"></li>
<li class="mb-1">
<div class="status-box align-items-center bg-light p-2 text-center">
<p><strong id="siteName">{{ config["ce_info"]["site_name"] }}</strong></p>
<img id="statusImage" src="/static/unknown.png" alt="Status" style="width:50px; height:auto;">
</div>
</li>


{% endif %}


</ul>
</div>
</div>

<!-- Main Content -->
<main class="col">
{% block content %}
{% endblock %}
</main>
</div>
</div>

</body>
</html>

0 comments on commit 076b40c

Please sign in to comment.