From 8e6bdaec65001371136becde02f32b561a6c5773 Mon Sep 17 00:00:00 2001
From: hkernbach <heiko@arangodb.com>
Date: Tue, 24 Nov 2015 15:35:44 +0100
Subject: [PATCH] added example graphs to webui

---
 .../frontend/js/templates/modalGraphTable.ejs | 256 ++++++++++--------
 .../frontend/js/views/graphManagementView.js  |  38 +++
 .../APP/frontend/scss/_collection.scss        |   4 +
 3 files changed, 188 insertions(+), 110 deletions(-)

diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraphTable.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraphTable.ejs
index f443791fbf..41c2cae136 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraphTable.ejs
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraphTable.ejs
@@ -1,122 +1,158 @@
 <script id="modalGraphTable.ejs" type="text/template">
-  <%
-  var createTR = function(row, disableSubmitOnEnter) {
-    var mandatory = '';
-    if (row.mandatory) {
-      mandatory = '*';
-    }
 
-    %>
-      <tr class="tableRow" id="<%='row_' + row.id%>">
-        <th class="collectionTh"><%=row.label%><%=mandatory%>:</th>
-        <th class="collectionTh">
-          <%
-            switch(row.type) {
-              case "text":
-          %>
-          <input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
-          <%
-              break;
-            case "password":
-          %>
-          <input type="password" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
-          <%
-              break;
-            case "readonly":
-          %>
-          <input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>" disabled></input>
-          <%
-              break;
-              case "checkbox":
-                var checked = '',
-                  disabled = '';
-                if (row.checked) {
-                  checked = 'checked';
-                }
-                if (row.disabled) {
-                  disabled = 'disabled';
-                }
-          %>
-          <input type="checkbox" id="<%=row.id%>" value="<%=row.value%>" <%=checked%> <%=disabled%>></input>
-          <%
-              break;
-              case "select":
-          %>
-          <select id="<%=row.id%>" class="modalSelect">
-          <%
-                _.each(row.options, function(opt) {
-          %>
-            <option value="<%=opt.value%>" <%=row.selected === opt.value?"selected":""%>><%=opt.label%></option>
-          <%
-                });
-          %>
-          </select>
-          <%
-              break;
-              case "select2":
-          %>
-          <input type="hidden" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
-          <% if (row.addAdd) {%>
-            <button id="<%='addAfter_' + row.id%>" class="graphViewer-icon-button gv-icon-small add"></button>
-          <% } %>
-          <% if (row.addDelete) {%>
-            <button id="<%='remove_' + row.id%>" class="graphViewer-icon-button gv_internal_remove_line gv-icon-small delete"></button>
-          <% } %>
-          <%
-              break;
-            }
+  <ul id="graphTab" class="nav nav-tabs">
+    <li class="active"><a href="#createGraph" data-toggle="tab" id="tab-createGraph">Create Graph</a></li>
+    <li><a href="#exampleGraphs" data-toggle="tab" id="tab-exampleGraphs">Example Graphs</a></li>
+  </ul>
 
-            if (row.info) {
-          %>
-        <th>
-          <a class="modalTooltips" title="<%=row.info%>">
-            <span class="arangoicon icon_arangodb_info"></span>
-          </a>
-        </th>
-      <%
-        }
-      %>
-      </tr>
+  <div class="tab-content" id="tab-content-create-graph">
+
+    <div class="tab-pane" id="exampleGraphs">
+      <table>
+        <tbody>
+          <tr>
+            <td>Knows Graph</td>
+            <td>
+              <button style="float: right" graph-id="knows_graph" class="button-success createExampleGraphs">Create</button>
+            </td>
+          </tr>
+          <tr>
+            <td>Social Graph</td>
+            <td>
+              <button style="float: right" graph-id="social" class="button-success createExampleGraphs">Create</button>
+            </td>
+          </tr>
+          <tr>
+            <td>Routeplanner Graph</td>
+            <td>
+              <button style="float: right" graph-id="routeplanner" class="button-success createExampleGraphs">Create</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="active tab-pane" id="createGraph">
     <%
-  }//createTR
-  %>
+    var createTR = function(row, disableSubmitOnEnter) {
+      var mandatory = '';
+      if (row.mandatory) {
+        mandatory = '*';
+      }
 
-  <table>
-    <tbody>
-      <%
-      _.each(content, function(row) {
-        createTR(row);
-      });
       %>
+        <tr class="tableRow" id="<%='row_' + row.id%>">
+          <th class="collectionTh"><%=row.label%><%=mandatory%>:</th>
+          <th class="collectionTh">
+            <%
+              switch(row.type) {
+                case "text":
+            %>
+            <input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
+            <%
+                break;
+              case "password":
+            %>
+            <input type="password" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
+            <%
+                break;
+              case "readonly":
+            %>
+            <input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>" disabled></input>
+            <%
+                break;
+                case "checkbox":
+                  var checked = '',
+                    disabled = '';
+                  if (row.checked) {
+                    checked = 'checked';
+                  }
+                  if (row.disabled) {
+                    disabled = 'disabled';
+                  }
+            %>
+            <input type="checkbox" id="<%=row.id%>" value="<%=row.value%>" <%=checked%> <%=disabled%>></input>
+            <%
+                break;
+                case "select":
+            %>
+            <select id="<%=row.id%>" class="modalSelect">
+            <%
+                  _.each(row.options, function(opt) {
+            %>
+              <option value="<%=opt.value%>" <%=row.selected === opt.value?"selected":""%>><%=opt.label%></option>
+            <%
+                  });
+            %>
+            </select>
+            <%
+                break;
+                case "select2":
+            %>
+            <input type="hidden" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
+            <% if (row.addAdd) {%>
+              <button id="<%='addAfter_' + row.id%>" class="graphViewer-icon-button gv-icon-small add"></button>
+            <% } %>
+            <% if (row.addDelete) {%>
+              <button id="<%='remove_' + row.id%>" class="graphViewer-icon-button gv_internal_remove_line gv-icon-small delete"></button>
+            <% } %>
+            <%
+                break;
+              }
 
-    </tbody>
-  </table>
-    <%
-    if (advancedContent) {
+              if (row.info) {
+            %>
+          <th>
+            <a class="modalTooltips" title="<%=row.info%>">
+              <span class="arangoicon icon_arangodb_info"></span>
+            </a>
+          </th>
+        <%
+          }
+        %>
+        </tr>
+      <%
+    }//createTR
     %>
-    <div class="accordion" id="accordion2">
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-            <span><%=advancedContent.header%></span><span><b class="caret"></b></span>
-          </a>
-        </div>
-        <div id="collapseOne" class="accordion-body collapse out">
-          <div class="accordion-inner">
-            <table>
-              <tbody>
-                <%
-                _.each(advancedContent.content, function(row) {
-                  createTR(row);
-                });
-                %>
-              </tbody>
-            </table>
+
+    <table>
+      <tbody>
+        <%
+        _.each(content, function(row) {
+          createTR(row);
+        });
+        %>
+
+      </tbody>
+    </table>
+      <%
+      if (advancedContent) {
+      %>
+      <div class="accordion" id="accordion2">
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+              <span><%=advancedContent.header%></span><span><b class="caret"></b></span>
+            </a>
+          </div>
+          <div id="collapseOne" class="accordion-body collapse out">
+            <div class="accordion-inner">
+              <table>
+                <tbody>
+                  <%
+                  _.each(advancedContent.content, function(row) {
+                    createTR(row);
+                  });
+                  %>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
+      <%
+      }
+      %>
     </div>
-    <%
-    }
-    %>
-</script>
\ No newline at end of file
+  </div>
+</script>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphManagementView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphManagementView.js
index 1ce8c4f746..8af18ae5f2 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphManagementView.js
+++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/graphManagementView.js
@@ -26,6 +26,13 @@
       "change #graphSortDesc"                     : "sorting"
     },
 
+    toggleTab: function(e) {
+      var id = e.currentTarget.id;
+      id = id.replace('tab-', '');
+      $('#tab-content-create-graph .tab-pane').removeClass('active');
+      $('#tab-content-create-graph #' + id).addClass('active');
+    },
+
     redirectToGraphViewer: function(e) {
       var name = $(e.currentTarget).attr("id");
       name = name.substr(0, name.length - 5);
@@ -125,6 +132,35 @@
       this.render();
     },
 
+    createExampleGraphs: function(e) {
+      var graph = $(e.currentTarget).attr('graph-id'), self = this;
+      $.ajax({
+        type: "POST",
+        url: "/_admin/aardvark/graph-examples/create/" + encodeURIComponent(graph),
+        success: function () {
+          window.modalView.hide();
+          self.updateGraphManagementView();
+          arangoHelper.arangoNotification('Example Graphs', 'Graph: ' + graph + ' created.');
+        },
+        error: function (err) {
+          window.modalView.hide();
+          console.log(err);
+          if (err.responseText) {
+            try {
+              var msg = JSON.parse(err.responseText);
+              arangoHelper.arangoError('Example Graphs', msg.errorMessage);
+            }
+            catch (e) {
+              arangoHelper.arangoError('Example Graphs', 'Could not create example graph: ' + graph);
+            }
+          }
+          else {
+            arangoHelper.arangoError('Example Graphs', 'Could not create example graph: ' + graph);
+          }
+        }
+      });
+    },
+
     render: function() {
       this.collection.fetch({
         async: false
@@ -147,6 +183,8 @@
       this.events["click .tableRow"] = this.showHideDefinition.bind(this);
       this.events['change tr[id*="newEdgeDefinitions"]'] = this.setFromAndTo.bind(this);
       this.events["click .graphViewer-icon-button"] = this.addRemoveDefinition.bind(this);
+      this.events["click #graphTab a"] = this.toggleTab.bind(this);
+      this.events["click .createExampleGraphs"] = this.createExampleGraphs.bind(this);
       arangoHelper.setCheckboxStatus("#graphManagementDropdown");
 
       return this;
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_collection.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_collection.scss
index b94c705809..c601a99b12 100644
--- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_collection.scss
+++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_collection.scss
@@ -111,6 +111,7 @@
 }
 
 #infoTab,
+#graphTab,
 #collectionTab {
   border-bottom: 0;
   margin-bottom: 1px;
@@ -119,11 +120,13 @@
 }
 
 #infoTab li,
+#graphTab li,
 #collectionTab li {
   float: right;
 }
 
 #infoTab a,
+#graphTab a,
 #collectionTab a {
   background-color: $c-new-grey;
   border-bottom: 1px solid $c-darker-grey;
@@ -138,6 +141,7 @@
 }
 
 #infoTab .active > a,
+#graphTab .active > a,
 #collectionTab .active > a {
   background-color: $c-modal-header;
   border-color: $c-collection-tab-border-bottom $c-collection-tab-border-bottom transparent !important;