mirror of
https://github.com/45Drives/cockpit-navigator.git
synced 2025-07-29 00:24:52 +02:00
make NavEntry, NavDir, and NavFile classes, and global NavWindow class to display contents of /
This commit is contained in:
joshuaboud
parent
a7972b9059
commit
2a70b36d68
@ -53,7 +53,7 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
.nav-item {
|
||||
margin: 0.5em;
|
||||
flex: 0;
|
||||
display: flex;
|
||||
@ -62,13 +62,37 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item .icon {
|
||||
.nav-item .nav-item-title {
|
||||
text-align: center;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.nav-item .nav-dir-icon {
|
||||
background-color: #212427;
|
||||
border: 1px solid #3c3f42;
|
||||
width: 3em;
|
||||
width: 5em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.nav-item .nav-file-icon {
|
||||
position: relative;
|
||||
background-color: #212427;
|
||||
width: 5em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.nav-item .nav-file-icon:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-width: 0 16px 16px 0;
|
||||
border-style: solid;
|
||||
border-color: #3c3f42 #151515;
|
||||
display: block;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.info-column {
|
||||
background-color: #212427;
|
||||
flex-basis: 0;
|
||||
|
||||
@ -39,281 +39,9 @@
|
||||
</div>
|
||||
<div class="vertical-spacer"></div>
|
||||
<div class="flex-row inner-container">
|
||||
<div class="contents-view">
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon"></div>
|
||||
<div class="item-name">
|
||||
test
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents-view" id="nav-contents-view"></div>
|
||||
<div class="horizontal-spacer"></div>
|
||||
<div class="info-column">
|
||||
</div>
|
||||
<div class="info-column"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1 +1,99 @@
|
||||
|
||||
|
||||
class NavEntry {
|
||||
constructor(/*string or array*/ path) {
|
||||
if(typeof path == 'string')
|
||||
this.path = path.split('/').splice(1);
|
||||
else
|
||||
this.path = path;
|
||||
this.dom_element = document.createElement("div");
|
||||
this.dom_element.classList.add("nav-item");
|
||||
let icon = this.dom_element.nav_item_icon = document.createElement("div");
|
||||
let title = this.dom_element.nav_item_title = document.createElement("div");
|
||||
title.classList.add("nav-item-title");
|
||||
title.innerText = this.filename();
|
||||
this.dom_element.appendChild(icon);
|
||||
this.dom_element.appendChild(title);
|
||||
}
|
||||
destroy() {
|
||||
while(this.dom_element.firstChild){
|
||||
this.dom_element.removeChild(this.dom_element.firstChild);
|
||||
}
|
||||
if(this.dom_element.parentElement)
|
||||
this.dom_element.parentElement.removeChild(this.dom_element);
|
||||
}
|
||||
filename() {
|
||||
return this.path[this.path.length -1];
|
||||
}
|
||||
path_str() {
|
||||
return "/" + this.path.join('/');
|
||||
}
|
||||
show() {
|
||||
document.getElementById("nav-contents-view").appendChild(this.dom_element);
|
||||
}
|
||||
}
|
||||
|
||||
class NavFile extends NavEntry {
|
||||
constructor(/*string or array*/ path) {
|
||||
super(path);
|
||||
this.dom_element.nav_item_icon.classList.add("nav-file-icon");
|
||||
}
|
||||
}
|
||||
|
||||
class NavDir extends NavEntry {
|
||||
constructor(/*string or array*/ path) {
|
||||
super(path);
|
||||
this.dom_element.nav_item_icon.classList.add("nav-dir-icon");
|
||||
}
|
||||
async get_children() {
|
||||
var children = [];
|
||||
var data = await cockpit.spawn(["ls", "-lL", this.path_str()], {err:"out"});
|
||||
var entries = data.split("\n");
|
||||
entries = entries.splice(1, entries.length - 2);
|
||||
entries.forEach(entry => {
|
||||
var entry_array = entry.split(/\s+/);
|
||||
var filename = entry_array[entry_array.length - 1];
|
||||
if(entry[0] == 'd')
|
||||
children.push(new NavDir([... this.path, filename]));
|
||||
else
|
||||
children.push(new NavFile([... this.path, filename]));
|
||||
});
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
class NavWindow {
|
||||
constructor() {
|
||||
this.path_stack = [new NavDir("/")];
|
||||
this.entries = [];
|
||||
}
|
||||
async refresh() {
|
||||
while(this.entries.length){
|
||||
var entry = this.entries.pop();
|
||||
entry.destroy();
|
||||
}
|
||||
var files = await this.pwd().get_children();
|
||||
files.forEach(file => {
|
||||
file.show();
|
||||
this.entries.push(file);
|
||||
});
|
||||
}
|
||||
pwd() {
|
||||
return this.path_stack[this.path_stack.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
var nav_window = new NavWindow();
|
||||
|
||||
async function main() {
|
||||
nav_window.refresh();
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
// setTimeout(function(){
|
||||
// while(files.length){
|
||||
// var file = files.pop();
|
||||
// file.destroy();
|
||||
// }
|
||||
// }, 5000);
|
||||
Loading…
x
Reference in New Issue
Block a user