TC
/
3DPRCU


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="css/tocas.css" rel='stylesheet'>
    <script src="css/tocas.js"></script>
	<script src="jquery.js"></script>
    <title>aCloud File Viewer (Community Edition)</title>
    <style type="text/css">
        body {
            padding-top: 4em;
            background-color: rgb(250, 250, 250);
            overflow: hidden;
        }
        .ts.segmented.list {
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="ts narrow container">
        <div class="ts breadcrumb">
            <a href="#!" class="section">aCloud （社群版）</a>
            <div class="divider">/</div>
            <div href="#!" class="section">檔案管理員</div>
            <div class="divider">/</div>
            <div class="active section">
                <i class="folder icon"></i>目前資料夾：<div id="currentPath" style="display:inline;">/web</div>
            </div>
        </div>
        <br><br>

        <div class="ts grid">
            <div class="eleven wide column">
                <div id="fileList" class="ts selection segmented list">
                    <a href="#!" class="item" filepath="" filetype="file" onClick="selectItem(this);" ondblClick="openItem(this);">
                        <i class="file outline icon"></i>
                        Loading...
                    </a>
                </div>

            </div>

            <div class="five wide column">
                <div class="ts card">

                    <div class="secondary very padded extra content">
                        <div class="ts icon header">
                            <i id="fileicon" class="file image outline icon"></i>
                        </div>
                    </div>

                    <div class="extra content">
                        <div id="filename" class="header">N/A</div>
                    </div>

                    <div class="extra content">
                        <div class="ts list">
                            <div class="item">
                                <button class="ts primary button" onClick="printThis();">打印</button>
                            </div>
                            <div class="item">
                                <button class="ts basic button" onClick="openFile();">打開檔案</button>
                            </div>
                            <div class="item">
                                  <button class="ts negative button" onClick="deleteFile();">刪除檔案</button>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="ts horizontal right floated middoted link list">
                    <a href="#" class="item">關於</a>
                    <a href="http://aroz.online" class="item">aCloud 個人雲端</a>
                </div>
            </div>
        </div>
    </div>
<script>

loadDirectory("/web");

function selectItem(object){
	$(".active.item").removeClass("active");
	$(object).addClass("active");
	var filename = $(object).attr("filepath");
	var ext = getExt(filename);
	$("#filename").text(basename(filename));
	$("#fileicon").attr('class',getIconFromExt(ext) + " icon");
}

function loadDirectory(path){
	var template = '<a href="#!" class="item" filepath="{filepath}" filetype="{filetype}" onClick="selectItem(this);" ondblClick="openItem(this);">\
                        <i class="{exticon} icon"></i>\
                        {displayanme}\
                    </a>';
	var backBtn = '<a href="#!" class="item" ondblClick="parentDir();">\
                        <i class="reply icon"></i>\
                        ../\
                    </a>';
	$("#fileList").html("");
	if (path != "/web"){
		$("#fileList").append(backBtn);
	}
	$.get("/list?dir=" + path,function(data){
		for (var i =0; i < data.length; i++){
			var box = template;
			box = box.replace("{filetype}",data[i]["type"]);
			box = box.replace("{filepath}",data[i]["name"]);
			var filename = basename(data[i]["name"]);
			box = box.replace("{displayanme}",filename);
			var ext = getExt(filename);
                        if (data[i]["type"] == "dir"){
                         box = box.replace("{exticon}","folder outline");
                        }else{
			 box = box.replace("{exticon}",getIconFromExt(ext));
                        }
			$("#fileList").append(box);
			$("#currentPath").text(path);
		}
	});
}

function printThis(){
	alert("To be implemented by 3D printer manufacturer.");
}

function openFile(){
	if ($(".active.item").length == 0){
		alert("Please select a file / folder to open.");
	}
	openItem($(".active.item")[0]);
}

function deleteFile(){
	if ($(".active.item").length == 0){
		alert("Please select a file / folder to delete.");
	}
	var filepath = $(".active.item").attr('filepath');
	if (confirm("Are you sure you want to delete file: " + filepath + " ?")){
		$.get("/delete," + filepath,function(data){
			console.log(data);
			loadDirectory($("#currentPath").text().trim());
		});
	}
}

function parentDir(){
	var currentdir = $("#currentPath").text().trim();
	var parent = currentdir.split("/");
	parent.pop();
	parent = parent.join("/");
	loadDirectory(parent);
}

function basename(path){
	return path.split("/").pop();
}

function getExt(filename){
	return filename.split(".").pop();
}

function openItem(object){
	var filepath = $(object).attr("filepath");
	var filetype = $(object).attr("filetype");
	if (filetype == "file"){
		//Open in new tab
		window.open(filepath);
	}else{
		//Folder. Load new contents.
		loadDirectory(filepath);
	}
}


function getIconFromExt(ext){
        var ext = ext.toLowerCase().trim();
        var iconList={
        md:"file text outline",
        txt:"file text outline",
        pdf:"file pdf outline",
        doc:"file word outline",
        docx:"file word outline",
        odt:"file word outline",
        xlsx:"file excel outline",
        ods:"file excel outline",
        ppt:"file powerpoint outline",
        pptx:"file powerpoint outline",
        odp:"file powerpoint outline",
        jpg:"file image outline",
        png:"file image outline",
        jpeg:"file image outline",
        gif:"file image outline",
        odg:"file image outline",
        psd:"file image outline",
        zip:"file archive outline",
        '7z':"file archive outline",
        rar:"file archive outline",
        tar:"file archive outline",
        mp3:"file audio outline",
        m4a:"file audio outline",
        flac:"file audio outline",
        wav:"file audio outline",
        aac:"file audio outline",
        mp4:"file video outline",
        webm:"file video outline",
        php:"file code outline",
		html:"file code outline",
		htm:"file code outline",
        js:"file code outline",
        css:"file code outline",
        xml:"file code outline",
        json:"file code outline",
        csv:"file code outline",
        odf:"file code outline",
        bmp:"file image outline",
        rtf:"file text outline",
        wmv:"file video outline",
        mkv:"file video outline",
        ogg:"file audio outline",
        stl:"cube",
        obj:"cube",
        "3ds":"cube",
        fbx:"cube",
        collada:"cube",
        step:"cube",
        iges:"cube",
		gcode:"cube",
        shortcut:"external square",
		opus:"file audio outline"
        };
        var icon = "";
        if (ext == ""){
            icon = "folder outline";
        }else{
            icon = iconList[ext];
            if (icon == undefined){
                icon = "file outline"
            }
        }
        return icon;
    }
	

</script>
</body>
</html>