how to use If condition in ionic popup - angularjs

i created one common Popup screen its used in three module but three module have different title. I didn't give if condition in title, Is possible or not anybody give solution to me.
popup code here :
function showPopup () {
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input focus-me type="text" ng-model="data.expensetype" limit-char limit="15">',
if (vm.usertype === 'Worker') {
title: $translate.instant('{{"wtype_message" | translate}}'),
}
else if (vm.usertype === 'Buyer') {
title: $translate.instant('{{"btype_message" | translate}}'),
}
else if (vm.usertype === 'Expense') {
title: $translate.instant('{{"etype_message" | translate}}'),
}
scope: $scope,
buttons: [
{ text: $translate.instant('{{"pcancel_message" | translate}}') },
{
text: $translate.instant('{{"psave_message" | translate}}'),
type: 'button-positive',
onTap: function (e) {
if (!$scope.data.expensetype) {
e.preventDefault();
} else {
addExpenseCategory();
return $scope.data.expensetype;
}
}
},
]
});
myPopup.then(function (res) {
$log.log('Tapped!', res);
});
}

Try this:
var categorytitle = '';
$log.log('vm.usertype', vm.usertype);
switch (vm.usertype) {
case 'Farmer':
categorytitle = 'Enter coconut type';
break;
case 'Worker':
categorytitle = $translate.instant('{{"venterworktype_message" | translate}}');
break;
case 'Buyer':
categorytitle = $translate.instant('{{"venterproduct_message" | translate}}');
break;
case 'Group':
categorytitle = $translate.instant('{{"wtype_message" | translate}}');
break;
case 'Expense':
categorytitle = $translate.instant('{{"newexpensetype_message" | translate}}');
break;
}
var myPopup = $ionicPopup.show({
template: '<input focus-me type="text" ng-model="data.expensetype" limit-char limit="15">',
//title: $translate.instant('{{"penterexpensetype_message" | translate}}'),
title: categorytitle,
scope: $scope,
buttons: [
{ text: $translate.instant('{{"pcancel_message" | translate}}') },
{
text: $translate.instant('{{"psave_message" | translate}}'),
type: 'button-positive',
onTap: function (e) {
if (!$scope.data.expensetype) {
//don't allow the user to close unless he enters producttype
e.preventDefault();
} else {
addExpenseCategory();
return $scope.data.expensetype;
}
}
},
]
});
myPopup.then(function (res) {
$log.log('Tapped!', res);
});

Related

Date range picker for extjs?

Is there a good date-range picker for ExtJs?
Something like this: http://www.daterangepicker.com/?
I whipped this up in about 2 hours, so I'm sure there are some lingering bugs and things left to be desired, but it at least gets you started with a custom date range component. Here's my Fiddle. And the code:
Ext.define('DatePickerEnhanced', {
extend: 'Ext.picker.Date',
alias: 'widget.datePickerEnhanced',
config: {
startDate: null,
endDate: null
},
isDateRange: true,
isDragging: false,
initComponent: function () {
this.callParent()
this.on({
mouseover: {
element: 'el',
fn: 'onMouseOverEnhanced',
delegate: 'td.x-datepicker-cell',
scope: this
}
});
},
handleDateClick: function (e, t) {
this.callParent(arguments)
if (this.isDateRange) {
if (this.isDragging) {
this.isDragging = false;
var startCell = this.getCellByValue(this.startCell)
if (startCell) {
Ext.get(startCell).addCls(this.selectedCls)
}
this.setEndDate(new Date(this.getCellDateValue(this.activeCell)))
this.updateDateRange(this.startCell, this.endCell);
} else {
this.setStartDate(new Date(this.getCellDateValue(this.activeCell)))
this.isDragging = true;
this.updateDateRange(this.getCellDateValue(), -1);
}
}
},
getCellByValue: function (value) {
var cells = this.cells.elements;
for (var i = 0; i < cells.length; i++) {
var cell = cells[i]
if (cell.firstChild.dateValue === value) {
return cell;
}
}
},
onMouseOverEnhanced: function (e, target, eOpts) {
if (this.isDragging) {
this.updateDateRange(this.getCellDateValue(), this.getCellDateValue(target));
}
},
updateDateRange: function (startValue, endValue) {
var cells = this.cells.elements;
var selectedCls = this.selectedCls;
for (var i = 0; i < cells.length; i++) {
var cell = Ext.fly(cells[i])
var dateValue = this.getCellDateValue(cells[i]);
if (dateValue !== startValue && (dateValue < startValue || dateValue > endValue)) {
cell.removeCls(selectedCls)
} else {
cell.addCls(selectedCls)
}
}
},
getCellDateValue: function (cell) {
return cell && cell.firstChild.dateValue || this.startCell;
},
getDateRange: function () {
return {
start: this.getStartDate(),
end: this.getEndDate()
}
},
/**
* Update the contents of the picker for a new month
* #private
* #param {Date} date The new date
*/
fullUpdate: function (date) {
var me = this;
me.callParent(arguments);
Ext.asap(function () {
if (me.isDateRange && me.endCell) {
me.updateDateRange(me.startCell, me.endCell)
}
})
},
updateStartDate: function (value) {
this.startCell = value.getTime()
this.publishState('startDate', value);
},
updateEndDate: function (value) {
this.endCell = value.getTime()
this.publishState('endDate', value);
}
});
Ext.create('Ext.container.Viewport', {
viewModel: {
data: {
theStart: Ext.Date.add(new Date(), Ext.Date.DAY, 2),
theEnd: Ext.Date.add(new Date(), Ext.Date.DAY, 5)
}
},
items: [{
xtype: 'datePickerEnhanced',
minDate: new Date(),
bind: {
startDate: '{theStart}',
endDate: '{theEnd}'
}
}, {
xtype: 'displayfield',
fieldLabel: 'Start',
bind: {
value: '{theStart:date("m/d/Y")}'
}
}, {
xtype: 'displayfield',
fieldLabel: 'End',
bind: {
value: '{theEnd:date("m/d/Y")}'
}
}]
});

Angularjs set checked radio not working

I have 3 radio buttons:
<label ng-repeat="mode in opMode.groupMode" class="radio-inline" title="{{mode.title}}">
<input id="rd{{mode.id}}" type="radio" class="panel-load-radio" ng-model="opdtMode.groupMode"
name="inlineRadioOptions" value="{{mode.id}}"
ng-change="changeOpdtMode(mode.id, '{{opdtMode.groupMode}}')">
{{mode.name}}
</label>
Here is Angularjs code:
$scope.opMode = { groupMode: [
{ name: "ModuleType", title: "Load processes by Module type", id: "ModuleType", isDefault: false },
{ name: "OpGroup", title: "Load processes by Operation group", id: "OpGroup", isDefault: true },
{ name: "MachineType", title: "Load processes by Machine type", id: "MachineType", isDefault: false }
]};
If isChange = true, show confirm mbox. If User click cancel, set oldValue and checked previous radio. I wrote this. However it's not working as expected:
$scope.changeOpdtMode = function (newValue, oldValue) {
if(isChange){
const msg = getMsgById(29, msgLostData);
const r = confirm(msg.value);
if (r === true) {
const lang = $scope.layoutLang.selectedLang;
loadLayout(null, lang, newValue);
window.isChange = false;
} else {
$scope.opdtMode.groupMode = oldValue;
}
}else{
const lang = $scope.layoutLang.selectedLang;
loadLayout(null, lang, newValue);
}
}
After 2 hours researched:
I post my answer here for everyone may see as the same issue.
<label ng-repeat="mode in opMode" class="radio-inline" title="{{mode.title}}">
<input type="radio" class="panel-load-radio" ng-value="mode.id"
ng-model="$parent.opdtMode" ng-change="changeOpdtMode(mode.id, '{{opdtMode}}')">
{{mode.name}}
</label>
Need to remove name="inlineRadioOptions" and add $parent into the model.
$scope.opdtMode = "OpGroup";
$scope.opMode = [{ name: "ModuleType", title: "Load processes by Module type", id: "ModuleType" },
{ name: "OpGroup", title: "Load processes by Operation group", id: "OpGroup" },
{ name: "MachineType", title: "Load processes by Machine type", id: "MachineType" }];
$scope.changeOpdtMode = function (newValue, oldValue) {
if(isChange){
const msg = getMsgById(29, msgLostData);
const r = confirm(msg.value);
if (r === true) {
const lang = $scope.layoutLang.selectedLang;
loadLayout(null, lang, newValue);
window.isChange = false;
} else {
$scope.opdtMode = oldValue;
}
}else{
const lang = $scope.layoutLang.selectedLang;
loadLayout(null, lang, newValue);
}
}

ExtJS5: Custom component(ticker) increasing CPU cycles 10 times

I am using a ticker component in my application. When the text is rolling, the CPU cycles hit 10+. As soon as I hover cursor over it, the scrolling stops and the CPU cycles comes down to 0
Can someone tell if this is normal? If not, how can I make this component use less CPU cycles?
Here is the code for ticker:
Ext.define('MyApp.ux.Ticker', {
extend: 'Ext.Component',
xtype: 'ticker',
baseCls: 'x-ticker',
autoEl: {
tag: 'div',
cls: 'x-ticker-wrap',
children: {
tag: 'div',
cls: 'x-ticker-body'
}
},
body: null,
constructor: function (config) {
Ext.applyIf(config, {
direction: 'left',
speed: 10,
pauseOnHover: true
});
if (config.speed < 1) config.speed = 1;
else if (config.speed > 20) config.speed = 20;
Ext.applyIf(config, {
refreshInterval: parseInt(10 / config.speed * 15)
});
config.unitIncrement = 1;
this.callParent([config]);
},
afterRender: function () {
this.body = this.el.first('.x-ticker-body');
this.body.addCls(this.direction);
this.taskCfg = {
interval: this.refreshInterval,
scope: this
};
var posInfo, body = this.body;
switch (this.direction) {
case "left":
case "right":
posInfo = { left: body.getWidth() };
this.taskCfg.run = this.scroll.horz;
break;
case "up":
case "down":
posInfo = { top: body.getHeight() };
this.taskCfg.run = this.scroll.vert;
break;
}
posInfo.position = 'relative';
body.setPositioning(posInfo);
DHT.ux.Ticker.superclass.afterRender.call(this);
if (this.pauseOnHover) {
this.el.on('mouseover', this.onMouseOver, this);
this.el.on('mouseout', this.onMouseOut, this);
this.el.on('click', this.onMouseClick, this);
}
this.task = Ext.apply({}, this.taskCfg);
Ext.util.TaskManager.start(this.task);
},
add: function (o) {
var dom = Ext.DomHelper.createDom(o);
this.body.appendChild(Ext.fly(dom).addCls('x-ticker-item').addCls(this.direction));
},
onDestroy: function () {
if (this.task) {
Ext.util.TaskManager.stop(this.task);
}
DHT.ux.Ticker.superclass.onDestroy.call(this);
},
onMouseOver: function () {
if (this.task) {
Ext.util.TaskManager.stop(this.task);
delete this.task;
}
},
onMouseClick: function (e, t, o) {
var item = Ext.fly(t).up('.x-ticker-item');
if (item) {
this.fireEvent('itemclick', item, e, t, o);
}
},
onMouseOut: function () {
if (!this.task) {
this.task = Ext.apply({}, this.taskCfg);
Ext.util.TaskManager.start(this.task);
}
},
scroll: {
horz: function () {
var body = this.body;
var bodyLeft = body.getLeft(true);
if (this.direction == 'left') {
var bodyWidth = body.getWidth();
if (bodyLeft <= -bodyWidth) {
bodyLeft = this.el.getWidth(true);
} else {
bodyLeft -= this.unitIncrement;
}
} else {
var elWidth = this.el.getWidth(true);
if (bodyLeft >= elWidth) {
bodyLeft = -body.getWidth(true);
} else {
bodyLeft += this.unitIncrement;
}
}
body.setLeft(bodyLeft);
},
vert: function () {
var body = this.body;
var bodyTop = body.getTop(true);
if (this.direction == 'up') {
var bodyHeight = body.getHeight(true);
if (bodyTop <= -bodyHeight) {
bodyTop = this.el.getHeight(true);
} else {
bodyTop -= this.unitIncrement;
}
} else {
var elHeight = this.el.getHeight(true);
if (bodyTop >= elHeight) {
bodyTop = -body.getHeight(true);
} else {
bodyTop += this.unitIncrement;
}
}
body.setTop(bodyTop);
}
}
});
And this is how I am using it:
{
xtype: 'panel',
border: false,
height: 40,
width: 256,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 200,
direction: 'left',
xtype: 'ticker',
itemId: 'rollerPanel'
}],
listeners: {
afterrender: function (panel) {
var ticker = panel.down('ticker');
ticker.add({
tag: 'div',
cls: 'title',
html: "Ticker content."
});
}
}
}
What's wrong with the above code? What may be the reason for higher CPU usage?
The Chrome developer tools will help you profile this but it wouldn't hurt to cache some of the things like the width/height of the body and elements so that you're only reading it when you start up and not on every tick.

Updating highcharts dynamically with json response

I am trying to draw highcharts with the json response, however I can able to draw for the first time, but unable to update the series with new data
function get_chart(data) {
//alert('hello..' + data);
return {
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
var monthStr = Highcharts.dateFormat('%b', this.value);
var firstLetter = monthStr.substring(0, 1);
return firstLetter;
}
}
},
title: {
text: data.measurementName
},
chart: {
height: 300,
width: 500,
type: 'column',
zoomType: 'x'
},
credits: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
console.log ('Category: '+ this.category +', value: '+ this.y);
}
}
}
}
},
series: [{
name: 'Hours',
data: (function() {
var chart = [{key:data.measurementName, values:[]}];
var i = 0;
if(typeof(data) == 'string')return chart;
for(n in data.values){
data.values[n].snapshot = new Date(data.values[n].snapshot);
data.values[n].value = parseInt(data.values[n].value);
}
chart[0].values = data.values.map(function(arrayObj){
return [arrayObj.value]
});
return chart[0].values;
})()
}]
};
}
and I am calling this function like
$scope.renderChart = function(measurement){
$scope.showChart = false;
restApp.getMeasurementForCompID(comp.id, measurement.id).then(function(data){
console.log(data);
$scope.example_chart = get_chart(data);
console.log($scope.example_chart);
$scope.showChart = true;
});
}
Here getMeasurementForCompID is another function which gets the data from database.
What is the problem here? any help..
I used https://github.com/pablojim/highcharts-ng
I just alter the data object and the highcharts reflects the change.

How to update the element color and sort it based on added string on the element using angularjs directive?

I have name list iterating with ng options in multi select list box. When an option is clicked and a green check box is selected "green" string will be added to the element and its color is updated to green and sorted to the bottom of the list. I want to do this using angular directive.
http://jsfiddle.net/aastha/PMg7d/
.directive('changeColor', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var color;
scope.$watch(attrs.ngModel, function (value) {
console.log("attrs.ngModel",attrs.ngModel);
console.log("VALUE",value);
if (value.name && value.name.indexOf("Green") != -1) {
console.log("INSIDE GREEN");
color = 'green';
myStyle = {color:'green'};
scope.style={"color":"green"}
} else if (value.name && value.name.indexOf("Blue") != -1) {
console.log("INSIDE BLUE");
color = 'blue';
myStyle = {color:'blue'};
scope.style={"color":"blue"}
} else {
console.log("DEFAULT RED");
color ='red';
myStyle = {color:'red'};
}
}, true);
}
}
})
;
I resorted using ng-repeat and custom sort functions.
http://jsfiddle.net/PMg7d/4/
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.colors = [
{ id: '1', name: 'color1' },
{ id: '2', name: 'color2' },
{ id: '3', name: 'color3' },
{ id: '4', name: 'color4' },
{ id: '5', name: 'color5' },
{ id: '6', name: 'color6' },
{ id: '7', name: 'color7' }
];
$scope.selectedColor = $scope.colors[0];
$scope.style={"color":"red"}
$scope.colorClick = function (color) {
$scope.selectedColor = color;
console.log("ID", $scope.selectedColor);
}
$scope.addGreen = function (){
if (!$scope.green) {
$scope.selectedColor.name = $scope.selectedColor.name.concat(" (Green)");
} else {
$scope.selectedColor.name = $scope.selectedColor.name.replace(" (Green)","");
}
}
$scope.addBlue = function (){
if (!$scope.blue) {
$scope.selectedColor.name = $scope.selectedColor.name.concat(" (Blue)");
} else {
$scope.selectedColor.name = $scope.selectedColor.name.replace(" (Blue)","");
}
}
$scope.greenSort = function (color) {
return color.name.indexOf("Green")
}
$scope.blueSort = function (color) {
return color.name.indexOf("Blue")
}
})
.directive('changeColor', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var color;
scope.$watch('color.name', function (value) {
if (value.indexOf("Green") != -1) {
console.log("INSIDE GREEN");
scope.style={"color":"green"}
} else if (value.indexOf("Blue") != -1) {
scope.style={"color":"blue"}
} else {
scope.style = {color:'red'};
}
}, true);
}
}
})
;

Resources