Updated generator to include xosLib css and getting started information
diff --git a/views/ngXosLib/generator-xos/app/templates/gulp/server.js b/views/ngXosLib/generator-xos/app/templates/gulp/server.js
index 13659c3..c0678d9 100644
--- a/views/ngXosLib/generator-xos/app/templates/gulp/server.js
+++ b/views/ngXosLib/generator-xos/app/templates/gulp/server.js
@@ -35,12 +35,8 @@
module.exports = function(options){
- // open in browser with sync and proxy to 0.0.0.0
gulp.task('browser', function() {
browserSync.init({
- // reloadDelay: 500,
- // logLevel: 'debug',
- // logConnections: true,
startPath: '#/',
snippetOptions: {
rule: {
@@ -50,13 +46,15 @@
server: {
baseDir: options.src,
routes: {
- '/xosHelpers/src': options.helpers
+ '/xos/core/xoslib/static/js/vendor': options.helpers,
+ '/xos/core/static': options.static + '../../static/'
},
middleware: function(req, res, next){
if(
- req.url.indexOf('/xos/') !== -1 ||
- req.url.indexOf('/xoslib/') !== -1 ||
- req.url.indexOf('/hpcapi/') !== -1 ||
+ // to be removed, deprecated API
+ // req.url.indexOf('/xos/') !== -1 ||
+ // req.url.indexOf('/xoslib/') !== -1 ||
+ // req.url.indexOf('/hpcapi/') !== -1 ||
req.url.indexOf('/api/') !== -1
){
if(conf.xoscsrftoken && conf.xossessionid){
@@ -85,6 +83,13 @@
gulp.watch(`${options.sass}/**/*.scss`, ['sass'], function(){
browserSync.reload();
});
+
+ gulp.watch([
+ options.helpers + 'ngXosHelpers.js',
+ options.static + '../../static/xosNgLib.css'
+ ], function(){
+ browserSync.reload();
+ });
});
// compile sass
@@ -108,7 +113,7 @@
inject(
gulp.src([
options.tmp + '**/*.js',
- options.helpers + '**/*.js' // todo add Babel here
+ options.helpers + 'ngXosHelpers.js'
])
.pipe(angularFilesort()),
{
@@ -124,7 +129,10 @@
return gulp.src(options.src + 'index.html')
.pipe(
inject(
- gulp.src(options.src + 'css/*.css'),
+ gulp.src([
+ options.src + 'css/*.css',
+ options.static + '../../static/xosNgLib.css'
+ ]),
{
ignorePath: [options.src]
}
diff --git a/views/ngXosLib/generator-xos/app/templates/gulpfile.js b/views/ngXosLib/generator-xos/app/templates/gulpfile.js
index 8d30660..08df554 100644
--- a/views/ngXosLib/generator-xos/app/templates/gulpfile.js
+++ b/views/ngXosLib/generator-xos/app/templates/gulpfile.js
@@ -11,7 +11,7 @@
tmp: 'src/.tmp',
dist: 'dist/',
api: '../../ngXosLib/api/',
- helpers: '../../ngXosLib/xosHelpers/src/',
+ helpers: '../../../xos/core/xoslib/static/js/vendor/',
static: '../../../xos/core/xoslib/static/', // this is the django static folder
dashboards: '../../../xos/core/xoslib/dashboards/' // this is the django html folder
};
diff --git a/views/ngXosLib/generator-xos/app/templates/src/index.html b/views/ngXosLib/generator-xos/app/templates/src/index.html
index eeb0dec..504bc7c 100644
--- a/views/ngXosLib/generator-xos/app/templates/src/index.html
+++ b/views/ngXosLib/generator-xos/app/templates/src/index.html
@@ -1,14 +1,91 @@
<!-- browserSync -->
<!-- bower:css -->
-<!-- endbower --><!-- endcss -->
+<!-- endbower -->
+<!-- endcss -->
<!-- inject:css -->
<!-- endinject -->
<div ng-app="xos.<%= name %>" id="xos<%= fileName %>" class="container-fluid">
- <div ui-view></div>
+ <div class="row">
+ <div class="col-xs-12">
+ <h1>Hi <%= user.firstname %>!</h1>
+ <h3>Welcome to you development environment.</h3>
+ <p>
+ We provided this environment to help you creating a custom view.
+ </p>
+ <p>
+ When the environment is running you will have an
+ <code>auto-reload</code>
+ feature enabled, so any time you update one of your files, the browser will be reloaded.
+ </p>
+ <p> <i>Note that is environment is already functional and that it is loading information from the XOS APIs and presenting them using the
+ <code>xos-table</code>
+ component.</i>
+ </p>
+ <h3>Development notes:</h3>
+ <p>
+ This views are designed using
+ <a href="https://angularjs.org/" target="_blank">Angular Js</a>
+ version 1.4.7 and
+ <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>
+ 3.3.6 is included.
+ </p>
+ <p>
+ We just want to remind you that this development environment provide you three helper command:
+ <ul>
+ <li>
+ <code>npm start</code>
+ - will start your setup (you should already be familiar with it)
+ </li>
+ <li>
+ <code>npm test</code>
+ - will execute your unit tests defined with
+ <a href="https://karma-runner.github.io/0.13/index.html" target="_blank">Karma</a>
+ and
+ <a href="jasmine.github.io" target="_blank">Jasmine</a>
+ . You can check the
+ <code>spec/</code>
+ folder to see an example of your first test.
+ </li>
+ <li>
+ <code>npm run build</code>
+ - will build your dashboard and make it available to XOS
+ </li>
+ </ul>
+ </p>
+ <h3>Helpers:</h3>
+ <p>
+ We provide a set of helpers that you can leverage in your dashboard:
+ <ul>
+ <li>
+ <code>xos.helpers</code>
+ - A set of
+ <a href="https://docs.angularjs.org/guide/services" target="_blank">Angular Services</a>
+ </li>
+ <li>
+ <code>xos.uiComponents</code>
+ - A set of
+ <a href="https://docs.angularjs.org/guide/directive" target="_blank">Angular Directives</a>
+ </li>
+ <li>
+ <code>xos.rest</code>
+ - A set of
+ <a href="https://docs.angularjs.org/api/ngResource/service/$resource" target="_blank">Angular $resources</a>
+ </li>
+ </ul>
+ To know more about this helpers you can naviate to
+ <code>/views/ngXosLib/</code>
+ and generate the documentation with
+ <code>npm run doc</code>
+ </p>
+ <h3>Example:</h3>
+ </div>
+ </div>
+ <div ui-view></div>
</div>
<!-- bower:js -->
-<!-- endbower --><!-- endjs -->
+<!-- endbower -->
+<!-- endjs -->
<!-- inject:js -->
-<!-- endinject -->
+<!-- endinject -->
\ No newline at end of file
diff --git a/views/ngXosLib/generator-xos/app/templates/src/js/main.js b/views/ngXosLib/generator-xos/app/templates/src/js/main.js
index 8e209b8..803f344 100644
--- a/views/ngXosLib/generator-xos/app/templates/src/js/main.js
+++ b/views/ngXosLib/generator-xos/app/templates/src/js/main.js
@@ -24,6 +24,32 @@
controllerAs: 'vm',
templateUrl: 'templates/users-list.tpl.html',
controller: function(Users){
+
+ this.tableConfig = {
+ columns: [
+ {
+ label: 'E-Mail',
+ prop: 'email'
+ },
+ {
+ label: 'First Name',
+ prop: 'firstname'
+ },
+ {
+ label: 'Last Name',
+ prop: 'lastname'
+ },
+ {
+ label: 'Created',
+ prop: 'created'
+ },
+ {
+ label: 'Is Admin',
+ prop: 'is_admin'
+ }
+ ]
+ };
+
// retrieving user list
Users.query().$promise
.then((users) => {
diff --git a/views/ngXosLib/generator-xos/app/templates/src/templates/users-list.tpl.html b/views/ngXosLib/generator-xos/app/templates/src/templates/users-list.tpl.html
index fd8d208..1fee0e2 100644
--- a/views/ngXosLib/generator-xos/app/templates/src/templates/users-list.tpl.html
+++ b/views/ngXosLib/generator-xos/app/templates/src/templates/users-list.tpl.html
@@ -1,16 +1 @@
-<div class="row">
- <div class="col-xs-12">
- <h1>Users List</h1>
- <p>This is only an example view.</p>
- </div>
-</div>
-<div class="row">
- <div class="col-xs-4">Email</div>
- <div class="col-xs-4">First Name</div>
- <div class="col-xs-4">Last Name</div>
-</div>
-<div class="row" ng-repeat="user in vm.users">
- <div class="col-xs-4">{{user.email}}</div>
- <div class="col-xs-4">{{user.firstname}}</div>
- <div class="col-xs-4">{{user.lastname}}</div>
-</div>
\ No newline at end of file
+<xos-table config="vm.tableConfig" data="vm.users"></xos-table>
\ No newline at end of file