Skip to content
tapSchemaEditing.xhtml 23.1 KiB
Newer Older
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/WEB-INF/templates/master.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:tsm="http://java.sun.com/jsf/composite/tsm_components" >
    <ui:define name="title">Editing #{tapSchemaEditing.tapSchema.name}</ui:define>
    <ui:define name="scripts">
        <h:outputScript library="js" name="lib/jsonpatch.min.js"></h:outputScript>
        <h:outputScript library="js" name="lib/angular.min.js"></h:outputScript>
        <script>
            var CID = "#{tapSchemaEditing.conversationId}";
            var REST_PATH = "#{tapSchemaEditing.RESTPath}";
        </script>
        <h:outputScript library="js" name="edit-tapschema.js"></h:outputScript>
    </ui:define>
    <ui:define name="content">
        <div ng-app="editTapSchema">
            <div ng-controller="mainController" ng-cloak="">
                <h1 class="text-center">Editing #{tapSchemaEditing.tapSchema.name}</h1>
                <div class="col-sm-6 vpadding text-center">
                    <button class="btn btn-success btn-lg" ng-click="update()">
                        <span class="icon-save"></span>
                        Update
                    </button>
                </div>
                <div class="col-sm-6 vpadding text-right">
                    <h:form>
                        <h:commandLink class="btn btn-info" action="#{tapSchemaEditing.back()}">
                            <span class="glyphicon glyphicon-arrow-left"></span>
                            Back
                        </h:commandLink>
                        <h:outputText value="&#160;" />
                        <h:commandLink class="btn btn-danger" action="#{tapSchemaEditing.logout()}">
                            <span class="glyphicon glyphicon-log-out"></span>
                            Close session
                        </h:commandLink>
                    </h:form>
                </div>
                <div class="clearfix"></div>
                <br/>
                <ul class="nav nav-tabs" id="schemas" role="tablist">
                    <li role="presentation" class="removable-tab" ng-repeat="schema in model.schemas" ng-class="{active: schema.active, 'to-remove': schema.toRemove}">
                        <a role="tab" ng-click="select('tapSchema', schema.title)">
                            <span ng-class="{strikeout: schema.toRemove}">{{schema.title}}</span>
                            <span class="remove-btn" ng-hide="schema.toRemove" ng-click="remove('tapSchema', schema.title, $event)">
                                <span class="glyphicon glyphicon-remove-sign"></span>
                            </span>
                        </a>
                    </li>
                    <li ng-show="model.tapSchema.hasAddables">
                        <a role="tab" class="plus-tab" ng-click="openAddablesDialog('tapSchema')">
                            <span class="glyphicon glyphicon-plus-sign"></span>
                        </a>
                    </li>
                </ul>
                <div role="tabpanel" class="tab-content" id="schemaWrapper">
                    <div class="col-xs-12 vpadding" ng-show="model.schema.toRemove">
                        <div class="alert alert-info clearfix">
                            <span class="glyphicon glyphicon-info-sign"></span>
                            This schema will be removed on TAP Schema Update.
                            <button class="btn btn-primary pull-right" ng-click="undoRemove('tapSchema')">Undo</button>
                        </div>
                    <div id="schemaContent" ng-hide="model.schema.toRemove">
                        <div class="schema-info clearfix">
                            <div class="form-horizontal" id="schemaValues">
                                <div class="form-group col-lg-6">
                                    <label for="schema-utype" class="col-sm-3 control-label">Schema utype</label>
                                    <div class="col-sm-9">
                                        <tsm:edittext entity="schema"  key="utype" />
                                    </div>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="schema-description" class="col-sm-3 control-label">Schema description</label>
                                    <div class="col-sm-9">
                                        <tsm:edittext entity="schema"  key="description" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <ul class="nav nav-tabs" id="tables" role="tablist">
                            <li role="presentation" class="removable-tab" ng-repeat="table in model.tables" ng-class="{active: table.active, 'to-remove': table.toRemove}">
                                <a role="tab" ng-click="select('schema', table.title)">
                                    <span ng-class="{strikeout: table.toRemove}">{{table.title}}</span>
                                    <span class="remove-btn" ng-hide="table.toRemove" ng-click="remove('schema', table.title, $event)">
                                        <span class="glyphicon glyphicon-remove-sign"></span>
                                    </span>
                                </a>
                            </li>
                            <li ng-show="model.schema.hasAddables">
                                <a role="tab" class="plus-tab" ng-click="openAddablesDialog('schema')">
                                    <span class="glyphicon glyphicon-plus-sign"></span>
                                </a>
                            </li>
                        </ul>

                        <div role="tabpanel" id="tableWrapper" ng-show="model.table !== null">

                            <div class="col-xs-12 vpadding" ng-show="model.table.toRemove">
                                <div class="alert alert-info clearfix">
                                    <span class="glyphicon glyphicon-info-sign"></span>
                                    This table will be removed on TAP Schema Update.
                                    <button class="btn btn-primary pull-right" ng-click="undoRemove('schema')">Undo</button>
                                </div>
                            </div>

                            <div id="tableContent" ng-hide="model.table.toRemove">

                                <div class="table-info clearfix">
                                    <div class="form-horizontal" id="tableValues">
                                        <div class="form-group col-lg-6">
                                            <label for="schema-utype" class="col-sm-3 control-label">Table utype</label>
                                            <div class="col-sm-9">
                                                <tsm:edittext entity="table"  key="utype" />
                                            </div>
                                        </div>
                                        <div class="form-group col-lg-6">
                                            <label for="schema-description" class="col-sm-3 control-label">Table description</label>
                                            <div class="col-sm-9">
                                                <tsm:edittext entity="table"  key="description" />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="columns-header">
                                        <div class="columns-header-name">
                                            Columns<h:outputText value="&#160;" />
                                            <button class="btn btn-success" ng-show="model.table.hasAddables" ng-click="openAddablesDialog('table')" >
                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                            </button>
                                        </div>
                                        <div class="columns-header-properties">
                                            Column properties
                                            <span ng-show="model.column !== null">
                                                <span class="icon-key text-danger" title="Primary key" ng-show="model.column.isPrimaryKey"></span>
                                                <span class="icon-key text-success" title="Foreign key: {{model.column.foreignKey}}" ng-show="model.column.foreignKey !== null"></span>
                                                <h:outputText value="&lt;span class=&quot;icon-index text-warning&quot; title=&quot;Indexed&quot; ng-show=&quot;!(model.column.isPrimaryKey || model.column.foreignKey !== null) &amp;&amp; model.column.isIndexed&quot;&gt;&lt;/span&gt;" escape="false" />
                                            </span>
                                        </div>
                                    </div>
                                    <div class="columns-wrapper">
                                        <div class="columns-selector">
                                            <ul class="nav nav-pills">
                                                <li role="presentation" ng-repeat="column in model.columns" ng-class="{active: column.active}">
                                                    <a ng-click="select('table', column.title)" ng-class="{'to-remove': column.toRemove}">
                                                        <button class="btn btn-link" ng-hide="column.toRemove">
                                                            <span class="glyphicon glyphicon-remove-sign" ng-click="remove('table', column.title, $event)"></span>
                                                        </button>
                                                        <span class="icon-key text-danger" title="Primary key" ng-show="column.isPrimaryKey"></span>
                                                        <span class="icon-key text-success" title="Foreign key: {{column.foreignKey}}" ng-show="column.foreignKey !== null"></span>
                                                        <h:outputText value="&lt;span class=&quot;icon-index text-warning&quot; title=&quot;Indexed&quot; ng-show=&quot;!(column.isPrimaryKey || column.foreignKey !== null) &amp;&amp; column.isIndexed&quot;&gt;&lt;/span&gt;" escape="false"></h:outputText>
                                                        <span ng-class="{strikeout: column.toRemove}">{{column.title}}</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="column-info" id="columnWrapper" ng-hide="model.column === null">

                                            <div ng-show="model.column.toRemove">
                                                <div class="alert alert-info clearfix">
                                                    <span class="glyphicon glyphicon-info-sign"></span>
                                                    This column will be removed on TAP Schema Update.
                                                    <button class="btn btn-primary pull-right" ng-click="undoRemove('table')">Undo</button>
                                                </div>
                                            </div>

                                            <div id="columnContent" ng-hide="model.column.toRemove">
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        <div class="form-group">
                                                            <label for="datatype" class="control-label">Datatype:</label>
                                                            <span>{{model.column.dataType}}</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6">
                                                        <div class="form-group">
                                                            <label for="size" class="control-label">Size:</label>
                                                            <span>{{model.column.size}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-xs-6">
                                                        <div class="checkbox">
                                                            <label>
                                                                <tsm:editcheckbox entity="column"  key="std" />
                                                                STD
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6">
                                                        <div class="checkbox">
                                                            <label>
                                                                <tsm:editcheckbox entity="column"  key="principal" />
                                                                Principal
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="utype" class="control-label">UType:</label>
                                                    <tsm:edittext entity="column" key="utype" />
                                                </div>
                                                <div class="form-group">
                                                    <label for="columnUcd" class="control-label">UCD:</label>
                                                    <input type="text" id="columnUcd" class="form-control" ng-value="model.column.values.ucd.value" ng-class="{changed:model.column.values.ucd.isChanged}" ng-click="openUCDDialog()"/>
                                                </div>
                                                <div class="form-group">
                                                    <label for="unit" class="control-label">Unit:</label>
                                                    <tsm:edittext entity="column" key="unit" />
                                                </div>
                                                <div class="form-group">
                                                    <label for="description" class="control-label">Description:</label>
                                                    <tsm:edittext entity="column" key="description" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" tabindex="-1" role="dialog" id="addablesModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div class="pull-right">
                                    <button class="btn btn-default btn-sm" ng-click="deselectAllEntities()">
                                        <span class="glyphicon glyphicon-remove"></span>
                                        Deselect all
                                    </button>
                                </div>
                                <div class="hpadding pull-right">
                                    <button class="btn btn-default btn-sm" ng-click="selectAllEntities()">
                                        <span class="glyphicon glyphicon-ok"></span>
                                        Select all
                                    </button>
                                </div>  
                                <h4 class="modal-title">Add</h4>
                            </div>
                            <div class="modal-body">
                                <div class="clearfix">                              
                                </div>
                                <div class="addables">
                                    <div class="checkbox" ng-repeat="entity in currentAddables.entities">
                                        <label>
                                            <input type="checkbox" ng-model="entity.selected" />
                                            <span>{{entity.name}}</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" ng-click="addEntities()">Add</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" tabindex="-1" role="dialog" id="searchUCDModal">
                    <div class="modal-dialog">
                        <div class="modal-content" id="searchUCDModalContent">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true"><h:outputText value="&amp;times;" escape="false" /></span></button>
                                <h4 class="modal-title">UCD Search Dialog</h4>
                            </div>
                            <div class="modal-body">
                                <div>
                                    <div class="form-group">
                                        <label for="ucdDialogDescription" class="control-label">Description:</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" ng-model="ucdModel.description" ng-keyup="searchUCDByReturn($event)" />
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button" ng-click="searchUCD()">
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="alert alert-danger" role="alert" ng-show="ucdModel.UCDnotFound">
                                        No UCD found for this description!
                                    </div>
                                    <div class="alert alert-info" role="alert" ng-hide="ucdModel.selectedUCD === null">
                                        <strong>Selected UCD:</strong>
                                        <span>{{ucdModel.selectedUCD}}</span>
                                    </div>
                                    <div class="form-group" ng-hide="ucdModel.suggestedUCD === null">
                                        <label class="control-label">Suggested complete UCD:</label>
                                        <button class="btn-default text-left form-control" type="button" ng-click="selectUCD(ucdModel.suggestedUCD)">{{ucdModel.suggestedUCD}}</button>
                                    </div>
                                    <div class="vpadding" ng-hide="ucdModel.suggestedUCDs.length === 0">
                                        <label class="control-label">Other suggested UCD:</label>
                                        <div class="ucdInfo" ng-repeat="ucdInfo in ucdModel.suggestedUCDs track by $index">
                                            <div class="input-group">
                                                <span class="input-group-addon">{{ucdInfo.score}}</span>
                                                <span class="input-group-addon" ng-class="'flag' + ucdInfo.flag">{{ucdInfo.flag}}</span>

                                                <button type="text" class="form-control text-left btn-default selectUCD" ng-click="selectUCD(ucdInfo.word)">
                                                    <span class="resultWord">{{ucdInfo.word}}</span>
                                                </button>

                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button" ng-click="explainUCD(ucdInfo, $index)">
                                                        <span class="glyphicon glyphicon-question-sign"></span>
                                                    </button>
                                                </span>
                                            </div>
                                            <div class="resultDefinition" ng-hide="ucdInfo.definition === null">
                                                <span class="help-block">{{ucdInfo.definition}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" ng-click="saveUCD()" ng-disabled="ucdModel.selectedUCD === null">Save changes</button>
    </ui:define>
</ui:composition>