Skip to content

Commit

Permalink
better nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@kreynoldsf5
kreynoldsf5 committed May 1, 2024
1 parent ca5535f commit 52e39d6
Show file tree
Hide file tree
Showing 7 changed files with 195 additions and 135 deletions.
35 changes: 34 additions & 1 deletion labapp/app/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ def path():

@app.route('/manipulation')
def header():
"""header page"""
"""manipulation page"""
ns = eph_ns()
html = render_md("markdown/manipulation.md")
return render_template('exercise_standard.html',
Expand All @@ -162,6 +162,39 @@ def header():
ns=ns
)

@app.route('/portability')
def port():
"""portability page"""
ns = eph_ns()
html = render_md("markdown/portability.md")
return render_template('exercise_standard.html',
title="MCN Practical: Portability",
content=html,
ns=ns
)

@app.route('/ref')
def ref():
"""reference page"""
ns = eph_ns()
html = render_md("markdown/reference.md")
return render_template('coming-soon.html',
title="MCN Practical: Reference",
content=html,
ns=ns
)

@app.route('/score')
def score():
"""scoreboard page"""
ns = eph_ns()
html = render_md("markdown/score.md")
return render_template('coming-soon.html',
title="MCN Practical: Scoreboard",
content=html,
ns=ns
)

@app.route('/_lb1')
def lb_aws():
"""Azure LB test"""
Expand Down
Empty file added labapp/app/markdown/reference.md
View file
Empty file.
Empty file added labapp/app/markdown/score.md
View file
Empty file.
57 changes: 57 additions & 0 deletions labapp/app/static/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

async function makeHttpRequest(buttonId, requestUrl, resultDivId) {
const button = document.getElementById(buttonId);
const resultDiv = document.getElementById(resultDivId);
button.disabled = true;
try {
const response = await axios.get(requestUrl);
if (response.data.status === 'success') {
const prettyJson = JSON.stringify(response.data.data, null, 4);
resultDiv.innerHTML = `<pre class="alert alert-success"><b>Success:</b><br><code>${prettyJson}</code></pre>`;
} else {
const errJson = JSON.stringify(response.data.error, null, 4);
resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b>&nbsp;&nbsp;<code>${errJson}</code></div>`;
}
} catch (error) {
resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
} finally {
button.disabled = false;
resultDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
}

function restoreAccordionPanel(storageKey, accordionId) {
var activeItem = localStorage.getItem(storageKey);
if (activeItem) {
//remove default collapse settings
$(accordionId + " .panel-collapse").removeClass('in');

//show the account_last visible group
$("#" + activeItem).addClass("in");
}
}

function saveActiveAccordionPanel(storageKey, e) {
localStorage.setItem(storageKey, e.target.id);
}

193 changes: 63 additions & 130 deletions labapp/app/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,84 +17,7 @@
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<link href="/static/custom.css" rel="stylesheet">

<script>
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
async function makeHttpRequest(buttonId, requestUrl, resultDivId) {
const button = document.getElementById(buttonId);
const resultDiv = document.getElementById(resultDivId);
button.disabled = true;
try {
const response = await axios.get(requestUrl);
if (response.data.status === 'success') {
const prettyJson = JSON.stringify(response.data.data, null, 4);
resultDiv.innerHTML = `<pre class="alert alert-success"><b>Success:</b><br><code>${prettyJson}</code></pre>`;
} else {
const errJson = JSON.stringify(response.data.error, null, 4);
resultDiv.innerHTML = `<div class="alert alert-danger"><b>Request Failed:</b>&nbsp;&nbsp;<code>${errJson}</code></div>`;
}
} catch (error) {
resultDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
} finally {
button.disabled = false;
resultDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
}
document.addEventListener('DOMContentLoaded', function() {
function updateCollapsibleStates() {
setTimeout(() => {
let states = [];
document.querySelectorAll('.collapse').forEach((collapse) => {
states.push({
id: collapse.id,
open: collapse.classList.contains('show')
});
});
setCookie('navStates', JSON.stringify(states), 1);
}, 500); // Consider verifying if 350ms is adequate to wait for the animation to finish.
}

// Event listeners for toggle buttons
document.querySelectorAll('.btn-toggle').forEach(button => {
button.addEventListener('click', function() {
updateCollapsibleStates();
});
});
// Initialize states from cookie
const states = getCookie('navStates');
if (states) {
const accordionStates = JSON.parse(states);
accordionStates.forEach(state => {
let element = document.getElementById(state.id);
if (element) {
let bsCollapse = new bootstrap.Collapse(element, {
toggle: false
});
state.open ? bsCollapse.show() : bsCollapse.hide();
}
});
}
// Ensure states are captured initially
updateCollapsibleStates();
});
</script>
<script src="/static/helpers.js"></script>
</head>
<body>
<div class="container-fluid">
Expand Down Expand Up @@ -149,64 +72,24 @@
</button>
<div class="collapse" id="status-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">Reference</a></li>
<li><a href="#" class="link-dark rounded">Scoreboard</a></li>
<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>
</ul>
{% 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();
}
</div>
<script>
$(function () {
$('#sidebar').on('shown.bs.collapse', function (e) {
saveActiveAccordionPanel('accordion-activePanel', e);
})
});
restoreAccordionPanel('accordion-activePanel', '#sidebar');
</script>

setInterval(fetchAndUpdateStatus, 20000);
});

</script>
<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>
{% endif %}

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

<!-- Main Content -->
<main class="col">
Expand All @@ -217,5 +100,55 @@
</div>

</body>

{% 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>
<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>
{% endif %}
</html>

4 changes: 2 additions & 2 deletions labapp/app/templates/coming-soon.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{% extends "base.html" %}

{% block title %}MCN Practical Error{% endblock %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="err">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none">
<img src="/static/coming-soon.png" alt="Descriptive Text">
</a>
</div>
Expand Down
Loading

0 comments on commit 52e39d6

Please sign in to comment.