angular js : ng-class use - asp.net

i get a data for RestApi and i want create a function to retrieve data from json
if the defautl == null or the default. value = false . i change the color using ng -class of the component.
1:
commandStateTypes:{
defaut interne:null
defaut liaison:{date: "2016-05-30T01:01:04", value: true, name: "defaut liaison", idComponent: 1}}
component:{id:1 ,idInstallation:1,name:"Commande1"}
2:
commandStateTypes:{
defaut interne:null
defaut liaison:{date: "2016-05-30T01:01:04", value: true, name: "defaut liaison", idComponent: 2}}
component:{id:1 ,idInstallation:1, name:"Commande 2"}
controller :
$scope.status = { state: ['OK', 'KO'] }
Service.GetComponentsHelpers(function (data)
{
$scope.componentsHelper = data;
},
function (data)
{
});
$scope.GetStateByComponents = function ()
{
angular.forEach($scope.componentsHelper, function (componentsState, key)
{
angular.forEach($scope.componentsHelper.commandStateTypes, function(value, key){
});
});
}
chtml:
<div class="ajoutComponent">
<div class="motorsVitesse" ng-class="{ GetStateByComponents() ? 'mDangerV':'mDefaultV'}" alt="{{status.state[1]}}"> {{status.state[1]}}</div>
</div>

Try this in HTML:
ng-class="{'mDangerV': GetStateByComponents(), 'mDefaultV': !GetStateByComponents()}"

Related

(Meteor + React) Cannot access props from within subcomponent

I am passing data from one component to another (MyApplicants) via my router (FlowRouter):
FlowRouter.route('/applicants', {
name: 'Applicants',
action: function () {
var currentUser = Meteor.user();
ReactLayout.render(App, {
content: <MyApplicants institutionID={Meteor.user().profile.institutionID} />,
nav: <Nav />,
header: <Header />
});
}
});
As you can see I'm passing institutionID to the new component via a prop in the router. I know that the institutionID is being passed because I can see it in the render of the MyApplicants component.
Here is the MyApplicants component:
MyApplicants = React.createClass({
mixins: [ReactMeteorData],
pagination: new Meteor.Pagination(Applicants, {
perPage: 25,
filters: {institution_id: this.props.institutionID },
sort: {institution_id: 1, "last_name":1, "first_name":1}
}),
getMeteorData() {
return {
currentUser: Meteor.user(),
applicants: this.pagination.getPage(),
ready: this.pagination.ready()
}
},
RenderApplicantRow(applicant, key) {
return (
<div key={key}>
<p>[{applicant.institution_id}] {applicant.last_name}, {applicant.first_name}</p>
</div>
)
},
render : function () {
return (
<div>
<section className="content">
{this.data.applicants.map(this.RenderApplicantRow)}
{console.log(this.data.applicants)}
<DefaultBootstrapPaginator
pagination={this.pagination}
limit={6}
containerClass="text-center"/>
</section>
</div>
)
}
});
(FYI, I'm using krounin:pagination.) The problem is that I cannot access this.props.institutionID inside of the pagination component. I know the value is getting passed (I can see it if I'm just testing output in the render) but can't figure out why it doesn't pass into the pagination call. And I know the pagination works because I do not get an error if I hard code in a value.
Thanks for the help.
This is a simple scope problem I think, you need to bind it to the right context
Try something like this:
pagination: function() {
var self= this;
new Meteor.Pagination(Applicants, {
perPage: 25,
filters: {institution_id: self.props.institutionID },
sort: {institution_id: 1, "last_name":1, "first_name":1}
})
}
,

meteor autoform custom validation message on sibling fields

How do send custom validation message to another schema field ?
SessionSchema = new SimpleSchema({
'seat.from': {
type: String,
max: 10,
optional: false
},
'seat.to': {
type: String,
max: 10,
optional: false
}
});
ReservationSchema = new SimpleSchema({
title: {
type: String
},
sessions: {
type: [SessionSchema],
min: 1,
optional: false,
custom: function() {
//Its an array object. validation is depends on next array so I made a validation here instead of `SessionSchema`.
return "greater-session"; // dispaly error on top of the session. I need to display error message on perticular field in `SessionSchema`.
}
}
});
SimpleSchema.messages({
"greater-session": "From seat should not lesser then previous session"
});
Autoform:
{{#autoForm id="addReservation" type="method" meteormethod="insertMyReservation" collection="Reservation"}}
{{> afQuickField name="title" autofocus=''}}
{{> afQuickField name="sessions" panelClass="group"}}
{{/autoForm}}
How do I achieve this?
I would suggest you using a custom validator for your SimpleSchema. They have access to more context information.
I would try something like this:
ReservationSchema = new SimpleSchema({
title: {
type: String
},
sessions: {
type: [SessionSchema],
min: 1,
optional: false,
custom: function() {
var sessions = this.value; // array;
var seatTo = 0; // initalize # 0
var hasError;
// loop through seach session
_.each(sessions, function(s, index) {
// if seatFrom < previous seatTo
if (s['seat.from'] < seatTo) {
hasError = true;
};
seatTo = s['seat.to']; // update seatTo for next iteration
});
if (hasError) {
return "greater-session"; // dispaly error on top of the session. I need to display error message on perticular field in `SessionSchema`.
}
}
}
});

Meteor collection2 field in $unset list

I have a simpleSchema:
imageUrl: {
type: Object,
optional: true,
autoValue: function() {
if (Meteor.isClient) return;
var imageField = this.field('imageId');
if (!imageField.isSet){
this.unset();
} else {
var imageObj = MealsImages.findOne(imageField.value);
if (imageObj){
return {thumb: imageObj.S3Url('thumb'), big: imageObj.S3Url('big')};
}
}
},
autoform: {
label: false,
type: 'hidden',
afFieldInput: {
type: "hidden"
}
}
},
For some reason, when I update the record this field always appears in $unset array:
Meteor.methods({
mealUpsert: function(doc, mealId) {
check(doc, Meals.simpleSchema());
console.log('test7');
console.log(doc);
if (mealId){
Meals.update({_id: mealId}, doc);
} else {
mealId = Meals.insert(doc);
}
return false;
}
});
Will print:
I20150830-21:49:39.560(-4)? { '$set':
...
I20150830-21:49:39.562(-4)? '$unset':
I20150830-21:49:39.562(-4)? { imageUrl: '',
...
I'm using autoform:
<template name="mealUpdateForm">
<div class="meal-content">
{{> quickForm collection="Meals" doc=this id="mealUpdateForm" meteormethod="mealUpsert" type="method-update"}}
</div>
</template>
And will never be updated or set. Any clue why field could appear in $unset list?
I think I've figured this out - you have a this.unset() in your autoValue for imageUrl. This is called whenever you omit imageId from the modifier, even if it is already present in a document you are modifying!

Meteor when many subscriptions are ready

I'm creating a chat app. I hope i can add a new "hello" message if i check the messages count of current chat is equal to 0 (Problem #1). Also i have a dictionary as a collection for translation. But t() returns EN variant (Problem #2)
t = function(text) {
var res = Dictionary.findOne({o:text});
return res && res.t || text;
}
Meteor.startup(function () {
Deps.autorun(function () {
Meteor.subscribe('dictionary', Session.get('lang'), function(){
Session.set('dictionaryReady', true);
});
Meteor.subscribe('chats', Session.get('domain'), function(){
if (chatCurrent(Meteor.userId(), Session.get('domain')).count()===0 //true, even is not actually [problem_#1]
&& Session.get('dictionaryReady') //true, but next function t() doesn't work properly [problem #2]
) {
var mudata = Session.get('my_manager') ? udata(Session.get('my_manager'), Session.get('domain')) : null,
hello = mudata && mudata.hello || t('Hello! How I can help you?'),
name = mudata && mudata.name || t('Anna');
Meteor.call('create_message', {chat: Meteor.userId(), to: Meteor.userId(), text: hello, name: name, from: Session.get('my_manager'), domain: Session.get('domain'), last_manager: Session.get('my_manager')});
});
});
});
Problem #1 and Problem #2 everytime when page just loaded. So when i refresh the page i get another "hello message" on default EN locale.
Here is how you can render your template only once your subscriptions are ready. This is a solution taken from meteor kitchen generated code.
first you create a "loading" template
<template name="loading">
<div class="loading">
<i class="fa fa-circle-o-notch fa-4x fa-spin"></i>
</div>
</template>
Second, attach to your template a route controller. Here is a simplified version of it (but it should work):
this.myTemplateController = RouteController.extend({
template: "myTemplate",
onBeforeAction: function() {
this.next();
},
action: function() {
if(this.isReady()) { this.render(); } else { this.render("loading"); }
},
isReady: function() {
var subs = [
Meteor.subscribe("sub1", this.params.yourParam),
Meteor.subscribe("sub2", this.params.yourParam),
Meteor.subscribe("sub3", this.params.yourParam)
];
var ready = true;
_.each(subs, function(sub) {
if(!sub.ready())
ready = false;
});
return ready;
},
data: function() {
return {
params: this.params || {},
yourParamWhatever: Chat.findOne({_id:this.params.yourParam}, {})
};
},
});
Now you should have all your subscriptions ready when your template is loaded.
Concerning the translation, you could have a look at TAPi18n package that I highly recommend. It is quite easy to implement.

This is not set in my template?

I have a problem what looks like that this is not being set within my template. This didn't happen before, and I don't know what is changed.
My router.js
Router.map(function() {
this.route('gameRoom', {
path : '/game/:_id',
controller : GameRoomController
});
Controller
GameRoomController = RouteController.extend({
template : 'DetailsSubmit',
waitOn : function() {
return [
Meteor.subscribe('gameList', this.params._id),
Meteor.subscribe('gameInfo', this.params._id),
Meteor.subscribe('hintsList', this.params._id),
Meteor.subscribe('guessList', this.params._id),
Meteor.subscribe('imagesList', this.params._id),
Meteor.subscribe('allUsers')
// Meteor.subscribe('scoreList', this.params._id)
// stil in development will optimize this later
];
},
data : function() {
return Games.findOne(this.params._id);
}
});
So in my detailsubmit.html I have the following template (snippit)
<template name='DetailsSubmit'>
{{#if isWaitingOnAction}}
<div id="profileInfo">
<img src="http://placehold.it/90x90" alt=""/>
</div>
{{/if}}
</template>
If i type Games.find().fetch() it will output correctly:
_id: "5DDCNfWiBeHG4o7nQ"
active: true
finished: false
players: Array[2]
round: 0
theBoss: "JLApNut5rTpRxoL9S"
thePlayer: "o5aJETfWQTjEkZprf"
__proto__: Object
So I would expect my template would work correctly if I try one of the following commands:
And my helper:
Template.DetailsSubmit.helpers({
isWaitingOnAction: function() {
console.log(this) // return Object {}
console.log(Games.findOne(this._id)) // returns undefined in console
console.log(Meteor.userId()); // returns correct userId
}
})
What am I missing here?
Replace:
return Games.findOne(this.params._id);
with:
return Games.findOne({_id:this.params._id});

Resources