TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!DOCTYPE html>
<html>
    <head>
        <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">
        <meta name="theme-color" content="#4b75ff">
        <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>
        <script type="application/javascript" src="../script/clipboard.min.js"></script>
        <title>Serverless</title>
        <style>
            body{
                background-color:white;
            }
                    /* Tooltip container */
                   .tooltip {
                   position: relative;
                   display: inline-block;
                   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
                   }
       
                   /* Tooltip text */
                   .tooltip .tooltiptext {
                   visibility: hidden;
                   width: 120px;
                   background-color: #555;
                   color: #fff;
                   text-align: center;
                   padding: 5px 0;
                   border-radius: 6px;
       
                   /* Position the tooltip text */
                   position: absolute;
                   z-index: 1;
                   bottom: 125%;
                   left: 50%;
                   margin-left: -60px;
       
                   /* Fade in tooltip */
                   opacity: 0;
                   transition: opacity 0.3s;
                   }
       
                   /* Tooltip arrow */
                   .tooltip .tooltiptext::after {
                   content: "";
                   position: absolute;
                   top: 100%;
                   left: 50%;
                   margin-left: -5px;
                   border-width: 5px;
                   border-style: solid;
                   border-color: #555 transparent transparent transparent;
                   }
                   
                   .tooltitle{
                        height: 5em;
                        background-color: #5d6f77;
                        color: white;
                   }
               </style>
    </head>
    <body>
        <div class="tooltitle">
            <br>
            <div class="ui container">
                <h4 class="ui header">
                    <div class="content" style="color: white;">
                        Serverless Control Panel
                      <div class="sub header" style="color: rgb(233, 233, 233);">Allow external services to run AGI scripts</div>
                    </div>
                </h4>
            </div>
        </div>
        <div id="deleteSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i>Service Deleted</div>
        <div>
            <table class="ui celled unstackable table">
                <thead>
                    <tr>
                        <th>UUID (access token)</th>
                        <th>AGI Path</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="records">
                
                </tbody>
            </table>
            <div style="width: 100%" align="center">
                <div class="ui breadcrumb" id="pageIndexs">
                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div id="updateSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i>Service Added</div>
        <div class="ui container">
            <h4>Select AGI Script</h4>
            <p>Select a script to be executed by 3rd party application via RESTFUL request. <br>
                Note that the AGI script will be executed with <b>your user scope</b></p>
            <div class="ui action fluid input">
                <input id="agiPath" type="text" placeholder="Select Location" readonly="true">
                <button class="ui black button" onclick="openfileselector();"><i class="folder open icon"></i> Open</button>
            </div>
            <button class="ui positive right floated button" onclick="add();" style="margin-top: 0.4em;"><i class="ui checkmark icon"></i> Add</button>
            <br><br>
            <div class="ui divider"></div>
            <p><small>Misuse of serverless function might affect your account safty or causes data loss. Please use this function with caution and do not copy and paste code from unknown sources.</small></p>
        </div>
        <br><br>
        <script>
            $.getJSON( "/api/ajgi/listExt", function( data ) {
                $.each( data, function( key, val ) {
                    appendTable(key, val.path);
                });
                if(Object.keys(data).length == 0) {
                    $("#records").append(`<tr id="zeroRec"><td>No registered endpoint</td></tr>`);
                }
            });

            function openfileselector(){
                ao_module_openFileSelector(fileLoader, "user:/", "file",false, {filter:["agi", "js"]});
            }


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

            function add() {
                var path = $("#agiPath").val();
                $.getJSON( "/api/ajgi/addExt?path=" + path, function( data ) {
                    if(data.error == undefined) {
                        $("#updateSuceed").slideDown("fast").delay(3000).slideUp("fast");
                        appendTable(data, path);
                    }else{
                        alert(data.error);
                    }
                });
            }

            function delRecord(element) {
                $.getJSON( "/api/ajgi/rmExt?uuid=" + $(element).attr("uuid"), function( data ) {
                    if(data == "OK") {
                        $("#deleteSuceed").slideDown("fast").delay(3000).slideUp("fast");
                    }else{
                        alert(data.error);
                    }
                });
                $(element).parent().parent().remove().slideUp("fast");
                if($("#records").html().trim() == '') {
                    $("#records").append(`<tr id="zeroRec"><td>0 record returned.</td></tr>`);
                }
            }

            
            var tokenAccessPath = location.protocol + "//" + window.location.host + "/api/remote/";
            new ClipboardJS('.copyURL', {
                text: function(trigger) {
                        var token = $(trigger).attr("token");
                        var url = tokenAccessPath + token;
                        console.log( $(trigger).find(".tooltiptext"));
                        $(trigger).find(".tooltiptext").css({
                            "visibility": "visible",
                            "opacity": 1,
                        });
                        setTimeout(function(){
                            $(trigger).find(".tooltiptext").css({
                                "visibility": "hidden",
                                "opacity": 0,
                            });
                        }, 3000);
                    return url;
                }
            });

            function generateClipboardText(uuid) {
                return `
                    <div>
                        <div class="content" style="font-family: monospace;">
                           ${uuid} <a style="margin-left: 12px; font-family: Arial;" token="${uuid}" class="copyURL tooltip">
                                <i class="copy icon"></i>  Copy
                                <span class="tooltiptext"><i class="checkmark icon"></i> Copied</span>
                           </a> 
                        </div>
                    </div>
                `;
            }

            function appendTable(uuid, path) {
                $("#zeroRec").remove().slideUp("fast");
                $("#records").append(`<tr>
                            <td>` + generateClipboardText(uuid) +`</td>
                            <td>` + path + `</td>
                            <td>
                                <button class="ui icon basic circular negative button" uuid="` + uuid + `" onclick="delRecord(this)">
                                <i class="close icon"></i>
                                </button>
                            </td>
                        </tr>`);
            }
        </script>
    </body>
</html>