• HOME
  • Missions
  • About Us
  • Financials
  • Projects
  • Jobs
  • Statements
  • KNOWLEDGE IS POWER
  • SHOP WITH PURPOSE

Myanmar Development Foundation

empowering youths, helping people of myanmar

Wish List
Donate Myanmar Development Foundation

jquery sample

<!DOCTYPE html>
<html class="h-100">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="/com/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/com/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="/com/css/datatables.min.css" />
    <link rel="stylesheet" href="/com/css/scroller.dataTables.min.css" />

    <style>
      .overflow {
        max-height: 300px;
      }
      .header-gradient {
        background-image: linear-gradient(#344e87, #6c91be);
      }
      .bg-custom {
        background: #344e87 !important;
      }

      .ui-tabs .ui-tabs-panel {
        padding: 0 0 0 0;
      }

      .ui-selectmenu-button {
        display: flex;
        justify-content: space-between;
      }

      .ui-selectmenu-button {
        width: auto !important;
        height: auto !important;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
      }

      table.dataTable tbody tr.selected {
        background-color: #93c740 !important;
      }

      .bg-light-opacity {
        background-color: rgba(255, 255, 255, 0.4);
      }

      div.dts div.dataTables_scrollBody {
        background: transparent; /* or whatever */
      }

      .no-close .ui-dialog-titlebar {
        display: none;
      }

      .dataTables_empty {
        color: transparent;
      }
    </style>
  </head>
  <body class="h-100">
    <div class="d-flex flex-column h-100">
      <div
        class="header-gradient d-flex align-items-center px-3 text-light"
        style="min-height: 46px; height: 46px"
      >
        <div class="flex-grow-1">
          CNET (SAND) - Converged Network Engineering Tool
          <span class="text-white-50 ml-3">(Sql Editor)</span>
        </div>
        <a href="/RouterDatabase/search.asp" class="text-light mr-4 small"
          >Search Screen</a
        >
        <div class="small d-flex align-items-center">
          <span class="mr-2" style="width: 24px; height: 24px">
            <img
              src="/com/img/person.png"
              alt="Icon"
              style="width: 24px; height: 24px"
            />
          </span>
          Logged user: Engineer
        </div>
      </div>
      <div class="flex-grow-1">
        <div class="p-2 h-100">
          <div class="d-flex flex-column h-100">
            <div class="mb-2">
              <div class="d-flex flex-column p-2 border h-100">
                <div class="d-flex align-items-center mb-1">
                  <button
                    id="addReference"
                    class="ui-button ui-widget ui-corner-all mr-1 d-flex align-items-center"
                  >
                    New
                  </button>
                  <button
                    class="ui-button ui-widget ui-corner-all mr-1 d-flex align-items-center ref-btns"
                  >
                    Save
                  </button>
                  <button
                    id="deleteReference"
                    class="ui-button ui-widget ui-corner-all d-flex align-items-center ref-btns"
                  >
                    Delete
                  </button>
                  <button
                    id="copyReference"
                    class="ui-button ui-widget ui-corner-all d-flex align-items-center ref-btns"
                  >
                    Copy
                  </button>
                  <button
                    id="btnBulkAndAssembles"
                    class="ui-button ui-widget ui-corner-all ml-4 d-flex align-items-center"
                  >
                    Bulk And Assembles
                  </button>

                  <div class="ml-auto d-flex align-items-center">
                    <div class="mr-1">Filter by reference:</div>
                    <select id="referenceFilter" data-native-menu="false">
                      <option></option>
                      <option value="1">Reference 1</option>
                      <option value="2">Reference 2</option>
                      <option value="3">Reference 3</option>
                      <option value="4">Reference 4</option>
                      <option value="5">Reference 5</option>
                    </select>
                  </div>
                </div>
                <table
                  id="reference-table"
                  class="stripe nowrap editable-table selectable-table"
                  style="width: 100%"
                >
                  <thead>
                    <tr>
                      <th class="no-sort">Reference</th>
                      <th>NameId</th>
                      <th class="no-sort">Use Auto-Fallback or FallbackId</th>
                      <th>Linenumber</th>
                      <th>Description</th>
                      <th>AssemblyId</th>
                      <th>FilenameSqlQueryMappingNameId</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <select class="custom-select reference">
                          <option value="1" selected="selected">
                            Reference 1
                          </option>
                          <option value="2">Reference 2</option>
                          <option value="3">Reference 3</option>
                        </select>
                      </td>
                      <td class="editable"></td>
                      <td>
                        <div class="d-flex align-items-center">
                          <div
                            class="d-flex flex-column align-items-center mr-2"
                          >
                            <div class="small">Use Auto-Fallback</div>
                            <input type="checkbox" class="cbxAutoFallback" />
                          </div>
                          <input
                            type="text"
                            class="form-control fallbackId"
                            style="width: 200px"
                          />
                        </div>
                      </td>
                      <td class="editable">0</td>
                      <td class="editable"></td>
                      <td class="editable"></td>
                      <td class="editable"></td>
                    </tr>
                    <tr>
                      <td>
                        <select class="custom-select reference">
                          <option value="1" selected="selected">
                            Reference 1
                          </option>
                          <option value="2">Reference 2</option>
                          <option value="3">Reference 3</option>
                        </select>
                      </td>
                      <td class="editable"></td>
                      <td>
                        <div class="d-flex align-items-center">
                          <div
                            class="d-flex flex-column align-items-center mr-2"
                          >
                            <div class="small">Use Auto-Fallback</div>
                            <input type="checkbox" class="cbxAutoFallback" />
                          </div>
                          <input
                            type="text"
                            class="form-control fallbackId"
                            style="width: 200px"
                          />
                        </div>
                      </td>
                      <td class="editable">0</td>
                      <td class="editable"></td>
                      <td class="editable"></td>
                      <td class="editable"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div id="bulkAndAssembles" class="flex-grow-1 d-none">
              <div id="assembleTab">
                <ul>
                  <li>
                    <a href="#tabs-1" class="d-flex align-items-center">
                      Assembles
                    </a>
                  </li>
                </ul>
                <div>
                  <div
                    id="tab-1"
                    class="p-2 border"
                    style="overflow-y: auto; overflow-x: hidden"
                  >
                    <div class="d-flex flex-column" style="height: 43vh">
                      <div class="d-flex mb-2">
                        <button
                          id="addAssemble"
                          class="ui-button ui-widget ui-corner-all mr-1 d-flex align-items-center"
                        >
                          New
                        </button>
                        <button
                          class="ui-button ui-widget ui-corner-all mr-1 d-flex align-items-center"
                        >
                          Save
                        </button>
                        <button
                          id="deleteAssemble"
                          class="ui-button ui-widget ui-corner-all d-flex align-items-center"
                        >
                          Delete
                        </button>
                      </div>
                      <div class="row no-gutters mb-2">
                        <div class="col-8">
                          <table
                            id="assemble-table"
                            class="stripe nowrap editable-table selectable-table"
                            style="width: 100%"
                          >
                            <thead>
                              <tr>
                                <th>AssemblyId</th>
                                <th>FilenameSqlQueryMappingNameId</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td class="editable">aa</td>
                                <td class="editable">bb</td>
                              </tr>
                              <tr>
                                <td class="editable">aa</td>
                                <td class="editable">bb</td>
                              </tr>
                              <tr>
                                <td class="editable">aa</td>
                                <td class="editable">bb</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                        <div class="col-4">
                          <textarea
                            class="form-control h-100 shadow-none rounded-0"
                          ></textarea>
                        </div>
                      </div>

                      <div class="row no-gutters pb-2">
                        <div class="col-12">
                          <div class="d-flex flex-column mb-2">
                            <div
                              class="d-flex flex-column mb-2 align-items-start"
                              id="assembleTestParams"
                            ></div>
                            <a
                              id="addAssembleTestParams"
                              href="#"
                              class="text-primary small"
                              style="text-decoration: underline"
                              >Add test input parameter</a
                            >
                          </div>
                        </div>
                        <div class="col-8">
                          <button
                            class="ui-button ui-widget ui-corner-all d-flex align-items-center"
                          >
                            Generate (as Popup)
                          </button>
                        </div>
                        <div class="col-4">
                          <div>
                            <button
                              class="ui-button ui-widget ui-corner-all d-flex align-items-center"
                            >
                              Generate (as File)
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="editor" class="flex-grow-1">
              <div class="h-100">
                <div
                  class="p-2 border mb-2"
                  style="overflow-y: auto; overflow-x: auto; height: 25vh"
                >
                  <h6>Sql Query Editor</h6>
                  <div
                    class="d-flex justify-content-start align-items-start mb-3"
                  >
                    <div class="flex-shrink-0">
                      <div class="d-flex align-items-center">
                        <div>SELECT</div>
                        <div class="ml-2">DISTINCT</div>

                        <input
                          id="checkDistinct"
                          type="checkbox"
                          class="align-self-center"
                        />

                        <div class="ml-2 text-nowrap">TOP 1</div>

                        <input
                          id="checkTop1"
                          type="checkbox"
                          class="align-self-center"
                        />

                        <div class="mx-2">FROM</div>

                        <div class="flex-shrink-0">
                          <select
                            id="selectTable"
                            class="form-control shadow-none"
                          >
                            <option>Table 1</option>
                            <option>Table 2</option>
                            <option>Table 3</option>
                          </select>
                        </div>

                        <div class="mx-3">columns</div>
                      </div>
                    </div>

                    <div class="flex-shrink-0">
                      <div class="d-flex flex-column">
                        <div class="column-causes">
                          <!-- <div class="column-cause d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <select class="column-name form-control shadow-none">
                                <option>Column 1</option>
                                <option>Column 2</option>
                                <option>Column 3</option>
                              </select>
                            </div>
                            <div class="mx-2">AS</div>
                            <input
                              type="text"
                              class="column-alias form-control shadow-none"
                              style="width: 100px"
                            />

                            <a
                              href="#"
                              class="text-danger small ml-1 remove"
                              style="text-decoration: underline"
                              >Remove</a
                            >
                          </div> -->
                        </div>

                        <a
                          href="#"
                          id="addColumn"
                          class="text-success small py-2"
                          style="text-decoration: underline"
                          >Add column</a
                        >
                      </div>
                    </div>

                    <div class="flex-shrink-0 ml-3">
                      <div class="d-flex flex-column">
                        <div class="join-causes">
                          <!-- <div class="join-cause d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <select class="join-type form-control shadow-none">
                                <option>Inner</option>
                                <option>Outer</option>
                              </select>
                            </div>
                            <div class="mx-2">JOIN</div>
                            <div class="flex-shrink-0">
                              <select class="join-table form-control shadow-none">
                                <option>Join Table 1</option>
                                <option>Join Table 2</option>
                                <option>Join Table 3</option>
                              </select>
                            </div>

                            <div class="mx-2">ON</div>
                            <div class="pr-1">(</div>

                            <div class="flex-shrink-0">
                              <select class="join-expression-l form-control shadow-none">
                                <option>expression 1</option>
                                <option>expression 2</option>
                                <option>expression 3</option>
                              </select>
                            </div>

                            <div class="flex-shrink-0">
                              <select class="join-condition form-control shadow-none">
                                <option>Equals</option>
                                <option>NotEquals</option>
                                <option>Like</option>
                                <option>NotLike</option>
                                <option>IsNull</option>
                                <option>IsNotNull</option>
                                <option>IsIn</option>
                                <option>IsGreater</option>
                                <option>IsGreaterEquals</option>
                                <option>IsLess</option>
                                <option>IsLessEquals</option>
                              </select>
                            </div>

                            <div class="flex-shrink-0">
                              <select class="join-expression-r form-control shadow-none">
                                <option>expression 1</option>
                                <option>expression 2</option>
                                <option>expression 3</option>
                              </select>
                            </div>

                            <div class="flex-shrink-0">
                              <select class="join-concat form-control shadow-none">
                                <option value="">None</option>
                                <option value="OR">Or</option>
                                <option value="AND">And</option>
                              </select>
                            </div>

                            <div class="pl-1">)</div>
                            <a
                              href="#"
                              class="text-danger small ml-1 remove"
                              style="text-decoration: underline"
                              >Remove Join clausule</a
                            >
                          </div> -->
                        </div>

                        <a
                          id="addJoin"
                          href="#"
                          class="text-success small py-2"
                          style="text-decoration: underline"
                          >Add Join clausule</a
                        >
                      </div>
                    </div>

                    <div class="flex-shrink-0 ml-3">
                      <div class="d-flex flex-column">
                        <div class="where-causes">
                          <!-- <div class="where-cause d-flex align-items-center">
                            <div class="mr-2">WHERE</div>
                            <div class="pr-1">(</div>

                            <div class="flex-shrink-0">
                              <select class="where-expression-l form-control shadow-none">
                                <option>expression 1</option>
                                <option>expression 2</option>
                                <option>expression 3</option>
                              </select>
                            </div>

                            <div class="flex-shrink-0">
                              <select class="where-condition form-control shadow-none">
                                <option>Equals</option>
                                <option>Not Equals</option>
                                <option>Like</option>
                                <option>NotLike</option>
                                <option>IsNull</option>
                                <option>IsNotNull</option>
                                <option>IsIn</option>
                                <option>IsGreater</option>
                                <option>IsGreaterEquals</option>
                                <option>IsLess</option>
                                <option>IsLessEquals</option>
                              </select>
                            </div>

                            <div class="flex-shrink-0">
                              <select class="where-expression-r form-control shadow-none">
                                <option>expression 1</option>
                                <option>expression 2</option>
                                <option>expression 3</option>
                              </select>
                            </div>

                            <div class="flex-shrink-0">
                              <select class="where-concat form-control shadow-none">
                                <option value="">None</option>
                                <option value="OR">Or</option>
                                <option value="AND">And</option>
                              </select>
                            </div>

                            <div class="pl-1">)</div>

                            <a
                              href="#"
                              class="text-danger small ml-1 remove"
                              style="text-decoration: underline"
                              >Remove Where clausule</a
                            >
                          </div> -->
                        </div>

                        <a
                          id="addWhere"
                          href="#"
                          class="text-success small py-2"
                          style="text-decoration: underline"
                          >Add Where clausule</a
                        >
                      </div>
                    </div>

                    <div class="flex-shrink-0 ml-3">
                      <div class="d-flex flex-column">
                        <div class="orderby-causes">
                          <!-- <div class="orderby-cause d-flex align-items-center">
                            <div class="mr-2">ORDER BY</div>

                            <div class="flex-shrink-0">
                              <select class="order-column form-control shadow-none">
                                <option>order 1</option>
                                <option>order 2</option>
                                <option>order 3</option>
                              </select>
                            </div>

                            <div class="flex-shrink-0">
                              <select class="order-direction form-control shadow-none">
                                <option>ASC</option>
                                <option>DESC</option>
                              </select>
                            </div>

                            <a
                              href="#"
                              class="text-danger small ml-1 remove"
                              style="text-decoration: underline"
                              >Remove Order By clausule</a
                            >
                          </div> -->
                        </div>

                        <a
                          id="addOrderBy"
                          href="#"
                          class="text-success small py-2"
                          style="text-decoration: underline"
                          >Add Order By clausule</a
                        >
                      </div>
                    </div>

                    <div class="invisible flex-shrink-0">
                      <span style="width: 20px">s</span>
                    </div>
                  </div>

                  <div class="d-flex align-items-center justify-content-start">
                    <div class="flex-shrink-0">
                      <button
                        id="getPreviewSql"
                        class="ui-button ui-widget ui-corner-all d-flex align-items-center text-nowrap mx-4"
                      >
                        Get Preview SQL
                      </button>
                    </div>
                    <input
                      id="sqlPreview"
                      class="form-control shadow-none mr-5"
                    />
                  </div>
                </div>

                <div
                  class="p-2 border"
                  style="overflow-y: auto; overflow-x: auto; height: 25vh"
                >
                  <h6>Query Mappings Editor</h6>
                  <div class="d-flex mb-1">
                    <div class="mappings d-flex flex-shrink-0">
                      <!-- <div
                        class="mapping d-flex flex-column flex-shrink-0 mr-2"
                      >
                        <div class="d-flex flex-shrink-0">
                          <div class="flex-shrink-0">
                            <select class="form-control shadow-none selection">
                              <option>Constant</option>
                              <option>SqlFieldValue</option>
                              <option>InputParameter</option>
                              <option>WhiteSpace</option>
                              <option>LineBreak</option>
                              <option>SpreadsheetHeader</option>
                              <option>CounterZeroBased</option>
                              <option>SaveToContainter</option>
                              <option>LoadFromContainer</option>
                              <option>ApplyFunction</option>
                              <option>ApplyFunctionAndSaveToContainer</option>
                              <option>LoadNextFromContainer</option>
                            </select>
                          </div>
                          <div class="flex-shrink-0">
                            <input
                              type="text"
                              class="form-control shadow-none input"
                              style="min-width: 150px"
                            />
                          </div>
                        </div>
                        <a
                          href="#"
                          class="text-success small add-before"
                          style="text-decoration: underline"
                          >Add mapping before</a
                        >
                        <a
                          href="#"
                          class="text-success small add-after"
                          style="text-decoration: underline"
                          >Add mapping after</a
                        >
                        <a
                          href="#"
                          class="text-danger small remove"
                          style="text-decoration: underline"
                          >Remove mapping</a
                        >
                      </div> -->
                    </div>
                    <a
                      id="addMapping"
                      href="#"
                      class="text-success small text-nowrap py-2"
                      style="text-decoration: underline"
                      >Add mapping</a
                    >

                    <div class="invisible flex-shrink-0">
                      <span style="width: 20px">s</span>
                    </div>
                  </div>

                  <div class="d-flex flex-column mb-2">
                    <div
                      class="d-flex mb-2 align-items-start flex-shrink-0"
                      id="mappingTestParams"
                    ></div>
                    <a
                      id="addMappingTestParams"
                      href="#"
                      class="text-primary small"
                      style="text-decoration: underline"
                      >Add test input parameter</a
                    >
                  </div>

                  <div class="d-flex flex-shrink-0">
                    <button
                      class="ui-button ui-widget ui-corner-all mr-1 d-flex align-items-center mr-2"
                    >
                      Generate output
                    </button>
                    <button
                      class="ui-button ui-widget ui-corner-all mr-1 d-flex align-items-center"
                    >
                      Generate output (as file)
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="/com/js/jquery-1.9.1.min.js"></script>
    <script src="/com/js/jquery-ui.min.js"></script>
    <script src="/com/js/datatables.min.js"></script>
    <script src="/com/js/dataTables.scroller.min.js"></script>

    <script>
      $(document).ready(function (e) {
        var columnCause =
          '<div class="column-cause d-flex align-items-center"> <div class="flex-shrink-0"> <select class="column-name form-control shadow-none"> <option>Column 1</option> <option>Column 2</option> <option>Column 3</option> </select> </div> <div class="mx-2">AS</div> <input type="text"class="column-alias form-control shadow-none"style="width: 100px"/> <a href="#"class="text-danger small ml-1 remove"style="text-decoration: underline">Remove</a > </div>';

        var joinCause =
          '<div class="join-cause d-flex align-items-center"> <div class="flex-shrink-0"> <select class="join-type form-control shadow-none"> <option>Inner</option> <option>Outer</option> </select> </div> <div class="mx-2">JOIN</div> <div class="flex-shrink-0"> <select class="join-table form-control shadow-none"> <option>Join Table 1</option> <option>Join Table 2</option> <option>Join Table 3</option> </select> </div> <div class="mx-2">ON</div> <div class="pr-1">(</div> <div class="flex-shrink-0"> <select class="join-expression-l form-control shadow-none"> <option>expression 1</option> <option>expression 2</option> <option>expression 3</option> </select> </div> <div class="flex-shrink-0"> <select class="join-condition form-control shadow-none"> <option>Equals</option> <option>NotEquals</option> <option>Like</option> <option>NotLike</option> <option>IsNull</option> <option>IsNotNull</option> <option>IsIn</option> <option>IsGreater</option> <option>IsGreaterEquals</option> <option>IsLess</option> <option>IsLessEquals</option> </select> </div> <div class="flex-shrink-0"> <select class="join-expression-r form-control shadow-none"> <option>expression 1</option> <option>expression 2</option> <option>expression 3</option> </select> </div> <div class="flex-shrink-0"> <select class="join-concat form-control shadow-none"> <option value="">None</option> <option value="OR">Or</option> <option value="AND">And</option> </select> </div> <div class="pl-1">)</div> <a href="#"class="text-danger small ml-1 remove"style="text-decoration: underline">Remove Join clausule</a > </div>';

        var whereCause =
          '<div class="where-cause d-flex align-items-center"> <div class="mr-2">WHERE</div> <div class="pr-1">(</div> <div class="flex-shrink-0"> <select class="where-expression-l form-control shadow-none"> <option>expression 1</option> <option>expression 2</option> <option>expression 3</option> </select> </div> <div class="flex-shrink-0"> <select class="where-condition form-control shadow-none"> <option>Equals</option> <option>Not Equals</option> <option>Like</option> <option>NotLike</option> <option>IsNull</option> <option>IsNotNull</option> <option>IsIn</option> <option>IsGreater</option> <option>IsGreaterEquals</option> <option>IsLess</option> <option>IsLessEquals</option> </select> </div> <div class="flex-shrink-0"> <select class="where-expression-r form-control shadow-none"> <option>expression 1</option> <option>expression 2</option> <option>expression 3</option> </select> </div> <div class="flex-shrink-0"> <select class="where-concat form-control shadow-none"> <option value="">None</option> <option value="OR">Or</option> <option value="AND">And</option> </select> </div> <div class="pl-1">)</div> <a href="#"class="text-danger small ml-1 remove"style="text-decoration: underline">Remove Where clausule</a > </div>';

        var orderByCause =
          '<div class="orderby-cause d-flex align-items-center"> <div class="mr-2">ORDER BY</div> <div class="flex-shrink-0"> <select class="order-column form-control shadow-none"> <option>order 1</option> <option>order 2</option> <option>order 3</option> </select> </div> <div class="flex-shrink-0"> <select class="order-direction form-control shadow-none"> <option>ASC</option> <option>DESC</option> </select> </div> <a href="#"class="text-danger small ml-1 remove"style="text-decoration: underline">Remove Order By clausule</a > </div>';

        var mapping =
          '<div class="mapping d-flex flex-column flex-shrink-0 mr-2"> <div class="d-flex flex-shrink-0"> <div class="flex-shrink-0"> <select class="form-control shadow-none selection"> <option>Constant</option> <option>SqlFieldValue</option> <option>InputParameter</option> <option>WhiteSpace</option> <option>LineBreak</option> <option>SpreadsheetHeader</option> <option>CounterZeroBased</option> <option>SaveToContainter</option> <option>LoadFromContainer</option> <option>ApplyFunction</option> <option>ApplyFunctionAndSaveToContainer</option> <option>LoadNextFromContainer</option> </select> </div> <div class="flex-shrink-0"> <input type="text"class="form-control shadow-none input"style="min-width: 150px"/> </div> </div> <a href="#"class="text-success small add-before"style="text-decoration: underline">Add mapping before</a > <a href="#"class="text-success small add-after"style="text-decoration: underline">Add mapping after</a > <a href="#"class="text-danger small remove"style="text-decoration: underline">Remove mapping</a > </div>';

        $("#addColumn").click(function (e) {
          e.preventDefault();
          $(".column-causes").append(columnCause);
        });

        $("div.column-causes").on("click", "a.remove", function (e) {
          e.preventDefault();
          $(this).parent("div").remove();
        });

        $("#addJoin").click(function (e) {
          e.preventDefault();
          $(".join-causes").append(joinCause);
        });

        $("div.join-causes").on("click", "a.remove", function (e) {
          e.preventDefault();
          $(this).parent("div").remove();
        });

        $("#addWhere").click(function (e) {
          e.preventDefault();
          $(".where-causes").append(whereCause);
          //$(this).addClass("d-none");
        });

        $("div.where-causes").on("click", "a.remove", function (e) {
          e.preventDefault();
          $(this).parent("div").remove();
          //$("#addWhere").removeClass("d-none");
        });

        $("#addOrderBy").click(function (e) {
          e.preventDefault();
          $(".orderby-causes").append(orderByCause);
          //$(this).addClass("d-none");
        });

        $("div.orderby-causes").on("click", "a.remove", function (e) {
          e.preventDefault();
          $(this).parent("div").remove();
          //$("#addOrderBy").removeClass("d-none");
        });

        $("#addMapping").click(function (e) {
          e.preventDefault();
          $(".mappings").append(mapping);
        });

        $(".mappings").on("click", "a.add-before", function (e) {
          e.preventDefault();
          var clone = $(this).parent("div").clone(false);

          clone.find("select.selection").val("");
          clone.find("input.input").val("");
          clone.insertBefore($(this).parent("div"));
        });

        $(".mappings").on("click", "a.add-after", function (e) {
          e.preventDefault();

          var clone = $(this).parent("div").clone(false);

          clone.find("select.selection").val("");
          clone.find("input.input").val("");
          clone.insertAfter($(this).parent("div"));
        });

        $(".mappings").on("click", "a.remove", function (e) {
          e.preventDefault();
          $(this).parent("div").remove();
        });

        $("#getPreviewSql").click(function (e) {
          // generate preview here

          var query = "SELECT ";

          if ($("#checkDistinct").is(":checked")) {
            query += "DISTINCT ";
          }

          if ($("#checkTop1").is(":checked")) {
            query += "TOP 1 ";
          }

          var columns = $(".column-causes .column-cause");

          if (columns.length > 0) {
            var columnQuery = "";
            columns.each(function (i, e) {
              var columnName = $(this)
                .find(".column-name")
                .find(":selected")
                .text();
              var columnAlias = $(this).find(".column-alias").val();

              if (i > 0) {
                columnQuery += ", ";
              }

              columnQuery += columnName + " ";

              if (columnAlias) {
                columnQuery += "AS " + columnAlias + " ";
              }
            });

            query += columnQuery;
          } else {
            query += "* ";
          }

          query += "FROM ";

          query += $("#selectTable").find(":selected").text() + " ";

          var joins = $(".join-causes").children();

          if (joins.length > 0) {
            var joinQuery = "";

            joins.each(function (i, e) {
              var joinType = $(this)
                .find(".join-type")
                .find(":selected")
                .text();
              var joinTable = $(this)
                .find(".join-table")
                .find(":selected")
                .text();
              var joinExprLeft = $(this)
                .find(".join-expression-l")
                .find(":selected")
                .text();
              var joinCondition = $(this)
                .find(".join-condition")
                .find(":selected")
                .text();
              var joinExprRight = $(this)
                .find(".join-expression-r")
                .find(":selected")
                .text();
              var joinConcat = $(this)
                .find(".join-concat")
                .find(":selected")
                .val();

              joinQuery +=
                joinType +
                " JOIN " +
                joinTable +
                " ON " +
                joinExprLeft +
                " " +
                joinCondition +
                " " +
                joinExprRight +
                " " +
                joinConcat +
                " ";
            });

            query += joinQuery + " ";
          }

          var wheres = $(".where-causes").children();

          if (wheres.length > 0) {
            var whereQuery = "";

            wheres.each(function (i, e) {
              var whereExprLeft = $(this)
                .find(".where-expression-l")
                .find(":selected")
                .text();
              var whereCondition = $(this)
                .find(".where-condition")
                .find(":selected")
                .text();
              var whereExprRight = $(this)
                .find(".where-expression-r")
                .find(":selected")
                .text();
              var whereConcat = $(this)
                .find(".where-concat")
                .find(":selected")
                .val();

              if (i === 0) {
                whereQuery += "WHERE ";
              }

              whereQuery +=
                whereExprLeft +
                " " +
                whereCondition +
                " " +
                whereExprRight +
                " " +
                whereConcat +
                " ";
            });

            query += whereQuery;
          }

          var orders = $(".orderby-causes").children();

          if (orders.length > 0) {
            var orderByQuery = "";
            orders.each(function (i, e) {
              var orderColumn = $(this)
                .find(".order-column")
                .find(":selected")
                .text();
              var orderDirection = $(this)
                .find(".order-direction")
                .find(":selected")
                .text();

              if (i === 0) {
                orderByQuery += "ORDER BY ";
              } else {
                orderByQuery += ", ";
              }

              orderByQuery += orderColumn + " " + orderDirection;
            });

            query += orderByQuery;
          }

          $("#sqlPreview").val(query);
        });

        $("#btnBulkAndAssembles").click(function (e) {
          if (!$("#bulkAndAssembles").hasClass("d-none")) {
            return;
          }

          $("#editor").addClass("d-none");
          $("#bulkAndAssembles").removeClass("d-none");
          $(".ref-btns").button({
            disabled: true,
          });

          $("#assemble-table").DataTable().columns.adjust().draw();

          if (
            !$("#reference-table").children("td").hasClass("dataTables_empty")
          ) {
            var selectedRow = $("#reference-table")
              .DataTable()
              .$("tr.selected");
            selectedRow.removeClass("selected");
          }
        });
      });
    </script>

    <script>
      $(document).ready(function (e) {
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
          var row = $("#reference-table").DataTable().row(dataIndex).node();

          var value = $(row).children("td:first").attr("data-search");
          var search = $("#referenceFilter").val();

          if (!search) {
            return true;
          }

          return value == search;
        });

        var tableReference = $("#reference-table").DataTable({
          sDom: "t",
          ordering: true,
          order: [],
          columnDefs: [
            {
              orderable: false,
              targets: "no-sort",
            },
            {
              targets: 0,
              createdCell: function (td, cellData, rowData, row, col) {
                var value = $(td).children(".reference").val();
                $(td).attr("data-search", value);
              },
            },
          ],
          info: false,
          searching: true,
          scrollY: "25vh",
          scrollX: true,
          scrollCollapse: false,
          scroller: true,
        });

        $("#assembleTab").tabs();

        var tableAssemble = $("#assemble-table").DataTable({
          sDom: "t",
          ordering: true,
          order: [],
          columnDefs: [
            {
              orderable: false,
              targets: "no-sort",
            },
          ],
          info: false,
          searching: false,
          scrollY: "21vh",
          scrollX: true,
          scrollCollapse: false,
          scroller: true,
        });

        $("#referenceFilter")
          .selectmenu({
            position: { my: "right top", at: "right bottom" },
            change: function (event, ui) {
              // var search = ui.item.index > 0 ? "^" + ui.item.label + "$" : "";
              // tableReference
              //   .column(0)
              //   .search(search, ui.item.index > 0, ui.item.index === 0)
              //   .draw(false);
              tableReference.draw(false);
            },
          })
          .selectmenu("menuWidget")
          .addClass("overflow");

        var testParamRow =
          '<div class="d-flex align-items-center mb-1 flex-shrink-0"> <div class="flex-shrink-0"> <input type="text"class="form-control form-control-sm shadow-none"value="$routername"/> </div> <div class="flex-shrink-0"> <input type="text"class="form-control form-control-sm shadow-none"value="FLIVFCS01R1"/> </div> <a href="#"class="remove-parameter text-danger ml-1"style="text-decoration: underline">Remove</a > </div>';

        $("#addAssembleTestParams").click(function (e) {
          e.preventDefault();
          $("#assembleTestParams").append(testParamRow);
        });

        $("#assembleTestParams").on("click", ".remove-parameter", function (e) {
          e.preventDefault();
          $(this).parent("div").remove();
        });

        $("#addMappingTestParams").click(function (e) {
          e.preventDefault();
          $("#mappingTestParams").append(testParamRow);
        });

        $("#mappingTestParams").on("click", ".remove-parameter", function (e) {
          e.preventDefault();
          $(this).parent("div").remove();
        });

        $("#deleteReference").click(function (e) {
          tableReference.row(".selected").remove().draw(false);
        });

        $("#addReference").click(function (e) {
          var tdRef =
            "<select class='custom-select reference'><option value='1' selected='selected'>Reference 1</option><option value='2'>Reference 2</option><option value='3'>Reference 3</option></select>";
          var tdFallback =
            '<div class="d-flex align-items-center"> <div class="d-flex flex-column align-items-center mr-2"> <div class="small">Use Auto-Fallback</div> <input type="checkbox" class="cbxAutoFallback" /> </div> <input type="text"class="form-control fallbackId"style="width: 200px"/> </div>';

          var ui = tableReference.row
            .add([tdRef, "", tdFallback, "", "", "", "", ""])
            .draw();

          var index = ui.index();

          tableReference
            .rows(index)
            .nodes()
            .to$()
            .children("td")
            .each(function (i, e) {
              if (i === 0 || i === 2) {
                return;
              }

              $(this).addClass("editable");
            });

          tableReference.row(index).scrollTo();
          tableReference.row(index).nodes().to$().click();
        });

        $("#copyReference").click(function (e) {
          var data = tableReference.row(".selected").data();

          if (!data) {
            return;
          }

          var ui = tableReference.row.add(data.slice()).draw();

          var index = ui.index();

          tableReference
            .rows(index)
            .nodes()
            .to$()
            .children("td")
            .each(function (i, e) {
              if (i === 0 || i === 2) {
                return;
              }

              $(this).addClass("editable");
            });

          tableReference.row(index).scrollTo();
          tableReference.row(index).nodes().to$().click();
        });

        $("#reference-table tbody").on("change", "td .reference", function (e) {
          var value = $(this).val();

          $(this).parent("td").attr("data-search", value);

          var td = $(this).parents().eq(0);

          $(this).find("option[selected='selected']").removeAttr("selected");
          $(this)
            .find('option[value="' + value + '"]')
            .attr("selected", "selected");

          tableReference.cell(td).data($(this).parent().html()).draw(true);
        });

        $("#reference-table tbody").on(
          "change",
          "td .cbxAutoFallback",
          function (e) {
            var input = $(this).parents().eq(1).children(".fallbackId");
            if ($(this).is(":checked")) {
              input.attr("disabled", "disabled");
              $(this).attr("checked", "checked");
            } else {
              input.removeAttr("disabled");
              $(this).removeAttr("checked");
            }

            var td = $(this).parents().eq(2);

            tableReference
              .cell(td)
              .data($(this).parents().eq(2).html())
              .draw(true);
          }
        );

        $("#reference-table tbody").on(
          "change",
          "td .fallbackId",
          function (e) {
            $(this).attr("value", e.target.value);

            var td = $(this).parents().eq(1);

            tableReference
              .cell(td)
              .data($(this).parents().eq(1).html())
              .draw(true);
          }
        );

        $("#deleteAssemble").click(function (e) {
          tableAssemble.row(".selected").remove().draw(false);
        });

        $("#addAssemble").click(function (e) {
          var ui = tableAssemble.row.add(["aa", "bb"]).draw();

          var index = ui.index();

          tableAssemble
            .rows(index)
            .nodes()
            .to$()
            .children("td")
            .addClass("editable");

          tableAssemble.row(index).scrollTo();
        });

        $(".selectable-table tbody").on("click", "tr", function () {
          var table = $(this).parents().eq(1).DataTable();
          if (!$(this).children("td").hasClass("dataTables_empty")) {
            var selectedRow = table.$("tr.selected");
            selectedRow.removeClass("selected");

            $(this).addClass("selected");
          }

          if ($(this).parents().eq(1).attr("id") === "reference-table") {
            if (!$("#editor").hasClass("d-none")) {
              return;
            }
            $("#editor").removeClass("d-none");
            $("#bulkAndAssembles").addClass("d-none");
            $(".ref-btns").button({
              disabled: false,
            });
          }
        });

        $(".editable-table tbody").on("click", "td.editable", function (e) {
          if ($(this).children(".input").length) {
            return;
          }
          var table = $(this)
            .parent("tr")
            .parent("tbody")
            .parent("table")
            .DataTable();
          var value = table.cell($(this)).data();
          var width = $(this).width();
          width = width > $(this).width() ? width : $(this).width();
          var input =
            '<input style="width:' +
            width +
            'px;" class="form-control form-control-sm input shadow-none" value="' +
            value.trim() +
            '" data-value="' +
            value.trim() +
            '" />';

          $(this).addClass("is-editing");

          table.cell($(this)).data(input).render("display");

          var inputRef = $(this).children(".input").first();

          inputRef.focus();

          inputRef.keyup(function (e) {
            if (e.keyCode == 13) {
              inputRef.off("keyup");
              inputRef.off("focusout");
              var td = $(this).parent("td");
              var row = td.parent("tr");
              var table = $(row.parent("tbody").parent("table")).DataTable();
              td.removeClass("is-editing");

              table.cell(td).data($(this).val()).draw(false);

              $("body").focus();
            }
          });

          inputRef.focusout(function (e) {
            focusOutHandler(inputRef);
          });
        });

        function focusOutHandler(ref) {
          var td = ref.parent("td");
          var row = td.parent("tr");
          var table = $(row.parent("tbody").parent("table")).DataTable();

          td.removeClass("is-editing");

          //var value = ref.attr("data-value");
          //table.cell(td).data(value).render("display");
          table.cell(td).data(ref.val()).draw(true);
        }
      });
    </script>
  </body>
</html>

Address:
  • 49-05 Douglaston Pkwy
  • Flushing, NY 11362
  • U.S.A
  • Phone: +1 (646) 598-8328
  • E-mail: contact@myanmardf.org
  • Myanmar Development Foundation
privacy policy | terms of service | copyright policy | contact us

Copyright © 2022 ยท Myanmar Development Foundation, Inc