TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!DOCTYPE html>
<html>
<head>
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
    <script src="../../script/jquery.min.js"></script>
	<script src="../../script/semantic/semantic.min.js"></script>
    <script src="../../script/clipboard.min.js"></script>
    <style>
        .hidden{
            display:none;
        }

        .disabled{
            opacity: 0.5;
            pointer-events: none;
        }
        

        .detailBtn{
            position: absolute;
            right: 0.4em;
            top: calc(30% + 0.5em);
        }

        .servertype.active .detailBtn{
            pointer-events: none;
            opacity: 0.3;
        }

        .servertype:hover{
            opacity: 0.7;
        }

        .servertype.active{
            background-color: #f7f7f7  !important;
            border-right: 3px solid #6bc2ec !important;
        }

        .clickable{
            cursor: pointer;
        }

        .fileservice{
            margin-bottom: 1em;
        }

        .serviceConnEndpoints{
            margin-top: 0 !important;
            display: inline-block;
            vertical-align:top;
        }
        
        .ui.toggle.checkbox input[type=checkbox]:checked~label::before,
        .ui.toggle.checkbox input[type=checkbox]:checked:focus~label::before {
        background: #8cd493 !important;
        }
    </style>
</head>
<body>
    <br>
   <div class="ui container">
        <div class="ui header">
            <div class="content">
                Network File Transfer Servers
                <div class="sub header">Manage the exported file server interface for ArozOS Virtual File System</div>
            </div>
        </div>
        <br>
        <div class="ui stackable grid">
            <div class="six wide column" style="border-right: 1px solid #e0e0e0;">
                <div id="serviceList"></div>
                <div class="ui divider"></div>
                <!-- 
                <div style="width: 100%;" align="center">
                    <button title="Start All Services" onclick="" class="circular basic green large ui icon button">
                        <i class="green play icon"></i>
                    </button>
                    <button title="Stop All Services" onclick="" class="circular basic red large ui icon button">
                        <i class="red stop icon"></i>
                    </button>
                </div>
                -->
            </div>
            <div class="ten wide column">
                <div id="serviceInstruction"></div>
                <div class="ui divider"></div>
                <div id="serviceSettings"></div>
            </div>
        </div>
        <br><br>
    </div>
    <script>
        var isAdmin = false;
        var fileServerServices = [];
        
        function isAdminCheck(){
            $.get("../../system/desktop/user?noicon=true", function(data){
                isAdmin = data.IsAdmin;
                initServiceList();
            });
        }
        isAdminCheck();

        function initServiceList(){
            $("#serviceList").html("");
            $.get("../../system/network/server/list", function(data){
                console.log(data);
                fileServerServices = data;
                data.forEach(server => {
                    console.log(server);
                    let checkboxDefaultState = "";
                    let messageDefaultColor = "";
                    if (server.Enabled){
                        checkboxDefaultState = "checked";
                        messageDefaultColor = "green";
                    }
                    $("#serviceList").append(`<div class="fileservice">
                        <div class="ui clickable servertype top attached segment" uuid="${server.ID}" onclick="openServerConfig('${server.ID}', event, this);">
                            <h4 class="ui header">
                                <img src="../../${server.IconPath}">
                                <div class="content">
                                    ${server.Name}
                                    <div class="sub header">
                                        ${server.Desc}
                                    </div>
                                </div>
                            </h4>
                            <a title="Details" onclick="openServerConfig('${server.ID}', event, this.parent);" class="detailBtn">
                                <i class="grey angle right icon"></i>
                            </a>
                        </div>
                        <div class="ui bottom attached ${messageDefaultColor} mini message">
                            <div class="ui toggle mini checkbox enableState" fserv="${server.ID}" onclick="handleServiceStateChange(this, event);">
                                <input type="checkbox" ${checkboxDefaultState} onchange="updateCheckboxBackground(this, event);">
                                <label></label>
                            </div>
                            <p fserv="${server.ID}" class="serviceConnEndpoints"></p>
                    </div>`);
                });

                if (data.length > 0){
                    openServerConfig(data[0].ID);
                    $($(".servertype")[0]).addClass("active");
                }

                //Get a list of endpoints that is dedicated for this file server
                $.get("../../system/network/server/endpoints", function(data){
                    for (let [id, endpoints] of Object.entries(data)){
                        console.log(id, endpoints)
                        //Get the target connection display for this endpoint
                        $(".serviceConnEndpoints").each(function(){
                            if ($(this).attr("fserv") == id){
                                //This is the one. Render the endpoints on it
                                let endpointHTML = "";
                                endpoints.forEach(ep => {
                                    var portName = ":" + ep.Port;
                                    if (ep.Port == 0){
                                        //Do not define port. Hence do not show it
                                        portName = "";
                                    }
                                    let connURL = ep.ProtocolName + window.location.hostname + portName + ep.Subpath;
                                    endpointHTML += `<i class="ui grey caret right icon"></i> <a class="clip" data-clipboard-text="${connURL}" style="cursor:pointer;" conn="${connURL}">${connURL}</a><br>`
                                });

                                $(this).html(endpointHTML);
                            }
                        });
                        var clipboard = new ClipboardJS('.clip');
                        
                        clipboard.on('success', function(e) {
                            //console.info('Action:', e.action);
                            //console.info('Text:', e.text);
                            console.info('Trigger:', e.trigger);
                            let targetElement = e.trigger;
                            $(targetElement).html(`<i class="ui green checkmark icon"></i> Copied`);
                            setTimeout(function(){
                                let originalURL = $(targetElement).attr("conn");
                                $(targetElement).html(originalURL);
                            }, 3000);
                            e.clearSelection();
                        });

                        //Activate all checkbox
                        $(".ui.checkbox").checkbox();
                        if (!isAdmin){
                            //This user not admin. Disable all checkbox
                            $(".ui.checkbox").addClass("disabled");
                        }
                        updateAllServiceState();
                    }
                });
            });
       }

        function updateAllServiceState(){
            $.get("../../system/network/server/status", function(data){
                $(".enableState").each(function(){
                    var fservid = $(this).attr("fserv");
                    var enableState = data[fservid];
                    if (enableState){
                        $(this).checkbox("set checked");
                    }else{
                        $(this).checkbox("set unchecked");
                    }
                });
            });
        }

       function handleServiceStateChange(object, event){
            event.preventDefault();
            let targetElement = object;
            setTimeout(function(){
                //This delay is to make sure the checkbox event is executed first
                //Before the state is checked
                let isChecked = $(targetElement).checkbox("is checked");
                let isCheckedString = isChecked?"true":"false";
                let serviceId = $(targetElement).attr("fserv");
                $.ajax({
                    url: "../../system/network/server/toggle",
                    method: "POST",
                    data: {id: serviceId, enable: isCheckedString},
                    success: function(){
                        updateAllServiceState();
                    }
                })
            }, 100);
       }

       function getServiceById(serviceid){
            for (var i =0; i < fileServerServices.length; i++){
                if (fileServerServices[i].ID == serviceid){
                    return fileServerServices[i];
                }
            }
       }

       function openServerConfig(serviceid, evt=undefined, object=undefined){
            if (evt != undefined){
                evt.preventDefault();
            }
            $(".servertype.active").removeClass("active");
            $(object).addClass("active");
            let targetService = getServiceById(serviceid);
            let targetServiceConfigPage = targetService.ConfigPage;
            if (targetServiceConfigPage == "" || targetServiceConfigPage == undefined){
                $("#serviceSettings").html(`No Configuration Avabile`);
            }else{
                $("#serviceInstruction").load("../../" + targetService.ConnInstrPage);
                if (isAdmin){
                    $("#serviceSettings").load("../../" + targetService.ConfigPage);
                }else{
                    $("#serviceSettings").load("../disk/instr/noaccess.html");
                }
               
            }
       }    

       function updateCheckboxBackground(object, event){
            let message = $(object).parent().parent();
            if (object.checked){
                $(message).addClass("green");
            }else{
                $(message).removeClass("green");
            }
       }
    </script>
</body>
</html>