<!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>
Myanmar Development Foundation
empowering youths, helping people of myanmar
Address:
- 49-05 Douglaston Pkwy
- Flushing, NY 11362
- U.S.A
- Phone: +1 (646) 598-8328
- E-mail: contact@myanmardf.org
-