Merge pull request #25 from n288TJYRX/backstop2

Merging latest UI

newui/src/main/webapp/app/analytic/analytic.component.html

@@ -1,26 +1,8 @@
-<script>
-  // Trying to make all of the background colors different
-  function setBackgroundColor() {
-    id = model.name;
-    var elem = document.getElementById(id);
-    elem.style.backgroundColor = model.backgroundColor;
-  }
-  window.onload = setBackgroundColor;
-
-</script>
-
-<!-- style="background-color:red" -->
+<!-- <style background-color="{{model.color}}"></style> -->
 <mat-card id="{{model.operationName}}" (click)="execute(model)" class="grid-button" md-ink-ripple
-  matTooltip="{{model.description}}">
+  matTooltip="{{model.description}}" [style.background]="model.color">
   <div fxLayout="column">
-    <h2>{{model.operationName}}</h2>
-    <!-- <mat-icon>{{model.header.iconURL}}</mat-icon> -->
-    <i class="material-icons">{{model.metaData.iconURL}}</i>
-    <!-- <div fxLayout="row" fxLayoutAlign="start end">
-      <p class="tooltip">Description
-        <span class="tooltiptext">{{model.description}}</span>
-        <span class="tooltiptext">{{model.operation.description}}</span>
-      </p>
-    </div> -->
+    <h2> {{model.operationName}}</h2>
+    <i class=" material-icons"> {{model.metaData.iconURL}}</i>
   </div>
 </mat-card>

newui/src/main/webapp/app/analytics/analytics.component.html

@@ -2,9 +2,11 @@
   <h1>Analytics</h1>
 </div>
 <mat-card>
-  <div class="grid-container">
-    <div *ngFor="let analytic of analytics">
+  <mat-grid-list cols="4">
+    <mat-grid-tile *ngFor="let analytic of analytics">
+
       <app-analytic [model]="analytic"></app-analytic>
-    </div>
-  </div>
+
+    </mat-grid-tile>
+  </mat-grid-list>
 </mat-card>

newui/src/main/webapp/app/analytics/analytics.component.ts

@@ -83,7 +83,12 @@ export class AnalyticsComponent implements OnInit {
     var operation1 = {
       class: "uk.gov.gchq.gaffer.named.operation.NamedOperation",
       fields: "some field",
-      parameters: ["Result Limit", "To CSV", "Vehicle Type"],
+      parameters: [
+        "Result Limit",
+        "Start Date (YYYY-MM-DD)",
+        "End Date (YYYY-MM-DD)",
+        "Vehicle Type"
+      ],
       operationName: "frequent-vehicles-in-region"
     };
     var operation2 = {
@@ -96,7 +101,14 @@ export class AnalyticsComponent implements OnInit {
     var readAccessRoles = ["User", "User"];
     var writeAccessRoles = ["User", "User"];
     var operations = [operation1, operation2];
-    var parameters = [["Result Limit", "To CSV", "Vehicle Type"], "to csv"];
+    var parameters = [
+      [
+        "Result Limit",
+        "Start Date (YYYY-MM-DD)",
+        "End Date (YYYY-MM-DD)",
+        "Vehicle Type"
+      ]
+    ];
     var outputTypes = ["table", "table"];
     var score = [2, 3];
     var color = ["red", "yellow"];

newui/src/styles.css

@@ -49,10 +49,23 @@ a {
   transform: scale(1.4);
 }
 
+.work {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+mat-card-content {
+  flex: 1;
+  padding: 0.25em 0.3em 0;
+}
+
 mat-card {
   max-width: 80%;
   margin: 2em auto;
   text-align: center;
+  display: flex;
 }
 
 mat-toolbar-row {
@@ -341,6 +354,11 @@ mat-tab-data {
   z-index: 2;
 }
 
+app-analytic {
+  width: 100%;
+  height: 100%;
+}
+
 .abs-full-page {
   position: absolute;
   left: 0;