Added database and files
This commit is contained in:
Kenneth Jao
parent
bd310137ef
commit
5632bec45b
@ -232,6 +232,7 @@ patch_functions = {
|
||||
}
|
||||
|
||||
|
||||
|
||||
# Render the client at the default URL
|
||||
@app.route("/")
|
||||
def initial():
|
||||
@ -350,5 +351,42 @@ def editors():
|
||||
else:
|
||||
return "Bad Request"
|
||||
|
||||
@app.route("/directory", methods=["GET","POST"])
|
||||
def directory():
|
||||
rootDir = "directory/"
|
||||
if request.method == "GET":
|
||||
return jsonify({"dir": rootDir})
|
||||
if request.method == "POST":
|
||||
received = request.get_json()
|
||||
files = []
|
||||
for filename in os.listdir(received["path"]):
|
||||
file = {}
|
||||
filedir = received["path"]+filename
|
||||
isdir = os.path.isdir(filedir)
|
||||
file["name"] = filename
|
||||
file["date"] = datetime.datetime.fromtimestamp(os.path.getmtime(filedir)).strftime("%B %d, %Y")
|
||||
if(isdir):
|
||||
file["size"] = "- - - -"
|
||||
file["folder"] = "true"
|
||||
else:
|
||||
file["size"] = sizeof_fmt(os.path.getsize(filedir))
|
||||
file["folder"] = "false"
|
||||
|
||||
files.append(file)
|
||||
return jsonify(files)
|
||||
|
||||
def sizeof_fmt(num, suffix='B'):
|
||||
for unit in ['','K','M','G','T','P','E','Z']:
|
||||
if abs(num) < 1024.0:
|
||||
return "%3.1f%s%s" % (num, unit, suffix)
|
||||
num /= 1024.0
|
||||
return "%.1f%s%s" % (num, 'Yi', suffix)
|
||||
|
||||
@app.route("/directory/<path:file>", methods=["GET"])
|
||||
def dir_download(file):
|
||||
print(file)
|
||||
return send_file(file)
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(host="0.0.0.0")
|
||||
|
||||
|
||||
@ -437,3 +437,100 @@ a {
|
||||
margin: auto 3% auto;
|
||||
font-family: 'Saira Condensed', sans-serif;
|
||||
}
|
||||
|
||||
#directory p {
|
||||
font-size: 150%;
|
||||
padding: 1.5vh 2vh 1.5vh 2vh;
|
||||
}
|
||||
|
||||
#directoryHeader {
|
||||
height: 10%;
|
||||
display: grid;
|
||||
grid-template-columns: 70% 15% 10% 5%;
|
||||
grid-template-rows: 100%;
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#directoryHeader p {
|
||||
display: grid;
|
||||
cursor: pointer;
|
||||
grid-template-columns: 19fr 1fr;
|
||||
grid-template-rows: 100%;
|
||||
padding: 2.3vh;
|
||||
}
|
||||
|
||||
#directoryHeader p:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
#directoryHeader i {
|
||||
margin: auto;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#directoryCont {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: grid;
|
||||
cursor: pointer;
|
||||
grid-template-columns: 70% 15% 10% 5%;
|
||||
grid-template-rows: 100%;
|
||||
margin: 1vh 0 1vh 0;
|
||||
}
|
||||
|
||||
.item p {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.item a {
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
margin: auto;
|
||||
font-size: 140%;
|
||||
}
|
||||
|
||||
.item a:hover {
|
||||
color: #F47922;
|
||||
}
|
||||
|
||||
#directoryLocation {
|
||||
height: 10%;
|
||||
margin-bottom: 2vh;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#directoryLocation p {
|
||||
padding: 0.5vh;
|
||||
margin: 1vh 1.5vh 1vh 1.5vh;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#directoryLocation i {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
#directoryHeader .name, .item .name {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#directoryHeader .date, .item .modified {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
#directoryHeader .size, .item .size {
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
#directoryHeader p, .item p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.subdir:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
@ -1,14 +1,8 @@
|
||||
var navSelect = "home";
|
||||
var dataMode;
|
||||
var serverURL = window.location.origin;
|
||||
var data;
|
||||
var languageChart;
|
||||
var dataOpen = false;
|
||||
var submittable = true;
|
||||
var flipMode = "dataValues1";
|
||||
var dropOp = {};
|
||||
var dropOpStore = {};
|
||||
var loginInfo = {};
|
||||
var navSelect = "home", flipMode = "dataValues1", currDir = "",
|
||||
dataMode, data, languageChart, rootDir, files,
|
||||
serverURL = window.location.origin,
|
||||
dataOpen = false, submittable = true, clickable = true,
|
||||
dropOp = {}, dropOpStore = {}, loginInfo = {};
|
||||
|
||||
var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
|
||||
["home", "Home", "home"],
|
||||
@ -24,7 +18,6 @@ var authorityLabels = {
|
||||
3: "#3: No access"
|
||||
};
|
||||
|
||||
|
||||
var modals = [
|
||||
{
|
||||
name: "Add Language",
|
||||
@ -200,6 +193,7 @@ function createNav() {
|
||||
function updateMain(op) { // Updates the actual page.
|
||||
updateNav(op);
|
||||
if(flipMode === "dataValues2") navSelect = "dataValues2";
|
||||
if(op === "files") getFiles();
|
||||
document.getElementById(navSelect).style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
document.getElementById(navSelect).style.display = "none";
|
||||
@ -246,6 +240,186 @@ function getData(updatePage) {
|
||||
);
|
||||
}
|
||||
|
||||
function getFiles() {
|
||||
$.ajax({
|
||||
url: serverURL + "/directory",
|
||||
type: 'GET'
|
||||
})
|
||||
.then(
|
||||
function success(incoming) {
|
||||
rootDir = incoming.dir;
|
||||
listDir("");
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function listDir(dir) {
|
||||
$.ajax({
|
||||
url: serverURL + "/directory",
|
||||
type: 'POST',
|
||||
dataType: "json",
|
||||
contentType: 'application/json;charset=UTF-8',
|
||||
data: JSON.stringify({path:rootDir+dir})
|
||||
})
|
||||
.then(
|
||||
function success(incoming) {
|
||||
files = incoming;
|
||||
dispDir();
|
||||
clickable = true;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function dispDir() {
|
||||
updateLocation();
|
||||
document.getElementById("directory").removeChild(document.getElementById("directoryCont"));
|
||||
var cont = document.createElement("div");
|
||||
cont.id = "directoryCont";
|
||||
cont.style.opacity = "0";
|
||||
cont.className = "transition";
|
||||
|
||||
selectName = "";
|
||||
var item;
|
||||
if(files.length === 0) {
|
||||
var p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode("Nothing here!"));
|
||||
p.style.fontWeight = "100";
|
||||
cont.appendChild(p);
|
||||
}
|
||||
for(var i = 0; i < files.length; i++) {
|
||||
item = createRow();
|
||||
|
||||
var curr = files[i];
|
||||
var name = document.createTextNode(curr.name);
|
||||
var modified = document.createTextNode(curr.date);
|
||||
var size = document.createTextNode(curr.size);
|
||||
|
||||
item.childNodes[0].appendChild(name);
|
||||
item.childNodes[1].appendChild(modified);
|
||||
item.childNodes[2].appendChild(size);
|
||||
|
||||
var ext = document.createAttribute("ext");
|
||||
|
||||
if(curr.folder == "true") {
|
||||
ext.value = "fol";
|
||||
} else {
|
||||
console.log(name);
|
||||
var f = document.createElement("i");
|
||||
var a = document.createElement("a");
|
||||
a.href = getURI(curr.name)
|
||||
a.setAttribute("target", "_blank");
|
||||
f.className = "fa fa-download transition";
|
||||
a.appendChild(f);
|
||||
item.appendChild(a);
|
||||
}
|
||||
item.setAttributeNode(ext);
|
||||
|
||||
item.onclick = function() {
|
||||
if(clickable == true) {
|
||||
var name = this.childNodes[0].innerText;
|
||||
if(selectName == name) {
|
||||
clickable = false;
|
||||
attr = this.getAttribute("ext");
|
||||
if(attr == "fol") {
|
||||
clearTbl();
|
||||
setTimeout(function() {
|
||||
currDir += name+"/";
|
||||
listDir(currDir);
|
||||
}, 300)
|
||||
return;
|
||||
}
|
||||
}
|
||||
selectName = name;
|
||||
selectDiv = this;
|
||||
for(var i =0; i < document.getElementsByClassName("item").length;i++){
|
||||
document.getElementsByClassName("item")[i].style.backgroundColor = "";
|
||||
}
|
||||
this.style.backgroundColor = "#d9d9d9";
|
||||
}
|
||||
}
|
||||
cont.appendChild(item);
|
||||
item = null;
|
||||
}
|
||||
document.getElementById("directory").appendChild(cont);
|
||||
setTimeout(function() {
|
||||
document.getElementById("directoryCont").style.opacity = "1";
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function getURI(name) {
|
||||
var dirs = (rootDir+currDir+name).split("/");
|
||||
var uri = window.location.origin+"/directory";
|
||||
for(var i = 0; i < dirs.length; i++) uri+="/"+encodeURIComponent(dirs[i]);
|
||||
return uri;
|
||||
}
|
||||
|
||||
function clearTbl() {
|
||||
selected = undefined;
|
||||
selectDiv = undefined;
|
||||
document.getElementById("directoryCont").style.opacity = "0";
|
||||
document.getElementById("directoryLocation").style.opacity = "0";
|
||||
}
|
||||
|
||||
function createRow() {
|
||||
var item = document.createElement("div");
|
||||
item.className = "item transition card";
|
||||
var name = document.createElement("p");
|
||||
name.className = "name";
|
||||
item.appendChild(name);
|
||||
var modified = document.createElement("p");
|
||||
modified.className = "modified";
|
||||
item.appendChild(modified);
|
||||
var size = document.createElement("p");
|
||||
size.className = "size";
|
||||
item.appendChild(size);
|
||||
return item;
|
||||
}
|
||||
|
||||
function updateLocation() {
|
||||
var loc = document.getElementById("directoryLocation");
|
||||
while(loc.firstChild) loc.removeChild(loc.firstChild);
|
||||
loc.style.opacity = "1";
|
||||
var subdir = currDir.split("/");
|
||||
subdir = subdir.slice(0, subdir.length-1);
|
||||
for(var i = 0; i < subdir.length+1; i++) {
|
||||
var p = document.createElement("p");
|
||||
var ic = document.createElement("i");
|
||||
ic.className = "fa fa-angle-right";
|
||||
if(i !== 0) loc.appendChild(ic);
|
||||
if(i === 0) {
|
||||
p.appendChild(document.createTextNode("Database"));
|
||||
} else {
|
||||
p.appendChild(document.createTextNode(subdir[i-1]));
|
||||
}
|
||||
if(i !== subdir.length) {
|
||||
p.style.cursor = "pointer";
|
||||
p.className = "subdir transition";
|
||||
p.onclick = function() {
|
||||
clickable = false;
|
||||
clearTbl();
|
||||
subdirNum = subdir.indexOf(this.innerText);
|
||||
if(subdirNum === -1) {
|
||||
currDir = "";
|
||||
} else {
|
||||
currDir = subdir.slice(0, subdirNum+1).reduce(function(a,b) { return a+"/"+b; })+"/";
|
||||
}
|
||||
listDir(currDir);
|
||||
}
|
||||
}
|
||||
loc.appendChild(p);
|
||||
}
|
||||
}
|
||||
|
||||
function downloadFile(name) {
|
||||
$.ajax({
|
||||
url: serverURL + "/directory/download",
|
||||
type: 'POST',
|
||||
dataType: "json",
|
||||
contentType: 'application/json;charset=UTF-8',
|
||||
data: JSON.stringify({path:rootDir+currDir+name})
|
||||
});
|
||||
}
|
||||
|
||||
function language(language) {
|
||||
return data.values.filter(function(element) {
|
||||
return element.id === parseInt(language);
|
||||
|
||||
@ -93,8 +93,25 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="files" class="optionContainer">
|
||||
<div class="temp card">
|
||||
<h2>Currently in progress!</h2>
|
||||
<div id="directory">
|
||||
<div id="directoryLocation" class="card transition">
|
||||
<p>Database</p>
|
||||
</div>
|
||||
<div id="directoryHeader" class="card transition">
|
||||
<p class="name transition">Name
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
<p class="date transition">Date Modified
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
<p class="size transition">Size
|
||||
<i class="fa fa-chevron-down transition"></i>
|
||||
<i class="fa fa-chevron-up transition"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div id="directoryCont"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="about" class="optionContainer">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user