Add schema of demo examples

When selecting the example and if there is a schema devapp will show a button
called "Schema".

When Click in the schema button it will show a dialog with the image.

Design were not applied in this patch

Signed-off-by: Bruno Bottazzini <bruno.bottazzini@intel.com>

client/css/app.css

@@ -184,6 +184,17 @@ iframe{
     font-size: 14px !important;
 }
 
+.button_schema_on {
+    background-color: white;
+    background-repeat: no-repeat;
+    width:61px;
+    height:45px;
+    border: 0;
+    position: relative;
+    bottom: 0;
+    outline: 0;
+}
+
 .button_code_on {
     background:url(../imgs/code_on.png);
     background-repeat: no-repeat;

client/js/controllers/editor.js

@@ -114,7 +114,9 @@
                                 aceConfig.set("modePath", "js/ace/");
                                 editor.getSession().setMode("ace/mode/fbp");
                                 foldHeaderCommentaries();
+                                showSchema();
                             } else {
+                                $scope.schemaOn = false;
                                 $scope.fbpType = false;
                             }
 
@@ -166,6 +168,29 @@
                     editor.session.selection.clearSelection();
                 }
 
+                function showSchema() {
+                    if ($scope.folder === "demo") {
+                        var name = $scope.fileName.split(".fbp")[0].split(" ")[1];
+                        var schema_name = "schema-" + name + ".jpg";
+                        $scope.schema = "imgs/schema/" + schema_name;
+                        hasImage($scope.schema,
+                            function () {
+                                // This function will run when the image is found
+                                $scope.schemaOn = true;
+                            }, function () {
+                                // This function will run when the image is not found
+                                $scope.schemaOn = false;
+                            });
+                    }
+                }
+
+                function hasImage(src, loaded, failed) {
+                     var img = new Image();
+                     img.onerror = failed;
+                     img.onload = loaded;
+                     img.src = src;
+                 }
+
                 function jsTreeTraverse(state, nodes) {
                     var inst = $('#jstree').jstree(true);
                     var node = inst.get_node(state);
@@ -180,6 +205,31 @@
                     }
                 }
 
+                $scope.showSchema = function () {
+                    diag = $('<div></div>').
+                          html($compile('<img style="width:100%;height:100%;" ng-src="{{schema}}"></img>')($scope)).
+                          dialog({
+                              title: "Schema",
+                              autoOpen: false,
+                              modal: true,
+                              position: { at: "center top"},
+                              height: 600,
+                              width: '75%',
+                              show: { effect: "fade", duration: 300 },
+                              hide: {effect: "fade", duration: 300 },
+                              resize: 'disable',
+                              buttons: {
+                                Close: function() {
+                                    $(this).dialog("close");
+                                }
+                              },
+                              close: function(ev, ui){
+                                  $(this).dialog("close");
+                              }
+                          });
+                      diag.dialog("open");
+                };
+
                 $scope.setEditorContent = function (content, previousContent, savePath) {
                     if ($scope.shouldSave === false || !previousContent) {
                         editor.getSession().setValue(content);

server/views/index.html

@@ -123,6 +123,7 @@
                     <!--CODE FLOW CONTROLS ON THE TOP !-->
                     <form ng-submit="syncGit()">
                         <div class="headerControls" style="margin-right: -7px;">
+                            <button ng-if="schemaOn == true" ng-click="showSchema()" class="button_schema_on" type="button">Schema</button>
                             <div ng-submit="syncGit()" class="spin_sync"  us-spinner="{radius:8.5, width:3, length: 4}" spinner-key="spinner-1"></div>
                             <input type="text" ng-model="repoUrl" placeholder="Git repository URL" style="outline: 0; width: 320px; margin-right: -2px;" class="inputControls" />
                             <button type="submit" style="outline: 0;" title="Sync repository git" tabindex="0" id="syncGit" ng-click="syncGit()" ng-disabled="buttonSyncDisabled"/><img src="imgs/button_sync.png"></button>