Skip to content
Snippets Groups Projects
Commit ddfd27fa authored by Dmitry Romanov's avatar Dmitry Romanov
Browse files

Made index.html

parent 4be767d1
Branches
No related tags found
1 merge request!2Draft: Resolve "Add artifacts viewer"
Show whitespace changes
Inline Side-by-side
artifacts/index.html
+ 122
− 176
View file @ ddfd27fa
<!doctype html>
<html lang="en">
<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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="Марк Отто, Джейкоб Торнтон и контрибьюторы Bootstrap">
<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/">
<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 {
......@@ -31,151 +39,53 @@
}
</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>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<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">
<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="navbarsExample09">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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 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>
<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>
<main>
<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>
<div class="album py-5 bg-light">
<div class="container bg-light" >
<div class="row mb-4">
<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 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>
<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> -->
</form>
</div>
<div id="imagesId" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
</div>
</div>
</div>
</main>
<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 = [];
......@@ -190,12 +100,6 @@ function findGetParameter(parameterName) {
}
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",
......@@ -206,25 +110,67 @@ function findGetParameter(parameterName) {
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`
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>
`;
}
// setTimeout(function(){
//
// }, 1000);
let imagesHtml = "";
// 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); // <= хорошо
});
})
imagesDiv.innerHTML=`<p><img src='${linkToImage}'></p>`; // <= imagesHtml
</script>
</main>
<!-- <script src="../assets/dist/js/bootstrap.bundle.min.js"></script> -->
<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>
artifacts/index2.html deleted 100644 → 0
+ 0
− 176
View file @ 4be767d1
<!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>
artifacts/index3.html deleted 100644 → 0
+ 0
− 194
View file @ 4be767d1
<!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" >
<form id="branchesForm">
<select id="branches" name="br">
<option value="master">master</option>
<option value="32-detailed-dirc">Draft: Resolve "Detailed DIRC" </option>
<option value="33-detailed-dual-rich-implementation">33-detailed-dual-rich-implementation</option>
<option value="interlayer_barrel_ecal">interlayer_barrel_ecal</option>
<option value="41-fix-typo-in-the-barrel-ecal-geometry">41-fix-typo-in-the-barrel-ecal-geometry</option>
<option value="31-detailed-mrich">31-detailed-mrich</option>
<option value="vis_check">vis_check</option>
<option value="37-place-sifi-fibers-in-the-assembly-in-ecal-barrel">37-place-sifi-fibers-in-the-assembly-in-ecal-barrel</option>
<option value="40-quick-viz">40-quick-viz</option>
<option value="38-mm-tracker-implementation">38-mm-tracker-implementation</option>
<option value="posik_gem_branch">posik_gem_branch</option>
<option value="ecal-hcal-endcap-bore-and-length">ecal-hcal-endcap-bore-and-length</option>
<option value="add_segmentation">add_segmentation</option>
<option value="AllieWeary-master-patch-33350">AllieWeary-master-patch-33350</option>
</select>
<button id="btn">Submit</button>
</form>
</div>
<div id="imagesId" class="container bg-light">
<p class="card-text">Loading images...</p>
</div>
</div>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<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%" />
</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">Show</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function SearchBranches(branchesForm) {
let numberSelected = 0;
for (let i = 0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected) {
numberSelected++;
}
}
console.log(numberSelected);
return numberSelected;
}
let btn = document.getElementById("btn");
btn.addEventListener("click", function(){
alert('Ветка: ' + SearchBranches(document.selectForm.branches))
})
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]);
});
console.log(result);
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";
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 imagesHtml = "";
imagesDiv.innerHTML=`<p><img src='${linkToImage}'></p>`; // <= imagesHtml
</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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment