Update scenario with text editor in view

assets/js/app/scenario/scenario.controller.js

@@ -14,9 +14,9 @@
         .module('gladys')
         .controller('scenarioCtrl', scenarioCtrl);
 
-    scenarioCtrl.$inject = ['scenarioService', 'categoryService', 'eventTypeService', 'stateTypeService', 'launcherService',  'stateService', 'actionTypeService', 'actionService'];
+    scenarioCtrl.$inject = ['scenarioService', 'categoryService', 'eventTypeService', 'stateTypeService', 'launcherService',  'stateService', 'actionTypeService', 'actionService', 'notificationService', '$scope'];
 
-    function scenarioCtrl(scenarioService, categoryService, eventTypeService, stateTypeService, launcherService, stateService, actionTypeService, actionService) {
+    function scenarioCtrl(scenarioService, categoryService, eventTypeService, stateTypeService, launcherService, stateService, actionTypeService, actionService, notificationService, $scope) {
         /* jshint validthis: true */
         var vm = this;
 
@@ -32,6 +32,9 @@
         vm.removeAction = removeAction;
         vm.initialiseVar = initialiseVar;
         vm.nextStep = nextStep;
+        vm.editScenario = editScenario;
+        vm.updateScenario = updateScenario;
+        vm.startCreateScenarioTextModal = startCreateScenarioTextModal;
 
         vm.actionTypes = [];
         vm.launchers = [];
@@ -56,7 +59,19 @@
             vm.step = 1;
         }
 
-
+        var editor;
+
+        $scope.$watch('vm.currentScenario', function(newValue, oldValue){
+            if(editor) {
+                editor.setValue(vm.currentScenario.yaml);
+            }
+        });
+
+        $('#modalUpdateScenario').on('shown.bs.modal', function () {
+            if(!editor) {
+                activateEditor();
+            }
+        });
 
         function getLaunchers(){
            return launcherService.get()
@@ -200,6 +215,81 @@
                   vm.launchers.splice(index, 1);
               });
         }
+
+        function activateEditor(){
+            editor = ace.edit("scenario-editor");
+            ace.config.set("basePath", "/js/dependencies/ace");
+			editor.setTheme("ace/theme/xcode");
+			editor.getSession().setMode("ace/mode/yaml");
+			editor.setOptions({
+				minLines:5,
+				maxLines: 25
+            });
+        } 
+
+
+        function startCreateScenarioTextModal(){
+            vm.currentScenario = {
+                yaml: jsyaml.safeDump({
+                    trigger: {
+                        title: '',
+                        condition_template: 'true',
+                        active: 1,
+                        code: '',
+                        user: ''
+                    }, 
+                    conditions: [], 
+                    actions: []
+                })
+            };
+            $('#modalUpdateScenario').modal('show');
+        }
+
+
+        function editScenario(index, id){
+
+            // if editor already exist, clean data
+            if(editor) {
+                editor.setValue('');
+            }
+
+            scenarioService.exportScenario(id)
+                .then((data) => {
+                    vm.currentScenario = {
+                        yaml: jsyaml.safeDump(data.data),
+                        index: index,
+                        id: id
+                    };
+                    if(editor) {
+                        editor.setValue('');
+                    }
+                    $('#modalUpdateScenario').modal('show');
+                })
+                .catch((err) => notificationService.errorNotificationTranslated('DEFAULT.ERROR'));
+        }
+
+        function updateScenario(currentScenario) {
+
+            // if we are updating an existing scenario
+            if(currentScenario.id) {
+                scenarioService.updateScenario(currentScenario.id, jsyaml.safeLoad(editor.getValue()))
+                    .then((data) => {
+                        vm.launchers[vm.currentScenario.index] = data.data.trigger;
+                        $('#modalUpdateScenario').modal('hide');
+                    })
+                    .catch(() => notificationService.errorNotificationTranslated('SCENARIO.UPDATE_ERROR'));
+            } 
+
+            // creating a new scenario
+            else {
+                scenarioService.importScenario(jsyaml.safeLoad(editor.getValue()))
+                    .then((data) => {
+                        vm.launchers.push(data.data.trigger);
+                        $('#modalUpdateScenario').modal('hide');
+                    })
+                    .catch(() => notificationService.errorNotificationTranslated('SCENARIO.CREATE_ERROR'));
+            }
+        }
 
 
        function insertAll(){

assets/js/app/scenario/scenario.service.js

@@ -20,14 +20,29 @@
 
         var service = {           
            getOptions: getOptions,
-           generateTemplate: generateTemplate
+           generateTemplate: generateTemplate,
+           exportScenario: exportScenario,
+           importScenario: importScenario,
+           updateScenario: updateScenario
         };
 
         return service;
 
         function getOptions(path){
             return $http({method: 'GET', url: path});
         }
+
+        function exportScenario(id){
+            return $http({method: 'POST', url: '/scenario/' + id + '/export'});
+        }
+
+        function importScenario(data){
+            return $http({method: 'POST', url: '/scenario', data: data});
+        }
+
+        function updateScenario(id, data){
+            return $http({method: 'PATCH', url: '/scenario/' + id, data: data});
+        }
 
         // will generate a templateString like
         // "devicetype == 1 && value > 12"

assets/js/app/translate/translate.config.js

@@ -67,6 +67,10 @@ var translationsEN = {
     VALIDATION: {
         ERROR: 'Some fields are invalid !'
     },
+    SCENARIO: {
+        CREATE_ERROR: 'Cannot create scenario, the scenario may not be valid.',
+        UPDATE_ERROR: 'Cannot update scenario, the scenario may not be valid.'
+    },
     DEFAULT: {
         ERROR: 'Something bad happened :/ Check Gladys logs for more informations.'
     }
@@ -141,6 +145,10 @@ var translationsFR = {
     VALIDATION: {
         ERROR: 'Certains champs sont invalides !'
     },
+    SCENARIO: {
+        CREATE_ERROR: 'Impossible de créer le scénario, le scénario est peut-être invalide.',
+        UPDATE_ERROR: 'Impossible de mettre à jour le scénario, le scénario est peut-être invalide.'
+    },
     DEFAULT: {
         ERROR: 'Une erreur inconnue est arrivée :/ Regardez les logs Gladys pour plus d\'informations.'
     }

config/locales/en.json

@@ -157,6 +157,9 @@
   "scenario-delete": "Delete",
   "scenario-conditions-explained": "You can add as much conditions as you want, your actions will be executed only if all conditions are fulfilled.",
   "scenario-actions-explained": "You can add as much actions as you want. Your actions will be executed in parallel. If you want more control, don't hesitate to create a script !",
+  "scenario-edit-title": "Edit scenario",
+  "scenario-edit-button": "Save",
+  "scenario-new-text-editor": "New (Text Editor)",
   "area-box-title": "Zones",
   "area-box-description": "Zones are defined places. When you enter into a specific zone, it creates an event in Gladys. It allows you to create scenarios like \"When I'm back at home\" => Do a specific action.",
   "area-name": "Name",

config/locales/fr.json

@@ -322,6 +322,9 @@
   "scenario-delete": "Supprimer",
   "scenario-conditions-explained": "Vous pouvez ajouter autant de conditions à votre scénario que vous le souhaitez. Les actions ne seront exécutées que si toutes les conditions sont réunies.",
   "scenario-actions-explained": "Vous pouvez ajouter autant d'actions que vous le souhaitez. Ces actions seront exécutées en parallèle pour être le plus performant possible, si vous souhaitez contrôler plus finement votre suite d'actions, vous pouvez faire un script !",
+  "scenario-edit-title": "Editer scénario",
+  "scenario-edit-button": "Enregistrer",
+  "scenario-new-text-editor": "Nouveau (Editeur de texte)",
   "area-box-title": "Zones",
   "area-box-description": "Les zones sont des lieux qui déclenchent des évènements lorsque vous rentrez dans leur rayon. Pratique pour faire des scénarios \"Quand j'arrive vers chez moi\" => Faire une action.",
   "area-name": "Nom",

tasks/pipeline.js

@@ -78,6 +78,8 @@ var jsFilesToInject = [
   'js/dependencies/bootstrap-slider.min.js',
 
   'js/dependencies/leaflet.js',
+
+  'js/dependencies/js-yaml.min.js',
 
 
 

views/installation/index.ejs

@@ -212,6 +212,7 @@
     <script src="/js/dependencies/datepicker/bootstrap-datepicker.js"></script>
     <script src="/js/dependencies/bootstrap-slider.min.js"></script>
     <script src="/js/dependencies/leaflet.js"></script>
+    <script src="/js/dependencies/js-yaml.min.js"></script>
     <script src="/js/ng-device-detector/ng-device-detector.min.js"></script>
     <script src="/js/ng-infinite-scroll/ng-infinite-scroll.js"></script>
     <script src="/js/angular-moment/angular-moment.min.js"></script>

views/layout.ejs

@@ -239,6 +239,7 @@
     <script src="/js/dependencies/datepicker/bootstrap-datepicker.js"></script>
     <script src="/js/dependencies/bootstrap-slider.min.js"></script>
     <script src="/js/dependencies/leaflet.js"></script>
+    <script src="/js/dependencies/js-yaml.min.js"></script>
     <script src="/js/ng-device-detector/ng-device-detector.min.js"></script>
     <script src="/js/ng-infinite-scroll/ng-infinite-scroll.js"></script>
     <script src="/js/angular-moment/angular-moment.min.js"></script>

views/scenario/edit-scenario.ejs

@@ -0,0 +1,23 @@
+<!-- MODAL -->
+<!-- Large modal -->
+<div id="modalUpdateScenario" class="modal fade modal-edit-scenario" tabindex="-1" role="dialog" aria-labelledby="modal-edit-scenario" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+        <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+                <h4 class="modal-title" id="myLargeModalLabel"><%= __('scenario-edit-title') %></h4>
+            </div>
+            <div class="modal-body">
+                <textarea id="scenario-editor" class="form-control" ng-model="vm.currentScenario.yaml"></textarea>
+                <div class="row">
+                    <div class="col-md-12">
+                    <div class="pull-right">
+                        <button class="btn btn-success" ng-click="vm.updateScenario(vm.currentScenario);"><%= __('scenario-edit-button') %></button>
+                    </div>
+                    </div>
+                </div>
+            </div>
+    </div>
+</div>
+</div>
+<!-- END OF MODAL -->

views/scenario/index.ejs

@@ -40,6 +40,7 @@
          <!-- end of nav-tabs-custom -->
     </div>
          <%- partial ('./modal.ejs') %>
+         <%- partial ('./edit-scenario.ejs') %>
     </section><!-- /.content -->
 </aside><!-- /.right-side -->
 

views/scenario/maintable.ejs

@@ -6,7 +6,8 @@
             <th><%= __('scenario-table-title') %></th>
             <th><%= __('scenario-table-event') %></th>
             <th><%= __('scenario-table-template') %></th>
-            <th><%= __('Action') %></th>
+            <th><%= __('Edit') %></th>
+            <th><%= __('Delete') %></th>
         </tr>
     </thead>
     <tbody>
@@ -20,13 +21,18 @@
                {{launcher.name}}                 
             </td>
             <td>{{launcher.condition_template}}</td>
+            <td><button ng-click="vm.editScenario($index, launcher.id)" class= "btn btn-info btn-sm"><%= __('Edit') %></button></td>
             <td><button ng-click="vm.deleteLauncher($index, launcher.id)" class= "btn btn-danger btn-sm"><%= __('Delete') %></button></td>
         </tr>
         <!-- END OF ROW -->
 
         <tr>
 
-            <td><button class="btn btn-success btn-sm" data-toggle="modal" data-target=".bs-example-modal-lg" ><%= __('New') %></button></td>
+            <td>
+                <button class="btn btn-success btn-sm" data-toggle="modal" data-target=".bs-example-modal-lg" ><%= __('New') %></button>
+                <button class="btn btn-success btn-sm" ng-click="vm.startCreateScenarioTextModal()" ><%= __('scenario-new-text-editor') %></button>
+
+            </td>
         </tr>
     </tbody>