ember: mai 2020

vendredi 29 mai 2020

Use observer with decorator in EmberJS

I tried to use observers with decorator syntax but it does not seems to work.

Without decorators:

onRouteChange: observer('router.currentRouteName', function () {
  this.closeModal();
}),

Tried this with decorators (fails):

@observer('router.currentRouteName')
handler() {
  this.closeModal();
}

Error message:

Assertion Failed: observer must be provided a function or an observer definition

I may have missed something but I did not found anything about decorators and observers in the documentation.

jeudi 28 mai 2020

EmberJS show router model in application.hbs

I am working with Ember.js, and I am trying to make my pages display the title of the page just below the navbar. To make this work I have tried to use model hook, and show it in the application.hbs file.

So far I have tried variations of this:

routes/contact.js

import Route from '@ember/routing/route';

export default class ContactRoute extends Route {
  model() {
    return 'Title of page';
  }
}

templates/application.hbs

<div>
  <NavBar />

  <div class="pageTitle">
    <h2>
      <p></p>
    </h2>
  </div>

  <div class="body">
    
  </div>
</div>

I've mostly tried to mess around with @model in application.hbs things like outlet.@model. But all of these attempts have resulted in empty titles or Template Compiler Errors. Does anyone have a solution for this? Preferably one that does not involve jquery?

mercredi 27 mai 2020

Yield Google Tag Manager snippet in in EmberJS

I have several Ember projects under the same repo and would like to be able to reuse the GTM snippet across all of their .html files.

<!DOCTYPE html>
<html lang="en">
  <head>

    

    <link rel="stylesheet" href="assets/employer-vendor.css">
    <link rel="stylesheet" href="assets/employer.css">
  </head>
  <body>
  </body>
</html>

Should I use ember-cli-meta-tags or ember-cli-inline-content or similar?

Is the best approach to reusing the GTM snippet?

Checking for updates on an object and custom events

I've got a stupid question that's stumped me a little at the moment. Feel like I'm missing something obvious. For the purpose of this I have 3 different javascript objects.

The model, which details a device and its attributes.

The display, which reads data from the model and loads it to a webpage display.

And finally, the Updater which updates the model's attributes.

Model is called and read by the display, while it is called and written to from the updater.

What I'm trying to do is to reflect live updates from the updater. The updater is a message handler for a websocket connection to get live data. I need the display to update to reflect the newest data in the model.

I have attempted doing this with event listeners but seem to hit a wall with their assignment.

If the event is part of the model event = new Event('name') or event = new CustomEvent('name'), it errors in compilation that it is an invalid type. There is no error if it is simply event = Event('name'), but that then errors in the app, stating that 'new' needs to be there. With that implementation, I attached an event listener to the model in the display:

model.addEventListener('name', () => {
    // update info
});

And then I try to fire the event in the updater (message handler), so that after the model's attributes are updated, it will fire the event so the display will catch it.

Obviously I am hitting issues with attaching the event to the model object. Am I missing something with syntax and/or best practice as to how I should attach the event, listener and how to fire it or should I be doing something completely different?

Any help would be appreciated, thanks!

Ember Controller method to manipulate parameters and return a value to the view?


<li title=></li>

Helpers can be used but just trying to find a solution within controller itself. Is there any way ?

Thank you.

lundi 25 mai 2020

Emberfire sves to firebase, but I get an error

Whenever I try to save to Firebase, I get this error, BUT THE DATA IS SAVED:

TypeError: Cannot read property 'replace' of undefined
    at Cache.func (index.js:64)
    at Cache.get (index.js:760)
    at decamelize (index.js:167)
    at Cache.func (index.js:32)
    at Cache.get (index.js:760)
    at Object.dasherize (index.js:190)
    at normalizeModelName (-private.js:62)
    at detectMerge (-private.js:661)
    at IdentifierCache.updateRecordIdentifier (-private.js:468)
    at Store.didSaveRecord (-private.js:8766)

I tried catching it with .catch() after the .then(), but I get the exact same error message.

I am following the tutorial on https://yoember.com/#lesson-3 , but it is not up-to-date, so I am having to figure somethings myself.

The versions of what I am using are in the package.json file bellow.

package.json

{
  "name": "library-app",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for library-app goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build --environment=production",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test"
  },
  "devDependencies": {
    "@ember/jquery": "^1.1.0",
    "@ember/optional-features": "^1.3.0",
    "@glimmer/component": "^1.0.0",
    "@glimmer/tracking": "^1.0.0",
    "babel-eslint": "^10.0.3",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^1.5.3",
    "ember-cli": "~3.16.2",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.17.2",
    "ember-cli-bootstrap-sassy": "^0.5.8",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-htmlbars": "^4.2.2",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-sass": "^10.0.1",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.3",
    "ember-cli-uglify": "^3.0.0",
    "ember-data": "~3.16.0",
    "ember-export-application-global": "^2.0.1",
    "ember-fetch": "^7.0.0",
    "ember-load-initializers": "^2.1.1",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^4.6.0",
    "ember-resolver": "^7.0.0",
    "ember-source": "~3.16.0",
    "ember-welcome-page": "^4.0.0",
    "emberfire": "^3.0.0-rc.6",
    "eslint-plugin-ember": "^7.7.2",
    "eslint-plugin-node": "^11.0.0",
    "firebase": "^7.14.5",
    "loader.js": "^4.7.0",
    "qunit-dom": "^1.0.0",
    "sass": "^1.26.5"
  },
  "engines": {
    "node": "10.* || >= 12"
  },
  "ember": {
    "edition": "octane"
  }
}

This is my Model generated with

ember g model invitation email:string

invitation.js

import Model, { attr } from '@ember-data/model';

export default class InvitationModel extends Model {
  @attr('string') email;
}

The whole index.js is bellow, but the important part I believe is only the @action

index.js

import Controller from '@ember/controller';

import { action } from '@ember/object';
import { match, not } from '@ember/object/computed';

export default class IndexController extends Controller {

  emailAddress = '';
  responseMessage = '';
  headerMessage = 'Coming Soon';

  @match('emailAddress', /^.+@.+\..+$/)
  isValid;

  @not('isValid')
  isDisabled;

  @action
  saveInvitation() {
    const email = this.emailAddress;

    const newInvitation = this.store.createRecord('invitation', { email: email });

    newInvitation.save()
    .then(response => {
      this.set('responseMessage', `Thank you! We saved your email address with the following id: ${response.get('id')}`);
      this.set('emailAddress', '');
    })
    .catch(error => {
      console.log(error);
    })

  }

}

The closest issue / question I found to this error message is this (The same error message, but we run into them quite differently): https://github.com/emberjs/data/issues/5811

But didn't help me understand what is going on here.

Trigger parent redirection after redirecting from child with emberJS

Assuming I have a route that contains another route:

this.route('fields', function () {
  this.route('details', { path: '/:field_name' });
});

Parent route:

redirect(model, transition) {
  alert(transition.to.name);
},

Child route:

redirect(model, transition) {
  if (something) this.transitionTo('fields');
},

It should alert twice when I reach the child route (since there is a redirection to parent route). It only alert once (before the redirection).

How can I re-trigger the parent redirect action?

Extend blueprint in EmberJS

Is there a way to extend blueprint in EmberJS? As far as I know, I can override a blueprint:

Blueprints in your project’s directory take precedence over those packaged with Ember CLI. This makes it easy to override the built-in blueprints by generating one with the same name.

But it seems I have to copy-paste some JS and the template itself. I would like to change the default template a bit, without breaking the actual template and template behavior.

By example, let's say I would like to replace only one line in this template:

import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('<%= friendlyTestDescription %>', function(hooks) {
  setupTest(hooks);

  // TODO: Replace this with your real tests.
  test('it exists', function(assert) {
    let controller = this.owner.lookup('controller:<%= controllerPathName %>');
    assert.ok(controller);
  });
});

I would like to change only one line (let vs const:

    const controller = this.owner.lookup('controller:<%= controllerPathName %>');

I don't want to rewrite the whole index file plus the blueprint template file, it seems overkill. Is it possible?

samedi 23 mai 2020

Ember - Displaying API response data on Template.hbs

I'm very new to Ember - highly appreciated if anyone can assist. I need to display the network request response:

This is my port route:

import Route from '@ember/routing/route';

export default Route.extend({
    model(params) {
        this.store.findRecord('node', params.node_id).then((res) => {
            var port = res.ports.arrangedContent.currentState;
            console.log(port);
            return port;      
        });
    }
});

Here is the port model:

import DS from 'ember-data';

var ports = {
    label: DS.attr('string'),
    mode: DS.attr('string'),
    node_name: DS.attr('string'),
    port_csid: DS.attr('string'),
    proxied_ssh_url: DS.attr('string'),
    web_terminal_url: DS.attr('string'),
    runtime_status: DS.belongsTo('nodeRuntimeStatus', {async: false}),
    parent: DS.belongsTo('node', {async: false}),
};

export default DS.Model.extend(ports);

below is the template:


    <span>
       
    </span>

API call happens and I can console.log the ports (array) but no sure why I get nothing to display.

Ember Routing - Dynamic Segment - Passing model through

I am using Ember 3.18 and i have issue with dynamic segment. Here is my router.js

Router.map(function() {

    this.route('posts');

    this.route('post' , {path:"/post/:post_id"});

});

When I try to perform a transition from posts route (which contains all the posts) to post/:post_id (which displays the details of the particular post) using the following

<div>


   <LinkTo @route="dashboard.inbox-mail" @model=>

    <div class="card">
      <div>
        <p class="name"></p>
      </div>
      <div>
        <p class="title"></p>
        <p class="date"></p>
      </div>
    </div>

  </LinkTo>

 
</div>

it does not performs the transition to the post/:post_id. The data contains following attributes

id - string name - string title - string message - string timestamp - string

my goal is to pass the post id to post/:post_id and make a API call in the model hook of post/:post_id.

I was able to perform transition using the below code but the downside is that the beforemodel and model hook are not called. Passing the entire data as model results in not calling the model and beforemodel

<div>

   <LinkTo @route="dashboard.inbox-mail" @model=>
    <div class="card">
      <div>
        <p class="name"></p>
      </div>
      <div>
        <p class="title"></p>
        <p class="date"></p>
      </div>
    </div>
  </LinkTo>
  
</div>

vendredi 22 mai 2020

A system error occurred: uv_os_get_passwd returned ENOENT (no such file or directory)

I have a jenkin pipeline that it runs on a docker agent when I run ember build I get this error. Any idea what should I do . I use

image 'node:latest'

and I get this error

+ ./node_modules/.bin/ember build --env production
WARNING: Node v14.3.0 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
Building
A system error occurred: uv_os_get_passwd returned ENOENT (no such file or directory)

EmberJS Invalid or Unexpected token without further information

I actually did nothing. I just wrote one line of CSS and since then its like that. I even tried to remove the whole CSS file I was working in, but it still does not work. Here you have the .log file:

ERROR Summary:

  - broccoliBuilderErrorStack: [undefined]
  - code: [undefined]
  - codeFrame: [undefined]
  - errorMessage: Invalid or unexpected token
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: Invalid or unexpected token
  - name: SyntaxError
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: <path>\node_modules\webpack\lib\webpack.js:108
    EnvironmentPlugin: (


SyntaxError: Invalid or unexpected token
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

And I don't know who wrote this error logging method, but it is useless. I cannot tell what happened, since I didn't do anything except writing one line of CSS code.

jeudi 21 mai 2020

EmberJS jQuery deprecation and Foundation

I have an ember project, built using ember-cli, where I use foundation-sites. To initalize foundation, I do

import jQuery from 'jquery';

export default function initFoundation() {
    jQuery(document).foundation();
}

I have @ember/jquery as a dependency, and the code works as expected. However, I get thousands, or even millions of warnings, telling me

Using Ember.$() has been deprecated, use import jQuery from 'jquery'; instead

When I look at the built code, it actually looks like

exports.default = initFoundation;
    function initFoundation() {
        Ember.$(document).foundation();
    }

What am I doing wrong? Is there any way of fixing this warning? Thanks for any help!

How could i build android and ios app from ember app with online platform without downloading SDK and XCODE?

Is there any way that I upload my ember app so that the online platform generates it as a app for android ios. I have heared about cordova but it insisted me in downloading Xcode or android SDK. I need an online platform to build

mercredi 20 mai 2020

Can't install Ember Octane on Mac; problems with NPM and NVM

I'd like to install the most recent version of Ember on my Mac with MacOS Catalina. I actually thought I had done so a few weeks ago (this machine is only three months old), but ember -v says that Ember CLI is at version 3.9 which is 13 months old.

So I entered npm install -g ember-cli in the terminal, but I get an error:

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
npm ERR!   stack:
npm ERR!    "Error: EACCES: permission denied, access '/usr/local/lib/node_modules'",
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user

So I did what is suggested here and tried to install nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

There's some output and everything is looking finde, but when I try to verify my installation using command -v nvm, there's no output at all.

npm uninstall ember-cli gives me up to date in 0.031s.

What can I do to get Ember Octane running?

Ember Quickstart tutorial: Parsing error: Unexpected character '@' in '@action'

I just started using Ember and I have some trouble with the Ember Quickstart tutorial. Currently, I get Parsing error: Unexpected character '@' in line 5 of people-list.js:

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class PeopleListComponent extends Component {
  @action
  showPerson(person) {
    alert(`The person's name is ${person}!`);
  }
}

What's wrong here? The code is copied from the tutorial.

This is the output of ember -v:

ember-cli: 3.18.0
node: 11.13.0
os: darwin x64

This is my package.json. I can run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".

{
  "name": "ember-quickstart",
  "version": "0.0.0",
  "private": true,
  "description": "Small description for ember-quickstart goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test"
  },
  "devDependencies": {
    "@ember/jquery": "^0.5.2",
    "@ember/optional-features": "^0.6.3",
    "broccoli-asset-rev": "^2.7.0",
    "ember-ajax": "^5.0.0",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.1.2",
    "ember-cli-dependency-checker": "^3.1.0",
    "ember-cli-eslint": "^4.2.3",
    "ember-cli-htmlbars": "^3.0.0",
    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
    "ember-cli-inject-live-reload": "^1.8.2",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-data": "~3.9.0",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^1.1.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^3.4.1",
    "ember-resolver": "^5.0.1",
    "ember-source": "~3.9.0",
    "ember-welcome-page": "^3.2.0",
    "eslint-plugin-ember": "^5.2.0",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.0"
  },
  "engines": {
    "node": "10.* || >= 12"
  },
  "dependencies": {
    "ember-cli": "^3.18.0",
    "@glimmer/component": "^1.0.0"
  }
}

Adding some text here as SO won't let me post the question otherwise.

lundi 18 mai 2020

Ember.JS concurrency task, perform() is not a function

I was trying to convert a function over to a task. Here is the original code:

Call:

this.socketConnect(endpoint, token);

Function:

socketConnect = async (token, endpoint) => {
        this.socket = new WebSocket(endpoint + '?auth=' + token);

        this.socket.addEventListener('open', () => {
                this.socket.addEventListener('message', event => this.handleMessage(event));

                this.socket.addEventListener('close', event => this.retryConnection(event, endpoint));

        });
    }

I've been following structure on implementing Ember tasks. It all compiles with no issue, however when it gets called, it outputs that this.socketConnect(...) is not a function. Before hand I didn't have the return below and it output that this.socketConnect wasn't a function. Here is my current code for a task.

Import:

import { task } from 'ember-concurrency';

Call:

this.socketConnect(endpoint, authToken).perform();

Function:

@task *socketConnect(endpoint, token) {
        yield async () => {
            this.socket = new WebSocket(endpoint + '?auth=' + token);
            this.socket.addEventListener('open', () => {
                this.socket.addEventListener('message', event => this.handleMessage(event));

                this.socket.addEventListener('close', event => this.retryConnection(event, endpoint));
            });

            return;
        };

    }

New to this, so I'm guessing there's something small I'm missing. It matches other uses. Also if anyone could help on the benefits of switching a websocket generation function to a task? Any help would be appreciated, thank you.

Ember tests: checkbox

I'm developing ember tests and I want to check if error messages are correctly displayed. For that I need to check a specific checkbox (or groups of checkboxes) from a list. Is there a way to specify which checkboxes we want? Maybe using some kind of parameter that we can pass to choose which we want to select? Thanks

dimanche 17 mai 2020

How to Deploy Ember App On Apache Tomcat?

I have use ember build command to create the webapp. when i place the dist folder from the ember in the tomcat's webapp folder it does not works.

please tell me how to configure and deploy a ember app in tomcat.

the ember app should send ajax request to a server that is already running in tomcat server.

samedi 16 mai 2020

How to override JavaScript methods

I'm trying to learn Ember framework and I found this sample code in the Ember documentation.I'm new to JavaScript and please help me to understand how the following output was received.

Person = Ember.Object.extend({
  say: function(thing) {
    var name = this.get('name');
    alert(name + " says: " + thing);
  }
});

Soldier = Person.extend({
  say: function(thing) {
    this._super(thing + ", sir!");
  }
});

var yehuda = Soldier.create({
  name: "Yehuda Katz"
});

yehuda.say("Yes");

output: alerts "Yehuda Katz says: Yes, sir!"

The problem with me is how the say function in Person class got executed because it has been overridden in the Soldier class below.I'm some what stuck in method calling in here.And what does the super keyword does there. Thank you

documentation: https://guides.emberjs.com/v1.11.0/object-model/

vendredi 15 mai 2020

Migrating From Ember to React Page by Page Exploring Options

I want to move a big Ember v1.4.0 app to React. Instead of creating a new UI from scratch. I want to start building it in React my converting pages over slowly, essentially mixing React and Ember pages in one website.

Goal: The above is my ultimate goal, but my first goal is is to create a single page in React that is called by Ember's router.

What I have tried so far: I wanted to create a React component in a ./templates/myFirstTestPage.handlebars because, as I understand it, the router.js calls a template file. But I am unsuccessful creating a React component in the handlebars file. Firstly, I cannot use to import React because does not work in handlebars. Secondly, I believe the handlebars is parsing the React app in an incorrect way. Actually, I don't really understand how, and in what order, these frameworks do the rendering.

Possible solutions (but I need implementation details):

Somehow create a React component in the template folder with the .handlebars extension.
Refer to the url of a React app in the handlebars of an Ember app
Have the Ember router map the url to a jsx file. This solution seems really viable to me. I think to myself that surely the creators of Ember must have thought that people might want to have their Ember app refer to some regular html file. Hence, I hope someone might have some knowledge whether this is possible or not.
Somehow create my own router that maps urls to particular files. If its a React component, then I'd map it to my jsx file, if not, I let Ember's router take care of the mapping. I don't really know how to implement a url mapping thing though.

WatcherAdapter's first argument must be an array of SourceNodeWrapper nodes

While configuring Ember project on my local PC. I have installed all the required packages. But when I try to build the project it gave me error.

After some research I found a solution, to uninstall ember-browserify and use ember-auto-import instead. I tried to uninstall the ember-browserify. It helps to create a successful build but ember-pusher requires the ember-browserify and my app doesn't load properly.

Then I go back on installing the ember-browserify and have no luck till yet to fix the issue.

My package.json file:

{
  "name": "compliance",
  "version": "2.36.0",
  "private": true,
  "description": "Ember application for COMpliance API",
  "repository": "",
  "license": "",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test"
  },
  "devDependencies": {
    "@ember/jquery": "^0.5.2",
    "@ember/optional-features": "^0.6.4",
    "aws-sdk": "^2.676.0",
    "ember-ajax": "^3.1.0",
    "ember-bootstrap-datetimepicker": "^1.1.0",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^6.18.0",
    "ember-cli-chart": "^3.6.0",
    "ember-cli-dependency-checker": "^3.2.0",
    "ember-cli-deploy": "^1.0.2",
    "ember-cli-deploy-build": "^1.1.2",
    "ember-cli-deploy-cloudfront": "~1.1.0",
    "ember-cli-deploy-display-revisions": "^1.0.1",
    "ember-cli-deploy-gzip": "^1.0.1",
    "ember-cli-deploy-manifest": "~1.1.0",
    "ember-cli-deploy-revision-data": "~1.0.0",
    "ember-cli-deploy-s3": "~1.1.0",
    "ember-cli-deploy-s3-index": "^1.0.1",
    "ember-cli-deploy-slack": "^1.0.1",
    "ember-cli-dotenv": "1.2.0",
    "ember-cli-dropzonejs": "^1.3.6",
    "ember-cli-eslint": "^4.2.3",
    "ember-cli-flash": "^1.8.1",
    "ember-cli-htmlbars": "^3.1.0",
    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
    "ember-cli-inject-live-reload": "^1.8.2",
    "ember-cli-lightbox": "1.0.2",
    "ember-cli-mentionable": "0.0.10",
    "ember-cli-moment-shim": "^1.1.0",
    "ember-cli-qunit": "^4.3.2",
    "ember-cli-sass": "^7.2.0",
    "ember-cli-sentry": "^2.4.4",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-string-helpers": "^1.10.0",
    "ember-cli-template-lint": "^1.0.0",
    "ember-cli-uglify": "^2.1.0",
    "ember-cli-windows-addon": "^1.3.1",
    "ember-data": "^3.18.0",
    "ember-drag-drop": "^0.5.1",
    "ember-export-application-global": "^2.0.1",
    "ember-highcharts": "^1.2.0",
    "ember-infinity": "^1.4.9",
    "ember-initials": "^3.13.0",
    "ember-jquery-legacy": "^1.0.0",
    "ember-load-initializers": "^1.1.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-moment": "6.1.0",
    "ember-radio-button": "1.2.0",
    "ember-resolver": "^5.3.0",
    "ember-responsive-tabs": "^1.0.7",
    "ember-side-menu": "^0.1.0",
    "ember-simple-auth": "^1.9.2",
    "ember-source": "^3.18.1",
    "ember-tag-input": "^1.2.2",
    "ember-toggle": "^5.3.3",
    "ember-tooltips": "^3.4.2",
    "ember-welcome-page": "^3.2.0",
    "ember-wormhole": "^0.5.5",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "eslint-plugin-ember": "^5.4.0",
    "highcharts": "^6.2.0",
    "loader.js": "^4.7.0",
    "moment": "^2.25.3",
    "moment-timezone": "0.5.2",
    "pdfjs-dist": "^2.3.200",
    "pusher-js": "^3.1.0",
    "qunit-dom": "^0.8.5"
  },
  "engines": {
    "node": "6.* || 8.* || >= 10.*"
  },
  "dependencies": {
    "broccoli-asset-rev": "^3.0.0",
    "ember-browserify": "^1.2.2",
    "ember-cli": "^3.18.0",
    "ember-progress-bar": "^1.0.0",
    "ember-pusher": "^1.1.1",
    "jam-icons": "^2.0.0",
    "jquery-csv": "^1.0.11",
    "liquid-fire": "^0.31.0",
    "node-sass": "^4.14.1"
  }
}

Error log:

=================================================================================

ENV Summary:

  TIME: Fri May 15 2020 18:37:52 GMT+0500 (Pakistan Standard Time)
  TITLE: ember
  ARGV:
  - C:\Program Files\nodejs\node.exe
  - C:\Users\upervaiz\AppData\Roaming\npm\node_modules\ember-cli\bin\ember
  - s
  EXEC_PATH: C:\Program Files\nodejs\node.exe
  TMPDIR: C:\Users\upervaiz\AppData\Local\Temp
  SHELL: null
  PATH:
  - C
  - \ProgramData\DockerDesktop\version-bin;C
  - \Program Files\Docker\Docker\Resources\bin;C
  - \Python37\Scripts\;C
  - \Python37\;C
  - \Program Files\Python37\Scripts\;C
  - \Program Files\Python37\;C
  - \Program Files (x86)\Common Files\Oracle\Java\javapath;C
  - \Windows\system32;C
  - \Windows;C
  - \Windows\System32\Wbem;C
  - \Windows\System32\WindowsPowerShell\v1.0\;C
  - \Windows\System32\OpenSSH\;C
  - \Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\;C
  - \Program Files\Microsoft SQL Server\130\Tools\Binn\;C
  - \Program Files (x86)\Microsoft SQL Server\130\DTS\Binn\;C
  - \Program Files\Microsoft SQL Server\130\DTS\Binn\;C
  - \Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C
  - \Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C
  - \Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio\;C
  - \Program Files\Microsoft SQL Server\120\Tools\Binn\;C
  - \Python27\;C
  - \Python27\Scripts;C
  - \Program Files\PuTTY\;C
  - \Program Files\Java\jdk1.6.0_45\bin;C
  - \Program Files\Git;"C
  - \Windows;C
  - \Windows\System32;C
  - \Python27";C
  - \Program Files\helm\windows-amd64;C
  - \Program Files\IBM\Cloud\bin;C
  - \xampp\php;C
  - \ProgramData\ComposerSetup\bin;C
  - \WINDOWS\system32;C
  - \WINDOWS;C
  - \WINDOWS\System32\Wbem;C
  - \WINDOWS\System32\WindowsPowerShell\v1.0\;C
  - \WINDOWS\System32\OpenSSH\;C
  - \Program Files (x86)\Google\Cloud SDK\google-cloud-sdk\bin;C
  - \AIRSDK\bin;C
  - \Program Files (x86)\gnupg\bin;C
  - \Program Files\nodejs\;C
  - \Program Files\Git\cmd;C
  - \Program Files\Git\bin;C
  - \Users\upervaiz\AppData\Roaming\npm;C
  - \Users\upervaiz\AppData\Local\Microsoft\WindowsApps;C
  - \Program Files\Java\jdk1.6.0_45\jre\bin\server;C
  - \Users\upervaiz\AppData\Local\atom\bin;C
  - \Program Files (x86)\Nmap;C
  - \Users\upervaiz\AppData\Roaming\Composer\vendor\bin;C
  - \Users\upervaiz\AppData\Local\GitHubDesktop\bin;C
  - \Users\upervaiz\AppData\Local\Programs\Microsoft VS Code\bin;C
  - \Users\upervaiz\AppData\Local\Microsoft\WindowsApps;C
  - \Users\upervaiz\AppData\Roaming\npm
  PLATFORM: win32 x64
  FREEMEM: 3896344576
  TOTALMEM: 17054658560
  UPTIME: 12891
  LOADAVG: 0,0,0
  CPUS:
  - Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz - 2496
  - Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz - 2496
  - Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz - 2496
  - Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz - 2496
  ENDIANNESS: LE
  VERSIONS:
  - ares: 1.16.0
  - brotli: 1.0.7
  - cldr: 36.0
  - http_parser: 2.9.3
  - icu: 65.1
  - llhttp: 2.0.4
  - modules: 72
  - napi: 5
  - nghttp2: 1.40.0
  - node: 12.16.3
  - openssl: 1.1.1g
  - tz: 2019c
  - unicode: 12.1
  - uv: 1.34.2
  - v8: 7.8.279.23-node.35
  - zlib: 1.2.11

ERROR Summary:

  - broccoliBuilderErrorStack: [undefined]
  - code: [undefined]
  - codeFrame: [undefined]
  - errorMessage: WatcherAdapter's first argument must be an array of SourceNodeWrapper nodes
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: WatcherAdapter's first argument must be an array of SourceNodeWrapper nodes
  - name: TypeError
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: TypeError: WatcherAdapter's first argument must be an array of SourceNodeWrapper nodes
    at new WatcherAdapter (D:\Projects\Neb\Front\compliance-app\node_modules\broccoli\dist\watcher_adapter.js:18:19)
    at new Watcher (D:\Projects\Neb\Front\compliance-app\node_modules\broccoli\dist\watcher.js:23:44)
    at Watcher.constructBroccoliWatcher (D:\Projects\Neb\Front\compliance-app\node_modules\ember-cli\lib\models\watcher.js:45:19)
    at new Watcher (D:\Projects\Neb\Front\compliance-app\node_modules\ember-cli\lib\models\watcher.js:27:41)
    at ServeTask.run (D:\Projects\Neb\Front\compliance-app\node_modules\ember-cli\lib\tasks\serve.js:58:7)
    at D:\Projects\Neb\Front\compliance-app\node_modules\ember-cli\lib\models\command.js:238:24
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

jeudi 14 mai 2020

Group array based on many values

I want to group the following array of products:-

const array = [{date: "10 feb", from: "2", to: "10", name:"chair"},
               {date: "10 feb", from: "10", to: "22", name: "chair"}, 
               {date: "10 feb", from: "22", to: "31", name: "chair"}, 
               {date: "10 feb", from: "35", to: "40", name: "chair"}, 
               {date: "12 feb", from: "2", to: "10", name: "chair"}, 
               {date: "12 feb", from: "10", to: "20", name: "toy"}]

Such as if the date and name of consecutive product are similar and also "from" of 1st product is same as "to" of the next product then they should be grouped by taking "from" of 1st product and "to" of next product.

Result array = [{date: "10 feb", from: "2", to: "31", name:"chair"},
                {date: "10 feb", from: "35", to: "40", name: "chair"},
                {date: "12 feb", from: "2", to: "10", name: "chair"}, 
                {date: "12 feb", from: "10", to: "20", name: "toy"}]

Preferable solution using Foreach loop rather than for loop.

mercredi 13 mai 2020

Ember Quickstart: Build Error when adding JS file to component

I just started using Ember. The next step in the Ember Quickstart tutorial is adding a JS file to a component:

In addition to the template, a component can also have a JavaScript file [...]. Go ahead and create a .js file with the same name and in the same directory as our template (app/components/people-list.js), and paste in the following content:

I did that, but now I get a build error:

Build Error (broccoli-persistent-filter:TemplateCompiler)

EEXIST: file already exists, symlink '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-131-broccoli_merge_trees_templates/ember-quickstart/templates/components/people-list.js' -> '/var/folders/9f/hkp3jgh507ld849g376t8v9c0000gp/T/broccoli-68910fD325sz6drb3/out-132-broccoli_persistent_filter_template_compiler/ember-quickstart/templates/components/people-list.js'

How do I get rid of this?

mardi 12 mai 2020

Build Error -- Attempting to watch missing directory

I’m trying to setup an existing Ember application on my local PC. I have installed all the necessary packages.

But when I try to run the application, it gives me build error.

Generate Ember code coverage for a Selenium test run

Does anyone know how to generate Ember code coverage metrics off of Selenium tests? I've got several tests written in Groovy/Java.

I've found documentation of people doing this with Istanbul. One example is Front End Javascript Test Coverage with Istanbul Selenium.

There is also an Ember CLI Code Coverage tool that builds upon the instrumentation produced by Istanbul. However, from what I've gathered so far, this tool appears to completely wrap around the Istanbul instrumentation, thus only allowing code coverage statistics to be generated for ember unit and integration tests before build time. Where it stores its own mappings from the Istanbul results to Ember code is not readily apparent, at least not to a Java developer like me.

I'm looking for a way to generate a war file for internal use only that has both the Istanbul instrumentation and the mappings to the ember code, and that Selenium can trigger to generate the Ember Code Coverage report. Any insight on how to do this would be much appreciated.

Ember JS - Attempting to watch missing directory

enter image description here

Node Version : v12.16.3
npm version : 6.14.5

Ember Simple Auth Devise Authenticator Failing

I'm attempting to set up a new ember app, and I'm trying to set up ESA to integrate with devise.

I'm following the walkthrough with the exception of using the devise authenticator

@action 
async authenticate() {
  let { identification, password } = this;
  try { 
    await this.session.authenticate('authenticator:devise', identification, password);
  } catch (error) {
    this.errorMessage = error.error || error
  }
}

What I'm seeing on the call to session.authenticate is an error during lookup authenticator with setting some unknown ember property

TypeError: Cannot set property '__OWNER__ember1589293697731192541050875__' of undefined
    at Object.setOwner (index.js:80)
    at Proxy._lookupAuthenticator (internal-session.js:228)
    at Proxy.authenticate (internal-session.js:31)
    at Class.authenticate (session.js:168)
    at LoginController.authenticate (login.js:44)

It doesn't even get to the point of calling out to the backend to authenticate, and identification and password are set, and I can't find anything I'm doing wrong with the code. Any ideas?

lundi 11 mai 2020

How do I replace invokeAction attributes on link-to components in EmberJs?

I have a piece of code like

Which gives me this error message: Do not use action as (action ...). Instead, use the on modifier and fn helper.ember-template-lint(no-action)

How do I replace action here? I tried changing it to an onclick and using fn but that didnt seem to work

HTTP Error 500.1013 Azure App Service Node 8.9.4

We have used the Azure App Service on Linux/Docker to host our Node.js app, We have an error 500.1013 while sending more than 240MB files in Request Body. (Node exe is crashed).

but it's working fine in development, We have faced this error only in production.

Web.config

<configuration>
  <system.webServer>
    <handlers>
      <clear />
      <add name="iisnode" path="app.js" verb="*" modules="iisnode" />
    </handlers>
    <httpErrors existingResponse="PassThrough" />
    <httpProtocol>
      <customHeaders>
        <remove name="X-Powered-By" />
      </customHeaders>
    </httpProtocol>
    <iisnode enableXFF="true" maxRequestBufferSize="52428800" loggingEnabled="true" />
    <rewrite>
      <rules>
        <rule name="Node app">
          <match url="/*" />
          <action type="Rewrite" url="app.js" />
        </rule>
      </rules>
    </rewrite>
    <security>
      <requestFiltering removeServerHeader="true">
        <requestLimits maxAllowedContentLength="2097152000" />
      </requestFiltering>
   </security>
   <webSocket enabled="false" />
  </system.webServer>
</configuration>

App.js (proxy)

 config.get("apiBase"),
 {
   limit: "2gb",
   proxyReqOptDecorator: (proxyReqOpts, srcReq) => {

     const headerNames = Object.keys(proxyReqOpts.headers);
     headerNames.forEach(h => {
       if (h.startsWith("x-forwarded-")) {
         delete proxyReqOpts.headers[h];
       }
     });

     return proxyReqOpts;
   },
   proxyReqPathResolver: req => "/" + (req.path.substring(`/${apiProxyPathPrefix}/`.length) + "?" + (url.parse(req.url).query || ''))
 }); ```

samedi 9 mai 2020

Assertion Failed: '@dropdown.isOpen' is not a valid path

Getting this error when trying to run a web app built in ember:

Template Compiler Error (broccoli-persistent-filter:TemplateCompiler) in ember-basic-dropdown/templates/components/basic-dropdown-content.hbs

Assertion Failed: '@dropdown.isOpen' is not a valid path. ('ember-basic-dropdown/templates/components/basic-dropdown-content.hbs' @ L2:C6)

Using:

ember-cli: 2.18.2
node: 10.15.2
os: linux x64
ember-basic-dropdown: 5.8.0

Full Error Log

vendredi 8 mai 2020

How do I load Require.JS developed modules in an Ember.JS application?

I am trying to integrate a third-party library developed with Require.JS into a new Ember.JS application. I have looked at addons like ember-cli-amd and ember-auto-import but I cannot figure out how to make them work for a library loaded like so

<script data-main="jslib/app/LibConfig" type="text/javascript" src="jslib/modules/require.js"></script>

jeudi 7 mai 2020

Avoiding cross-site scripting vulnerabilities in style with htmlSafe()

Hej I am new(ish) to ember.js and am trying to build a helper function that processes string input from an ACF input field on wordpress. The attempt is to avoid getting a warning message from the browser about XSS attacks. Simply: the goal is to be able to create colors and gradient re-designs through the clients cms. However; even tho the string runs through the helper easily, and produces the desired effect of a new, supposedly safe, html string. I still get the warning.

code snippets are here: from the helper in app/helpers

import {helper} from '@ember/component/helper'
import Ember from 'ember';
import { htmlSafe } from '@ember/string'
const htmlEscape = Ember.Handlebars.Utils.escapeExpression;

export function escapeCSS(string) {
    let safestring = htmlEscape(string);    
    return htmlSafe(safestring);
}

export default helper(escapeCSS)

from the template

<div style="background-image:linear-gradient(, )" class="/homepage"></div>

How to i call ember action with selenium using python script

here is the code and trying to automate calling this module.

Service Dashboard

I tried WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class='module' and text()='Dashboards'][@data-ember-action]"))).click();\

But received the following traceback (most recent call last): File "/home/netscout/PycharmProjects/Pulse-BTT/NG1-BTT.py", line 18, in WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class='module' and text()='Dashboards'][@data-ember-action]"))).click(); TypeError: 'str' object is not callable

How to make AmCharts work with External Data Source in Ember Glimmer Component?

Has anyone managed to get an AmCharts trend working on an external data source in an Ember Glimmer component?

I can make it work with static data (exactly the same as response from WebAPI), but on an external data source the chart never loads the data.

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);

export default class TrendComponent extends Component {




    render() {


        let chart = am4core.create("chartdiv", am4charts.XYChart);
        chart.paddingRight = 20;


        chart.dataSource.url = 'https://localhost/plot';


        let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.renderer.grid.template.location = 0;


        let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxis.tooltip.disabled = true;
        valueAxis.renderer.minWidth = 35;

        let series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.dateX = "Timestamp";
        series.dataFields.valueY = "Value";

        chart.cursor = new am4charts.XYCursor();

        let scrollbarX = new am4charts.XYChartScrollbar();
        scrollbarX.series.push(series);
        chart.scrollbarX = scrollbarX;

      }

mercredi 6 mai 2020

How would I get a list of all the routes of my application in Ember.js 3.18?

I am trying to build an automatic navigation.

How would I get a list of all the routes of my application in Ember.js 3.18?

This question was asked 4 years ago and the answers seem outdated and hack-ish.

I have been trying several things. This kind of code gets me the current route name. But that's not what I want: I want an object of all the available routes.

In component JS:

import { inject as service } from '@ember/service';```

export default class navComponent extends Component {
  @service router;
}

In template:

mardi 5 mai 2020

how to reduce the load in model hook in Ember

I have a routes/paper.js file which has below model hook

model(params,transition){
   let user = store.getRequest('user','paper/user')
   let address = store.getRequest('address','paper/address')

return RSVP.hash({
   user,
   address
}).then((model) => {
    set(model, 'address_name', get(model.address, 'name'));

    return ...model
})

}

I want to reduce the load in model hook by moving the api request to controller and use it in setcontroller . but the model is not having the data , please find below my modification

//controller/paper.js

testerfunction(params){
 let user = store.getRequest('user','paper/user')
   let address = store.getRequest('address','paper/address')
   let paperId = params.paperID

return RSVP.hash({
paperID: paperID,
   user,
   address
}).then((model) => {
    set(model, 'address_name', get(model.address, 'name'));

    return ...model
})

}


//routes/paper.js 


model(params,transition){

}


setupController(controller,model) {
 testerfunction(get(this,'model.params');
}

but my page render is blank

samedi 2 mai 2020

Ember Changeset Validations Not Validate Relationship Input Field

So i have a form that contain relationship input field. The form is using ember-changeset to proxy the office model. However the validations file seems doesn't support relationship input field. For field phone number it's not validated as i call the changeset.validate() when saving the form.

 /* office model */
 export default DS.Model.extend({
    phone: DS.belongsTo(),
 });

 /* phone model */
 export default DS.Model.extend({
   number: DS.attr('string'),
   country: DS.belongsTo('country')   
 });

 /* app/templates/component/form-office.hbs */
 <form >
   
   
 </form>

 /* app/validations/form-office.js */
 export default { 
   name: validatePresence({ presence: true }),
   'phone.number': validatePresence({ presence: true })
 }

i am using ember version 3.5.1 and installed ember-changeset-validations version 2.2.1

My question is there any example of how to handle this kind of scenario for form with multiple relationships input ?

vendredi 1 mai 2020

Why does ASP.NET Core not support media-type application/vnd.api+json

I am building a web application using ASP.NET Core 3.1 as the back-end and Ember JS Octane as the front-end. Since Ember uses the JSON:API specificaiton, it sends requests with a content-type of application/vnd.api+json. Apparently, the only way to get ASP.NET Core to accept this content-type is to use the 3rd party JsonApiDotNetCore library: https://github.com/json-api-dotnet/JsonApiDotNetCore

It seems really odd that ASP.NET Core would not support this media type out of the box considering there are project templates for creating web-APIs on ASP.NET Core that are bundled with either React or Angular front-end frameworks that I believe would use this media-type. Does anyone have any idea why this is the case? I have not found any information online that explains this.

As an alternative, can I create a custom formatter that both accepts and sends this media-type format or will I need to modify Ember to use application/json? If yes, how?

This question is related to: ASP.NET Core 3.1 How can I get the controller to use System.Text.Json to serialize and deserialize

Related info: