From 7ab94f8979cc643a82046d0f3631cbcdb60674dc Mon Sep 17 00:00:00 2001
From: Bruno Bottazzini <bruno.bottazzini@intel.com>
Date: Fri, 13 Nov 2015 18:01:21 -0200
Subject: [PATCH] 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              | 11 ++++++++
 client/js/controllers/editor.js | 50 +++++++++++++++++++++++++++++++++
 server/views/index.html         |  1 +
 3 files changed, 62 insertions(+)

diff --git a/client/css/app.css b/client/css/app.css
index 254a54e..08aa32f 100644
--- a/client/css/app.css
+++ b/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;
diff --git a/client/js/controllers/editor.js b/client/js/controllers/editor.js
index 664ac4c..4a9ad34 100644
--- a/client/js/controllers/editor.js
+++ b/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);
diff --git a/server/views/index.html b/server/views/index.html
index dec1a1f..697201e 100644
--- a/server/views/index.html
+++ b/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>