show info for left and fire tree for both - but looks crappy

This commit is contained in:
hendrik 2024-05-25 14:09:39 +02:00
parent 5a4e996719
commit 307b60e805
17 changed files with 483 additions and 133 deletions

8
.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

9
.idea/html.iml generated Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/misc.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectRootManager">
<output url="file://$PROJECT_DIR$/out" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/html.iml" filepath="$PROJECT_DIR$/.idea/html.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

View File

@ -1,30 +1,25 @@
#hierarchy
#hierarchy-left, #hierarchy-right
{
font-family: FontAwesome;
width: 600px;
}
.foldercontainer, .file, .noitems
.foldercontainer, .file
{
display: block;
padding: 5px 5px 5px 50px;
padding: 5px 5px 5px 20px;
}
.folder
{
color: red;
color: green;
}
.file
{
color: green;
color: #a6a87b;
}
.folder, .file
{
cursor: pointer;
}
.noitems
{
display: none;
pointer-events: none;
}
.folder:hover,.file:hover
{
background: yellow;
@ -33,3 +28,43 @@
{
padding-right: 2px;
}
.beside {
display: inline-block;
}
.scrollable {
overflow: scroll;
height: 800px;
}
.info {
width: 300px;
position: absolute;
}
.right-align {
text-align: right;
margin-left: 20px;
}
.wide {
width: 100% !important;
}
[class*="right"] {
padding: 5px !important;
margin-right: 20px !important;
}
.foldercontainer#[class*="right"] {
display: flex;
flex-direction: column;
margin: 5px 0;
}
.folder#[class*="right"], .file#[class*="right"] {
padding: 5px;
margin-right: 20px; /* Adjust for indentation */
}
*/

27
css/style2.css Normal file
View File

@ -0,0 +1,27 @@
.mainFolderHeirarchy li {
border: none;
background: 0 0!important
}
.mainFolderHeirarchy li a {
color: #000;
text-decoration: none!important
}
.mainFolderHeirarchy li a:hover {
text-decoration: none!important
}
.mainFolderHeirarchy .folderHeirarchyList {
padding-top: 3px;
padding-bottom: 3px
}
.mainFolderHeirarchy .folderHeirarchyList.active>.subFolderHeirarchy {
display: block
}
.mainFolderHeirarchy .folderHeirarchyList .subFolderHeirarchy {
display: none;
padding-left: 5px
}

View File

@ -1,39 +1,55 @@
var hierarchy = document.getElementById("hierarchy");
hierarchy.addEventListener("click", function(event) {
var elem = event.target;
if(elem.tagName.toLowerCase() == "span" && elem !== event.currentTarget) {
var type = elem.classList.contains("folder") ? "folder" : "file";
if(type=="file") {
alert("File");
}
if (type == "folder") {
var isexpanded = elem.dataset.isexpanded=="true";
add_file_tree_clickhanlder("left");
add_file_tree_clickhanlder("right");
if ( !isexpanded ) {
function add_file_tree_clickhanlder(side) {
var hierarchy = document.getElementById("hierarchy-"+side );
hierarchy.addEventListener("click", function(event) {
var elem = event.target;
if(elem.tagName.toLowerCase() == "span" && elem !== event.currentTarget) {
fetchTable(elem.parentElement, get_path_var(elem));
var type = elem.classList.contains("folder") ? "folder" : "file";
if(type=="file") {
if( elem.textContent.endsWith('.mkv')) {
let path = get_path_var(elem);
path.unshift(elem.textContent);
let root_dir = document.getElementById(side + "_dir").value;
path.push(root_dir);
fetchmkvdata(path);
}
}
if (type == "folder") {
var isexpanded = elem.dataset.isexpanded=="true";
if ( !isexpanded ) {
let path = get_path_var(elem);
let root_dir = document.getElementById(side + "_dir").value;
path.push(root_dir);
fetchTable(elem.parentElement,path,side );
}
elem.dataset.isexpanded = !isexpanded;
var toggleelms = [].slice.call(elem.parentElement.children);
var classnames = "file,foldercontainer".split(",");
toggleelms.forEach(function(element) {
if(classnames.some(function(val) {
return element.classList.contains(val);
}))
element.style.display = isexpanded ? "none" : "block";
});
}
elem.dataset.isexpanded = !isexpanded;
var toggleelms = [].slice.call(elem.parentElement.children);
var classnames = "file,foldercontainer,noitems".split(",");
toggleelms.forEach(function(element) {
if(classnames.some(function(val) {
return element.classList.contains(val);
}))
element.style.display = isexpanded ? "none" : "block";
});
}
}
});
}
function get_path_var(elem) {
let path = Array();
let parent_el = elem.parentElement;
while ( parent_el.id != "hierarchy") {
while ( !parent_el.id || !parent_el.id.startsWith("hierarchy")) {
console.log(parent_el);
path.push(parent_el.dataset.folder);
parent_el = parent_el.parentElement;
}

33
file_structure2.js Normal file
View File

@ -0,0 +1,33 @@
$(function() {
setFolderHeirarchy();
});
function setFolderHeirarchy() {
var labelWrapper= $('.labelWrapper');
$(labelWrapper).each(function () {
if (!$(this).next('.subFolderHeirarchy')||$(this).next('.subFolderHeirarchy').length==0) {
$(this).find('.arrow').remove();
}
else{
console.log($(this).next('.subFolderHeirarchy'));
}
});
$('.labelWrapper').click(function() {
if ($(this).next('.subFolderHeirarchy').length > 0) {
$(this).parent('.folderHeirarchyList').toggleClass('active');
if ($(this).parent('.folderHeirarchyList').hasClass('active')) {
$(this).find('.arrow').removeClass('glyphicon-triangle-right').addClass('glyphicon-triangle-bottom');
} else {
$(this).find('.arrow').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-right');
}
}else{
$(this).css('color','red');
}
});
}

58
file_structure_new.js Normal file
View File

@ -0,0 +1,58 @@
var hierarchy = document.getElementById("hierarchy");
var clickhandler = function(event) {
var elem = event.target;
if(elem.tagName.toLowerCase() == "span" && elem !== event.currentTarget) {
console.log(elem);
var type = elem.classList.contains("folder") ? "folder" : "file";
console.log("foo" + type);
if(type=="file") {
alert("File");
}
if (type == "folder") {
var isexpanded = elem.dataset.isexpanded=="true";
/*if (isexpanded) {
//elem.classList.remove("folder-open");
elem.classList.remove("fa-folder-o");
elem.classList.add("fa-folder");
//elem.classList.add("folder-close");
} else {
elem.classList.add("fa-folder-o");
elem.classList.remove("fa-folder");
}*/
if ( !isexpanded ) {
console.log("fetch");
fetchTable(elem.parentElement);
//hierarchy.removeEventListener("click",clickhandler);
//hierarchy.addEventListener("click", clickhandler);
}
elem.dataset.isexpanded = !isexpanded;
var toggleelms = [].slice.call(elem.parentElement.children);
console.log(toggleelms);
console.log(elem.parentElement);
var classnames = "file,foldercontainer,noitems".split(",");
toggleelms.forEach(function(element) {
if(classnames.some(function(val) {
return element.classList.contains(val);
}))
element.style.display = isexpanded ? "none" : "block";
});
}
}
};
hierarchy.addEventListener("click",
// Check if the clicked element matches the element you're interested in
//if (event.target.classList.contains('folder')) {
// Handle the click event here
clickhandler
//}
);
//hierarchy.addEventListener("click", clickhandler);
hierarchy.addEventListener("click", function(event) {
// Check if the clicked element matches the element you're interested in
//if (event.target.classList.contains('folder')) {
// Handle the click event here
clickhandler(event);
//}
});

View File

@ -9,100 +9,61 @@
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container mt-5">
<h1>Hello, world!</h1>
<table class="wide"><tr><td>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<form action="/test.py" method="get">
<label for="path">Path</label></br>
<input type="text" id="path" name="path">
<input type="submit" value="Submit" class="btn btn-primary">
</form>
<!--button type="button" class="btn btn-primary" onclick="runpy()"> >Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<div class="beside scrollable col-md4 bg-light p-4 m-2" >
<label for="left-basedir">Left Basedir:</label>
<button type="button" class="btn btn-link">Link</button-->
<h2> file structure </h2>
<div id="hierarchy" data-folder="tmp">
<select name="left_dir" id="left_dir" onchange="set_left_dir()">
<option value="media">tmp</option>
<option value="media">movies</option>
<option value="media">tvseries</option>
<option value="download">nzb</option>
</select>
<div id="hierarchy-left" data-folder="tmp">
<div class="foldercontainer" data-folder="tmp">
<span class="folder fa-folder-o" data-isexpanded="false">tmp</span>
<!--
<div class="foldercontainer" data-folder="Folder 1">
<span class="folder fa-folder-o" data-isexpanded="true">Folder 1</span>
<span class="file fa-file-excel-o">File 11</span>
<span class="file fa-file-code-o">File 12</span>
<span class="file fa-file-pdf-o">File 13</span>
<div class="foldercontainer" data-folder="Fo,lder1-1">
<span class="folder fa-folder" data-isexpanded="false">Folder 1-1</span>
<span class="file fa-file-excel-o">File 1-11</span>
<span class="file fa-file-code-o">File 1-12</span>
<span class="file fa-file-pdf-o">File 1-13</span>
</div>
<div class="foldercontainer">
<span class="folder fa-folder" >Folder 1-2</span>
<span class='noitems'>No Items</span>
</div>
<div class="foldercontainer">
<span class="folder fa-folder">Folder 1-3</span>
<span class='noitems'>No Items</span>
</div>
<div class="foldercontainer">
<span class="folder fa-folder">Folder 1-4</span>
<span class='noitems'>No Items</span>
</div>
</div>
</div>
</div></td><td>
<div class="beside info col-md4 bg-light p-4 m-2" id="info"></div>
</td><td>
<div id="table-container">
</div>
<div class="foldercontainer">
<span class="folder fa-folder-o" data-isexpanded="true">Folder 2</span>
<span class="file fa-file-excel-o">File 21</span>
<span class="file fa-file-code-o">File 22</span>
<span class="file fa-file-pdf-o">File 23</span>
<div class="beside scrollable right-align col-md4 bg-light p-4 m-2">
<label for="right-basedir">Reght Basedir::</label>
<div class="foldercontainer">
<span class="folder fa-folder-o" data-isexpanded="true">Folder 2-1</span>
<span class="file fa-file-excel-o">File 2-11</span>
<span class="file fa-file-code-o">File 2-12</span>
<span class="file fa-file-pdf-o">File 2-13</span>
<select name="right_dir" id="right_dir" onchange="set_right_dir()">
<option value="media">tmp</option>
<option value="media">movies</option>
<option value="media">tvseries</option>
<option value="download">nzb</option>
</select>
<div id="hierarchy-right" data-folder="tmp">
<div class="foldercontainer" data-folder="tmp">
<span class="folder fa-folder-o" data-isexpanded="false">tmp</span>
<div class="foldercontainer">
<span class="folder fa-folder">Folder 2-1-1</span>
<span class='noitems'>No Items</span>
</div>
</div>
</div>
<div class="foldercontainer">
<span class="folder fa-folder-o" data-isexpanded="true">Folder 3</span>
<span class="file fa-file-excel-o">File 31</span>
<span class="file fa-file-code-o">File 32</span>
<span class="file fa-file-pdf-o">File 33</span>
<div class="foldercontainer">
<span class="folder fa-folder">Folder 3-1</span>
<span class='noitems'>No Items</span>
</div>
</div -->
</div>
<h2> Some table </h2>
<div id="table-container">
</div>
</div>
</div>
</td></tr></table>
<script src="file_structure.js" defer></script>
<script src="table_builder.js" defer></script>
<script src="mkvdatefetcher.js"></script>
<script src="media_info_presenter.js"></script>
<script>
function set_left_dir() {
let left_dir_select = document.getElementById("left_dir");
let value = left_dir_select.options[left_dir_select.selectedIndex].text;
let left_hier = document.getElementById("hierarchy-left");
left_hier.dataset.folder=value;
left_hier.innerHTML = "";
left_hier.appendChild(create_folder(value));
}
</script>
</body>
</html>

72
media_info_presenter.js Normal file
View File

@ -0,0 +1,72 @@
function create_info_table(obj, fields) {
let table = document.createElement('table');
table.classList.add("table", "table-striped");
let header = table.createTHead();
let headerRow = header.insertRow(0);
let cell1 = headerRow.insertCell(0);
cell1.innerHTML = "<b>" + obj[0]["type"] + "</b>";
let cell2 = headerRow.insertCell(1);
cell2.innerHTML = "<b>" + "lang" + "</b>";
let i=0;
let keys = [];
for (let key of fields) {
let new_cell = headerRow.insertCell(i+2);
new_cell.innerHTML = "<b>" + key + "</b>";
keys.push(key);
i = i+1;
}
let last = headerRow.insertCell(i+2);
last.innerHTML = "<b>" + "keep" + "</b>";
let tbody = table.createTBody();
obj.forEach(el => {
let row = tbody.insertRow();
let cell1 = row.insertCell(0);
cell1.innerHTML = el["id"] ;
let cell2 = row.insertCell(1);
cell2.innerHTML = el["language"];
keys.forEach((k,j) => {
let cell_j = row.insertCell(j+2);
cell_j.innerHTML = el[k];
});
let keep = row.insertCell(i+2);
keep.innerHTML = '<input type="checkbox" checked="checked">' ;
});
return table;
}
function create_media_info(data) {
let info_ct = document.createElement("div");
info_ct.classList.add("container","text-center");
let video = document.createElement("div");
video.classList.add("row");
video.appendChild(create_info_table(data["video"], ["codec", "display_dimensions"]))
info_ct.appendChild(video);
let audio = document.createElement("div");
audio.classList.add("row");
audio.appendChild(create_info_table(data["audio"], ["codec", "track_name"]))
info_ct.appendChild(audio);
if ( data["subtitles"] && data["subtitles"].length > 0 ) {
let subs = document.createElement("div");
subs.classList.add("row");
subs.appendChild(create_info_table(data["subtitles"], ["codec"]))
info_ct.appendChild(subs);
}
info_ct.id="left_info";
info_ct.classList.add("left_info");
let info_obj = document.getElementById("info");
info_obj.innerHTML = "";
info_obj.appendChild(info_ct);
}

18
mkvdatefetcher.js Normal file
View File

@ -0,0 +1,18 @@
function fetchmkvdata(path) {
let fetcher = "mkvinfo.py";
console.log(path);
let url = '/script/' + fetcher+ '?'
+ path
.reverse()
.map((par) => 'path=' + encodeURIComponent(par))
.join('&');
fetch(url)
.then(response => response.json())
.then(data => {
create_media_info(data);
})
.catch(error => console.error('Error fetching table data:', error));
}

View File

@ -9,7 +9,7 @@ form = cgi.FieldStorage()
param = form.getvalue('path', [])
print(param, file=sys.stderr);
base_dir="/data/media"
base_dir="/data"
path=base_dir
if isinstance(param, str):

39
script/mkvinfo.py Executable file
View File

@ -0,0 +1,39 @@
#!/usr/bin/env python3
import os
import json
import cgi
import sys;
sys.path.append('/scripts')
from mkvservice.analyzer import MkvAnalyzer
form = cgi.FieldStorage()
param = form.getvalue('path', [])
print(param, file=sys.stderr);
print(sys.path, file=sys.stderr);
def ret(response = []):
print("Content-Type: application/json\n")
print(json.dumps(response));
base_dir="/data"
path=base_dir
if isinstance(param, str):
param = [param]
for el in param:
path = os.path.join(path, el)
print(path, file=sys.stderr);
if not os.path.isfile(path) or not path.endswith(".mkv"):
ret()
data = MkvAnalyzer.get_short_mkv_info(path)
ret(data)

View File

@ -1,5 +1,5 @@
function fetchTable(folder_container, path) {
let fetcher = "test.py";
function fetchTable(folder_container, path, side) {
let fetcher = "file_lister.py";
console.log(path);
let url = '/script/' + fetcher+ '?'
@ -15,10 +15,16 @@ function fetchTable(folder_container, path) {
.then(response => response.json())
.then(data => {
data.forEach(el => {
if (el.isdir) {
folder_container.appendChild(create_folder(el["name"]));
if (el.isdir) { let gui_el = create_folder(el["name"]);
gui_el.classList.add(side+"-align");
for (let x of gui_el.children) {
x.classList.add(side+"-align")
}
folder_container.appendChild(gui_el)
} else {
folder_container.appendChild(create_file(el["name"]))
let gui_el = create_file(el["name"]);
gui_el.classList.add(side+"-align");
folder_container.appendChild(gui_el)
}
});
@ -30,20 +36,27 @@ function create_folder (name) {
let folder_container = document.createElement("div");
folder_container.classList.add("foldercontainer");
folder_container.dataset.folder = name;
let folder = document.createElement("span");
folder.classList.add("folder");
folder.dataset.isexpanded = "false";
folder.innerHTML = name;
folder_container.appendChild(folder);
folder_container.appendChild(create_folder_entry(name));
return folder_container;
}
function create_folder_entry(name) {
let folder = create_entry_el("folder", name);
folder.dataset.isexpanded = "false";
return folder;
}
function create_entry_el(type, name) {
let entry = document.createElement("span");
entry.innerHTML = name;
entry.classList.add(type);
return entry;
}
function create_file (name) {
let file = document.createElement("span");
file.innerHTML = name;
file.classList.add("file");
return file;
return create_entry_el("file", name);
}
/*window.onload = function() {

41
table_builder_old.js Normal file
View File

@ -0,0 +1,41 @@
function fetchTable(fetcher,table_container , param) {
let url = '/script/' + fetcher + '?param=' + encodeURIComponent(param);
fetch(url)
.then(response => response.json())
.then(data => {
let table = document.createElement('table');
table.border = '1';
let header = table.createTHead();
let headerRow = header.insertRow(0);
let i=0;
let keys = [];
for (key in data[0]) {
let new_cell = headerRow.insertCell(i);
new_cell.innerHTML = "<b>" + key + "</b>";
keys.push(key);
i = i+1;
}
let tbody = table.createTBody();
data.forEach(el => {
let row = tbody.insertRow();
keys.forEach((k,i) => {
let cell1 = row.insertCell(0);
cell1.innerHTML = el[k];
});
});
document.getElementById(table_container).appendChild(table);
})
.catch(error => console.error('Error fetching table data:', error));
}
window.onload = function() {
let foo = "Bar";
fetchTable('test.py', 'table-container', foo);
}