Skip to content
This repository has been archived by the owner on Apr 17, 2018. It is now read-only.

Commit

Permalink
Merge pull request #37 from mozilla/model-editing
Browse files Browse the repository at this point in the history 
improve(model-editing): add validations and editing for Model and Diagrams
  • Loading branch information
@Glavin001
Glavin001 committed Dec 19, 2014
2 parents d70b824 + 7d23c78 commit 3d2065e
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 30 deletions.
21 changes: 16 additions & 5 deletions app/scripts/controllers/draw.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
angular.module('seaspongeApp')
.controller 'DrawController', ['$scope', 'Stencils', 'model', ($scope, Stencils, model) ->

console.log('model', model)
$scope.model = model
$scope.stencils = Stencils
$scope.stencilQuery = ''
Expand All @@ -25,8 +24,11 @@ angular.module('seaspongeApp')
else
values

$scope.semverRegex = new RegExp("\\bv?(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\\.[\\da-z\\-]+)*)?\\b")

$scope.menu = {
infoOpen: false
modelOpen: false
diagramOpen: false
stencilsOpen: true
threatsOpen: false
propertiesOpen: false
Expand Down Expand Up @@ -196,12 +198,18 @@ angular.module('seaspongeApp')
# Select new diagram
diagram.selected = true
$scope.selectedDiagram = diagram
# console.log(diagram.serialize())
# De-select Stencil
$scope.selectedStencil = false
# Open Diagram information menu
$scope.menu.diagramOpen = true
# Close Model information menu
$scope.menu.modelOpen = false

$scope.openModelInfo = ->
$scope.menu.infoOpen = true
# Open Model information menu
$scope.menu.modelOpen = true
# Close Diagram information menu
$scope.menu.diagramOpen = false

$scope.exportDiagram = ->
el = $('.drawing-panel').get(0)
Expand Down Expand Up @@ -232,14 +240,15 @@ angular.module('seaspongeApp')
)
})

# Listen for Stencil/Element click events
$scope.container.on "stencil-instance-click", (e1, inst, e2) ->
# console.log "stencil-instance-click", arguments
$scope.$apply ->
# Remove selected class from all selected
$('.selected-stencil').removeClass('selected-stencil')
# Check if same or different stencil instance
if $scope.selectedStencil is inst
# Same instance
# Same instance therefore De-select
# Change selected in $scope
$scope.selectedStencil = false
$scope.menu.propertiesOpen = false
Expand All @@ -250,6 +259,8 @@ angular.module('seaspongeApp')
# Change selected in $scope
$scope.selectedStencil = inst
$scope.menu.stencilsOpen = false
$scope.menu.modelOpen = false
$scope.menu.diagramOpen = false
$scope.menu.propertiesOpen = true

# Create Diagram in Model if non exists already
Expand Down
142 changes: 117 additions & 25 deletions app/views/draw.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,19 @@
Load
</a>
<button type="button" class="btn btn-default" ng-click="saveModel()">
<i class="glyphicon glyphicon-floppy-save"></i> Save
<i class="glyphicon glyphicon-floppy-save"></i>
Save
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-zoom-in"></i> Zoom-In</button>
<i class="glyphicon glyphicon-zoom-in"></i>
Zoom-In
</button>
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-zoom-out"></i> Zoom-Out</button>
<i class="glyphicon glyphicon-zoom-out"></i>
Zoom-Out
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-link" ng-click="openModelInfo()">
Expand All @@ -47,39 +52,139 @@
<accordion close-others="false">

<!-- Model Info -->
<accordion-group is-open="menu.infoOpen">
<accordion-group is-open="menu.modelOpen">

<accordion-heading>
Model Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.threatsOpen, 'glyphicon-chevron-right': !menu.threatsOpen}"></i>
Model Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.modelOpen, 'glyphicon-chevron-right': !menu.modelOpen}"></i>
</accordion-heading>

<form class="form" role="form">
<form class="form" role="form" name="modelForm">

<div class="form-group">
<label for="model-title" class="">Model Title</label>
<input type="text"
class="form-control" id="model-title" placeholder="Model Title"
ng-model="model.title">
class="form-control" placeholder="Model Title"
id="model-title" name="modelTitle"
ng-model="model.title" required ng-required=true
ng-minlength=2>

<span class="text-danger"
ng-show="modelForm.modelTitle.$error.required">
Model Title is required!
</span>
<span class="text-danger"
ng-show="modelForm.modelTitle.$error.minlength">
Too short!
</span>
</div>

<div class="form-group">
<label for="model-version" class="">Version</label>
<input type="text"
class="form-control" id="model-version" placeholder="Model Version"
ng-model="model.version">
<input type="text" class="form-control"
placeholder="Model Version"
id="model-version" name="modelVersion"
ng-model="model.version"
ng-required=true
ng-pattern=semverRegex>

<span class="text-danger"
ng-show="modelForm.modelVersion.$error.required">
Model Version is required!
</span>
<span class="text-danger"
ng-show="modelForm.modelVersion.$error.pattern">
Please follow <a href="http://semver.org/" target="_blank"
class=" btn-link">semver</a>.
</span>
</div>

<div class="form-group">
<label for="model-authors" class="">Authors</label>
<input type="text"
class="form-control" id="model-authors" placeholder="Model Authors"
class="form-control" placeholder="Model Authors"
id="model-authors" name="modelAuthors"
ng-required=true
ng-minlength=2
ng-model="model.authors">

<span class="text-danger"
ng-show="modelForm.modelAuthors.$error.required">
Model Authors is required!
</span>
<span class="text-danger"
ng-show="modelForm.modelAuthors.$error.minlength">
Too short!
</span>

</div>

</form>

</accordion-group>

<!-- Diagram Information -->
<accordion-group is-open="menu.diagramOpen">

<accordion-heading>
Diagram Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.diagramOpen, 'glyphicon-chevron-right': !menu.diagramOpen}"></i>
</accordion-heading>

<div class="lead" ng-show="!selectedDiagram">
Select a Diagram to view its information
</div>

<form class="form" role="form"
name="diagramForm" ng-show="selectedDiagram">

<div class="form-group">
<label for="diagram-title" class="">Diagram Title</label>
<input type="text"
class="form-control" placeholder="Diagram Title"
id="diagram-title" name="diagramTitle"
ng-model="selectedDiagram.title" required ng-required=true
ng-minlength=2>

<span class="text-danger"
ng-show="diagramForm.diagramTitle.$error.required">
Diagram Title is required!
</span>
<span class="text-danger"
ng-show="diagramForm.diagramTitle.$error.minlength">
Too short!
</span>
</div>

<div class="form-group">
<label class=""># of Elements</label>
<span>{{selectedDiagram.elements.length}}</span>
</div>

<div class="form-group">
<label class=""># of Flows</label>
<span>{{selectedDiagram.flows.length}}</span>
</div>

<div class="form-group">
<label class=""># of Boundaries</label>
<span>{{selectedDiagram.boundaries.length}}</span>
</div>

</form>

</accordion-group>

<!-- Threats -->
<accordion-group is-open="menu.threatsOpen">

<accordion-heading>
Threat Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.threatsOpen, 'glyphicon-chevron-right': !menu.threatsOpen}"></i>
</accordion-heading>

<div class="lead">
Threat Information coming soon!
</div>

</accordion-group>

<!-- Stencils -->
<accordion-group class="stencils-container" is-open="menu.stencilsOpen">
Expand All @@ -106,19 +211,6 @@
</div>
</accordion-group>

<!-- Threats -->
<accordion-group is-open="menu.threatsOpen">

<accordion-heading>
Threat Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.threatsOpen, 'glyphicon-chevron-right': !menu.threatsOpen}"></i>
</accordion-heading>

<div class="lead">
Threat Information coming soon!
</div>

</accordion-group>

<!-- Selected Element Properties -->
<accordion-group is-open="menu.propertiesOpen">

Expand Down

0 comments on commit 3d2065e

Please sign in to comment.