Skip to content
editTapSchema.jsp 21.7 KiB
Newer Older
<%-- 
    Document   : editTapSchema.jsp
    Created on : Dec 10, 2015, 3:14:39 PM
    Author     : Sonia Zorba <zorba at oats.inaf.it>
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<t:basepage title="Edit TAP_SCHEMA">

    <script src="js/lib/jsonpatch.min.js"></script>
    <script src="js/lib/angular.min.js"></script>
        <div ng-controller="mainController" ng-cloak>
            <h1 class="text-center">Editing ${tapSchemaName}</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">
                <a class="btn btn-info" href="selectTapSchema">
                    <span class="glyphicon glyphicon-arrow-left"></span>
                    Back
                </a>
                <a class="btn btn-danger" href="credentials">
                    <span class="glyphicon glyphicon-log-out"></span>
                    Close session
                </a>
            </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>

                <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">
                                    <t:edittext entity="schema" key="utype"></t:edittext>
                                    </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">
                                    <t:edittext entity="schema" key="description"></t:edittext>
                                    </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">
                                            <t:edittext entity="table" key="utype"></t:edittext>
                                            </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">
                                            <t:edittext entity="table" key="description"></t:edittext>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="columns-header">
                                        <div class="columns-header-name">
                                            Columns&nbsp;
                                            <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 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>
                                            <span class="icon-index text-warning" title="Indexed" ng-show="!(model.column.isPrimaryKey || model.column.foreignKey !== null) && model.column.isIndexed"></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>
                                                        <span class="icon-index text-warning" title="Indexed" ng-show="!(column.isPrimaryKey || column.foreignKey !== null) && column.isIndexed"></span>
                                                        <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>
                                                            <t:editcheckbox entity="column" key="std"></t:editcheckbox>
                                                                STD
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-xs-6">
                                                        <div class="checkbox">
                                                            <label>
                                                            <t:editcheckbox entity="column" key="principal"></t:editcheckbox>
                                                                Principal
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="utype" class="control-label">UType:</label>
                                                <t:edittext entity="column" key="utype"></t:edittext>
                                                </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>
                                                <t:edittext entity="column" key="unit"></t:edittext>
                                                </div>
                                                <div class="form-group">
                                                    <label for="description" class="control-label">Description:</label>
                                                <t:edittext entity="column" key="description"></t:edittext>
                                                </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" wicket:id="modalTitle">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">&times;</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()">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/edit-tapschema.js"></script>
</t:basepage>