graphdb-workbench/dist/pages/createConnector.html

The web application for GraphDB APIs

<div class="modal-header">
	<button type="button" class="close" ng-click="cancel()"></button>
	<h3 class="modal-title">Create new {{connector.key}} Connector</h3>
</div>
<form ng-submit="ok()" name="form" novalidate>
<div class="modal-body">

	<div class="form-horizontal">

		<div class="form-group row">
			<label class="col-xs-2 col-form-label">Name<sup>*</sup></label>
			<div class="col-xs-10 connector-name-field">
				<input type="text" class="form-control" placeholder="connector name" ng-model="name" required uib-popover="Name that identifies the connector." popover-trigger="focus" popover-placement="bottom">
			</div>
		</div>

		<div class="form-group row" ng-repeat="option in options" ng-hide="option.__hidden">
			<label class="col-xs-2"
				ng-class="{'col-form-label': option.__type != 'Boolean', 'font-weight-bold':option.__required }">{{option.__label}}<sup ng-if="option.__required">*</sup></label>
			<div class="col-xs-10">
				<div ng-if="option.__type == 'Boolean'" class="form-check">
					<label class="form-check-label" uib-popover="{{option.__description}}" popover-trigger="mouseenter" popover-placement="bottom">
						<input class="form-check-input" type="checkbox" ng-model="values[option.__name]">
					</label>
				</div>
                <div ng-if="option.__type == 'String'">
					<input type="text" class="form-control" placeholder="{{option.__hint}}" ng-model="values[option.__name]" ng-required="option.__required" uib-popover="{{option.__description}}" popover-trigger="focus" popover-placement="bottom">
				</div>
				<div ng-if="option.__type == 'BigString'">
					<textarea type="text" class="form-control" placeholder="{{option.__hint}}" ng-model="values[option.__name]" ng-required="option.__required" uib-popover="{{option.__description}}" popover-trigger="focus" popover-placement="bottom">
					</textarea>
				</div>
				<div ng-if="option.__type == 'JsonString'">
					<textarea type="text" class="form-control" placeholder="{{option.__hint}}" ng-model="values[option.__name]" ng-required="option.__required" uib-popover="{{option.__description}}" popover-trigger="focus" popover-placement="bottom">
					</textarea>
				</div>
				<div ng-if="option.__type == 'Long'">
					<input type="number" class="form-control" placeholder="{{option.__hint}}" ng-model="values[option.__name]" ng-required="option.__required" uib-popover="{{option.__description}}" popover-trigger="focus" popover-placement="bottom">
				</div>
                <div ng-if="option.__type == 'StringArray'" ng-repeat="value in values[option.__name] track by $index">
					<div class="input-group mb-1 {{'property-' + option.__name}}">
						<input type="text" class="form-control" placeholder="{{option.__hint}}"  ng-model="values[option.__name][$index]" ng-required="option.__required" uib-popover="{{option.__description}}" popover-trigger="focus" popover-placement="bottom">
						<span class="input-group-btn btn-group-sm">
							<button type="button" ng-disabled="values[option.__name].length == 1" class="btn btn-link" uib-popover="Delete {{option.__label | singular}}" popover-trigger="mouseenter" popover-placement="bottom"  ng-click="deleteOption($index, values[option.__name])">
								<em class="icon-minus"></em>
							</button>
							<button type="button" class="btn btn-link" uib-popover="Add {{option.__label | singular}}" popover-trigger="mouseenter" popover-placement="bottom"  ng-click="addOption($index, values[option.__name])">
								<em class="icon-plus"></em>
							</button>
						</span>
               		</div>
                </div>
                <div ng-if="option.__type == 'OptionArray'">
					<div ng-repeat="field in values[option.__name] track by $index" ng-init="fieldIndex = $index" class="row">
						<div class="col-xs-11">
							<fieldset class="bg-lightgray mb-1 p-1">
								<div class="form-group row {{'child-property-' + child.__name}}" ng-repeat="child in option.__childOptions | filter: {__type: '!Boolean'}: true" >
									<label class="col-xs-3"
										ng-class="{'col-form-label': true, 'font-weight-bold':child.__required }">{{child.__label}}<sup ng-if="child.__required">*</sup></label>
									<div class="col-xs-9">
										<div ng-if="child.__type == 'String'">
											<input type="text" class="form-control" placeholder="{{child.__hint}}" ng-model="values[option.__name][fieldIndex][child.__name]" ng-required="child.__required"  uib-popover="{{child.__description}}" popover-trigger="focus" popover-placement="bottom">
										</div>
										<div ng-if="child.__type == 'Long'">
											<input type="number" class="form-control" placeholder="{{child.__hint}}" ng-model="values[option.__name][fieldIndex][child.__name]" ng-required="child.__required"  uib-popover="{{child.__description}}" popover-trigger="focus" popover-placement="bottom">
										</div>
										<div class="input-group mb-1" ng-if="child.__type == 'StringArray'" ng-repeat="value in values[option.__name][fieldIndex][child.__name] track by $index">
											<input type="text" class="form-control" placeholder="{{child.__hint}}" ng-model="values[option.__name][fieldIndex][child.__name][$index]" ng-required="child.__required"  uib-popover="{{child.__description}}" popover-trigger="focus" popover-placement="bottom">
											<span class="input-group-btn btn-group-sm">
												<button type="button" ng-disabled="values[option.__name][fieldIndex][child.__name].length == 1" class="btn btn-link btn-sm" uib-popover="Delete {{child.__label | singular}}" popover-trigger="mouseenter" popover-placement="bottom" ng-click="deleteOption($index, values[option.__name][fieldIndex][child.__name])" >
													<em class="icon-minus"></em>
												</button>
												<button type="button" class="btn btn-link btn-sm" uib-popover="Add {{child.__label | singular}}" popover-trigger="mouseenter" popover-placement="bottom"  ng-click="addOption($index, values[option.__name][fieldIndex][child.__name])">
													<em class="icon-plus"></em>
												</button>
											</span>
										</div>
										<div ng-if="child.__type == 'OptionArray'" class="col-form-label">
											<em>Defining nested objects is not supported through this interface.</em>
										</div>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-xs-3"></div>
									<div class="col-xs-9">
										<label ng-repeat="child in option.__childOptions | filter: {__type: 'Boolean'}: true" class="mr-1"
											   uib-popover="{{boolean.__description}}" popover-trigger="mouseenter" popover-placement="bottom">
											<input type="checkbox" ng-model="values[option.__name][fieldIndex][child.__name]"> {{child.__label}}
										</label>
									</div>
								</div>
							</fieldset>
						</div>
						<div class="col-xs-1 p-0" style="margin-left: -1rem">
							<span class="input-group-btn btn-group-sm">
							<button type="button" ng-disabled="values[option.__name].length == 1" class="btn btn-link" uib-popover="Delete Field" popover-trigger="mouseenter" popover-placement="bottom" ng-click="deleteOption($index, values[option.__name])">
								<em class="icon-minus"></em>
							</button>
							<button type="button" class="btn btn-link" uib-popover="Add Field" popover-trigger="mouseenter" popover-placement="bottom" ng-click="addField($index, option.__name)">
								<em class="icon-plus"></em>
							</button>
							</span>
						</div>
               		</div>
                </div>
				<div ng-if="option.__type == 'Map'" ng-show="values[option.__name].length === 0">
					<div class="col-form-label mb-1">
						<label><em>No {{option.__label}} added</em></label>
						<span class="btn-group-sm">
							<button type="button" class="btn btn-link" uib-popover="Add {{option.__label | singular}}" popover-trigger="mouseenter" popover-placement="bottom"  ng-click="addMapOption($index, values[option.__name])">
								<em class="icon-plus"></em>
							</button>
						</span>
					</div>
				</div>
				<div ng-if="option.__type == 'Map'" ng-repeat="kv in values[option.__name] track by $index">
					<div class="input-group mb-1">
						<div class="row">
							<div class="col-xs-6">
								<input type="text" class="form-control" placeholder="key"  ng-model="kv.key" ng-required="option.__required" uib-popover="{{option.__description}}" popover-trigger="focus" popover-placement="bottom">
							</div>
							<div class="col-xs-6">
								<input type="text" class="form-control" placeholder="value"  ng-model="kv.value" ng-required="option.__required" uib-popover="{{option.__description}}" popover-trigger="focus" popover-placement="bottom">
							</div>
						</div>
						<span class="input-group-btn btn-group-sm">
							<button type="button" ng-disabled="values[option.__name].length == 0" class="btn btn-link" uib-popover="Delete {{option.__label | singular}}" popover-trigger="mouseenter" popover-placement="bottom"  ng-click="deleteMapOption($index, values[option.__name])">
								<em class="icon-minus"></em>
							</button>
							<button type="button" class="btn btn-link" uib-popover="Add {{option.__label | singular}}" popover-trigger="mouseenter" popover-placement="bottom"  ng-click="addMapOption($index, values[option.__name])">
								<em class="icon-plus"></em>
							</button>
						</span>
					</div>
				</div>
            </div>

		</div>

	</div>

</div>
<div class="modal-footer">
	<button type="button" class="btn btn-link pull-left" ng-click="viewQuery()">View SPARQL Query</button>
	<button type="button" class="btn btn-secondary" ng-click="cancel()">Cancel</button>
	<button type="submit" class="btn btn-primary create-connector-btn">OK</button>
</div>
</form>