TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!DOCTYPE html>
<html>
    <head>
        <!-- Meta headers for mobile devices-->
        <meta name="apple-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="icon" href="favicon.png">

        <!-- CSS and JavaScript, access to scripe folder is not blocked for non logged in users-->
        <link rel="stylesheet" href="../../../script/semantic/semantic.min.css">
        <script src="../../../script/jquery.min.js"></script>
        <script src="../../../script/ao_module.js"></script>
        <script src="../../../script/semantic/semantic.min.js"></script>
        <title>Personal Homepage</title>
        <style>
            body{
                background-color:white;
            }
        </style>
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui basic segment">
                <h3 class="ui header">
                    <i class="home icon"></i>
                    <div class="content">
                        Personal Home Page
                        <div class="sub header">Create your own home page on ArozOS</div>
                    </div>
                </h3>
            </div>
            <div class="ui divider"></div>
            <div class="ui message">
                <div class="header">
                    What is Personal Home Page?
                </div>
                <ul class="list">
                    <li>You can host a static website using ArozOS</li>
                    <li>All website source are accessiable by your File Manager located inside your user file system</li>
                    <li>Everyone can access your home page using <a><span class=".protocol">http:</span>//<span class="hostname"></span>:<span class="port"></span>/www/<span class="username">{your_username}</span>/</a></li>
                </ul>
            </div>
            <div class="ui container">
                <h4>Toggle Personal Home Page</h4>
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="enablehp" onchange="updateHomepageStatus(this.checked);">
                    <label>Enable personal home page</label>
                </div>
                <div id="updateSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i> Home Page Status Updated</div>
                <br>
                <h4>Select web root folder location</h4>
                <div class="ui action fluid input">
                    <input id="webroot" type="text" placeholder="Select Location" readonly="true">
                    <button class="ui black button" onclick="selectWebRootLocation();"><i class="folder open icon"></i> Open</button>
                </div>
                <div class="ui yellow message"><i class="warning icon"></i> All files located inside the web root will be accessiable by everyone on the internet.</div>
                <div id="webrootSetSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i> Web Root Location Updated</div>
                <br>
                <small>*All changes will be saved automatically upon updates.</small>
            </div>
            <br><br>
        </div>
        <script>
            var ignoreChange = true;

            //Update the user information
            $.get("../../../system/desktop/user", function(data){
                if (data.error == undefined){
                    $(".username").text(data.Username);
                }
            });

            //Update tutorial information
            $(".hostname").text(window.location.hostname);
            $(".port").text(window.location.port);
            if (window.location.port == ""){
                $(".port").text("80");
            }
            $(".protocol").text(location.protocol);

            initHomePageInfo();
            function initHomePageInfo(){
                $.get("../../../system/network/www/toggle", function(data){
                    if (data.error == undefined){
                        $("#enablehp")[0].checked = data;
                        ignoreChange = false;
                    }
                });

                $.get("../../../system/network/www/webRoot", function(data){
                    if (data.error !== undefined){
                        //Not defined.

                    }else{
                        //Defined. Set it to the input field
                        $("#webroot").val(data);
                    }
                });
            }


            function updateHomepageStatus(enableHomePage = false){
                if (ignoreChange){
                    return;
                }

                $.ajax({
                    url: "../../../system/network/www/toggle",
                    data: {set: enableHomePage},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            $("#updateSuceed").slideDown("fast").delay(3000).slideUp("fast");
                        }
                        
                    }
                });
            }

            function selectWebRootLocation(){
                ao_module_openFileSelector(webrootSelected, "user:/", "folder",false);
            }

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

                //Update the server database
                $.ajax({
                    url: "../../../system/network/www/webRoot",
                    data: {set: $("#webroot").val()},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            $("#webrootSetSuceed").slideDown("fast").delay(3000).slideUp("fast");
                        }
                        
                    }
                });
            }
        </script>
    </body>
</html>