Toggle state based on true or false condition in Meteor Blaze - mongodb

What's the best way to toggle status? I have this data sample below. The status field is to track when a user becomes active online. This is a referral program. The person who referred a user should be able to know when the user creates an account by the status changing from red to green. How do I make these status to toggle.
From the DB when status.active === true that means the user is active, the status should turn green. If status.active === false, this means the user is inactive, it should turn to red.
The is the Blade template
<h4 class="media-heading">
{{#if equals 'status.active' 'true' }}
<div> class="circle active"></div>
{{else}}
<div class="circle not-active"></div>
{{/if}}{{firstname}} {{lastname}} <small class="pull-right">{{ createAt}}<label><input type="checkbox" name="eachstudents" value="{{_id}}">Add to Module</label></small></h4>
Sample data
{
"_id" : "5jW9gcLaKg83LynML",
"registra" : "kadeoya",
"status" : {
"active" : true,
"activedate" : ISODate("2017-09-16T08:59:55.062+0000")
},
"userId" : "n5rqFSHbhm7zqADyB",
"createdAt" : ISODate("2017-09-05T18:45:14.804+0000")
}
{
"_id" : "MbNoqW2ZYhZco3My5",
"registra" : "kadeoya",
"status" : {
"active" : true,
"activedate" : ISODate("2017-09-11T08:49:08.830+0000")
},
"userId" : "n5rqFSHbhm7zqADyB",
"createdAt" : ISODate("2017-09-05T18:45:14.824+0000")
}

You simply have to make a helper to check the status "online" or "offline". You can use below code,
Template.Template_Name.helper({
isActive(){
var document = Collection.find({}).fetch()[0]; // add ur conditions in find({})
return document && document.status && document.status.active;
}
});
then you can call this helper in blade template as below,
{{#if isActive }}
<div class="circle active"></div>
{{else}}
<div class="circle not-active"></div>
{{/if}}
In this way, your helper will be reactive and will toggle as and when the value for "status.active" changes in the particular document.

Related

How to do status with different icon button and navigate to different function in controller

i'm trying to display the Status with different icon button and the icon can be press to call different function in controller. here is the code of how i display the different icon button based on Status. however, i'm having problem to navigate those buttons to different function.
<Button icon="{= (${TaskStatus} === 'OPEN') ? 'sap-icon://wrench' : 'sap-icon://accelerated' }"> </Button>
My advice would be to create a sap.m.Button for each function and set the visibility based on your property 'TaskStatus'.
<Button icon="sap-icon://wrench" press="function1" visible="{= ${TaskStatus} === 'OPEN' }"/>
<Button icon="sap-icon://accelerated" press="function2" visible="{= !${TaskStatus} === 'OPEN' }"/>
By doing that you give 1 action to a specific Button which makes it, In my opinion, easier to read for possible future developers on your project.
xml:
<Button
id="idButton"
icon="{= (${TaskStatus} === 'OPEN') ? 'sap-icon://wrench' : 'sap-icon://accelerated' }"
press="onButton"/>
controller:
onButton: function () {
if ( this.getView().byId("idButton").getIcon() === "sap-icon://wrench" ) {
this._functionA();
} else if ( this.getView().byId("idButton").getIcon() === "sap-icon://accelerated" ) {
this._functionB();
} else {
//some error handling
}
},
_functionA: function() {
//ur logic
}
_functionB: function() {
//ur logic
}
reply to comment:
the getIcon works for me (tested the code in one of my projects):

Default select first bar of viz column graph when page loads in sapui5

I have used viz chart library. I have given some drill down functionality on the column graph. For that I have to select any column of the graph to see the detail for the selected part (in the same page).
Now I want to select my first column/bar of the column graph automatically. It means when I go to the graph page, the first bar should be selected as default and the detail of the selected bar should be there.
Please help me guys.
Code:
View:
<viz:ui5.Column id="chart" selectData="goToDaily" width="auto">
<viz:plotArea>
<viz:ui5.types.VerticalBar colorPalette="#FFCC00"/>
</viz:plotArea>
<viz:title>
<viz:ui5.types.Title text="Monthly">
</viz:ui5.types.Title>
</viz:title>
<viz:dataset>
<viz:ui5.data.FlattenedDataset id="fds1" >
<viz:dimensions>
<viz:ui5.data.DimensionDefinition id="dim" axis="1" name="Month" value="{name}">
</viz:ui5.data.DimensionDefinition>
</viz:dimensions>
<viz:measures>
<viz:ui5.data.MeasureDefinition id="mea" name="Values" value="{value}">
</viz:ui5.data.MeasureDefinition >
</viz:measures>
</viz:ui5.data.FlattenedDataset>
</viz:dataset>
</viz:ui5.Column>
Controller:
Oninit:
JSONmodel = new sap.ui.model.json.JSONModel();
data1 = [ {
name : "Jan",
value : 100,
},
{
name : "Feb",
value : 150,
},
{
name : "March",
value :120,
},
{
name : "April",
value : 200,
}
];
JSONmodel.setData(data1);
sap.ui.getCore().byId("idPage3--chart").setModel(JSONmodel);
Select Data for Chart:
goToDaily:function(evt){
sap.ui.getCore().byId("idPage3--chart").selection({ctx:[{dii_a1:1}]});
}
I have tried to select month Feb as default selection, but not able to select it.
Regards,
Niket Talati
There are quite a few things incorrect in your code
You have specified an event handler for selectData but this is obviously only triggered when you first "select data". You never fire an event for data selection in your code, so the event handler will only be triggered if you click on a column manually
It seems you tried to fire the event from the event handler (which is the other way around, see previous point), but you have never implemented the fireSelectData method.
In addition, the signature of the map you tried to select is incorrect. According to the API (which is ill-formatted, I know) you need to send a whole lot more, something like this:
// ...snip...
var oSelection = {
data : [
{
target : oRect,
data : [
{
ctx : {
path : {
dii_a1 : 0,
dii_a2 : 0,
mg : 0,
mi : 0
},
type : "Measure"
},
val : 100
}
]
}
],
name : "selectData"
};
oYourChart.fireSelectData(oSelection);
// ...snip...
If you need to get an element by it's Id when using XMLViews, you should use this.getView().byId("chart") instead
Hope the above helps!

Extjs3.3.0 numberfield

The window contain a form which including NumberField(allowBlank: false), as soon as you open the window the NumberField is outlined in red. saying the field is required. but we hope the NumberField should not be outlined in red unless the user clicks the filed and clicks away without entering anything. how to config this NumberField.
extjs library: 3.3.0
Here is what I do.
Basically I listen to 'focus'/'blur' event and if value is blank, call markInvalid, otherwise clearInvalid.
xtype : 'numberfield',
fieldLabel :'number',
markNumberInvalid : function(){
if(this.getValue() == ""){
this.markInvalid();
}else{
this.clearInvalid();
}
},
listeners : {
'focus' : function(){
this.markNumberInvalid();
},
'blur' : function(){
this.markNumberInvalid();
}
}

How to refresh `ajax` node on click?

There are some nodes that get data from AJAX call in my jsTree.
How can I refresh the data and NOT by reloading the whole tree?
the best would be simple click on the node I wish to refresh
context menu is ok too
How about this?
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jstree.js"></script>
<script>
var treeConfig = {
"json_data" : {
"data" : [{
"data" : "Root",
"state" : "closed",
"children" : ""
}],
"ajax" : {
"url" : "http://localhost/tree.json",
"data" : function (node) {
return { query : "Value" };
}
}
},
"plugins" : [ "themes", "json_data", "ui" ],
};
$(document).ready(function(){
$("#treeContainer").jstree(treeConfig);
$('#treeContainer a').live('click',function(){
var tree = jQuery.jstree._reference("#treeContainer");
var currentNode = tree._get_node(null, false);
tree.refresh(currentNode);
});
});
</script>
</head>
<body>
<div id="treeContainer"></div>
</body>
</html>
Here's what I'm doing:
using the JSON data plugin (but the concept is similar for HTML and XML plugins)
loading the initial tree node ("Root") from the data config object
setting the AJAX config object so all other nodes request their child data via ajax, when initially opened (applies to any node where 'state' is 'closed' and 'children' is 'empty')
using the AJAX data function to pass the correct query string to get relevant data for the node being opened. My example always fetches http://localhost/tree.json?query=Value but you probably want to do something like set Value to the node id so the server sends back relevant data.
So far this makes an ajax request for the node data only the first time the node is opened. The final step is:
create a click function which causes a single node to refresh its data every time it is clicked

Jeditable: how to set parameters based on dom element attributes

Often I find that I need to use jeditable on several areas each requiring different parameter settings.
For example I use jeditable with autosuggest input type, and then I need to pass different data sources to the different inputs.
I wanted to use just one instance of the editable plugin, and have tried to assign attr-values to the script, but obviously this does not work the way I'm approaching it..
I'm hoping someone can guide me a bit..
Essentially I would like to be able to set a jeditable parameter value based on the value of an ttribute of the dom element it is manipulating.
something like:
$('.editme').editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
then I could simply specify different load sources with:
<div id="fruits" class="editme" rel="myfruits">apples</div>
I didn't find the keyword this to work in this way..
How can I access the attributes of the dom element being manipulated dynamically for each jeditable binding?
here is another example of what I want to do:
authorsList = "".split(",");
// extend jeditable with autocomplete
$.editable.addInputType('autoc', {
element: function(settings, original) {
var input = $("<input />").autocomplete(settings.mdata, settings.autoc);
$(this).append(input);
return input; }
});
$('.editable.authors').editable('savedata.php',{
type : "autoc",
mdata : $(this).attr('rel'), // should hold the name 'authorsList'
onblur : 'ignore',
autoc : { multiple: true,
multipleSeparator: ',' },
loadurl : 'loaddata.php',
loadtype : 'POST',
loaddata : {handle: function(){ return eval($("#objhandle").val())}, lookuptype: 'mirror'},
submit : 'save',
cancel : 'cancel',
tooltip : "Click to edit",
style : "inherit",
cssclass : 'jedi',
id : "field",
name : "data",
submitdata : {
storetype: 'mirror',
handle: function(){return eval($("#objhandle").val())},
timestamp: function(){return eval($("#objtimestamp").val())}
}
});
Warning, totally untested code but something like following should work:
$('.editme').each(function() {
$(this).editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
});
This way the score of this should be correct when initializing Jeditable on the element.
this worked for me
$(this).data('rel)
and for the html
<div id="fruits" class="editme" data-rel="myfruits">apples</div>