-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First version of graph configurations table modal
- Loading branch information
1 parent
24023c1
commit 9d076af
Showing
6 changed files
with
136 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import * as ko from "knockout"; | ||
|
|
||
| import { Eagle } from './Eagle'; | ||
| import { Node } from "./Node"; | ||
|
|
||
| export class GraphConfigurationsTable { | ||
|
|
||
| static openModal = () : void => { | ||
| const eagle: Eagle = Eagle.getInstance(); | ||
|
|
||
| eagle.showEagleIsLoading() | ||
|
|
||
| setTimeout(function(){ | ||
| if($('.modal.show').length>0){ | ||
| if($('.modal.show').attr('id')==='parameterTableModal'){ | ||
| // TODO: use closeModal here! | ||
| $('#parameterTableModal').modal('hide') | ||
| eagle.showTableModal(false) | ||
| }else{ | ||
| return | ||
| } | ||
| } | ||
|
|
||
| eagle.showTableModal(true) | ||
|
|
||
| },5) | ||
| } | ||
|
|
||
| static closeModal = (): void => { | ||
| $('#parameterTableModal').modal('hide') | ||
| Eagle.getInstance().showTableModal(false) | ||
| } | ||
|
|
||
| static addEmptyTableRow = () : void => { | ||
| let fieldIndex:number | ||
| const selectedNode: Node = Eagle.getInstance().selectedNode(); | ||
|
|
||
| /* | ||
| if(ParameterTable.hasSelection()){ | ||
| // A cell in the table is selected well insert new row instead of adding at the end | ||
| fieldIndex = ParameterTable.selectionParentIndex() + 1 | ||
| selectedNode.addEmptyField(fieldIndex) | ||
| }else{ | ||
| selectedNode.addEmptyField(-1) | ||
| //getting the length of the array to use as an index to select the last row in the table | ||
| fieldIndex = selectedNode.getFields().length-1; | ||
| } | ||
| */ | ||
|
|
||
| //a timeout was necessary to wait for the element to be added before counting how many there are | ||
| setTimeout(function() { | ||
| //handling selecting and highlighting the newly created row | ||
| const clickTarget = $($("#paramsTableWrapper tbody").children()[fieldIndex]).find('.selectionTargets')[0] | ||
|
|
||
| clickTarget.click() //simply clicking the element is best as it also lets knockout handle all of the selection and observable update processes | ||
| clickTarget.focus() // used to focus the field allowing the user to immediately start typing | ||
| $(clickTarget).trigger("select") | ||
|
|
||
| //scroll to new row | ||
| $("#parameterTableModal .modal-body").animate({ | ||
| scrollTop: (fieldIndex*30) | ||
| }, 1000); | ||
| }, 100); | ||
| } | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!-- Graph Configurations Table Modal --> | ||
| <div class="modal fade" id="graphConfigurationsTableModal" tabindex="-1" role="dialog" aria-labelledby="graphConfigurationsTableModalTitle" aria-hidden="true"> | ||
| <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title"> | ||
| Graph Configurations Table | ||
| </h5> | ||
| <div class="searchBarContainer" data-bind="clickBubble:false, click:function(){}"> | ||
| <i class="material-icons md-18 searchBarIcon">search</i> | ||
| <a href="#" data-bind="click:function(data, event){$root.emptySearchBar(Eagle.tableSearchString,data,event)}"> | ||
| <i class="material-icons md-18 searchBarIconClose">close</i> | ||
| </a> | ||
| <input class="componentSearchBar" type="text" placeholder="Search: eg. app, string" data-bind="valueUpdate: ['afterkeydown', 'input'], value:Eagle.tableSearchString, event:{keyup: function(data,event){$root.setSearchBarClearBtnState(data,event)}},eagleTooltip:`Search for names, types, anything really! You may enter several terms that should match separated by a ','`"> | ||
| </div> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <!-- ko if: logicalGraph().graphConfigs().length === 0 --> | ||
| <div class="container h-100"> | ||
| <div class="row align-items-center h-100"> | ||
| <div class="col-md-12 text-center"> | ||
| <span class="fs-3">No graph configurations</span> | ||
| <br/> | ||
| <span class="fs-6">Create a configuration using the Config menu in the navbar</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- /ko --> | ||
| <!-- ko if: logicalGraph().graphConfigs().length !== 0 --> | ||
| <table id="paramsTableWrapper"> | ||
| <div id="tableInspector"> | ||
| <input id="tableInspectorSelection" type="text" placeholder="Selection" data-bind="value: ParameterTable.formatTableInspectorSelection()" readonly> | ||
| <input id="tableInspectorValue" type="text" placeholder="Content" data-bind="value: ParameterTable.formatTableInspectorValue(), readonly: ParameterTable.selectionReadonly(), event: {keyup: ParameterTable.tableInspectorUpdateSelection($element.value)}"> | ||
| </div> | ||
| <thead> | ||
| <tr> | ||
| <th data-bind="eagleTooltip:''" data-bs-placement="top"></th> | ||
| <th data-bind="eagleTooltip:''" data-bs-placement="top">Config Name</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody data-bind="foreach: graphConfigs()"> | ||
| <!-- ko if: $data.fitsTableSearchQuery() --> | ||
| <tr data-bind="attr: {'id' : 'tableRow_'+$data.getId()}"> | ||
| <td class='columnCell column_KeyAttr'> | ||
| <!-- kept for now as we will need the space for the row drag handle --> | ||
| </td> | ||
| <td class='columnCell column_NodeName'> | ||
| <input class="tableParameter" type="string" data-bind="value: $root.logicalGraph().findNodeByKey(nodeKey()).getName(), disabled: true, eagleTooltip: $root.logicalGraph().findNodeByKey(nodeKey()).getDescription()"> | ||
| </td> | ||
| </tr> | ||
| <!-- /ko --> | ||
| </tbody> | ||
| </table> | ||
| <!-- /ko --> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-primary" id="graphConfigurationsTableModalAddParameterButton" data-bind="click: GraphConfigurationsTable.addEmptyTableRow, clickBubble:false" ><span id="parameterTableModalAddParameter">Add Parameter</span></button> | ||
| <button type="button" class="btn btn-primary" id="graphConfigurationsTableModalAffirmativeButton" data-bs-dismiss="modal" data-bind="clickBubble:false"><span id="graphConfigurationsTableModalAffirmativeAnswer">Close</span></button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |