Skip to content
Snippets Groups Projects
Commit d8e6f983 authored by Arina's avatar Arina
Browse files

Interface edited

parent a87b0422
Branches e_pi_sep
No related tags found
1 merge request!2Draft: Resolve "Add artifacts viewer"
<!doctype html>
<html lang="ru">
<head>
......@@ -11,7 +10,6 @@
<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">
......@@ -41,7 +39,6 @@
}
</style>
</head>
<body>
......@@ -65,72 +62,23 @@
</header>
<main>
<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>
<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 value="32-detailed-dirc" 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">Смотреть</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Редактировать</button>
</div>
<small class="text-muted">9 mins</small>
</div>
<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 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;
}
function setSelectedBranch(branchName) {
let branchOption = document.querySelector(`#branchesForm option[value="${branchName}"]`);
......@@ -138,11 +86,7 @@
return branchOption;
}
let btn = document.getElementById("btn");
btn.addEventListener("click", function(){
alert('Ветка: ' + SearchBranches(document.body.main.selectForm.branches))
})
function findGetParameter(parameterName) { //функция нахождения параметра -название ветки из поисковой строки
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
......@@ -155,25 +99,43 @@
return result;
}
let imagesDiv = document.getElementById("imagesId"); //получение элемента с id = imagesId
let imagePaths = [ //пути к изображению
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 branch = findGetParameter("br");
if(!branch) branch = "master";
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 вставка ссылки в html
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">Смотреть</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Редактировать</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"
// let branchesRequest = "https://eicweb.phy.anl.gov/api/v4/projects/473/repository/branches"
fetch(branchesRequest).then(function(response) {
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);
......@@ -183,21 +145,16 @@
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++) {
console.log(data[i].name);
// for ... заполняет form otions
setSelectedBranch(branch); // <= Хорошо!!
branchSelectElement.innerHTML +=`<option value="${data[i].name}">${data[i].name}</option>`;
}
setSelectedBranch(branch); // <= хорошо
});
setSelectedBranch(branch); // <= Ошибка!
console.log("HAHAHAHAHA");
});
})
</script>
<!-- конец скрипта -->
</main>
<footer class="text-muted py-5">
......@@ -210,7 +167,6 @@
</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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment