interface_selector.html 4.0 KB

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