Develop Reference

Angularfire $firebaseArray extend dynamic count\sum

Am trying to achieve a dynamic count of certain node if defined:
This works but its not dynamic, you have to call sum().
app.factory("ArrayWithSum", function($firebaseArray) {
return $firebaseArray.$extend({
sum: function() {
var total = 0;
var todayDate = new Date();
var start = todayDate.setHours(0,0,0,0);
var end = todayDate.setHours(23,59,59,999);
// the array data is located in this.$list
angular.forEach(this.$list, function(rec) {
if (angular.isDefined(rec.qa)){
if (angular.isDefined(rec.qa.completed)) {
if (rec.qa.completed >= start && rec.qa.completed <= end){
total++;
}
}
}
});
return total;
}
});
});
I tried $$update but can't access this_counter in array:
app.factory("counter", function($firebaseArray) {
return $firebaseArray.$extend({
sum: function() {
return this._counter;
},
$$updated: function(){
var changed = $firebaseArray.prototype.$$updated.apply(this, arguments);
var todayDate = new Date();
var start = todayDate.setHours(0,0,0,0);
var end = todayDate.setHours(23,59,59,999);
if( !this._counter ) {
this._counter = 0;
}
// the array data is located in this.$list
angular.forEach(this.$list, function(rec) {
if (angular.isDefined(rec.qa)){
if (angular.isDefined(rec.qa.completed)) {
if (rec.qa.completed >= start && rec.qa.completed <= end){
this._counter++;
}
}
}
});
return changed;
}
});
});
Does anyone know how to make a dynamic variable that I can update and access?
Thanks

Got it working with $firebaseObject. Obviously you can add a property _counter to an object not an array. Any way this works and a good way to get a dynamic count.
app.factory("counter", function($firebaseObject) {
return $firebaseObject.$extend({
$$updated: function(){
var changed = $firebaseObject.prototype.$$updated.apply(this, arguments);
if( !this._counter ) { this._counter = 0; }
var total = 0;
var todayDate = new Date();
var start = todayDate.setHours(0,0,0,0);
var end = todayDate.setHours(23,59,59,999);
// the array data is located in this.$list
angular.forEach(this, function(rec) {
if (angular.isDefined(rec.qa)){
if (angular.isDefined(rec.qa.completed)) {
if (rec.qa.completed >= start && rec.qa.completed <= end){
total++;
}
}
}
});
this._counter = total;
return changed;
}
});
});
vm.panels = new counter(panelsRef);
{{vm.panels._counter}}
Am having issues with watches not firing after a long duration on IE11. So thought I'd try this approach.

Getting javascript undefined TypeError

Please help....Tried executing the below mentioned function but web console always shows
TypeError: xml.location.forecast[j] is undefined
I was able to print the values in alert but the code is not giving output to the browser because of this error. Tried initializing j in different locations and used different increment methods.How can i get pass this TypeError
Meteogram.prototype.parseYrData = function () {
var meteogram = this,xml = this.xml,pointStart;
if (!xml) {
return this.error();
}
var j;
$.each(xml.location.forecast, function (i,forecast) {
j= Number(i)+1;
var oldto = xml.location.forecast[j]["#attributes"].iso8601;
var mettemp=parseInt(xml.location.forecast[i]["#attributes"].temperature, 10);
var from = xml.location.forecast[i]["#attributes"].iso8601;
var to = xml.location.forecast[j]["#attributes"].iso8601;
from = from.replace(/-/g, '/').replace('T', ' ');
from = Date.parse(from);
to = to.replace(/-/g, '/').replace('T', ' ');
to = Date.parse(to);
if (to > pointStart + 4 * 24 * 36e5) {
return;
}
if (i === 0) {
meteogram.resolution = to - from;
}
meteogram.temperatures.push({
x: from,
y: mettemp,
to: to,
index: i
});
if (i === 0) {
pointStart = (from + to) / 2;
}
});
this.smoothLine(this.temperatures);
this.createChart();
};

You are trying to access the element after the last one. You can check if there is the element pointed by j before proceeding:
Meteogram.prototype.parseYrData = function () {
var meteogram = this,
xml = this.xml,
pointStart;
if (!xml) {
return this.error();
}
var i = 0;
var j;
$.each(xml.location.forecast, function (i, forecast) {
j = Number(i) + 1;
if (!xml.location.forecast[j]) return;
var from = xml.location.forecast[i]["#attributes"].iso8601;
var to = xml.location.forecast[j]["#attributes"].iso8601;
});
};

Cant call the public method on jquery Plugin

I developed a plugin and when I call the plugin getting an error like Uncaught TypeError: Cannot read property 'convert' of undefined.
Here is my Plugin ,Its not working when I calling in my scripts
( function ($) {
$.siPrifixx = function(element, options) {
var defaults = {
foo: 'bar',
onFoo: function() {
}
}
var plugin = this;
plugin.settings = {
maxDigits: 8,
seperator: true,
decimal: 1,
popUp: false,
countUp:false
}
var $element = $(element),
element = element;
plugin.init = function() {
var value =$(element);
console.log(value);
plugin.settings = $.extend({
}, defaults, options);
var maxDigits = plugin.settings.maxDigits;
console.log(defaults);
if (typeof value === 'string') {
var parts = value.split(",");
var num = parts.join("");
var isNumber = regIsNumber(num)
if(isNumber){
var number = (parseInt(num));
}else{
number = num;
}
}else if (typeof value === 'number'){
number = value
}
var data_max = $(this).attr('data-max-digit');
if(typeof data_max !== 'undefined'){
maxDigits = data_max;
}
var checkNumber = typeof number !== 'undefined' && !isNaN(number) && Math.round(number).toString().length > maxDigits;
if (plugin.settings.popUp && checkNumber) {
$(this).addClass('tooltip', value);
var tootip = $(this).tooltipster({
theme: 'tooltipster-default',
functionInit: function () {
return value
}
})
if(!tootip)
console.log("We couldn't find tooltipster function.Please make sure you have loaded the plugin")
}
if (plugin.settings.countUp && (Math.round(value).toString().length <= maxDigits)) {
var cUp = new countUp(
plugin.settings.countUp, 0, Number(value), 0, 1, null);
cUp.start();
if(!cUp)
console.log("We couldn't find counter function.Please make sure you have loaded the plugin")
}
if (checkNumber) {
var results = plugin.convert(number);
$(this).html(results);
} else {
if (plugin.settings.seperator) {
var cvalue = numberWithCommas(value)
$(this).html(cvalue)
} else {
$(this).html(value)
}
if(typeof value === 'string')
if(checkDate(value)){
$(this).html(value)
}
}
}
plugin.convert = function(number){
var n = settings.decimal
var decPlace = Math.pow(10, n);
var abbrev = ["K", "M", "B", "T"];
for (var i = abbrev.length - 1; i >= 0; i--) {
var size = Math.pow(10, (i + 1) * 3);
if (size <= number) {
number = Math.round(number * decPlace / size) / decPlace;
if ((number == 1000) && (i < abbrev.length - 1)) {
number = 1;
i++;
}
number += abbrev[i];
break;
}
}
console.log(number);
return number;
}
plugin.init();
//use to convert numbers with comma seperated
}
$.fn.siPrifixx = function (options) {
return this.each(function() {
if (undefined == $(this).data('siPrifixx')) {
var plugin = new $.siPrifixx(this,options);
$(this).data('siPrifixx', plugin);
}
});
};
}(jQuery));
I use to call the plugin by $(this).data('siPrifixx').convert(value);});
What is the problem with my code?How can I modify my plugin to gets works?
How can I call convert method in code.

One approach would be to divide plugin into individual portion which each return expected result, then merge the discrete working portions one by one until the full plugin in functional
(function($) {
var settings = {
maxDigits: 8,
seperator: true,
decimal: 0,
popUp: false,
countUp: false
}
function convert(number, options) {
var opts = $.extend(settings, options || {});
var n = opts.decimal;
console.log(opts);
var decPlace = Math.pow(10, n);
var abbrev = ["K", "M", "B", "T"];
for (var i = abbrev.length - 1; i >= 0; i--) {
var size = Math.pow(10, (i + 1) * 3);
if (size <= number) {
number = Math.round(number * decPlace / size) / decPlace;
if ((number == 1000) && (i < abbrev.length - 1)) {
number = 1;
i++;
}
number += abbrev[i];
break;
}
}
this.data("number", number); // set `number` at `.data("number")`
return this; // return `this` for chaining jQuery methods
}
$.fn.convert = convert;
}(jQuery));
var div = $("div");
div.convert(1500000, {decimal:1});
console.log(div.data("number"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

You should call it like this:
$(this).data('siPrifixx').plugin.convert(value);});

javascript function for calculating

I meet a trouble with a function. actually I need to make this function to perform a calculation on some text fields. When I worked on a single line no problems. But recently, someone asked to make a table with multiple lines (one line can be added dynamically) so, I do the following function so that it can not only duplicate line but id change all the fields concerned, so I add class to these fields. therefore I proceed as follows:
function clone(line) {
newLine = line.cloneNode(true);
line.parentNode.appendChild(newLine);
var tab = document.getElementsByClassName('libelle_debours')
var i = -1;
while (tab[++i]) {
tab[i].setAttribute("id", "_" + i);
};
var cab = document.getElementsByClassName('ht_no_tva')
var j = -1;
while (cab[++j]) {
cab[j].setAttribute("id", "_" + j);
};
var dab = document.getElementsByClassName('ht_tva')
var k = -1;
while (dab[++k]) {
dab[k].setAttribute("id", "_" + k);
};
var eab = document.getElementsByClassName('taux')
var l = -1;
while (eab[++l]) {
eab[l].setAttribute("id", "_" + l);
};
var fab = document.getElementsByClassName('tva')
var m = -1;
while (fab[++m]) {
fab[m].setAttribute("id", "_" + m);
};
}
function delRow() {
var current = window.event.srcElement;
//here we will delete the line
while ((current = current.parentElement) && current.tagName != "TR");
current.parentElement.removeChild(current);
}
The problem in fact is the second function that is used to make the calculation:
function calcdebours() {
var taux = document.getElementById('debours_taux_tva').value;
var ht_no_tva = document.getElementById('debours_montant_ht_no_tva').value;
var ht_tva = document.getElementById('debours_montant_ht_tva').value;
var tva = Math.round((((ht_tva) * (taux)) / 100) * 100) / 100;;
if (taux == '') {
taux = 0;
}
if (ht_no_tva == '') {
ht_no_tva = 0;
}
if (ht_tva == '') {
ht_tva = 0;
}
document.getElementById('debours_montant_tva').value = tva;
document.getElementById('debours_montant_ttc').value = (tva) + parseFloat(ht_tva) + parseFloat(ht_no_tva)
}
function
montant_debours() {
var ttc = document.getElementById('debours_montant_ttc').value;
var ttc2 = document.getElementById('debours_montant_ttc2').value;
if (ttc == '') {
var ttc = 0;
} else {
var ttc = document.getElementById('debours_montant_ttc').value;
}
if (ttc2 == '') {
var ttc2 = 0;
} else {
var ttc2 = document.getElementById('debours_montant_ttc2').value;
}
tx = parseFloat(ttc) + parseFloat(ttc2);
document.getElementById('ttc_cheque').value = Math.round(tx * 100) / 100;
}
As Id are not the same, do I have to create as many functions
there are lines?
Is it possible to fit a single function to process each line?
If so can you tell me how?

If I'm not mistaken you can use for loop and append increment to the end of element's id. Like this:
trs = document.getElementById('container Id').getElementsByTagName('tr');
For (var i = 1, i <= trs.length; i++)
{
var el = document.getElementById('debours_montant_ttc' + i);
}

trying to add multiple similar objects to another object

I'm trying to write a function that adds a new "row" that has an optional "cell" to an object. Here is my code:
var init = function() {
var num = 0;
var count = 0;
var SC = {}
var rowAdd = function() {
num = num + 1
var cellstate = false;
var objCount = count + 1
var rowObj = {
number: num,
cell: cellstate
}
return SC.rowObj;
}
var initialize = function() {
rowAdd();
}
initialize();
}
$(document).ready(function() {
init();
addRowBtn.click(function() {
rowAdd();
});
addCellBtn.click(function() {
SC.row1.cell = true;
});
});
This approach rewrites the row everytime i call rowAdd(). In the end I want a single object SC to contain every row, and each row should have a cell property. How can I do this?

Try this. You can just use num for objCount too and no need for cellState variable.
var init = function() {
var num = 0, SC = {}
var rowAdd = function() {
num = num + 1;
SC["row" + num] = {
number: num,
cell: false
}
return SC;
}
}

How about making SC an array and pushing the new row onto the array:
var SC = [];
var rowAdd = function() {
num = num + 1
var cellstate = false;
var objCount = count + 1;
var rowObj = "row" + objCount;
var rowObj = {
number: num,
cell: cellstate
}
return SC.push(rowObj);
}

You'll want to have an array object on SC to hold your rows.
var SC = { rows: [] };
And then add to it
SC.rows.push(rowObj);
To access
SC.rows[index]