Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Enable connection loading, tidy up switching between mappings, add a …
…reload button for when the user enters/changes a class name
  • Loading branch information
gashcrumb committed Oct 11, 2013
1 parent abdaf01 commit 9fdf120
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 60 deletions.
94 changes: 53 additions & 41 deletions hawtio-web/src/main/webapp/app/wiki/html/dozerMappings.html
Expand Up @@ -58,6 +58,59 @@
</div>
</div>

<div class="row-fluid">
<!-- "From" class header -->
<div class="span5">
<div class="row-fluid">
<input type="text" class="span12"
ng-model="aName"
typeahead="title for title in classNames($viewValue) | filter:$viewValue"
typeahead-editable="true" title="Java classname for class 'A'"
placeholder="Java classname for class 'A'">
</div>
<div class="row-fluid" ng-show="selectedMapping.class_a.error">
<div class="alert alert-error">
<div class="expandable closed">
<div class="title">
<i class="expandable-indicator"></i> Failed to load properties for {{selectedMapping.class_a.value}} due to {{selectedMapping.class_a.error.type}}
</div>
<div class="expandable-body well">
<div ng-bind-html-unsafe="formatStackTrace(selectedMapping.class_a.error.stackTrace)"></div>
</div>
</div>
</div>
</div>
</div>

<div class="span2 centered">
<button class="btn" ng-click="doReload()" ng-disabled="disableReload()"><i class="icon-refresh"></i> Reload</button>
</div>

<!-- "To" class header -->
<div class="span5">
<div class="row-fluid">
<input type="text" class="span12"
ng-model="bName"
typeahead="title for title in classNames($viewValue) | filter:$viewValue"
typeahead-editable="true" title="Java classname for class 'B'"
placeholder="Java classname for class 'B'">
</div>
<div class="row-fluid" ng-show="selectedMapping.class_b.error">
<div class="alert alert-error">
<div class="expandable closed">
<div class="title">
<i class="expandable-indicator"></i> Failed to load properties for {{selectedMapping.class_b.value}} due to {{selectedMapping.class_b.error.type}}
</div>
<div class="expandable-body well">
<div ng-bind-html-unsafe="formatStackTrace(selectedMapping.class_b.error.stackTrace)"></div>
</div>
</div>
</div>
</div>
</div>

</div>

<script type="text/ng-template" id="property.html">
<span class="jsplumb-node dozer-mapping-node"
id="{{field.id}}"
Expand All @@ -77,26 +130,6 @@

<!-- "from" class -->
<div class="span6">
<div class="row-fluid">
<input type="text" class="span12"
ng-model="selectedMapping.class_a.value"
typeahead="title for title in classNames($viewValue) | filter:$viewValue"
typeahead-editable="true" title="Java classname for class 'A'"
placeholder="Java classname for class 'A'">
</div>
<div class="row-fluid" ng-show="selectedMapping.class_a.error">
<div class="alert alert-error">
<div class="expandable closed">
<div class="title">
<i class="expandable-indicator"></i> Failed to load properties for {{selectedMapping.class_a.value}} due to {{selectedMapping.class_a.error.type}}
</div>
<div class="expandable-body well">
<div ng-bind-html-unsafe="formatStackTrace(selectedMapping.class_a.error.stackTrace)"></div>
</div>
</div>
</div>
</div>

<div class="row-fluid" ng-hide="selectedMapping.class_a.error">
<ul class="dozer-mappings from">
<li ng-repeat="field in selectedMapping.class_a.properties"
Expand All @@ -108,33 +141,12 @@

<!-- "to" class -->
<div class="span6">
<div class="row-fluid">
<input type="text" class="span12"
ng-model="selectedMapping.class_b.value"
typeahead="title for title in classNames($viewValue) | filter:$viewValue"
typeahead-editable="true" title="Java classname for class 'B'"
placeholder="Java classname for class 'B'">
</div>
<div class="row-fluid" ng-show="selectedMapping.class_b.error">
<div class="alert alert-error">
<div class="expandable closed">
<div class="title">
<i class="expandable-indicator"></i> Failed to load properties for {{selectedMapping.class_b.value}} due to {{selectedMapping.class_b.error.type}}
</div>
<div class="expandable-body well">
<div ng-bind-html-unsafe="formatStackTrace(selectedMapping.class_b.error.stackTrace)"></div>
</div>
</div>
</div>
</div>

<div class="row-fluid" ng-hide="selectedMapping.class_b.error">
<ul class="dozer-mappings to">
<li ng-repeat="field in selectedMapping.class_b.properties"
ng-include="'property.html'"></li>
</ul>
</div>

</div>
</div>
</script>
Expand Down
88 changes: 69 additions & 19 deletions hawtio-web/src/main/webapp/app/wiki/js/dozerMappings.ts
Expand Up @@ -14,6 +14,9 @@ module Wiki {
$scope.mappings = [];
$scope.schemas = [];

$scope.aName = '';
$scope.bName = '';

$scope.connectorStyle = [ "Bezier" ];

$scope.main = "";
Expand Down Expand Up @@ -47,23 +50,40 @@ module Wiki {
setTimeout(updateView, 50);
});

$scope.triggerRefresh = (timeout = 50) => {
$scope.main = "";
setTimeout(() => {
$scope.main = $templateCache.get("pageTemplate.html");
Core.$apply($scope);
}, timeout);
};

$scope.disableReload = () => {
return $scope.selectedMapping.class_a.value === $scope.aName && $scope.selectedMapping.class_b.value === $scope.bName;
}

$scope.doReload = () => {
$scope.selectedMapping.class_a.value = $scope.aName;
$scope.selectedMapping.class_b.value = $scope.bName;
$scope.triggerRefresh(150);
};

$scope.$watch('selectedMapping', (newValue, oldValue) => {
if (newValue !== oldValue) {
$scope.main = "";
setTimeout(() => {
$scope.main = $templateCache.get("pageTemplate.html");
}, 50);
$scope.aName = newValue.class_a.value;
$scope.bName = newValue.class_b.value;
$scope.triggerRefresh();
}
});

$scope.$watch('selectedMapping.class_a.value', (newValue, oldValue) => {
if (newValue !== oldValue) {
if (newValue !== oldValue && newValue !== '') {
$scope.fetchProperties(newValue, $scope.selectedMapping.class_a, 'Right');
}
});

$scope.$watch('selectedMapping.class_b.value', (newValue, oldValue) => {
if (newValue !== oldValue) {
if (newValue !== oldValue && newValue !== '') {
$scope.fetchProperties(newValue, $scope.selectedMapping.class_b, 'Left');
}
});
Expand Down Expand Up @@ -94,7 +114,6 @@ module Wiki {
$scope.fetchProperties(property.typeName, property, anchor);
}
});
console.log("got: ", response);
Core.$apply($scope);
},
error: (response) => {
Expand Down Expand Up @@ -123,15 +142,51 @@ module Wiki {
};


function extractProperty(clazz, prop) {
return clazz.properties.find((property) => {
return property.path.endsWith('/' + prop);
});
}

// The jsPlumb directive will call this after it's done it's thing...
function addConnectionClickHandler(connection, jsplumb) {
connection.bind('click', (connection) => {
jsplumb.detach(connection);
});
}

$scope.jsPlumbCallback = (jsplumb, nodes, nodesById, connections) => {

// Set up any connections loaded from the XML
angular.forEach($scope.selectedMapping.fields, (field) => {
var a_property = extractProperty($scope.selectedMapping.class_a, field.a.value);
var b_property = extractProperty($scope.selectedMapping.class_b, field.b.value);

if (a_property && b_property) {
var a_node = nodesById[a_property.id];
var b_node = nodesById[b_property.id];

var connection = $scope.jsPlumb.connect({
source: a_node.el,
target: b_node.el
}, {
connector: $scope.connectorStyle,
maxConnections: -1
});

//Ensure loaded connections can also be removed
addConnectionClickHandler(connection, jsplumb);
a_node.connections.push(connection);
b_node.connections.push(connection);
}
});


// Handle new connection events...
jsplumb.bind('connection', (info) => {
console.log("connection event: ", info);

info.connection.bind('click', (connection) => {
jsplumb.detach(connection);
});
// Add a handler so we can click on a connection to make it go away
addConnectionClickHandler(info.connection, jsplumb);

var newMapping = $scope.getSourceAndTarget(info);

Expand All @@ -141,19 +196,14 @@ module Wiki {
Core.$apply($scope);
});

// Handle connection detach events...
jsplumb.bind('connectionDetached', (info) => {
console.log("connectionDetached event: ", info);
var toDetach = $scope.getSourceAndTarget(info);
var field = new Dozer.Field(new Dozer.FieldDefinition(toDetach.from), new Dozer.FieldDefinition(toDetach.to));
console.log("Mappings: ", $scope.selectedMapping.fields.remove(field));
$scope.selectedMapping.fields.remove(field);
$scope.modified = true;
Core.$apply($scope);
});

console.log("nodes: ", nodes);
console.log("Selected Mapping: ", $scope.selectedMapping);


console.log("jsplumb callback called...");
};


Expand Down

0 comments on commit 9fdf120

Please sign in to comment.