Quasi functioning lists
This commit is contained in:
parent
340b9a54fd
commit
2a45797c82
|
|
@ -46,11 +46,12 @@
|
|||
|
||||
|
||||
|
||||
.icon-style {
|
||||
width: 2em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.dir-style, .video-style, .image-style, .file-style {
|
||||
/* max-width: 24vw; */
|
||||
/* height: auto;
|
||||
position: relative; */
|
||||
max-width: 20em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,19 +45,15 @@ const generateFavesList = (data) => {
|
|||
|
||||
|
||||
const updateHTMLDirList = async (data) => {
|
||||
console.log(data);
|
||||
let pathElm = document.getElementById("path");
|
||||
let dirs = (data.list.dirs) ? data.list.dirs[0] : [];
|
||||
let videos = (data.list.vids) ? data.list.vids[0] : [];
|
||||
let images = (data.list.images) ? data.list.images[0] : [];
|
||||
let files = (data.list.ungrouped) ? data.list.ungrouped[0] : [];
|
||||
let isInFaves = data.in_fave;
|
||||
|
||||
console.log(data.list.images);
|
||||
// let dirs = data.list.dirs[0];
|
||||
// let videos = data.list.vids[0];
|
||||
let images = data.list.images[0];
|
||||
// let files = data.list.files[0];
|
||||
let isInFaves = data.in_fave;
|
||||
let background_image = (images[0]) ? images[0][0] : "";
|
||||
console.log(background_image);
|
||||
|
||||
pathElm.innerText = data.path_head; // Can still set the path info if locked...
|
||||
|
||||
document.getElementById("path").innerText = data.path_head;
|
||||
// Setup background if there is a 000.* in selection
|
||||
if (background_image.match(/000\.(jpg|png|gif)\b/) != null) {
|
||||
// Due to same hash for 000 we add date to make link unique for each run to bypass cache issues...
|
||||
|
|
@ -69,11 +65,11 @@ const updateHTMLDirList = async (data) => {
|
|||
}
|
||||
|
||||
// See if in faves
|
||||
let elm = document.getElementById("tggl-faves-btn");
|
||||
let tggl_faves_btn = document.getElementById("tggl-faves-btn");
|
||||
if (isInFaves == "true")
|
||||
elm.classList.add("btn-info");
|
||||
tggl_faves_btn.classList.add("btn-info");
|
||||
else
|
||||
elm.classList.remove("btn-info");
|
||||
tggl_faves_btn.classList.remove("btn-info");
|
||||
|
||||
|
||||
renderFilesList(data.list);
|
||||
|
|
@ -163,26 +159,26 @@ const updateHTMLDirList = async (data) => {
|
|||
// ulElm.appendChild(clone);
|
||||
}
|
||||
|
||||
const setFileIconType = (fileName) => {
|
||||
icoPath = "";
|
||||
|
||||
if (fileName.match(/\.(doc|docx|xls|xlsx|rtf)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/doc.png";
|
||||
} else if (fileName.match(/\.(7z|7zip|zip|tar.gz|tar.xz|gz|rar|jar)\b/) != null) {
|
||||
icoPath = "resources/images/icons/arc.png";
|
||||
} else if (fileName.match(/\.(pdf)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/pdf.png";
|
||||
} else if (fileName.match(/\.(html)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/html.png";
|
||||
} else if (fileName.match(/\.(txt|conf)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/text.png";
|
||||
} else if (fileName.match(/\.(iso|img)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/img.png";
|
||||
} else if (fileName.match(/\.(sh|batch|exe)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/scrip.png";
|
||||
} else {
|
||||
icoPath = "static/imgs/icons/bin.png";
|
||||
}
|
||||
|
||||
return formatURL(icoPath)
|
||||
}
|
||||
// const setFileIconType = (fileName) => {
|
||||
// icoPath = "";
|
||||
//
|
||||
// if (fileName.match(/\.(doc|docx|xls|xlsx|rtf)\b/) != null) {
|
||||
// icoPath = "static/imgs/icons/doc.png";
|
||||
// } else if (fileName.match(/\.(7z|7zip|zip|tar.gz|tar.xz|gz|rar|jar)\b/) != null) {
|
||||
// icoPath = "resources/images/icons/arc.png";
|
||||
// } else if (fileName.match(/\.(pdf)\b/) != null) {
|
||||
// icoPath = "static/imgs/icons/pdf.png";
|
||||
// } else if (fileName.match(/\.(html)\b/) != null) {
|
||||
// icoPath = "static/imgs/icons/html.png";
|
||||
// } else if (fileName.match(/\.(txt|conf)\b/) != null) {
|
||||
// icoPath = "static/imgs/icons/text.png";
|
||||
// } else if (fileName.match(/\.(iso|img)\b/) != null) {
|
||||
// icoPath = "static/imgs/icons/img.png";
|
||||
// } else if (fileName.match(/\.(sh|batch|exe)\b/) != null) {
|
||||
// icoPath = "static/imgs/icons/scrip.png";
|
||||
// } else {
|
||||
// icoPath = "static/imgs/icons/bin.png";
|
||||
// }
|
||||
//
|
||||
// return formatURL(icoPath)
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,21 +1,49 @@
|
|||
const setFileIconType = (fileName) => {
|
||||
let icoPath = "";
|
||||
|
||||
if (fileName.match(/\.(doc|docx|xls|xlsx|rtf)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/doc.png";
|
||||
} else if (fileName.match(/\.(7z|7zip|zip|tar.gz|tar.xz|gz|rar|jar)\b/) != null) {
|
||||
icoPath = "resources/images/icons/arc.png";
|
||||
} else if (fileName.match(/\.(pdf)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/pdf.png";
|
||||
} else if (fileName.match(/\.(html)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/html.png";
|
||||
} else if (fileName.match(/\.(txt|conf)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/text.png";
|
||||
} else if (fileName.match(/\.(iso|img)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/img.png";
|
||||
} else if (fileName.match(/\.(sh|batch|exe)\b/) != null) {
|
||||
icoPath = "static/imgs/icons/scrip.png";
|
||||
} else {
|
||||
icoPath = "static/imgs/icons/bin.png";
|
||||
}
|
||||
|
||||
return icoPath
|
||||
}
|
||||
|
||||
// Create a ES6 class component
|
||||
class FilesList extends React.Component {
|
||||
// Use the render function to return JSX component
|
||||
render() {
|
||||
let final = [];
|
||||
let files = this.props.files;
|
||||
let files = this.props.files[0];
|
||||
console.log(files);
|
||||
|
||||
for (let file of files) {
|
||||
final.push(
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">{file}</div>
|
||||
<div class="card-header">
|
||||
<img class="icon-style" src={ setFileIconType(file[0]) } alt={file[0]} />
|
||||
{file[0]}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<img class="image-style" src="/api/files/file" alt="{file}" />
|
||||
<img class="image-style" src={"api/file-manager-action/" + file[1]} alt={file[0]} />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch"/>
|
||||
<input app="{file}" class="btn btn-secondary btn-sm" type="button" value="Launch Locally"/>
|
||||
<input app={file[1]} class="btn btn-secondary btn-sm" type="button" value="Open"/>
|
||||
<input app={file[1]} class="btn btn-secondary btn-sm" type="button" value="Open Locally"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,13 +59,9 @@ class FilesList extends React.Component {
|
|||
}
|
||||
|
||||
const renderFilesList = (data = null) => {
|
||||
// Obtain the root
|
||||
const filesListElm = document.getElementById('files')
|
||||
console.log(data);
|
||||
|
||||
// // Use the ReactDOM.render to show our component on the browser
|
||||
// ReactDOM.render(
|
||||
// React.createElement(FilesList, data),
|
||||
// filesListElm
|
||||
// )
|
||||
const filesListElm = document.getElementById('files');
|
||||
ReactDOM.render(
|
||||
React.createElement(FilesList, data),
|
||||
filesListElm
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<!-- Favorites modal -->
|
||||
<div class="modal fade" id="favorites-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Favorites:</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col scroller" style="max-height: 30em; overflow: auto;">
|
||||
<ul id="faves-list">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!-- File viewer modal -->
|
||||
<div class="modal fade" id="file-view-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>File Viewer:</h3>
|
||||
<button type="button" onclick="pauseVideo()" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body text-center justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col scroller" style="max-height: 70vh; overflow: auto;">
|
||||
<!-- For video -->
|
||||
<div id="video-container">
|
||||
<video id="video-viewer"
|
||||
loop
|
||||
src=""
|
||||
autoplay=""
|
||||
volume="0.75"
|
||||
poster="{{ url_for('static', filename='imgs/icons/loading.gif')}}"
|
||||
onmousemove="showControls()">
|
||||
</video>
|
||||
|
||||
<div id="video-controls">
|
||||
<div class="row pl-5 pr-5">
|
||||
<div class="col-md-8">
|
||||
<input id="seek-slider" class="form-control-range" type="range" min="0" value="0" max="100" step="1"/>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<span id="videoCurrentTime"></span>
|
||||
/
|
||||
<span id="videoDuration"></span>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<span id="volumeIcon" onclick="toggleVolumeControl()">🔈</span>
|
||||
<input id="volume-slider" class="form-control-range volume-control-positioner" style="display: none;"
|
||||
type="range" orient="vertical" min="0.0" max="1.0" value="0.75" step="0.05" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- For image -->
|
||||
<img id="image-viewer"
|
||||
style="width: inherit; height: auto; display: none;"
|
||||
src="" alt="" />
|
||||
|
||||
<!-- For pdf -->
|
||||
<iframe id="pdf-viewer"
|
||||
src=""
|
||||
width="720" height="460"
|
||||
style="display: none;"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen="allowfullscreen"
|
||||
mozallowfullscreen="mozallowfullscreen"
|
||||
msallowfullscreen="msallowfullscreen"
|
||||
oallowfullscreen="oallowfullscreen"
|
||||
webkitallowfullscreen="webkitallowfullscreen">
|
||||
</iframe>
|
||||
|
||||
<!-- For text -->
|
||||
<pre id="text-viewer"
|
||||
style="width: inherit; height: auto; display: none;">
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button onclick="pauseVideo()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!-- Other Options modal -->
|
||||
<div class="modal fade" id="options-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-xl" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Settings:</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col scroller" style="max-height: 30em; overflow: auto;">
|
||||
|
||||
<!-- <center>
|
||||
<form>
|
||||
<input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
|
||||
<input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
|
||||
<input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
|
||||
<input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
|
||||
</form>
|
||||
<br/>
|
||||
<input type="text" id="NewItem" value=""/>
|
||||
<input type="button" value="New Dir" onclick="createItem('dir')"/>
|
||||
<input type="button" value="New File" onclick="createItem('file')"/>
|
||||
<input type="button" value="Show Server Messages" onclick="tgglElmView('serverMsgView')"/>
|
||||
<br/>
|
||||
<input id="MergeType" type="checkbox" onchange="getDir('./')" />
|
||||
<label for="MergeType">Show seassons in same list.</label>
|
||||
</center> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue