added example graphs to webui

js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraphTable.ejs

@@ -1,4 +1,38 @@
 <script id="modalGraphTable.ejs" type="text/template">
+
+  <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>
+
+  <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">
     <%
     var createTR = function(row, disableSubmitOnEnter) {
       var mandatory = '';
@@ -119,4 +153,6 @@
       <%
       }
       %>
+    </div>
+  </div>
 </script>

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;

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;