johntom · August 19, 2016 14:59 · Aug 19, 2016 · Aug 19, 2016
diff --git a/app.html b/app.html
@@ -0,0 +1,25 @@
+<template>
+  <div class="row">
+
+
+
+
+    <v-grid
+      class="col-md-6"
+      style="height:350px"
+      v-row-height="25"
+      v-header-height="50"
+      v-current-entity.bind=myCurrentEntity
+      v-collection.bind=myCollection
+      v-grid-context.bind=myGrid>
+        <v-grid-col col-width="150" col-field="index" col-add-row-attributes="keydown.trigger='lengthCheck($event)'"></v-grid-col>
+        <v-grid-col col-width="150" col-field="name" col-add-row-attributes="keydown.trigger='lengthCheckName($event)'"></v-grid-col>
+        <v-grid-col col-width="150" col-field="number" col-add-row-attributes="keydown.trigger='lengthCheck($event)'"></v-grid-col>
+    </v-grid>
+
+
+
+
+
+  </div>
+</template>
diff --git a/app.js b/app.js
@@ -0,0 +1,45 @@
+//Docs: https://vegarringdal.gitbooks.io/v-grid-dev/content/
+import {dummyDataGenerator} from 'dummyDataGenerator'
+
+export class BasicUse {
+  static inject = [dummyDataGenerator];
+
+
+  //utillity functions
+  myGrid = {};
+  //current entity, link this to inputs etc
+  myCurrentEntity = {};
+  //collection to display
+  myCollection = [];
+
+  lengthCheck(e){
+
+    if(e.target.value.length > 10){
+      return false;
+    } else {
+      return true;
+    }
+
+  }
+    lengthCheckName(e){
+
+    if(e.target.value.length > 20){
+      return false;
+    } else {
+      return true;
+    }
+
+  }
+
+  //helper for dummy data
+  constructor(dummyDataGenerator) {
+    //get this element
+    this.dummyDataGenerator = dummyDataGenerator;
+    this.dummyDataGenerator.generateData(10000, (data) => {
+      this.myCollection = data;
+    })
+
+  }
+
+
+}
diff --git a/dummyData.json b/dummyData.json
diff --git a/dummyDataGenerator.js b/dummyDataGenerator.js
@@ -0,0 +1,119 @@
+import * as internalDataArray from './dummyData.json!json';
+
+export class dummyDataGenerator {
+
+
+totalGenerated = 0;
+
+constructor(){
+  // transform json object to an array
+  this.internalDataArray = Object.keys(internalDataArray).map(function(k) { return internalDataArray[k] });
+
+  this.index = [];
+  this.name = [];
+  this.first = [];
+  this.last = [];
+  this.images = [];
+  this.expanded = [];
+  this.guid = [];
+  this.integer = [];
+  this.shortText = [];
+  this.expanded = [];
+  this.date = [];
+  this.shortText = [];
+  this.mediumText = [];
+  this.longText = [];
+  this.address = [];
+  this.guid = [];
+  this.city = [];
+  this.state = [];
+  this.zip = [];
+  this.country = [];
+  this.email = [];
+  this.phone = [];
+  this.color = [];
+  this.number = [];
+  this.bool = [];
+
+
+  for(let i = 0; i < this.internalDataArray.length;i++){
+    this.index.push(this.internalDataArray[i].index);
+    this.name.push(this.internalDataArray[i].name);
+    this.first.push(this.internalDataArray[i].first);
+    this.last.push(this.internalDataArray[i].last);
+    this.images.push(this.internalDataArray[i].image);
+    this.expanded.push(this.internalDataArray[i].expanded);
+    this.guid.push(this.internalDataArray[i].guid);
+    this.integer.push(this.internalDataArray[i].integer);
+    this.shortText.push(this.internalDataArray[i].shortText);
+    this.expanded.push(this.internalDataArray[i].expanded);
+    this.date.push(new Date(this.internalDataArray[i].date));
+    this.shortText.push(this.internalDataArray[i].shortText);
+    this.mediumText.push(this.internalDataArray[i].mediumText);
+    this.longText.push(this.internalDataArray[i].longText);
+    this.address.push(this.internalDataArray[i].address);
+    this.guid.push(this.internalDataArray[i].guid);
+    this.city.push(this.internalDataArray[i].city);
+    this.state.push(this.internalDataArray[i].state);
+    this.zip.push(this.internalDataArray[i].zip);
+    this.country.push(this.internalDataArray[i].country);
+    this.email.push(this.internalDataArray[i].email);
+    this.phone.push(this.internalDataArray[i].phone);
+    this.color.push(this.internalDataArray[i].color);
+    this.number.push(1*((Math.floor(Math.random() * 500) + 0) +"."+(Math.floor(Math.random() * 500) + 0)));
+  }
+}
+
+  reset(){
+    this.totalGenerated = 0;
+  }
+
+
+generateData(number, callback){
+
+  let dummyArray = [];
+  for(let i = 0; i < number;i++){
+    //up count
+    this.totalGenerated++;
+    let random1 = Math.floor(Math.random() * 150) + 0;
+    let random2 = Math.floor(Math.random() * 150) + 0;
+    let random3 = Math.floor(Math.random() * 150) + 0;
+    let random4 = Math.floor(Math.random() * 150) + 0;
+    let random5 = Math.floor(Math.random() * 150) + 0;
+
+
+
+    dummyArray.push({
+      "index": this.totalGenerated,
+      "name": this.first[random2] +" "+this.last[random3],
+      "first": this.first[random2],
+      "last": this.last[random3],
+      "images": this.images[random4],
+      "expanded": this.expanded[random5],
+      "guid": this.guid[random1],
+      "integer": this.integer[random2],
+      "date": this.date[random3],
+      "shortText": this.shortText[random4],
+      "mediumText": this.mediumText[random5],
+      "longText": this.longText[random1],
+      "address": this.address[random2],
+      "city": this.city[random3],
+      "state": this.state[random4],
+      "zip": this.zip[random5],
+      "country": this.country[random1],
+      "email": this.email[random2],
+      "phone": this.phone[random3],
+      "color": this.color[random4],
+      "number": this.number[random4],
+      "bool":random1 % 2 === 0 ? true : false
+    });
+  }
+
+  callback(dummyArray);
+
+
+
+}
+
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Aurelia</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+  </head>
+  <body aurelia-app="main">
+  <h1>Loading...</h1>
+    <script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.8/jspm_packages/system.js"></script>
+    <script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.8/config.js"></script>
+    <script>
+      System.import('aurelia-bootstrapper');
+    </script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,8 @@
+export function configure(aurelia) {
+  aurelia.use
+    .standardConfiguration()
+    .developmentLogging()
+    .plugin('aurelia-v-grid');
+
+  aurelia.start().then(a => a.setRoot());
+}
No results found