Started tutorial implementation
Change-Id: I1624d012735a090c4e7f89d7d79c210ee3617942
diff --git a/views/ngXosViews/UITutorial/gulp/build.js b/views/ngXosViews/UITutorial/gulp/build.js
new file mode 100644
index 0000000..ed8eb07
--- /dev/null
+++ b/views/ngXosViews/UITutorial/gulp/build.js
@@ -0,0 +1,227 @@
+'use strict';
+
+// BUILD
+//
+// The only purpose of this gulpfile is to build a XOS view and copy the correct files into
+// .html => dashboards
+// .js (minified and concat) => static/js
+//
+// The template are parsed and added to js with angular $templateCache
+
+var gulp = require('gulp');
+var ngAnnotate = require('gulp-ng-annotate');
+var uglify = require('gulp-uglify');
+var templateCache = require('gulp-angular-templatecache');
+var runSequence = require('run-sequence');
+var concat = require('gulp-concat-util');
+var del = require('del');
+var wiredep = require('wiredep');
+var angularFilesort = require('gulp-angular-filesort');
+var _ = require('lodash');
+var eslint = require('gulp-eslint');
+var inject = require('gulp-inject');
+var rename = require('gulp-rename');
+var replace = require('gulp-replace');
+var postcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
+var mqpacker = require('css-mqpacker');
+var csswring = require('csswring');
+var yaml = require('js-yaml');
+var colors = require('colors/safe');
+var fs = require('fs');
+
+const TEMPLATE_FOOTER = `
+angular.module('xos.UITutorial')
+.run(['$location', function(a){
+ a.path('/');
+}])
+`
+
+module.exports = function(options){
+
+ // delete previous builded file
+ gulp.task('clean', function(){
+ return del(
+ [
+ options.dashboards + 'xosUITutorial.html',
+ options.static + 'css/xosUITutorial.css',
+ options.static + 'images/UITutorial-icon.png',
+ options.static + 'images/UITutorial-icon-active.png'
+ ],
+ {force: true}
+ );
+ });
+
+ // minify css
+ gulp.task('css', function () {
+ var processors = [
+ autoprefixer({browsers: ['last 1 version']}),
+ mqpacker,
+ csswring
+ ];
+
+ gulp.src([
+ `${options.css}**/*.css`,
+ `!${options.css}dev.css`
+ ])
+ .pipe(postcss(processors))
+ .pipe(gulp.dest(options.tmp + '/css/'));
+ });
+
+ // copy css in correct folder
+ gulp.task('copyCss', ['wait'], function(){
+ return gulp.src([`${options.tmp}/css/*.css`])
+ .pipe(concat('xosUITutorial.css'))
+ .pipe(gulp.dest(options.static + 'css/'))
+ });
+
+ // copy images in correct folder
+ gulp.task('copyImages', ['wait'], function(){
+ return gulp.src([`${options.icon}/UITutorial-icon.png`, `${options.icon}/UITutorial-icon-active.png`])
+ .pipe(gulp.dest(options.static + 'images/'))
+ });
+
+ // compile and minify scripts
+ gulp.task('scripts', function() {
+ return gulp.src([
+ options.tmp + '**/*.js'
+ ])
+ .pipe(ngAnnotate())
+ .pipe(angularFilesort())
+ .pipe(concat('xosUITutorial.js'))
+ .pipe(concat.header('//Autogenerated, do not edit!!!\n'))
+ .pipe(concat.footer(TEMPLATE_FOOTER))
+ .pipe(uglify())
+ .pipe(gulp.dest(options.static + 'js/'));
+ });
+
+ // set templates in cache
+ gulp.task('templates', function(){
+ return gulp.src('./src/templates/*.html')
+ .pipe(templateCache({
+ module: 'xos.UITutorial',
+ root: 'templates/'
+ }))
+ .pipe(gulp.dest(options.tmp));
+ });
+
+ // copy html index to Django Folder
+ gulp.task('copyHtml', function(){
+ return gulp.src(options.src + 'index.html')
+ // remove dev dependencies from html
+ .pipe(replace(/<!-- bower:css -->(\n^<link.*)*\n<!-- endbower -->/gmi, ''))
+ .pipe(replace(/<!-- bower:js -->(\n^<script.*)*\n<!-- endbower -->/gmi, ''))
+ // injecting minified files
+ .pipe(
+ inject(
+ gulp.src([
+ options.static + 'vendor/xosUITutorialVendor.js',
+ options.static + 'js/xosUITutorial.js',
+ options.static + 'css/xosUITutorial.css'
+ ]),
+ {ignorePath: '/../../../xos/core/xoslib'}
+ )
+ )
+ .pipe(rename('xosUITutorial.html'))
+ .pipe(gulp.dest(options.dashboards));
+ });
+
+ // minify vendor js files
+ gulp.task('wiredep', function(){
+ var bowerDeps = wiredep().js;
+ if(!bowerDeps){
+ return;
+ }
+
+ // remove angular (it's already loaded)
+ _.remove(bowerDeps, function(dep){
+ return dep.indexOf('angular/angular.js') !== -1;
+ });
+
+ return gulp.src(bowerDeps)
+ .pipe(concat('xosUITutorialVendor.js'))
+ .pipe(uglify())
+ .pipe(gulp.dest(options.static + 'vendor/'));
+ });
+
+ gulp.task('lint', function () {
+ return gulp.src(['src/js/**/*.js'])
+ .pipe(eslint())
+ .pipe(eslint.format())
+ .pipe(eslint.failAfterError());
+ });
+
+ gulp.task('wait', function (cb) {
+ // setTimeout could be any async task
+ setTimeout(function () {
+ cb();
+ }, 1000);
+ });
+
+ gulp.task('tosca', function (cb) {
+
+ // TOSCA to register the dashboard in the system
+ const dashboardJson = {};
+ dashboardJson['UITutorial'] = {
+ type: 'tosca.nodes.DashboardView',
+ properties: {
+ url: 'template:xosUITutorial'
+ }
+ };
+
+ // check for custom icons
+ if(
+ fs.existsSync(`${options.icon}/UITutorial-icon.png`) &&
+ fs.existsSync(`${options.icon}/UITutorial-icon-active.png`)
+ ){
+ dashboardJson['UITutorial'].properties.custom_icon = true;
+ }
+
+ const dashboardTosca = yaml.dump(dashboardJson).replace(/'/gmi, '');
+
+ // TOSCA to add the dashboard to the user
+ const userDashboardJson = {};
+ userDashboardJson['UITutorial_dashboard'] = {
+ node: 'UITutorial',
+ relationship: 'tosca.relationships.UsesDashboard'
+ };
+ const userJson = {
+ 'padmin@vicci.org': {
+ type: 'tosca.nodes.User',
+ properties: {
+ 'no-create': true,
+ 'no-delete': true
+ },
+ requirements: [userDashboardJson]
+ }
+ };
+ const userTosca = yaml.dump(userJson).replace(/'/gmi, '');
+
+
+ // the output is in a timeout so that it get printed after the gulp logs
+ setTimeout(function () {
+ console.log(colors.cyan('\n\n# You can use this recipe to load the dashboard in the system:'));
+ console.log(colors.yellow(dashboardTosca));
+ console.log(colors.cyan('# And this recipe to activate the dashboard for a user:'));
+ console.log(colors.yellow(userTosca));
+ }, 1000);
+ cb();
+ });
+
+ gulp.task('build', function() {
+ runSequence(
+ 'clean',
+ 'sass',
+ 'templates',
+ 'babel',
+ 'scripts',
+ 'wiredep',
+ 'css',
+ 'copyCss',
+ 'copyImages',
+ 'copyHtml',
+ 'cleanTmp',
+ 'tosca'
+ );
+ });
+};
\ No newline at end of file
diff --git a/views/ngXosViews/UITutorial/gulp/server.js b/views/ngXosViews/UITutorial/gulp/server.js
new file mode 100644
index 0000000..36fdded
--- /dev/null
+++ b/views/ngXosViews/UITutorial/gulp/server.js
@@ -0,0 +1,169 @@
+'use strict';
+
+var gulp = require('gulp');
+var browserSync = require('browser-sync').create();
+var inject = require('gulp-inject');
+var runSequence = require('run-sequence');
+var angularFilesort = require('gulp-angular-filesort');
+var babel = require('gulp-babel');
+var wiredep = require('wiredep').stream;
+var httpProxy = require('http-proxy');
+var del = require('del');
+var sass = require('gulp-sass');
+var fs = require('fs');
+var path = require('path');
+
+const environment = process.env.NODE_ENV;
+
+if(!fs.existsSync(path.join(__dirname, `../../../env/${environment || 'default'}.js`))){
+ if(!environment){
+ throw new Error('You should define a default.js config in /views/env folder.');
+ }
+ else{
+ throw new Error(`Since you are loading a custom environment, you should define a ${environment}.js config in /views/env folder.`);
+ }
+}
+
+var conf = require(path.join(__dirname, `../../../env/${environment || 'default'}.js`));
+
+var proxy = httpProxy.createProxyServer({
+ target: conf.host
+});
+
+
+proxy.on('error', function(error, req, res) {
+ res.writeHead(500, {
+ 'Content-Type': 'text/plain'
+ });
+
+ console.error('[Proxy]', error);
+});
+
+module.exports = function(options){
+
+ gulp.task('browser', function() {
+ browserSync.init({
+ startPath: '#/',
+ snippetOptions: {
+ rule: {
+ match: /<!-- browserSync -->/i
+ }
+ },
+ server: {
+ baseDir: options.src,
+ routes: {
+ '/xos/core/static': options.static + '../../static/'
+ },
+ middleware: function(req, res, next){
+ if(
+ req.url.indexOf('/api/') !== -1
+ ){
+ if(conf.xoscsrftoken && conf.xossessionid){
+ req.headers.cookie = `xoscsrftoken=${conf.xoscsrftoken}; xossessionid=${conf.xossessionid}`;
+ req.headers['x-csrftoken'] = conf.xoscsrftoken;
+ }
+ proxy.web(req, res);
+ }
+ else{
+ next();
+ }
+ }
+ }
+ });
+
+ gulp.watch(options.src + 'js/**/*.js', ['js-watch']);
+ gulp.watch(options.src + 'vendor/**/*.js', ['bower'], function(){
+ browserSync.reload();
+ });
+ gulp.watch(options.src + '**/*.html', function(){
+ browserSync.reload();
+ });
+ gulp.watch(options.css + '**/*.css', function(){
+ browserSync.reload();
+ });
+ 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
+ gulp.task('sass', function () {
+ return gulp.src(`${options.sass}/**/*.scss`)
+ .pipe(sass().on('error', sass.logError))
+ .pipe(gulp.dest(options.css));
+ });
+
+ // transpile js with sourceMaps
+ gulp.task('babel', function(){
+ return gulp.src(options.scripts + '**/*.js')
+ .pipe(babel({sourceMaps: true}))
+ .pipe(gulp.dest(options.tmp));
+ });
+
+ // inject scripts
+ gulp.task('injectScript', ['cleanTmp', 'babel'], function(){
+ return gulp.src(options.src + 'index.html')
+ .pipe(
+ inject(
+ gulp.src([
+ options.tmp + '**/*.js',
+ options.helpers + 'ngXosHelpers.min.js'
+ ])
+ .pipe(angularFilesort()),
+ {
+ ignorePath: [options.src, '/../../ngXosLib']
+ }
+ )
+ )
+ .pipe(gulp.dest(options.src));
+ });
+
+ // inject CSS
+ gulp.task('injectCss', function(){
+ return gulp.src(options.src + 'index.html')
+ .pipe(
+ inject(
+ gulp.src([
+ options.src + 'css/*.css',
+ options.static + '../../static/xosNgLib.css'
+ ]),
+ {
+ ignorePath: [options.src]
+ }
+ )
+ )
+ .pipe(gulp.dest(options.src));
+ });
+
+ // inject bower dependencies with wiredep
+ gulp.task('bower', function () {
+ return gulp.src(options.src + 'index.html')
+ .pipe(wiredep({devDependencies: true}))
+ .pipe(gulp.dest(options.src));
+ });
+
+ gulp.task('js-watch', ['injectScript'], function(){
+ browserSync.reload();
+ });
+
+ gulp.task('cleanTmp', function(){
+ return del([options.tmp + '**/*']);
+ });
+
+ gulp.task('serve', function() {
+ runSequence(
+ 'sass',
+ 'bower',
+ 'injectScript',
+ 'injectCss',
+ ['browser']
+ );
+ });
+};