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
+ 185
− 0
Compare changes
  • Side-by-side
  • Inline
Files
3
artifacts/index.html 0 → 100644
+ 176
− 0
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Марк Отто, Джейкоб Торнтон и контрибьюторы Bootstrap">
<meta name="generator" content="Hugo 0.84.0">
<title>Artifacts</title>
<link rel="canonical" href="https://getbootstrap.su/docs/5.0/examples/album/">
<!-- Bootstrap core CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<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>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Artifacts</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search branches" aria-label="Search branches and tag">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div class="album py-5 bg-light">
<div class="container bg-light" >
<div class="row mb-4">
<form id="branchesForm">
<div class="col-6 flex-row" style="display: flex;">
<select id="branches" name="br"class="form-select" aria-label=".form-select-lg example"></select>
<button input class="btn btn-primary" type="submit" value="Submit" style="margin-left: 1em;">Submit</button>
</div>
</form>
</div>
<div id="imagesId" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
</div>
</div>
</div>
<script>
function setSelectedBranch(branchName) {
let branchOption = document.querySelector(`#branchesForm option[value="${branchName}"]`);
branchOption.setAttribute("selected", "true");
return branchOption;
}
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 imagePaths = [
"images/view01_top.png",
"images/view02a.png",
"images/view02b.png",
"images/view02c.png",
];
let branch = findGetParameter("br");
if(!branch) branch = "master";
for (let i=0; i < imagePaths.length; i++) {
imagesDiv.innerHTML +=`
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Эскиз" preserveAspectRatio="xMidYMid slice" focusable="false">
<image x="0" y="0" width="100%" height="100%" href='https://eicweb.phy.anl.gov/api/v4/projects/473/jobs/artifacts/${branch}/raw/${imagePaths[i]}?job=report'/>
</svg>
<div class="card-body">
<h1>#144285</h1>
<p class="card-text">master/raw/images/view01_top.png</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">watch</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
`;
}
// let branchesRequest = "https://eicweb.phy.anl.gov/api/v4/projects/473/repository/branches"
fetch("https://eicweb.phy.anl.gov/api/v4/projects/473/repository/branches").then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
response.json().then(
function(data) {
let branchSelectElement = document.querySelector(`#branches`);
branchSelectElement.innerHTML += `<option value="master">master</option>`
for(let i=0; i<data.length; i++) {
branchSelectElement.innerHTML +=`<option value="${data[i].name}">${data[i].name}</option>`;
}
setSelectedBranch(branch); // <= хорошо
});
})
</script>
</main>
<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Вернуться наверх</a>
</p>
<p class="mb-1">Пример альбома &copy; Bootstrap, но, пожалуйста, скачайте и настройте его под себя!</p>
<p class="mb-0">Новое в Bootstrap? <a href="/">Посетите домашнюю страницу</a> или прочтите наше <a href="/docs/5.0/getting-started/introduction/">руководство по началу работы</a>.</p>
</div>
</footer>
<!-- JavaScript Bundle with Popper -->
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>