index.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="apple-mobile-web-app-capable" content="yes" />
  5. <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
  6. <meta charset="UTF-8">
  7. <meta name="theme-color" content="#4b75ff">
  8. <link rel="stylesheet" href="../script/semantic/semantic.min.css">
  9. <script src="../script/jquery.min.js"></script>
  10. <script src="../script/ao_module.js"></script>
  11. <script src="../script/semantic/semantic.min.js"></script>
  12. <script type="application/javascript" src="../script/clipboard.min.js"></script>
  13. <title>Serverless</title>
  14. <style>
  15. body{
  16. background-color:white;
  17. }
  18. /* Tooltip container */
  19. .tooltip {
  20. position: relative;
  21. display: inline-block;
  22. border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  23. }
  24. /* Tooltip text */
  25. .tooltip .tooltiptext {
  26. visibility: hidden;
  27. width: 120px;
  28. background-color: #555;
  29. color: #fff;
  30. text-align: center;
  31. padding: 5px 0;
  32. border-radius: 6px;
  33. /* Position the tooltip text */
  34. position: absolute;
  35. z-index: 1;
  36. bottom: 125%;
  37. left: 50%;
  38. margin-left: -60px;
  39. /* Fade in tooltip */
  40. opacity: 0;
  41. transition: opacity 0.3s;
  42. }
  43. /* Tooltip arrow */
  44. .tooltip .tooltiptext::after {
  45. content: "";
  46. position: absolute;
  47. top: 100%;
  48. left: 50%;
  49. margin-left: -5px;
  50. border-width: 5px;
  51. border-style: solid;
  52. border-color: #555 transparent transparent transparent;
  53. }
  54. .tooltitle{
  55. height: 5em;
  56. background-color: #5d6f77;
  57. color: white;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div class="tooltitle">
  63. <br>
  64. <div class="ui container">
  65. <h4 class="ui header">
  66. <div class="content" style="color: white;">
  67. Serverless Control Panel
  68. <div class="sub header" style="color: rgb(233, 233, 233);">Allow external services to run AGI scripts</div>
  69. </div>
  70. </h4>
  71. </div>
  72. </div>
  73. <div id="deleteSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i>Service Deleted</div>
  74. <div>
  75. <table class="ui celled unstackable table">
  76. <thead>
  77. <tr>
  78. <th>UUID (access token)</th>
  79. <th>AGI Path</th>
  80. <th>Action</th>
  81. </tr>
  82. </thead>
  83. <tbody id="records">
  84. </tbody>
  85. </table>
  86. <div style="width: 100%" align="center">
  87. <div class="ui breadcrumb" id="pageIndexs">
  88. </div>
  89. </div>
  90. </div>
  91. <div class="ui divider"></div>
  92. <div id="updateSuceed" style="display:none;" class="ui green inverted segment"><i class="checkmark icon"></i>Service Added</div>
  93. <div class="ui container">
  94. <h4>Select AGI Script</h4>
  95. <p>Select a script to be executed by 3rd party application via RESTFUL request. <br>
  96. Note that the AGI script will be executed with <b>your user scope</b></p>
  97. <div class="ui action fluid input">
  98. <input id="agiPath" type="text" placeholder="Select Location" readonly="true">
  99. <button class="ui black button" onclick="openfileselector();"><i class="folder open icon"></i> Open</button>
  100. </div>
  101. <button class="ui positive right floated button" onclick="add();" style="margin-top: 0.4em;"><i class="ui checkmark icon"></i> Add</button>
  102. <br><br>
  103. <div class="ui divider"></div>
  104. <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>
  105. </div>
  106. <br><br>
  107. <script>
  108. $.getJSON( "/api/ajgi/listExt", function( data ) {
  109. $.each( data, function( key, val ) {
  110. appendTable(key, val.path);
  111. });
  112. if(Object.keys(data).length == 0) {
  113. $("#records").append(`<tr id="zeroRec"><td>No registered endpoint</td></tr>`);
  114. }
  115. });
  116. function openfileselector(){
  117. ao_module_openFileSelector(fileLoader, "user:/", "file",false, {filter:["agi", "js"]});
  118. }
  119. function fileLoader(filedata){
  120. for (var i=0; i < filedata.length; i++){
  121. var filename = filedata[i].filename;
  122. var filepath = filedata[i].filepath;
  123. $("#agiPath").val(filepath);
  124. }
  125. }
  126. function add() {
  127. var path = $("#agiPath").val();
  128. $.getJSON( "/api/ajgi/addExt?path=" + path, function( data ) {
  129. if(data.error == undefined) {
  130. $("#updateSuceed").slideDown("fast").delay(3000).slideUp("fast");
  131. appendTable(data, path);
  132. }else{
  133. alert(data.error);
  134. }
  135. });
  136. }
  137. function delRecord(element) {
  138. $.getJSON( "/api/ajgi/rmExt?uuid=" + $(element).attr("uuid"), function( data ) {
  139. if(data == "OK") {
  140. $("#deleteSuceed").slideDown("fast").delay(3000).slideUp("fast");
  141. }else{
  142. alert(data.error);
  143. }
  144. });
  145. $(element).parent().parent().remove().slideUp("fast");
  146. if($("#records").html().trim() == '') {
  147. $("#records").append(`<tr id="zeroRec"><td>0 record returned.</td></tr>`);
  148. }
  149. }
  150. var tokenAccessPath = location.protocol + "//" + window.location.host + "/api/remote/";
  151. new ClipboardJS('.copyURL', {
  152. text: function(trigger) {
  153. var token = $(trigger).attr("token");
  154. var url = tokenAccessPath + token;
  155. console.log( $(trigger).find(".tooltiptext"));
  156. $(trigger).find(".tooltiptext").css({
  157. "visibility": "visible",
  158. "opacity": 1,
  159. });
  160. setTimeout(function(){
  161. $(trigger).find(".tooltiptext").css({
  162. "visibility": "hidden",
  163. "opacity": 0,
  164. });
  165. }, 3000);
  166. return url;
  167. }
  168. });
  169. function generateClipboardText(uuid) {
  170. return `
  171. <div>
  172. <div class="content" style="font-family: monospace;">
  173. ${uuid} <a style="margin-left: 12px; font-family: Arial;" token="${uuid}" class="copyURL tooltip">
  174. <i class="copy icon"></i> Copy
  175. <span class="tooltiptext"><i class="checkmark icon"></i> Copied</span>
  176. </a>
  177. </div>
  178. </div>
  179. `;
  180. }
  181. function appendTable(uuid, path) {
  182. $("#zeroRec").remove().slideUp("fast");
  183. $("#records").append(`<tr>
  184. <td>` + generateClipboardText(uuid) +`</td>
  185. <td>` + path + `</td>
  186. <td>
  187. <button class="ui icon basic circular negative button" uuid="` + uuid + `" onclick="delRecord(this)">
  188. <i class="close icon"></i>
  189. </button>
  190. </td>
  191. </tr>`);
  192. }
  193. </script>
  194. </body>
  195. </html>