Enable edit mode

We need to make changes to both csWeb and csMap in order to enable this functionality. Please follow these steps:

csWeb

1. Copy the folders FeatureTypes and PropertyTypes from the Development branch into your project. The folders are located at csWeb/csComp/directives.

csMap

app.ts

1. Add the following code to the IAppScope of app.ts

editMode: boolean;
enableEditMode;
disableEditMode;

2. Add the following code to the constructor of app.ts

$scope.editMode = false;

$scope.enableEditMode = () => {
    $scope.editMode = true;
    this.$messageBusService.publish("editmode", "enable");
}

$scope.disableEditMode = () => {
    $scope.editMode = false;
    this.$messageBusService.publish("editmode", "disable");
}

3. Add the following code to Angular's dependencies in app.ts

'angularSpectrumColorpicker'

index.html

1. Add the following code to index.html

<link href="bower_components/spectrum/spectrum.css" rel="stylesheet" />
<script src="bower_components/spectrum/spectrum.js"></script>
<script src="js/cs/angular-spectrum-colorpicker.min.js"></script>

2. Add the following code to index.html

<div id="scrollable-dropdown-menu" class="form-group has-feedback navbar-right">

<!-- Edit button -->
<button type="button" class="btn btn-primary" ng-click="enableEditMode()" ng-show="!editMode"><i class="fa fa-pencil"></i> Edit mode</button>
<button type="button" class="btn btn-danger" ng-click="disableEditMode()" ng-show="editMode"><i class="fa fa-times"></i> Edit mode</button>

<input data-ng-model="vm.searchText"

map.html

3. Replace the rightpanel html in map.html with the following code

<div class="rightpanel" style="background-color: transparent; ">
    <div id="rightpanelTabContainer" class="tabbable tabs-left" style="position:relative;height:100%;padding:0px">
        <!-- Nav tabs -->
        <ul id="rightpanelTabs" class="nav nav-tabs" style="margin-right:0px; margin-top:100px; display:inline-block">
            <li class="rightPanelTab rightPanelTabAnimated active" ng-show="featureSelected"><a href="#info" style="" data-toggle="tab"><span class="fa fa-info fa-lg"></span></a></li>
            <li class="rightPanelTab rightPanelTabAnimated" ng-show="featureSelected && editMode"><a href="#featuretype" style="" data-toggle="tab"><span class="fa fa-map-marker fa-lg"></span></a></li>
            <li class="rightPanelTab rightPanelTabAnimated" ng-show="featureSelected && editMode"><a href="#propertytype" style="" data-toggle="tab"><span class="fa fa-list fa-lg"></span></a></li>
        </ul>
        <div id="rightpanelTabPanes" class="tab-content" style="display: inline-block; height:100%; background-color: white;">
            <div class="tab-pane active" id="info">
                <featureprops class="rightpanel-content"></featureprops>
            </div>

            <div class="tab-pane" id="featuretype">
                <featuretypes class="rightpanel-content"></featuretypes>
            </div>

            <div class="tab-pane" id="propertytype">
                <propertytypes class="rightpanel-content"></propertytypes>
            </div>
        </div>
    </div>
</div>

bower.json

1. Add the following dependency to bower.json and run a bower install

"spectrum": "~1.5.2"

Copy files from the Development-editor branch

1. css/spectrum.css
2. images/error.png
3. js/cs/angular-spectrum-colorpicker.min.js

Don't forget to recompile app.ts and csWeb