<th:block th:include="tmpl-head :: head" /> <script th:include="tmpl-buttonclick-handler :: handler" /> <style type="text/css" media="screen"> #editor { width: 100%; height: 150px; border-top: 1px solid #AAAAAA; } #resultsTableCard { padding: 0; } .resultsTable { margin-bottom: 0; width: auto; } .card { margin-bottom: 10px; } </style> </head> <body> <form action="" method="get" id="outerForm"> <input type="hidden" id="serverId" name="serverId" th:value="${serverId}"></input> <input th:if="${_csrf} != null" type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" /> <div th:replace="tmpl-navbar-top :: top" ></div> <div class="container-fluid"> <div class="row"> <div th:replace="tmpl-navbar-left :: left" ></div> <div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main" style="height: calc(100% - 200px);"> <div th:replace="tmpl-banner :: banner"></div> <div class="card" style="margin-top: 10px;"> <h3 class="card-header">HFQL / SQL Execution</h3> <div class="card-body"> This page can be used to execute queries using the HAPI FHIR Query Language (HFQL), which is a SQL-like syntax for querying FHIR repositories. Learn more about the HFQL syntax at: <a href="https://smilecdr.com/docs/hfql/">https://smilecdr.com/docs/hfql/</a>. This UI will display a maximum of [[${rowLimit}]] rows. </div> </div>    <div class="card"> <h3 class="card-header">Query</h3> <div class="card-body" style="padding: 0;"> <button type="button" id="execute-btn" class="btn btn-primary" style="margin: 5px;"> <i class="fas fa-play"></i> Execute </button> <button type="button" id="copy-link-btn" class="btn btn-info" style="margin: 5px;"> <i class="fas fa-link"></i> Link to Query </button> <div id="editor" th:text="${query}"></div> <script th:src="@{/resources/ace-builds/src-min-noconflict/ace.js}"></script> <script> const editor = ace.edit("editor"); editor.setTheme("ace/theme/eclipse"); editor.setTheme("ace/theme/vibrant_ink"); editor.setTheme("ace/theme/cobalt"); editor.session.setMode("ace/mode/sql"); editor.setShowPrintMargin(false); $('#execute-btn').click( function() { let btn = $(this); document.getElementById('execute-btn').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Execute'; handleActionButtonClick(btn); let value = editor.getValue(); btn.append($('<input />', { type: 'hidden', name: 'hfql-query', value: value })); $("#outerForm").attr("method", "post"); $("#outerForm").attr("action", "hfql").submit(); } ); $('#copy-link-btn').click( function() { let btn = $(this); handleActionButtonClick(btn); let value = editor.getValue(); btn.append($('<input />', { type: 'hidden', name: 'hfql-query', value: value })); $("#outerForm").attr("method", "get"); $("#outerForm").attr("action", "hfql").submit(); } ); </script> </div> </div>    <div th:if="${resultRows} != null" class="card"> <h3 class="card-header">Results</h3> <div class="card-header"> Query executed in [[${executionTime}]]. </div> <div class="card-body" id="resultsTableCard"> <div class="table-responsive"> <table class="table table-striped table-bordered table-sm resultsTable" id="resultsTable"> <thead> <tr> <th th:each="columnName : ${columnNames}" th:text="${columnName}"></th> </tr> </thead> <tbody> <tr th:each="row : ${resultRows}"> <td th:each="col,colIterStat : ${row}"> <th:block th:switch="${columnTypes[colIterStat.index]}"> <th:block th:case="'JSON'" th:utext="${HfqlRenderingUtil.formatAsJson(col)}"/> <th:block th:case="*" th:text="${col}"/> </th:block> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </form> <div th:replace="tmpl-footer