Skip to content
Snippets Groups Projects

Draft: Resolve "Add artifacts viewer"

Open Draft: Resolve "Add artifacts viewer"
2-add-artifacts-viewer into master
Open Dmitry Romanov requested to merge 2-add-artifacts-viewer into master
Compare
and
3 files
+ 239
− 0
Compare changes
  • Side-by-side
  • Inline
Files
3
artifacts/index.html 0 → 100644
+ 230
− 0
 
<!doctype html>
 
<html lang="en">
 
<head>
 
<meta charset="utf-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="description" content="">
 
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
 
<meta name="generator" content="Hugo 0.84.0">
 
<title>Navbar Template · Bootstrap v5.0</title>
 
 
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbars/">
 
 
 
 
<!-- Bootstrap core CSS -->
 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
 
<style>
 
.bd-placeholder-img {
 
font-size: 1.125rem;
 
text-anchor: middle;
 
-webkit-user-select: none;
 
-moz-user-select: none;
 
user-select: none;
 
}
 
 
@media (min-width: 768px) {
 
.bd-placeholder-img-lg {
 
font-size: 3.5rem;
 
}
 
}
 
</style>
 
 
 
<!-- Custom styles for this template -->
 
<link href="navbar.css" rel="stylesheet">
 
</head>
 
<body>
 
 
<main>
 
 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Ninth navbar example">
 
<div class="container-xl">
 
<a class="navbar-brand" href="#">Container XL</a>
 
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
 
<span class="navbar-toggler-icon"></span>
 
</button>
 
 
<div class="collapse navbar-collapse" id="navbarsExample07XL">
 
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
 
<li class="nav-item">
 
<a class="nav-link active" aria-current="page" href="#">Home</a>
 
</li>
 
<li class="nav-item">
 
<a class="nav-link" href="#">Link</a>
 
</li>
 
<li class="nav-item">
 
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
 
</li>
 
<li class="nav-item dropdown">
 
<a class="nav-link dropdown-toggle" href="#" id="dropdown07XL" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
 
<ul class="dropdown-menu" aria-labelledby="dropdown07XL">
 
<li><a class="dropdown-item" href="#">Action</a></li>
 
<li><a class="dropdown-item" href="#">Another action</a></li>
 
<li><a class="dropdown-item" href="#">Something else here</a></li>
 
</ul>
 
</li>
 
</ul>
 
<form>
 
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
 
</form>
 
</div>
 
</div>
 
</nav>
 
 
 
<div class="container">
 
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Eleventh navbar example">
 
<div class="container-fluid">
 
<a class="navbar-brand" href="#">Navbar</a>
 
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
 
<span class="navbar-toggler-icon"></span>
 
</button>
 
 
<div class="collapse navbar-collapse" id="navbarsExample09">
 
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
 
<li class="nav-item">
 
<a class="nav-link active" aria-current="page" href="#">Home</a>
 
</li>
 
<li class="nav-item">
 
<a class="nav-link" href="#">Link</a>
 
</li>
 
<li class="nav-item">
 
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
 
</li>
 
<li class="nav-item dropdown">
 
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
 
<ul class="dropdown-menu" aria-labelledby="dropdown09">
 
<li><a class="dropdown-item" href="#">Action</a></li>
 
<li><a class="dropdown-item" href="#">Another action</a></li>
 
<li><a class="dropdown-item" href="#">Something else here</a></li>
 
</ul>
 
</li>
 
</ul>
 
<form>
 
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
 
</form>
 
</div>
 
</div>
 
</nav>
 
 
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded" aria-label="Twelfth navbar example">
 
<div class="container-fluid">
 
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
 
<span class="navbar-toggler-icon"></span>
 
</button>
 
 
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
 
<ul class="navbar-nav">
 
<li class="nav-item">
 
<a class="nav-link active" aria-current="page" href="#">Centered nav only</a>
 
</li>
 
<li class="nav-item">
 
<a class="nav-link" href="#">Link</a>
 
</li>
 
<li class="nav-item">
 
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
 
</li>
 
<li class="nav-item dropdown">
 
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
 
<ul class="dropdown-menu" aria-labelledby="dropdown10">
 
<li><a class="dropdown-item" href="#">Action</a></li>
 
<li><a class="dropdown-item" href="#">Another action</a></li>
 
<li><a class="dropdown-item" href="#">Something else here</a></li>
 
</ul>
 
</li>
 
</ul>
 
</div>
 
</div>
 
</nav>
 
 
<div>
 
<div class="bg-light p-5 rounded">
 
<div class="col-sm-8 mx-auto">
 
<h1>Navbar examples</h1>
 
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../examples/navbar-static/">top</a> and <a href="../examples/navbar-fixed/">fixed top</a> examples.</p>
 
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
 
<p>
 
<a class="btn btn-primary" href="../components/navbar/" role="button">View navbar docs &raquo;</a>
 
</p>
 
<div>
 
<form id="branchesForm">
 
<select id="branches" name="br">
 
<option value="master">master</option>
 
<option value="32-detailed-dirc">Draft: Resolve "Detailed DIRC" </option>
 
</select>
 
<button>Submit</button>
 
</form>
 
</div>
 
<div id="imagesId">
 
Loading images...
 
 
</div>
 
 
<!-- <div>
 
<p><img src="https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/images/view01_top.png?job=report"></p>
 
<p><img src="https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/images/view02a.png?job=report"></p>
 
<p><img src="https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/images/view02b.png?job=report"></p>
 
<p><img src="https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/master/raw/images/view02c.png?job=report"></p>
 
</div> -->
 
</div>
 
</div>
 
</div>
 
</div>
 
</main>
 
 
<script>
 
 
function findGetParameter(parameterName) {
 
var result = null,
 
tmp = [];
 
location.search
 
.substr(1)
 
.split("&")
 
.forEach(function (item) {
 
tmp = item.split("=");
 
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
 
});
 
return result;
 
}
 
 
let imagesDiv = document.getElementById("imagesId");
 
//let imagesDiv = document.querySelector("#imagesId");
 
// const matches = container.querySelectorAll("#branchesForm option[value='master']");
 
 
 
//let branch = "master";
 
//let filePath = "images/view01_top.png";
 
let imagePaths = [
 
"images/view01_top.png",
 
"images/view02a.png",
 
"images/view02b.png",
 
"images/view02c.png",
 
];
 
 
let branch = findGetParameter("br");
 
if(!branch) branch = "master";
 
 
let branchOption = document.querySelector('[value="32-detailed-dirc"]');
 
branchOption.setAttribute("selected", "true");
 
console.log(branchOption);
 
let linkTemplate = "https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/{branch}/raw/{artPath}?job=report"
 
 
let linkToImage = linkTemplate.replace("{branch}", "master").replace("{artPath}", "images/view01_top.png");
 
 
//let linkToImage = `https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/${branch}/raw/${filePath}?job=report`
 
 
// setTimeout(function(){
 
//
 
// }, 1000);
 
let imagesHtml = "";
 
 
imagesDiv.innerHTML=`<p><img src='${linkToImage}'></p>`; // <= imagesHtml
 
</script>
 
 
<!-- <script src="../assets/dist/js/bootstrap.bundle.min.js"></script> -->
 
 
 
</body>
 
</html>