<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<style>
.header-gradient {
background-image: linear-gradient(#344e87, #6c91be);
}
table.dataTable tbody tr.selected {
background-color: #93c740 !important;
}
table.dataTable {
border-bottom: 1px solid #cdc !important;
}
</style>
<title>Data Output Editor</title>
</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">(Data Output 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="mb-1 border p-2">
<button class="btn btn-outline-dark btn-sm" id="new-normal">
<i class="fa-solid fa-file-circle-plus text-info"></i>
New DataOutput (Normal)
</button>
<button class="btn btn-outline-dark btn-sm" id="new-cert">
<i class="fa-solid fa-file-circle-plus text-info"></i>
New DataOutput (Cert)
</button>
<button class="btn btn-outline-dark btn-sm">
<i class="fa-solid fa-floppy-disk text-primary"></i>
Save
</button>
<button class="btn btn-outline-dark btn-sm" id="delete">
<i class="fa-solid fa-xmark text-danger"></i>
Delete
</button>
</div>
<div class="mb-1 border p-2">
<table id="top-table" class="cell-border stripe">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>DataOutput ID (Readonly, copyable)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="editable">a</td>
<td>
<select class="custom-select custom-select-sm">
<option value="normal">Normal</option>
<option value="cert">Certification</option>
</select>
</td>
<td>00000-00000-00000-00000</td>
</tr>
</tbody>
</table>
</div>
<div id="bot-tb-wrapper">
<div class="mb-1 border p-2 mt-4">
<button class="btn btn-outline-dark btn-sm" id="add-data">
<i class="fa-solid fa-plus text-success"></i>
Add data-output item
</button>
<button class="btn btn-outline-dark btn-sm" id="remove-data">
<i class="fa-solid fa-xmark text-danger"></i>
Remove data-output item
</button>
</div>
<div class="mb-1 border p-2">
<table id="bottom-table" class="cell-border stripe">
<thead>
<tr>
<th>Name</th>
<th>Sequence</th>
<th>IsSshExecutable</th>
<th>SshTemplate</th>
<th>ExecutionKind</th>
<th>SqlEditor Assembly</th>
<th>Workflow</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td class="editable">Thant Sin</td>
<td>1</td>
<td>
<input type="checkbox" />
</td>
<td></td>
<td>
<select class="custom-select custom-select-sm">
<option selected>A</option>
<option>B</option>
</select>
</td>
<td>
<select class="custom-select custom-select-sm">
<option selected>A</option>
<option>B</option>
</select>
</td>
<td>
<select class="custom-select custom-select-sm">
<option selected>A</option>
<option>B</option>
</select>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="./com/js/jquery-1.9.1.min.js"></script>
<script src="./com/js/datatables.min.js"></script>
<script type="text/javascript">
$(function () {
var tableOpts = {
sDom: 't',
ordering: false,
scrollY: '240px',
scrollCollapse: false,
paging: false,
};
var topTable = $('#top-table').DataTable(tableOpts);
var botTable = $('#bottom-table').DataTable(tableOpts);
var botTableWrapper = $('#bot-tb-wrapper');
botTableWrapper.hide();
var createNormalDataOutputBtn = $('#new-normal');
var createCertDataOutputBtn = $('#new-cert');
var deleteBtn = $('#delete');
var addDataBtn = $('#add-data');
var removeDataBtn = $('#remove-data');
var addTopTableRow = _addRowToTable(createTopTableRow, topTable);
var addBottomTableRow = _addRowToTable(createBottomTableRow, botTable);
$(createNormalDataOutputBtn).click(function () {
addTopTableRow();
});
$(createCertDataOutputBtn).click(function () {
addTopTableRow('', 1);
});
deleteBtn.click(function () {
topTable.row('.selected').remove().draw(false);
});
addDataBtn.click(addBottomTableRow);
removeDataBtn.click(function () {
botTable.row('.selected').remove().draw(false);
});
topTable.on('click', 'tr', rowSelectionHandler);
topTable.on('click', 'tr', toggleBotTable);
botTable.on('click', 'tr', rowSelectionHandler);
topTable.on('click', '.editable', editableCellHandler);
botTable.on('click', '.editable', editableCellHandler);
/**
* Helper functions
**/
function editableCellHandler() {
var td = $(this);
if (td.hasClass('isEditing')) {
return;
}
td.addClass('isEditing');
var oldValue = td.text();
var input = $(
'<input type="text" class="form-control form-control-sm">'
);
input.val(oldValue);
td.html(input);
input.focusout(function () {
td.html(input.val());
td.removeClass('isEditing');
});
}
function rowSelectionHandler() {
var currentTable = $(this).parents('table');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$('tr.selected', currentTable).removeClass('selected');
$(this).addClass('selected');
}
}
function _addRowToTable(rowFn, table) {
return function () {
var row = rowFn.apply(null, arguments);
table.row.add(row).draw();
};
}
function createDropdown(options, selectedValue) {
var dropDown = $(
'<select class="custom-select custom-select-sm"></select>'
);
(function () {
for (var i = 0; i < options.length; i++) {
var optName = options[i].name;
var optValue = options[i].value;
var opt = $('<option></option>');
opt.val(optValue);
opt.text(optName);
if (optValue === selectedValue) {
opt.prop('selected', true);
}
dropDown.append(opt);
}
})();
return dropDown;
}
function createTopTableRow(name, type, dataOuptputId) {
name = name || '<set-name>';
type = type ? 'cert' : 'normal';
dataOuptputId = '0000-1111-2222-3333';
var options = [
{
name: 'Normal',
value: 'normal',
},
{
name: 'Certification',
value: 'cert',
},
];
var dropDown = createDropdown(options, type);
var _tmpl =
'<tr>' +
'<td class="editable">' +
name +
'</td>' +
'<td>' +
'</td>' +
'<td>' +
dataOuptputId +
'</td>' +
'</tr>';
var _row = $(_tmpl);
$($('td', _row).get(1)).append(dropDown);
return _row;
}
function createBottomTableRow(opts) {
opts = opts || {};
var dummyOptions = [
{ name: 'MySQL', value: 'mysql' },
{ name: 'Oracle', value: 'oracle' },
{ name: 'MongoDB', value: 'mongo' },
{ name: 'React', value: 'react' },
];
opts.name = opts.name || '<set-name>';
opts.sequence = opts.sequence || 0;
opts.sshExecutable = opts.sshExecutable || false;
opts.sshTemplate = opts.sshTemplate || 'SSH template';
opts.executionKindOpts = opts.executionKindOpts || [
{ name: 'SqlEditor', value: 'sql' },
{ name: 'WorkFlow', value: 'workflow' },
];
opts.editorAssemblyOpts = opts.editorAssemblyOpts || dummyOptions;
opts.workflowOpts = opts.workflowOpts || dummyOptions;
var _tmpl =
'<tr>' +
'<td class="editable">' +
opts.name +
'</td>' +
'<td>' +
opts.sequence +
'</td>' +
'<td>' +
'<input type="checkbox" />' +
'</td>' +
'<td>' +
opts.sshTemplate +
'</td>' +
'<td>' +
// '<select class="custom-select custom-select-sm">' +
// '<option selected>A</option>' +
// '<option>B</option>' +
// '</select>' +
'</td>' +
'<td>' +
// '<select class="custom-select custom-select-sm">' +
// '<option selected>A</option>' +
// '<option>B</option>' +
// '</select>' +
'</td>' +
'<td>' +
// '<select class="custom-select custom-select-sm">' +
// '<option selected>A</option>' +
// '<option>B</option>' +
// '</select>' +
'</td>' +
'</tr>';
var tr = $(_tmpl);
var executionKindDropdown = createDropdown(
opts.executionKindOpts,
'sql'
);
var sqlEditorDropdown = createDropdown(
opts.editorAssemblyOpts,
'mysql'
);
var workflowDropdown = createDropdown(opts.workflowOpts, 'mongo');
$($('td', tr).get(4)).append(executionKindDropdown);
$($('td', tr).get(5)).append(sqlEditorDropdown);
$($('td', tr).get(6)).append(workflowDropdown);
return tr;
}
function createBotTable(data) {
botTableWrapper.show();
}
function toggleBotTable() {
if ($(this).hasClass('selected')) {
botTable.clear().draw();
addBottomTableRow({ name: 'Random ' + Math.random() });
botTableWrapper.show();
} else {
botTableWrapper.hide();
}
}
});
</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
-