Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
343 lines (303 sloc) 19.9 KB
<!DOCTYPE html>
<html>
<head>
<title>Design and fill your form easily</title>
<meta content="utf8">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="assets/css/framework.css">
<link rel="stylesheet" href="assets/css/dragdroplist.css" />
<link rel="stylesheet" href="assets/css/formless3.css" />
<link rel="stylesheet" href="assets/css/standalone.css" />
<script src="app/lang_en.js"></script>
<script src="app/defaultvalue.js"></script>
<script src="app/schemaorg.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="assets/js/typeahead-focus.js"></script>
<script src="assets/js/openpgp.js"></script>
<script src="assets/js/FileSaver.js"></script>
<script src="assets/js/beautify-html.js"></script>
<script src="assets/js/beautify.js"></script>
<script src="assets/js/beautify-css.js"></script>
<script src="assets/js/angular-drag-and-drop-lists.js"></script>
<script src="app/standalone.js"></script>
<script src="app/controllers.js"></script>
<script src="app/directives.js"></script>
<script src="app/services.js"></script>
<script src="app/formlesscontrol.js"></script>
</head>
<body ng-app="MainApp" ng-controller="FunctionCtr" id="FunctionCtr" data-ng-init="init()">
<input id="tempFile" file1 type="file" on-finish="loadfile()" data-file="openedfile" style="visibility:hidden;position:absolute;top:0;left:0" accept=".html"/>
<div ng-controller="FormCtr">
<div class="container-fluid nestedDemo" ng-if="schema.json != null">
<!-- Markup for lists inside the dropzone. It's inside a seperate template
because it will be used recursively. The dnd-list directive enables
to drop elements into the referenced array. The dnd-draggable directive
makes an element draggable and will transfer the object that was
assigned to it. If an element was dragged away, you have to remove
it from the original list yourself using the dnd-moved attribute -->
<script type="text/ng-template" id="list.html">
<ul dnd-list="list" dnd-inserted = "updateSemanticDrop(event, index, item, external, type, 'containerType')">
<li ng-repeat="item in list"
dnd-draggable="item"
dnd-effect-allowed="move"
dnd-moved="list.splice($index, 1)"
dnd-selected="selectItem(item)"
dnd-disable-if="sharedData.signed == true"
ng-class="{selected: models.selected === item}"
ng-include="item.type + '.html'"
flitem = "models"
class="row-form" />
</li>
</ul>
</script>
<!-- This template is responsible for rendering a container element. It uses
the above list template to render each container column -->
<script type="text/ng-template" id="container.html">
<div class="container-element box box-blue">
<h3>
<label>Type</label>
<input
class='input-transparent'
type='text'
ng-model="item.name"
value="item.name"
uib-typeahead="object for object in schema.objects | filter:$viewValue" typeahead-min-length="0" />
<br/>
<label>Instance</label>
<input class='input-transparent' type='text' ng-model="item.subtype"/>
<!--
<label>ID</label>
<input class='input-transparent' type='number' ng-model="item.id" style="width:50px"/>
-->
</h3>
<div class="column" ng-repeat="list in item.templates" ng-include="'list.html'"></div>
<div class="clearfix"></div>
</div>
<a ng-hide="sharedData.signed == true" class='mini-item item-remove glyphicon-minus item-fix' ng-click='removeItem(item)'></a>
</script>
<script type="text/ng-template" id="subProperty.html">
<div class="container-element box box-yellow">
<h3>
<label>Property</label>
<input
class='input-transparent'
type='text'
ng-model="item.subtype"
value="item.subtype"
uib-typeahead="property for property in findProperties(models.selected.semantic.class) | filter:$viewValue"
ng-change="matchTypeOfProperty(item.subtype, item)"
typeahead-on-select="matchTypeOfProperty($item, item)"
typeahead-min-length="0"/>
<br/>
<label>Type</label>
<input
class='input-transparent'
type='text'
ng-model="item.name"
value="item.name"
uib-typeahead="object for object in schema.objects | filter:$viewValue" typeahead-min-length="0"/>
</h3>
<div class="column" ng-repeat="list in item.templates" ng-include="'list.html'"></div>
<div class="clearfix"></div>
</div>
<a ng-hide="sharedData.signed == true" class='mini-item item-remove glyphicon-minus item-fix' ng-click='removeItem(item)'></a>
</script>
<!-- Template for a normal list item -->
<script type="text/ng-template" id="item.html">
<div ng-if='item.noinput == null' class="item row-form">
<!--<div class='label-block'>-->
<div ng-if="item.semantic.class != null">
<label>Property</label>
<input type='text' ng-model="item.semantic.property" class='input-transparent' uib-typeahead="property for property in findProperties(models.selected.semantic.class) | filter:$viewValue"
ng-change="matchProperty(item.semantic.property, item)"
typeahead-on-select="matchProperty($item, item)" typeahead-min-length="0"/>
</div>
<label>Label</label>
<input class='input-transparent' type='text' ng-model="item.label" value="item.label" />
<span ng-if="item.required == 'yes' " class='required-field'>*</span>
<!--
<span class='label-semantic'>[{{item.name}}] {{item.semantic.class}} / {{item.semantic.property}} </span>
-->
<!--</div>-->
<!--<div class='item-block'>
<html-render item="item" val='component'></html-render>
</div>-->
</div>
<div ng-if='item.noinput != null' class="item">
<html-render item="item" val='component'></html-render>
</div>
<a ng-hide="sharedData.signed == true" class='mini-item item-remove glyphicon-minus item-fix' ng-click='removeItem(item)'></a>
</script>
<!-- Main area with dropzones and source code -->
<div class="col-md-12">
<div class="row">
<center>
<input id='form-title' type='text' ng-model='sharedData.title' placeholder='Enter form title'/>
</center>
</div>
<div class="row">
<div class="col-md-3 leftbar">
<uib-accordion close-others="false">
<uib-accordion-group is-open="true">
<uib-accordion-heading>
Toolbox <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': true, 'glyphicon-chevron-right': False}"></i>
</uib-accordion-heading>
<div class='menubar'>
<span href="#" ng-repeat="item in commands" ng-show="item.disable == false" tooltip-placement="bottom" uib-tooltip="{{item.name}}" class="glyphicon {{item.icon}} {{item.selected?'menuselected':''}}" aria-hidden="true" ng-click="selectMenu(item.id)">
</span>
</div>
<div class="menubar">
<div ng-if="sharedData.signed == false">
<h5>Sections</h5>
<span href="#" ng-repeat="item in models.templates" ng-show="item.type == 'container'" dnd-draggable="item" dnd-effect-allowed="copy" dnd-copied="item.id = item.id + 1" tooltip-placement="bottom" uib-tooltip="{{item.name}}" class="glyphicon {{item.icon}}" aria-hidden="true">
</span>
<br/>
<h5>Fields</h5>
<span href="#" ng-repeat="item in models.templates" ng-show="item.type != 'container' && item.name != 'Signature'" dnd-draggable="item" dnd-effect-allowed="copy" dnd-copied="item.id = item.id + 1" tooltip-placement="bottom" uib-tooltip="{{item.name}}" class="glyphicon {{item.icon}}" aria-hidden="true">
</span>
<!--
<br/>
<h5>Restrict Editing</h5>
<button ng-click='lock()'>Enable</button> -->
</div>
<!--
<div ng-if="restrictMode == true">
<button ng-click='unlock()'>Disable</button>
</div> -->
</div>
</uib-accordion-group>
<uib-accordion-group is-open="true">
<uib-accordion-heading>
Properties <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': true, 'glyphicon-chevron-right': false}"></i>
</uib-accordion-heading>
<div ng-if="models.selected.type == 'item'">
<strong>Type: </strong> {{models.selected.name}}
<br>
<strong ng-if="models.selected.required != null">
Require <input type="checkbox" ng-model="models.selected.required" ng-true-value="'yes'" ng-false-value="'no'">
</strong>
<br/>
<strong>Label: </strong>
<textarea ng-model="models.selected.label" class="form-control" style="margin-top: 5px" rows="2"></textarea>
<div ng-if='models.selected.properties != null'>
<html-render item='models.selected' val='properties'></html-render>
</div>
</div>
<div ng-if="models.selected.type == 'container'">
<strong>Object Type: </strong>
<input type='text' ng-model="models.selected.name" class='form-control' uib-typeahead="object for object in schema.objects | filter:$viewValue" typeahead-min-length="0"/>
<br>
<strong>Instance: </strong>
<input type='text' ng-model="models.selected.subtype" class='form-control' />
<br>
<!--
<strong>ID: </strong>
<input type='number' ng-model="models.selected.id" class='form-control' />
-->
</div>
<div ng-if="models.selected.type == 'subProperty'">
<strong>Property: </strong>
<input type='text' ng-model="models.selected.subtype" class='form-control'
uib-typeahead="property for property in findProperties(models.selected.semantic.class) | filter:$viewValue"
ng-change="matchTypeOfProperty(models.selected.subtype, models.selected)"
typeahead-on-select="matchTypeOfProperty($item, models.selected)"
typeahead-min-length="0" />
<br>
<strong>Type: </strong>
<input type='text' ng-model="models.selected.name" class='form-control' />
</div>
<div ng-if="models.selected.semantic.class != null && models.selected.type == 'item'">
<!--
<strong>Object Type: </strong> {{models.selected.semantic.class}}
<br>
<strong>Object ID: </strong> {{models.selected.semantic.id}}
<br> -->
<strong>Property: </strong>
<input type='text' ng-model="models.selected.semantic.property" class='form-control' uib-typeahead="property for property in findProperties(models.selected.semantic.class) | filter:$viewValue" typeahead-min-length="0"/>
</div>
<div ng-if="models.selected != null && models.selected.type != 'subProperty' && models.selected.name != 'StaticText'">
<strong>Note: </strong>
<input type='text' ng-model="models.selected.note" class='form-control'/>
</div>
</uib-accordion-group>
</uib-accordion>
</div>
<!--Design view -->
<!--<div ng-if="sharedData.currentFunction == 5">-->
<div ng-repeat="(zone, list) in models.dropzones" class="col-md-3 template-zone" ng-if="sharedData.signed==false">
<div id="formExport" class="dropzone box box-grey centerarea">
<!-- The dropzone also uses the list template -->
<div id="drop-zone" ng-include="'list.html'"></div>
<div id='drag-here'>Drop above this line</div>
</div>
</div>
<div id="export" ng-repeat="(zone, list) in models.dropzones" class="col-md-6 template-zone">
<div id='form' class="box box-grey centerarea" vocab="http://schema.org/" prefix="ov: http://personal.schema.example/">
<!-- The dropzone also uses the list template -->
<div ng-include="'list2.html'" class='form-final' resource="currentForm" typeof="Thing">
</div>
</div>
</div>
<!--</div>-->
<!--Edit view-->
<script type="text/ng-template" id="list2.html">
<ul dnd-list="list">
<li ng-repeat="item in list" ng-include="item.type + '2.html'">
</li>
</ul>
</script>
<!-- This template is responsible for rendering a container element. It uses
the above list template to render each container column -->
<script type="text/ng-template" id="container2.html">
<div class='item-box' ng-class="{'item-selected' : item==models.selected}" ng-click='setSelectedItem(item, $event)'>
<h5 style="text-align: left">{{item.subtype}}</h5>
<span class="note-sec" ng-show="item.note != ''">{{item.note}}</span>
<div resource="{{item.subtype}}{{item.id}}" data-oid='{{item.id}}' typeof="{{schema.getType(item.name)}}">
<div ng-repeat="list in item.templates" ng-include="'list2.html'"></div>
</div>
</div>
</script>
<script type="text/ng-template" id="subProperty2.html">
<div class='item-box' ng-class="{'item-selected' : item==models.selected}" ng-click='setSelectedItem(item, $event)'>
<div property="{{item.subtype}}" typeof="{{schema.getType(item.name)}}" data-oid='{{item.id}}' data-temptype='{{item.semantic.class}}' data-sid='{{item.semantic.id}}'>
<div ng-repeat="list in item.templates" ng-include="'list2.html'"></div>
</div>
</div>
</script>
<!-- Template for a normal list item -->
<script type="text/ng-template" id="item2.html">
<div class='item-box' ng-class="{'item-selected' : item==models.selected}" ng-click='setSelectedItem(item, $event)'>
<div ng-if='item.noinput == null'>
<label class='label-view'>{{item.label}}</label>
<span ng-if="item.required == 'yes' " class='required-field'>*</span>
<br/>
<span class="note-attr" ng-show="item.note != ''">{{item.note}}</span>
<div class='control-block'>
<html-render item="item" val='component'></html-render>
</div>
</div>
<div ng-if='item.noinput != null'>
<h3 data-oid='{{item.id}}' ng-if='item.name == "Header"'>{{item.label}}</h3>
<h5 data-oid='{{item.id}}' ng-if='item.name == "Section"'>{{item.label}}</h5>
<span data-oid='{{item.id}}' ng-if='item.name == "StaticText"' class="static-text">{{item.label}}</span>
<br/>
<center ng-if='item.name == "Header"'><span class="note-attr" ng-show="item.note != ''">{{item.note}}</span></center>
<span ng-if='item.name == "Section"' class="note-attr" ng-show="item.note != ''">{{item.note}}</span>
</div>
<div>
</script>
</div>
</div>
</div>
</div>
<div id="SchemaCtr" ng-if="schema.json == null">
<div class="container">
<h3>Please select an OWL file</h3> File can be found at : <b>{{schema.path}}</b>
<input file1 type="file" on-finish='initialize()' data-file="schema.file" />
</div>
</div>
</body>
</html>
You can’t perform that action at this time.