feat(draw-route): implement data classifications and security controls

Stencil Elements now support the attributes:
- dataClassifications
- securityControls

See #40

app/scripts/controllers/draw.coffee

@@ -67,6 +67,19 @@ angular.module('seaspongeApp')
         "Other"
     ]
 
+    $scope.dataClassificationOptions = [
+        "public"
+        "internal"
+        "restricted"
+        "secret"
+        ]
+
+    $scope.securityControlOptions = [
+        "confidentiality"
+        "integrity"
+        "availability"
+    ]
+
     # Get container
     $scope.container = $('.diagram-contents')
 

app/scripts/stencils/base.coffee

@@ -22,12 +22,16 @@ angular.module('seaspongeApp')
       authenticationScheme: null
       authorizationScheme: null
       communicationProtocol: null
+      dataClassifications: null
+      securityControls: null
       notes: "There is no available notes."
 
       constructor: () ->
         # Instance variables
         @uuid = jsPlumbUtil.uuid()
         @tags = []
+        @dataClassifications = []
+        @securityControls = []
         @location = {
             left: 0
             top: 0
@@ -48,7 +52,7 @@ angular.module('seaspongeApp')
         # Create new element
         @$element = $element = $('<div />', {
           id: @uuid
-        }).append($('<p/>').text("#{@constructor.title} <#{@constructor.category}>"))
+        } ).append($('<p/>').text("#{@constructor.title} <#{@constructor.category}>"))
         # Data
         @$element.data('stencil', @)
         # Add class names
@@ -64,7 +68,7 @@ angular.module('seaspongeApp')
         # Check if $element has parent
         if @$element.parent().length is 0
             # Add to container
-            $container.append(@$element);
+            $container.append(@$element) ;
         # Clear previous events
         @$element.unbind('click')
         @$element.unbind('mouseup')
@@ -131,6 +135,32 @@ angular.module('seaspongeApp')
         @$element.css(position)
         return @getPosition()
 
+      addDataClassification: ->
+          @dataClassifications.push({
+            "title": "Untitled Data Classification"
+            "type": "public" # Default
+          } )
+          return @
+
+      removeDataClassification: (dataClassification) ->
+          index = @dataClassifications.indexOf(dataClassification)
+          if index > - 1
+              @dataClassifications.splice(index, 1)
+          return @dataClassifications
+
+      addSecurityControl: ->
+          @securityControls.push({
+            "title": "Untitled Security Control"
+            "type": "confidentiality" # Default
+          } )
+          return @
+
+      removeSecurityControl: (securityControl) ->
+          index = @securityControls.indexOf(securityControl)
+          if index > - 1
+              @securityControls.splice(index, 1)
+          return @securityControls
+
       serialize: =>
         serialized = {
           id: @uuid
@@ -149,6 +179,8 @@ angular.module('seaspongeApp')
             authenticationScheme: @authenticationScheme
             authorizationScheme: @authorizationScheme
             communicationProtocol: @communicationProtocol
+            dataClassifications: @dataClassifications
+            securityControls: @securityControls
           }
         }
         return serialized
@@ -156,7 +188,7 @@ angular.module('seaspongeApp')
       deserialize: (serialized) =>
         # console.log('serialized element', serialized)
         attr = serialized.attributes
-        
+
         # Local
         @uuid = serialized.id
         @tags = serialized.tags
@@ -166,7 +198,9 @@ angular.module('seaspongeApp')
         @authenticationScheme = attr.authenticationScheme
         @authorizationScheme = attr.authorizationScheme
         @communicationProtocol = attr.communicationProtocol
-        @notes =  serialized.notes
+        @dataClassifications = attr.dataClassifications
+        @securityControls = attr.securityControls
+        @notes = serialized.notes
 
         # Update
         @$element.attr('id', @uuid)
@@ -219,7 +253,7 @@ angular.module('seaspongeApp')
           fillStyle: "#7AB02C"
           radius: 11
         hoverPaintStyle: @endpointHoverStyle
-        maxConnections: -1
+        maxConnections: - 1
         dropOptions:
           hoverClass: "hover"
           activeClass: "active"
@@ -229,7 +263,7 @@ angular.module('seaspongeApp')
           {
             location: [
               0.5
-              -0.5
+               - 0.5
             ]
             # label: "Drop"
             cssClass: "endpointTargetLabel"
@@ -254,4 +288,4 @@ angular.module('seaspongeApp')
       endpointHoverStyle:
         fillStyle: "#216477"
         strokeStyle: "#216477"
-)
+)

app/views/draw.html

@@ -352,6 +352,78 @@
               ng-model="selectedStencil.notes">
             </div>
 
+            <div class="form-group">
+                <label for="properties-dataClassifications" class="">Data Classifications</label>
+            </div>
+            <div class="well">
+                <div class="form-group"
+                ng-repeat="dataClassification in selectedStencil.dataClassifications"
+                >
+                    <div class="form-group">
+                        <label for="properties-dataClassification-title" class="">Title</label>
+                        <input type="text"
+                        class="form-control" id="properties-dataClassification-title" placeholder="Value"
+                        ng-model="dataClassification.title">
+                    </div>
+                    <div class="form-group">
+                        <label for="properties-dataClassification-type" class="">Type</label>
+                        <select class="form-control" id="properties-dataClassification-type"
+                        ng-model="dataClassification.type"
+                        ng-options="dataClassificationOption for dataClassificationOption in dataClassificationOptions">
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <button class="form-control btn btn-danger"
+                        ng-click="selectedStencil.removeDataClassification(dataClassification)"
+                        >
+                            <span class="glyphicon glyphicon-trash"></span>
+                        </button>
+                    </div>
+                    <hr/>
+                </div>
+                <button class="btn btn-primary form-control"
+                ng-click="selectedStencil.addDataClassification()">
+                    Add Data Classification
+                </button>
+            </div>
+
+            <div class="form-group">
+                <label for="properties-securityControlOptions" class="">Security Controls</label>
+            </div>
+            <div class="well">
+                <div
+                class="form-group"
+                ng-repeat="securityControl in selectedStencil.securityControls"
+                >
+                    <div class="form-group">
+                        <label for="properties-securityControl-title" class="">Title</label>
+                        <input type="text"
+                        class="form-control" id="properties-securityControl-title" placeholder="Value"
+                        ng-model="securityControl.title">
+                    </div>
+                    <div class="form-group">
+                        <label for="properties-securityControl-type" class="">Type</label>
+                        <select class="form-control" id="properties-securityControl-type"
+                        ng-model="securityControl.type"
+                        ng-options="securityControlOption for securityControlOption in securityControlOptions">
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <button class="form-control btn btn-danger"
+                        ng-click="selectedStencil.removeSecurityControl(securityControl)"
+                        >
+                            <span class="glyphicon glyphicon-trash"></span>
+                        </button>
+                    </div>
+                    <hr/>
+                </div>
+                <button class="btn btn-primary form-control"
+                ng-click="selectedStencil.addSecurityControl()">
+                    Add Security Control
+                </button>
+            </div>
+
+
           </form>
 
           <div class="lead" ng-hide="selectedStencil">