From d7f10914487330ea5ac0bbade34f2649b6d27ac8 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 4 Sep 2020 17:47:36 +0200
Subject: [PATCH] Tutorials

---
 WebServer/AppLoader.js     |   1 +
 WebServer/index.html       |  47 +++++++++++-
 WebServer/main.css         | 147 +++++++++++++++++++++++++++++++++++++
 WebServer/suite-dummy.html |  54 ++++++++++++++
 4 files changed, 248 insertions(+), 1 deletion(-)
 create mode 100644 WebServer/suite-dummy.html

diff --git a/WebServer/AppLoader.js b/WebServer/AppLoader.js
index 3657bf68a..bffa4527a 100644
--- a/WebServer/AppLoader.js
+++ b/WebServer/AppLoader.js
@@ -57,6 +57,7 @@ function newAppLoader() {
                 'DesignSpace/Workspace/FunctionLibraries/DataMineFunctions.js',
                 'DesignSpace/Workspace/FunctionLibraries/DataStorageFunctions.js',
                 'DesignSpace/Workspace/FunctionLibraries/ChartingSpaceFunctions.js',
+                'DesignSpace/Workspace/FunctionLibraries/TutorialFunctions.js',
 
                 'Utilities/CoordinateTransformations.js',
                 'Utilities/DateRateTransformations.js',
diff --git a/WebServer/index.html b/WebServer/index.html
index ffe5f49f5..ea5997c80 100644
--- a/WebServer/index.html
+++ b/WebServer/index.html
@@ -10,6 +10,10 @@
     <script type="text/javascript" src="WebServer/AppPreLoader.js"></script>
     <script src="externalScripts/CCapture.all.min.js"></script>
 
+    <!-- Documentation Style Sheets -->
+    <link rel="stylesheet" type="text/css"
+        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
     <script type="text/javascript">
         function loadCanvas() {
             try {
@@ -37,9 +41,50 @@
     <div id="masterApp"></div>
     <div id="canvasApp"></div>
     <div id="docApp" style="position:fixed; top:100000px; left:100000px">
-        <iframe id="docIFrame" src="https://julian-molina.github.io/Documentation/" style="border:none; " height="2000" width="900"></iframe>
+        <iframe id="docIFrame" src="https://julian-molina.github.io/Documentation/" style="border:none; " height="2000"
+            width="900"></iframe>
     </div>
     <div id="textAreaDiv"></div>
     <div id="inputDiv" style="font-family:saira condensed;">&nbsp;</div>
+
+    <!-- Tutorial Step Template -->
+    <div id="tutorialStepDiv" class="tutorial-step" style="position:fixed; top:100000px; left:100000px;">
+
+        <div>
+            <h1 class="tutorial-saira-large">Trading Engine</h1>
+        </div>
+        <div>
+            <div class="tutorial-summary">Summary</div>
+            <h2 class="tutorial-saira-medium">Sub-Title</h2>
+            <table class="tutorial-definitionTable">
+                <tr>
+                    <td>
+                        <img
+                            src="https://julian-molina.github.io/Documentation/images/icons/nodes/png150/trading-engine.png" />
+                    </td>
+                    <td>
+                        <strong class="tutorial-saira-bold-small">The trading engine hierarchy is t ible and exposed to others.</strong>
+                    </td>
+                </tr>
+            </table>
+            <p class="tutorial-saira-small">You will use th purposes:</p>
+            <ul>
+                <li>
+                    <p class="tutorial-saira-small"><strong class="tutorial-saira-bold-small">To let your trading systems:</strong> This allows stratrunning.</p>
+                </li>
+                <li>
+                    <p class="tutorial-saira-small"><strong class="tutorial-saira-bold-small">To keep track of the actions:</strong> By analyzing runtiading session.</p>
+                </li>
+            </ul>
+            <p class="tutorial-saira-small">The hierarchyusers.</p>
+            <div class="tutorial-saira-bold-small tutorial-callout"> callout text.</div>
+            <p class="tutorial-saira-small">The hiera feedback capabilities to users.</p>
+            <div class="tutorial-alert-info" role="alert"><i class="tutorial-fa tutorial-info-circle"></i> <b>Note:</b> Esto es una nota, algonoteworthy.</div>
+            <div class="tutorial-alert-success" role="alert"><i class="tutorial-fa tutorial-check-square-o"></i> <b>Tip:</b> Esto es un tip. </div>
+            <div class="tutorial-alert-warning" role="alert"><i class="tutorial-fa tutorial-warning"></i> <b>Important:</b> Esto es  algo importante.</div>
+            <div class="tutorial-alert-danger" role="alert"><i class="tutorial-fa tutorial-exclamation-circle"></i> <b>Warning:</b>  Esto es una aviso de alerta.</div>
+        </div>
+    </div>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/WebServer/main.css b/WebServer/main.css
index 9c38d04a2..8827f01cb 100644
--- a/WebServer/main.css
+++ b/WebServer/main.css
@@ -13,4 +13,151 @@
   font-weight: 300;
   src: local('Saira Condensed Light'), local('SairaCondensed-Light'), url(Fonts/Saira-Condensed.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+.tutorial-step {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 2px solid;
+  border-color: #1b998b;
+  border-radius: 8px;
+  background-color: #fdfdfd;
+}
+
+.tutorial-summary {
+  font-size:120%;
+  color: #808080;
+  margin:20px 0px 20px 0px;
+  border-left: 5px solid #fd6a33;
+  padding-left: 10px;
+
+}
+
+.tutorial-summary:before {
+  content: "Summary: ";
+  font-weight: bold;
+}
+
+.tutorial-definitionTable {
+  background-color: #f3f3f3;
+  border-top-color: #a6e1ec;
+  padding: 15px;
+  margin: 20px 0;
+  border: solid 0px;
+  vertical-align: middle;
+  min-width: 100px;
+  width: 100%;
+}
+
+.tutorial-alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #a6e1ec;
+}
+
+.tutorial-alert-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #c9e2b3
+}
+
+.tutorial-alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #f7e1b5
+}
+
+.tutorial-alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  margin: 20px 0;
+  border-top-color: #e4b9c0
+}
+
+.tutorial-callout {
+  padding: 20px;
+  margin: 20px 0;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
+  border-left-color: #bcd643;
+  font-weight: 500;
+}
+ 
+.tutorial-info-circle:before {
+  content:"\f05a"
+}
+
+.tutorial-check-square-o:before {
+  content:"\f046"
+}
+
+.tutorial-exclamation-circle:before { 
+  content:"\f06a"
+}
+
+.tutorial-warning:before,.fa-exclamation-triangle:before {
+  content:"\f071"
+}
+
+.tutorial-fa {
+  display:inline-block;
+  font:normal normal normal 14px/1 FontAwesome;
+  font-size:inherit;
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-small {
+  display:inline-block;
+  font:normal normal normal 14px/1 "Saira";
+  font-size:inherit;
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-medium {
+  display:inline-block;
+  font:normal normal normal 30px/1 "Saira";
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-large {
+  display:inline-block;
+  font:bold normal normal 40px/1 "Saira";
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
+}
+
+.tutorial-saira-bold-small {
+  display:inline-block;
+  font:bold normal normal 14px/1 "Saira";
+  font-size:inherit;
+  text-rendering:auto;
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale
 }
\ No newline at end of file
diff --git a/WebServer/suite-dummy.html b/WebServer/suite-dummy.html
new file mode 100644
index 000000000..78b108803
--- /dev/null
+++ b/WebServer/suite-dummy.html
@@ -0,0 +1,54 @@
+<h2 id="trading-engine">Trading Engine</h2>
+
+<table class="definitionTable"><tr><td>
+
+<img src="images/icons/nodes/png150/trading-engine.png" />
+
+</td><td>
+
+<strong>The trading engine hierarchy is the data structure used by the trading bot to keep runtime information highly accessible and exposed to others.</strong>
+
+</td></tr></table>
+
+<p>You will use this hierarchy for two main purposes:</p>
+
+<p>The hierarchy exposes—literally—all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users. The hierarchy exposes—literally—all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users.</p>
+
+<ul>
+  <li>
+    <p><strong>To let your trading systems:</strong> This allows strategies to keep track of and react to current and past events—including those involving the exchange, such as orders placed or filled—as the bot is running.</p>
+  </li>
+  <li>
+    <p><strong>To keep track of the actions:</strong> By analyzing runtime information, you may gain a detailed understanding of what happens, when, and why, throughout a trading session.</p>
+  </li>
+</ul>
+
+<p>The hierarchy exposes—literally—all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users.</p>
+
+<div class="bs-callout bs-callout-success">Este callout se usa para resaltar una idea particularmente importante. Algo se sobresale, como una conclusion, o algo por el estilo.</div>
+
+<p>The hierarchy exposes all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users. The hierarchy exposes all the information processed by the trading bot, providing a comprehensive feedback loop to trading systems and analysis capabilities to users.</p>
+
+<div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> Esto es una nota, algo noteworthy.</div>
+
+<div class="alert alert-success" role="alert"><i class="fa fa-check-square-o"></i> <b>Tip:</b> Esto es un tip.</div>
+
+<div class="alert alert-warning" role="alert"><i class="fa fa-warning"></i> <b>Important:</b> Esto es algo importante.</div>
+
+<div class="alert alert-danger" role="alert"><i class="fa fa-exclamation-circle"></i> <b>Warning:</b> Esto es una aviso de alerta.</div>
+
+<h4 id="adding-a-trading-engine-node">Adding a Trading Engine Node</h4>
+
+<p>Calculo que con este segundo nivel de titulo alcanza.</p>
+
+<h4 id="este-es-otro-formato-tipico-de-la-doc--trading-engine">Este es otro formato tipico de la doc:  Trading Engine</h4>
+
+<table class="definitionTable"><tr><td>
+
+<img src="images/icons/nodes/png50/trading-engine.png" />
+
+</td><td>
+
+The trading engine hierarchy is the data structure used by the trading bot to keep runtime information highly accessible and exposed to others.
+
+</td></tr></table>