interface_selector.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Interface Selector</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  7. <link rel="stylesheet" href="../../script/semantic/semantic.css">
  8. <script type="application/javascript" src="../../script/jquery.min.js"></script>
  9. <script type="application/javascript" src="../../script/semantic/semantic.js"></script>
  10. <style>
  11. .interfaceModule{
  12. cursor: pointer;
  13. border: 2px solid transparent !important;
  14. height: 120px;
  15. }
  16. .interfaceModule:hover{
  17. border: 2px solid #407ded !important;
  18. background-color: #d1e1ff;
  19. }
  20. a{
  21. cursor: pointer;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <br><br>
  27. <div class="ui text container">
  28. <h2>Please choose a service to start</h2>
  29. <div class="ui divider"></div>
  30. <div id="serviceList" class="ui segment">
  31. </div>
  32. <div id="remember" class="ui checkbox">
  33. <input type="checkbox" name="remember">
  34. <label>Remember option on this browser</label>
  35. </div>
  36. <div class="ui divider"></div>
  37. <p>or <a onclick="logout();">Logout</a></p>
  38. </div>
  39. <script>
  40. var interfaceModules = [];
  41. $(".ui.checkbox").checkbox();
  42. $.get("../../system/users/interfaceinfo", function(data){
  43. $("#serviceList").html("");
  44. interfaceModules = data;
  45. for (var i = 0; i < data.length; i++){
  46. $("#serviceList").append(`<div class="ui segment interfaceModule" name="${data[i].Name}" path="${data[i].StartDir}" onclick="startModule(this);">
  47. <div class="ui grid">
  48. <div class="four wide column" align="right">
  49. <img src="../../${data[i].IconPath}" class="ui tiny image">
  50. </div>
  51. <div class="twelve wide column">
  52. <h2 class="ui header">
  53. ${data[i].Name}
  54. <div class="sub header">${data[i].Desc}</div>
  55. </h2>
  56. </div>
  57. </div>
  58. </div>`);
  59. }
  60. useDefaultIfExists();
  61. });
  62. function useDefaultIfExists(){
  63. var defaultModule = localStorage.getItem("default-interface-module");
  64. if (defaultModule !== undefined && defaultModule !== null && defaultModule !== ""){
  65. //Get its path
  66. interfaceModules.forEach(mod => {
  67. if (mod.Name == defaultModule){
  68. var targetPath = mod.StartDir;
  69. if (targetPath == ""){
  70. //Redirect to desktop
  71. window.location.href = "../../desktop.system";
  72. }else{
  73. //Redirect to module
  74. window.location.href = "../../" + targetPath;
  75. }
  76. }
  77. });
  78. }
  79. }
  80. function startModule(object){
  81. var path = $(object).attr("path");
  82. var name = $(object).attr("name");
  83. if ($("#remember").checkbox("is checked")){
  84. localStorage.setItem("default-interface-module",name)
  85. }
  86. if (path == ""){
  87. //Redirect to desktop
  88. window.location.href = "../../desktop.system";
  89. }else{
  90. //Redirect to module
  91. window.location.href = "../../" + path;
  92. }
  93. }
  94. function logout() {
  95. $.get("../../system/auth/logout", function() {
  96. window.location.href = "/";
  97. });
  98. }
  99. </script>
  100. </body>
  101. </html>