-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #486 from gokulprathin8/refactor/html-thymleaf
Refactor HTML ~ Thymeleaf (Split geoweaver.html into smaller html files for easy code changes)
- Loading branch information
Showing
15 changed files
with
690 additions
and
717 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <body style="cursor: auto; padding:0;"> | ||
|
|
||
| <div id="jsframe-container"></div> | ||
|
|
||
| <div class="container" style="margin:0; padding:0; width:100%; height:calc(100vh); display: flex;"> | ||
| <!-- Top menu bar --> | ||
| <div class="row" id="site_main_div" style="height:calc(100vh); top: 80px; margin: 0px; padding: 0px; padding-top: 1px; width:100%; flex-shrink: 0; flex-basis: auto;"> | ||
|
|
||
| <!--Side menu--> | ||
| <div th:replace="fragments/content/sidemenu" class="col col-sm-3 col-md-3 col-lg-3 small-height" id="sidemenu" style="height:calc(100vh); margin: 0;padding: 0; overflow-y: hidden;"></div> | ||
| <!-- Workspace --> | ||
| <div th:replace="fragments/content/workspace"></div> | ||
| <!-- Result Modal --> | ||
| <div th:replace="fragments/content/result-modal"></div> | ||
| </div> | ||
|
|
||
| <div th:replace="fragments/content/sidepanel"></div> | ||
|
|
||
| <!-- The actual snackbar showing the saved/code update message --> | ||
| <div id="snackbar" style="z-index: 100;">Some message..</div> | ||
| </div> | ||
|
|
||
| <script th:replace="fragments/config/scripts"></script> | ||
|
|
||
| </body> |
34 changes: 34 additions & 0 deletions
34
src/main/resources/templates/fragments/config/scripts.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <script src="../js/es5-shim.min.js"></script> | ||
| <script src="../js/marked.min.js"></script> | ||
| <script src="../js/ansi_up.min.js"></script> | ||
| <script src="../js/prism.min.js"></script> | ||
| <script src="../js/notebook.js" ></script> | ||
| <script src="../js/d3.min.js"></script> | ||
| <script src="../js/gw.js"></script> | ||
| <script src="../js/gw.general.js"></script> | ||
| <script src="../js/gw.tutorial.js"></script> | ||
| <script src="../js/gw.about.js"></script> | ||
| <script src="../js/gw.feedback.js"></script> | ||
| <script src="../js/gw.chart.js"></script> | ||
| <script src="../js/gw.workspace.js"></script> | ||
| <script src="../js/gw.ssh.js"></script> | ||
| <script src="../js/gw.fileupload.js"></script> | ||
| <script src="../js/gw.filebrowser.js"></script> | ||
| <script src="../js/gw.comparison.js"></script> | ||
| <script src="../js/gw.history.js"></script> | ||
| <script src="../js/gw.host.js"></script> | ||
| <script src="../js/gw.result.js"></script> | ||
| <script src="../js/gw.editor.js"></script> | ||
| <script src="../js/gw.process.js"></script> | ||
| <script src="../js/gw.process.util.js"></script> | ||
| <script src="../js/gw.process.sidepanel.js"></script> | ||
| <script src="../js/gw.workflow.js"></script> | ||
| <script src="../js/gw.monitor.js"></script> | ||
| <script src="../js/gw.dashboard.js"></script> | ||
| <script src="../js/gw.user.js"></script> | ||
| <script src="../js/gw.search.js"></script> | ||
| <script src="../js/gw.settings.js"></script> | ||
| <script src="../js/gw.toolbar.js"></script> | ||
| <script src="../js/gw.menu.js"></script> | ||
| <script src="../js/gw.home.js"></script> | ||
| <script src="../js/gw.main.js"></script> |
10 changes: 10 additions & 0 deletions
10
src/main/resources/templates/fragments/content/result-modal.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div class="modal fade" id="resultmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> | ||
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-body"> | ||
| <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> | ||
| <img src="" class="imagepreview" style="width: 100%;" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
137 changes: 137 additions & 0 deletions
137
src/main/resources/templates/fragments/content/sidemenu.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| <div class="col col-sm-3 col-md-3 col-lg-3 small-height" id="sidemenu" style="height:calc(100vh); margin: 0;padding: 0; overflow-y: hidden;"> | ||
|
|
||
| <button class="side_menu_collapse_btn"><<<<</button> | ||
|
|
||
| <div class="row" style="height:50px; margin: 0; padding:0;"> | ||
| <div style="padding:0; padding-top:10px; margin:0; text-align: center; height:100%;" class="col col-md-12" href="javascript:void(0)"> | ||
| <img src="../img/header.png" style="vertical-align: middle; " width="35px" height="35px"/> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="nav-side-menu" > | ||
|
|
||
| <div class="search-form"> | ||
| <i class="fa fa-search"></i> | ||
| <input type="text" class="form-control search-form-input" id="instant_search_bar" placeholder="Search anything..."> | ||
| <i class="fa fa-times-circle" id="clean_search_field"></i> | ||
| </div> | ||
|
|
||
| <div class="menu-list" data-intro="Side menu contains all the existing resources in Geoweaver database"> | ||
|
|
||
| <ul id="menu-content" class="menu-content collapse out"> | ||
|
|
||
| <li data-intro="Hosts are computing platforms, e.g., a laptop, a Linux server, a Jupyter Notebook server, a JupyterHub, Google Earth Engine. You can add and manage multiple hosts in one place. " data-toggle="collapse" data-target="#hosts"> | ||
| <a href="javascript:void(0)" > | ||
| <i class="fa fa-server fa-lg" data-toggle="tooltip" title="Add new host"></i> <b>Hosts</b> | ||
| <i class="fas fa-caret-up pull-right" data-toggle="collapse" data-target="#hosts" ></i> | ||
| <button type="button" class="btn btn-success btn-xs pull-right right-button-vertical-center" id="newhost">New Host</button> | ||
| <!-- <i class="fa fa-plus pull-right" id="newhost"></i> --> | ||
| </a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="hosts"> | ||
| <li class=" sshserver folder" id="host_folder_ssh" data-toggle="collapse" data-target="#host_folder_ssh_target"> | ||
| <a href="javascript:void(0)">Linux/Win/Mac Computers</a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="host_folder_ssh_target"></ul> | ||
| </ul> | ||
|
|
||
| <li data-intro="Processes are programs like Python code, shell scripts, Jupyter Notebooks, Google Earth Engine scripts, etc. You can manage all your code here in one place and run on different hosts. All the history of process execution will be saved in Geoweaver database, even the used hosts are not longer available. " data-toggle="collapse" data-target="#processes"> | ||
| <a href="javascript:void(0)"> | ||
| <i class="fa fa-cog fa-lg" data-toggle="tooltip" title="Add new process"></i> <b>Process</b> | ||
| <i data-toggle="collapse" data-target="#processs" class="fas fa-caret-up pull-right"></i> | ||
| <!-- <i class="fa fa-plus pull-right" id="newprocess"></i> --> | ||
| <button type="button" class="btn btn-success btn-xs pull-right right-button-vertical-center" id="newprocess">New Process</button> | ||
| </a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="processes"> | ||
| <li class="shellfolder" id="process_folder_shell" data-toggle="collapse" data-target="#process_folder_shell_target"> | ||
| <a href="javascript:void(0)">Shell</a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="process_folder_shell_target"></ul> | ||
|
|
||
| <li class="notebookfolder" id="process_folder_jupyter" data-toggle="collapse" data-target="#process_folder_jupyter_target"> | ||
| <a href="javascript:void(0)">Notebook</a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="process_folder_jupyter_target"></ul> | ||
|
|
||
| <li class="builtinfolder" id="process_folder_builtin" data-toggle="collapse" data-target="#process_folder_builtin_target"> | ||
| <a href="javascript:void(0)">Builtin Process</a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="process_folder_builtin_target"></ul> | ||
|
|
||
| <li class="pythonfolder" id="process_folder_python" data-toggle="collapse" data-target="#process_folder_python_target"> | ||
| <a href="javascript:void(0)">Python</a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="process_folder_python_target"></ul> | ||
| </ul> | ||
|
|
||
|
|
||
| <li data-intro="Workflows are linked pipes of a number of processes. You can easily turn complicated scientific experiments into several worflows and execute and manage them from here. " data-toggle="collapse" data-target="#workflows"> | ||
| <a href="javascript:void(0)"> | ||
| <i class="fa fa-cogs fa-lg" data-toggle="tooltip" title="Add new workflow"></i> <b>Workflows</b> | ||
| <i data-toggle="collapse" data-target="#workflows" class="fas fa-caret-up pull-right"></i> | ||
| </a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="workflows"> | ||
|
|
||
| </ul> | ||
|
|
||
| <li data-intro="All the other tools" data-toggle="collapse" data-target="#tools"> | ||
| <a href="javascript:void(0)"> | ||
| <i class="fa fa-cube fa-lg" data-toggle="tooltip" ></i> <b>Tools</b> | ||
| <i data-toggle="collapse" data-target="#tools" class="fas fa-caret-up pull-right"></i> | ||
| </a> | ||
| </li> | ||
| <ul class="sub-menu collapse" id="tools"> | ||
| <li id="toolbar-search"> | ||
| <a data-toggle="tooltip" title="Search Process/Workflow/Hosts" | ||
| href="javascript:void(0)"> | ||
| <i class="fa fa-search fa-lg" alt="search" ></i> Search | ||
| </a> | ||
| </li> | ||
|
|
||
| <li id="toolbar-history" > | ||
| <a data-toggle="tooltip" title="Process/Workflow History" | ||
| href="javascript:void(0)"> | ||
| <i class="fa fa-history fa-lg" alt="List the recent execution history"> </i> History | ||
| </a> | ||
| </li> | ||
|
|
||
| <li id="toolbar-monitor"> | ||
| <a data-toggle="tooltip" title="Monitor Running Process/Workflow" | ||
| href="javascript:void(0)"> | ||
| <i class="fa fa-film fa-lg" alt="monitor" > </i> Monitor | ||
| </a> | ||
|
|
||
| </li> | ||
|
|
||
| <li id="toolbar-settings"> | ||
| <a data-toggle="tooltip" title="Settings" | ||
| href="javascript:void(0)"> | ||
| <i class="fa fa-cog fa-lg" alt="settings" > </i> Settings | ||
| </a> | ||
|
|
||
| </li> | ||
|
|
||
| <li onclick="GW.tutorial.showDialog()"> | ||
| <a > | ||
| <i class="fa fa-book fa-lg"></i> Tutorial | ||
| </a> | ||
| </li> | ||
|
|
||
| <li onclick="GW.about.showDialog()"> | ||
| <a > | ||
| <i class="fa fa-info fa-lg"></i> About | ||
| </a> | ||
| </li> | ||
|
|
||
| <li onclick="GW.feedback.showDialog()"> | ||
| <a > | ||
| <i class="fa fa-solid fa-comment"></i> Contact | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> |
15 changes: 15 additions & 0 deletions
15
src/main/resources/templates/fragments/content/sidepanel.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <div class="cd-panel cd-panel--from-right js-cd-panel-main" id="prompt-panel"> | ||
| <!-- <header class="cd-panel__header"> | ||
| <h3 style="margin:5px;">Process Details</h3> | ||
| <div onclick="GW.process.sidepanel.close()" class="prompt-panel-close-btn"> | ||
| <img src="../img/close-sidenav.png" alt="close" width="20" height="20" /> | ||
| </div> | ||
| </header> --> | ||
|
|
||
| <div class="cd-panel__container"> | ||
| <div class="cd-panel__content" id="prompt-panel-main" style="height:calc(100% - 95px); width:100%;"> | ||
| <!-- your side panel content here --> | ||
| </div> <!-- cd-panel__content --> | ||
| </div> <!-- cd-panel__container --> | ||
| </div> <!-- cd-panel --> |
60 changes: 60 additions & 0 deletions
60
src/main/resources/templates/fragments/content/workspace.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <div class="col col-md-9" id="main_panel_div" style="transition: 0.3s; height:100%; margin: 0; padding:0; margin-left: 25%; position: fixed;"> | ||
|
|
||
| <button class="workspace_collapse_btn">>>></button> | ||
|
|
||
| <!--Top Menu Bar--> | ||
| <div th:replace="fragments/content/workspace/top-menu-bar"></div> | ||
|
|
||
| <div id="right-page-div" class="row" style="height:calc( 100% - 50px ); left:0; margin:0; padding: 0;padding-bottom:0px;"> | ||
|
|
||
| <div class="col col-md-12" id="main-workspace-container" style="height:100%; left:0; margin:0; padding: 0;padding-bottom:0px;"> | ||
|
|
||
|
|
||
|
|
||
| <!--Landing Page--> | ||
| <div th:replace="fragments/content/workspace/landing-page"></div> | ||
|
|
||
| <!--Guide Page --> | ||
| <div th:replace="fragments/content/workspace/guide"></div> | ||
|
|
||
| <!--Dashboard Page --> | ||
| <div th:replace="fragments/content/workspace/dashboard"></div> | ||
|
|
||
| <div id="main-host-info" class="tabcontent" style="height:100%; left:0; margin:0; padding: 0;padding-bottom:0px;"> | ||
| <div id="main-host-content" style="height:100%; width: 100%; overflow-y: scroll; padding: 0px; "> | ||
| <h2 style="color:black">Please select a host on the left panel or <button id="host-entry-create-btn" type="button" class="btn btn-success" onclick="GW.host.newDialog()">create</button> a new host! </h2> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="main-process-info" class="tabcontent" style="height:100%; left:0; margin:0; padding: 0;padding-bottom:0px;"> | ||
| <div id="main-process-content" style="height:100%; width:100%;"> | ||
| <h2 style="color:black">Please select a process on the left panel or <button id="process-entry-create-btn" type="button" class="btn btn-success" onclick="GW.process.newDialog()">create</button> a new process!</h2> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="main-workflow-info" class="tabcontent" style="height:100%; left:0; margin:0; padding: 0;padding-bottom:0px;"> | ||
| <div id="main-workflow-content" style="width: 100%; height:100%; padding: 0;"> | ||
| <h2 style="color:black">Please select a workflow on the left panel or <button id="workflow-entry-create-btn" type="button" class="btn btn-success" onclick="GW.general.switchTab('workspace')">create</button> a new workflow!</h2> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="main-console" class="tabcontent" style="height:100%; padding:0; left:0; margin:0; padding-bottom:0px;"> | ||
| <div id="main-console-content" style="width:100%; height:100%; overflow-y: scroll; margin:0; padding: 10px;"> | ||
| <h2 style="color:black">Logging <button class="btn btn-primary pull-right" onclick="GW.ssh.clearMain();">Clear</button></h2> | ||
| <div id="log-window" class="log_window" > | ||
|
|
||
| </div> | ||
| <div class="d-flex justify-content-center"><div class="dot-flashing invisible"></div></div> | ||
| </div> | ||
| </div> | ||
| <div id="workspace" class="tabcontent" style="height:100%; margin: 0;padding: 0;"> | ||
| <!-- status indicator right bottom --> | ||
| <div th:replace="fragments/content/workspace/status-indicator"></div> | ||
| <!-- progress right bottom, above the status indicator --> | ||
| <div id="workspace_progress_indicator" class="visible" style="position: absolute; max-height: 350px; top: 80px; right: 10px; width:100px; z-index:1; overflow-y: scroll;"></div> | ||
| <div th:replace="fragments/content/workspace/toolbox"></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div th:replace="fragments/content/workspace/loading-state"></div> | ||
| </div> |
5 changes: 5 additions & 0 deletions
5
src/main/resources/templates/fragments/content/workspace/dashboard.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <div id="main-dashboard" class="tabcontent" style="height:100%; left:0; margin:0; padding: 0;padding-bottom:0px;"> | ||
| <div id="main-dashboard-content" style="width:100%; height:100%; overflow-y: scroll; padding: 10px; "> | ||
|
|
||
| </div> | ||
| </div> |
Oops, something went wrong.