TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
							<html>
    <head>
        <title>Subservices</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
        <!-- <script type="text/javascript" src="../../script/ao_module.js"></script> -->
        <style>
            .ui.active.segment{
                background-color: #f5f5f5 !important;
            }

            .ui.segment.installedModule{
                cursor: pointer;
                margin: 0px !important;
            }

            .ui.segment.installedModule:hover{
                background-color: #e3e3e3;
            }
        </style>
    
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui container">
                <div class="ui header">
                    <i class="add icon"></i>
                    <div class="content">
                        Add & Remove Module
                        <div class="sub header">Install or Uninstall WebApp Modules from this Host</div>
                    </div>
                </div>
            </div>
            <div class="ui divider"></div>
            <div class="ui red message" style="display:none;" id="errmsgbox">
                <h4 class="ui header">
                    <i class="remove icon"></i>
                    <div class="content">
                        Module Installation Failed
                        <div class="sub header" id="errmsg"></div>
                    </div>
                </h4>
            </div>
            <div class="ui green message" style="display:none;" id="ok">
                <h4 class="ui header">
                    <i class="checkmark icon"></i>
                    <div class="content">
                        Module Installation Completed
                        <div class="sub header" >You should be able to see your new module in the list below.</div>
                    </div>
                </h4>
            </div>
            <div class="ui blue segment">
                <h4 class="ui header">
                    New WebApp
                    <div class="sub header">Download new WebApp to your ArozOS Host</div>
                </h4>
                <div class="ui divider"></div>
                <h5>Install via Git Repository</h5>
                <p>Enter the Github repo link in the field below and click "Install"</p>
                <div class="ui small fluid action input" id="installViaGitInput">
                    <input id="gitlink" type="text" placeholder="http://github.com/....">
                    <button class="ui blue button" onclick="installViaGit();"><i class="download icon"></i> Install</button>
                </div>
                <div class="ui blue message" style="display:none;" id="installingDialog">
                    <p><i class="ui loading spinner icon"></i> Module installing in the background. Please wait until this dialog is closed.</p>
                </div>
                <div class="ui divider"></div>
                <h4>Install via Zip File</h4>
              
                
                <p>Select your module zip file and upload it to the system for installation.</p>
                <div class="ui small fluid action input">
                    <input type="text" id="installpendingFile" placeholder="New Module.zip">
                    <button class="ui button" onclick="selectInstaller()"><i class="folder open icon"></i> Select Installer</button>
                    <button class="ui blue button" onclick="InstallViaZipFile(this)"><i class="zip icon" ></i> Install</button>
                </div>
                
            
            </div>
            <div class="ui red segment">
                <h4 class="ui header">
                    Remove WebApp
                    <div class="sub header">Remove WebApp from your ArozOS Host</div>
                </h4>
                <div class="ui green message" id="succ" style="display:none;">
                    <i class="check icon"></i> WebApp module uninstalled successfully. 
                </div>
                <div class="ui divider"></div>
                <div id="modulelist">
                    No Module Installed
                </div>
            </div>
        </div>

        <div id="loadingUI" class="ui dimmer">
            <div class="ui indeterminate text loader">Fetching Files</div>
        </div>
        <script>
            var moduleList = [];

            initModuleUninstallList();
            function bytesToSize(bytes) {
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes == 0) return '0 Byte';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
            }

            function initModuleUninstallList(){
                $.get("../../system/module/install", function(data){
                    console.log(data);
                    moduleList = data;
                    $("#modulelist").html("");
                    data.forEach(mod => {
                        var uninstallButtonClass = "";
                        if (mod.Uninstallable == false){
                            uninstallButtonClass = "disabled"
                        }
                        $("#modulelist").append(`<div class="ui basic segment installedModule" onclick="selectThisModule(event, this);">
                        <img class="ui top aligned image" style="margin-right: 12px; width: 50px;" src="../../${mod.IconPath}">
                        <div style="display:inline-block;">
                            <b>${mod.Name}</b>
                            <p>${mod.Desc}</p>
                            <div style="position: absolute;top: 0.6em; right: 2em; text-align: right;">
                                <b>${bytesToSize(mod.DiskSpace)}</b><br>
                                <span>${mod.InstallDate}</span>
                            </div>
                        </div>
                        <div style="text-align: right; display:none;" class="actionField">
                            <button class="ui small ${uninstallButtonClass} button" name="${mod.Name}" onclick="removeModule(event,this);">Uninstall</button>
                            <div class="ui red message errordialog" style="text-align:left; display:none;">
                                <i class="remove icon"></i> WebApp Removal Failed: <span class="errmsg"></span>
                            </div>
                        </div>
                    </div> `);
                    });
                });
            }

            function removeModule(e, btn){
                var modulename = $(btn).attr("name");
                //Ask for confirmation
                if (confirm("Confirm permanently remove " + modulename + " ?")){
                    $.ajax({
                        url: "../../system/module/install",
                        data: {opr: "remove", module: modulename},
                        success: function(data){
                            if (data.error !== undefined){
                                $(btn).parent().find(".errmsg").text(data.error);
                                $(btn).parent().find(".errordialog").slideDown("fast").delay(10000).slideUp("fast");
                            }else{
                                //Reload list
                                initModuleUninstallList();

                                //Reload desktop module list
                                if (parent && parent.initModuleList != undefined){
                                    parent.initModuleList();
                                }

                                $("#succ").slideDown("fast").delay(3000).slideUp('fast');
                            }

                        }
                    });
                }
            }

            function selectInstaller(){
                ao_module_openFileSelector(fileSelected, "user:/Desktop", "file",true, {
                    filter: ["zip"]
                });
            }

            function fileSelected(filedata){
                for (var i=0; i < filedata.length; i++){
                    var filename = filedata[i].filename;
                    var filepath = filedata[i].filepath;
                    $("#installpendingFile").val(filepath);
                }
            }

            function InstallViaZipFile(btn){
                //Select the upload module zip file
                var installerPath = $("#installpendingFile").val();
                if (installerPath == ""){
                    $("#installpendingFile").parent().addClass("error");
                }else{
                    $("#installpendingFile").parent().removeClass("error");
                }

                $(btn).addClass("loading");
                //Install it
                $.ajax({
                    url: "../../system/modules/installViaZip",
                    data: {path: installerPath},
                    success: function(data){
                        console.log(data);
                        if (data.error !== undefined){
                            $("#errmsg").text(data.error);
                            $("#errmsgbox").slideDown("fast").delay(10000).slideUp("fast");
                        }else{
                            //Install completed.
                            if (parent && parent.initModuleList != undefined){
                                parent.initModuleList();
                            }

                            initModuleUninstallList();
                            $("#ok").slideDown('fast').delay(5000).slideUp('fast');
                        }
                        $(btn).removeClass("loading");
                    },
                    error: function(){
                        $(btn).removeClass("loading");
                        alert("Installation failed due to unknown reason")
                    }
                })
            }
            
            function installViaGit(){
                var url = $("#gitlink").val();
                $("#installingDialog").show();
                $("#installViaGitInput").addClass("disabled");
                $.ajax({
                    url: "../../system/module/install",
                    data: {opr: "gitinstall", url: url},
                    success: function(data){
                        console.log(data);
                        if (data.error !== undefined){
                            $("#errmsg").text(data.error);
                            $("#errmsgbox").slideDown("fast").delay(10000).slideUp("fast");
                        }else{
                            //OK. Reload the list
                            if (parent && parent.initModuleList != undefined){
                                parent.initModuleList();
                            }

                            //Reload the uninstall list
                            initModuleUninstallList();
                           
                        }
                        $("#installingDialog").hide();
                        $("#installViaGitInput").removeClass("disabled");
                    },
                    error: function(){
                        $("#errmsg").text(data.error);
                        $("#errmsgbox").slideDown("fast").delay(10000).slideUp("fast");
                        $("#installingDialog").hide();
                        $("#installViaGitInput").removeClass("disabled");
                    }
                });

            }

            function selectThisModule(e, obj){
                e.preventDefault();
                $(".ui.segment.installedModule.active").removeClass('active');
                $(".actionField").hide();
                $(obj).addClass("active");
                $(obj).find(".actionField").show();
            }
        </script>
    </body>
</html>