call method with param in an other method - javascript

I'm trying to learn Vue.js and I have a problem.
How can I add the handler "addRowHandlers" in the function addUpHandler ?
I made a pagination system and when I turn the page 1, I lost my handler on the .
It's a basic system. I'm not making a new database request, I use a twig variable which contain all my datas
addUpHandler: function(){
//let up = document.getElementById('up');
//let pageA = 1
const text = document.getElementById('textSearchByName')
if(text.value != ""){
this.pageT += 1
return searchByName(pageT)
}
let myTab = document.getElementById("myTab")
myTab.innerHTML = ""
this.pageA++;
for(let i=(this.pageA-1)*10;i<this.pageA*10;i++){
let dist = segments[i]['distance']/1000
myTab.innerHTML += "<tr v-on:click='addRowHandlers($event)'><td>"+segments[i]['name']+"</td><td>"+segments[i]['nbSegment']+"</td><td>"+dist.toFixed(2)+"km</td><td>"+segments[i]['total_elevation_gain']+"m</td><td>"+segments[i]['average_grade']+"%</td><tr>"
}
},
addRowHandlers: function(event){
this.clearMap();
var td = event.currentTarget.getElementsByTagName("td").length
var cell = event.currentTarget.getElementsByTagName("td")[0]; //get le premier td de la ligne
var polyline = cell.firstElementChild.value;
var idSeg = cell.firstElementChild.nextElementSibling.value
let distance = event.currentTarget.getElementsByTagName("td")[2]
distance = distance.firstElementChild.value
this.getStreams(idSeg, distance, myChart)
var coordonnee = L.Polyline.fromEncoded(polyline).getLatLngs();
L.polyline(
coordonnee,
{
color: 'red',
weight: 2
}
).addTo(map)
},
regards
PS: SOrry for my english

Related

Trouble creating events in Google Agenda from Google Sheets with a script

I created a script in a Google Sheet to create events in Google Agenda, in order to study.
My goal is to create many events like this : if i study on D0, the first event must be at D+3, then D+10 , D+30, D+60.
I get many problems :
the script write "AJOUTE" in each box of the column (which means in french that the events are added to Agenda) , even if they are not completed with dates (I want to update for each chapter when it's done, and I do not do a whole chapter the same day!)
the script doesn't care if the events are already created, so i get multiple events for the same thing...
My script is the following :
var EVENT_IMPORTED = "AJOUTE";
var ss = SpreadsheetApp.getActiveSpreadsheet();
function onOpen() {
var menuEntries = [{name: "Ajouter les événements à l'agenda", functionName: "importCalendar"}];
ss.addMenu("Agenda", menuEntries);
}
function importCalendar() {
var sheet = SpreadsheetApp.getActiveSheet();
var startcolumn = 1
var numcolumns = 30
var dataRange = sheet.getRange(startcolumn, 1, numcolumns, 6)
var data = dataRange.getValues();
for (var i = 0; i < data.length; ++i) {
var column = data[i];
var titre = column[1];
var DateJ3 = column[2];
var DateJ10 = column[3];
var DateJ30 = column[4];
var DateJ60 = column[5];
var eventImported = column[6];
var setupInfo = ss.getSheetByName("agenda");
var calendarName = setupInfo.getRange("A1").getValue();
if (eventImported != EVENT_IMPORTED && titre != "") {
var cal = CalendarApp.openByName(calendarName);
cal.createAllDayEvent(titre, new Date(DateJ3));
cal.createAllDayEvent(titre, new Date(DateJ10));
cal.createAllDayEvent(titre, new Date(DateJ30));
cal.createAllDayEvent(titre, new Date(DateJ60));
sheet.getRange(startcolumn + i, 7).setValue(EVENT_IMPORTED);
SpreadsheetApp.flush();
}
}
}
Thank you in advance, i'm despair, i searched for hours but found nothing to help...

How to dynamically create multiple horizontal bar charts in Google Chart?

I'm new in Google Chart API.
I want to use it to visualize my data about the review on Google Play Store which include multiple issues, sentiments and other conditions.
I want to build a horizontal bar chart which x axis containing different app , and each app's containing 7 issues, y axis is the sum of sentiment of each issue in different app.
I have already done the horizontal chart containing all data in a single div element. However, for the user's convenience, I want to show 5 data at most in a single div element, and dynamically create div element if there is more than 5 data in the current data set. At last, the div elements which paint the chart will horizontally append to the another div element called issueBar_div. The user can use the scrollbar to view different chart.
What I've done:
Partition data:
var title = ['APP'];
var issueRow = {{ projectissues|safe }}; // 7 different issues got from Django
var graph_data = [title.concat(issueRow)];
var cnt = 0;
var divide_row = [];
var tableRows = ... // tableRows is the app name mapping to sentiment sum which corresponding to different issue array dictionary.
// like the form APP -> [20, 12, -1, 3, 5, 21, 57]
for (var app in tableRows) {
cnt ++;
var row = [app];
for (var i = 0; i < tableRows[app].length; i++) {
row.push(tableRows[app][i]);
}
if(cnt < 6){
divide_row.push(row);
}
else{
graph_data.push(divide_row);
divide_row = [];
cnt = 0;
}
}
Create the div element and draw the chart
In order to build a use the scrollbar, I add some restriction to the issueBar_div.
<div id="issueBar_div" style="height:400px; overflow-x:scroll; overflow-y:hidden";></div>
Dynamically create the div element and draw.
function drawIssueBar() {
var issueBar = document.getElementById("issueBar_div");
// titleRow include the APP and other issue
var titleRow = graph_data[0];
delete_element();
for(var i = 1;i<graph_data.length;i++){
// create div element and set their attribute
var my_div = document.createElement("div");
my_div.id = "issuebar_" + i;
my_div.style.display = "table-cell";
// append this element to #issueBar_div
issueBar.appendChild(my_div);
// get the sliced data and push to total_data
var row_data = graph_data[i];
var total_data = [titleRow];
for(var k=0;k<row_data.length;k++){
total_data.push(row_data[k]);
}
// the new data container
var data = new google.visualization.arrayToDataTable(total_data);
var div_width = $("#home").width();
var materialOptions = {
height: 400,
width: div_width,
hAxis: {
title: 'Sum of sentiment'
},
vAxis: {
title: 'APP'
},
bars: 'vertical'
};
var materialChart = new google.charts.Bar(document.getElementById("issuebar_" + i));
materialChart.draw(data, materialOptions);
}
}
// delete the div element
function delete_element(){
i = 1;
while(true){
element = document.getElementById("issuebar_" + i);
if(element !== null){
element.outerHTML = "";
delete element;
i++;
}
else{
break;
}
}
}
Current Problem:
Basically, the created div elements will create as expect, but the chart will only show one chart as below.
The successful chart
The fail part when move the scrollbar to right
How can I solve this problem?
Any answer will be greatly appreciated. Thanks.
ALL. I have already solve my problem!!!
I notice that there is a very important sentence showing on Google Chart document:
For each chart on the page, add a call to google.charts.setOnLoadCallback() with the callback that draws the chart as an input
So I decide to callback drawing method when drawing each bar chart.
The specific solution
1.I use the new Function as a callback function. The row_data is the data needing to present, and the my_div is the div element where to store the chart.
var drawIssueBar = new Function("row_data", "my_div",
"var data = google.visualization.arrayToDataTable(row_data);" +
"var div_width = $('#home').width();" +
"var materialOptions = {" +
"height: 400," +
"width: div_width," +
"hAxis: {" +
"title: 'Sum of sentiment'" +
"}," +
"vAxis: {" +
"title: 'APP'" +
"}," +
"bars: 'vertical'" +
"};"+
"var materialChart = new google.charts.Bar(my_div);" +
"materialChart.draw(data, materialOptions);"
);
2.Rewrite the data processing.
var titleRow = ... // like the form of ["APP", "issue1", "issue2", ..."issue7"]
var cnt = 0;
var divide_row = [];
for (var app in tableRows) {
cnt ++;
var row = [app].concat(tableRows[app]);
if(cnt < 6){
divide_row.push(row);
}
else{
graph_data.push([titleRow].concat(divide_row));
// console.log(graph_data[graph_data.length - 1]);
divide_row = [];
cnt = 0;
}
}
3.Write a new function called drawIssueChart to draw all the bar chart.
function drawIssueChart(){
// create the div element and draw the chart
delete_element();
var issueBar = document.getElementById('issueBar_div');
for(var i = 0;i<graph_data.length;i++){
var my_div = document.createElement("div");
my_div.id = "issuebar_" + i;
my_div.style.display = "table-cell";
issueBar.appendChild(my_div);
var row_data = graph_data[i];
// use the drawIssueBar as a callback
google.charts.setOnLoadCallback(drawIssueBar(row_data, my_div));
}
}
Result
The successful chart
Another successful chart when moving the scrollbar to right
I learn a lot from this solution!
Hopefully it can help the people who encounter this problem.

Return String variable delayed

I have a web page with a table identified by "table-rank" class.
This table has 3 pages : to go on next page, i use the .click function on the net button.
I tried to build a finalHtml string by capturing specific element in each lines of the table.
Problem : The finalHtml contains 3 times the datas of the first page of the table. No data of the second page and third page is captured..
It's because, when i click on the button, it's asynchronous, and the first loop continue to parse the table which have not been already refreshed. How can i do, to be sure that the data have been loaded when i click on the next button ?
function getClassement() {
var finalHtml = '' ;
for (var k=0; k<2; k++) {
for (var i=0; i<$(".table-rank tbody tr").length; i++) {
var currentLine = $(".table-rank tbody tr")[i];
// Get position
var positionEl = $(currentLine).find(".ng-binding")[0];
var position = $(positionEl).text();
// Get id
var idEl = $(currentLine).find(".ng-binding")[1];
var id = $(idEl).text();
// Get prenom/nom
var nomPrenom = "test";
// Nombre de paris
var nbrParisEl = $(currentLine).find(".ng-binding")[2];
var nbParis = $(nbrParisEl).text();
// Nombre de bons paris
var nbrBonsParisEl = $(currentLine).find(".ng-binding")[3];
var nbBonsParis = $(nbrBonsParisEl).text();
// Score exacts
var scoresExactsEl = $(currentLine).find(".ng-binding")[4];
var scoresExacts = $(scoresExactsEl).text();
// Points totals
var pointsTotalEl = $(currentLine).find(".ng-binding")[7];
var pointsTotals = $(pointsTotalEl).text();
finalHtml = finalHtml + "<tr><td><span class='position'>"+position+"</span></td><td>"+id+"</td><td>"+nomPrenom+"</td><td>"+nbParis+"</td><td>"+nbBonsParis+"</td><td>"+scoresExacts+"</td><td><span class='total'>"+pointsTotals+"</span></td></tr>";
}
// Go next page
$(".pager a")[1].click();
}
return finalHtml;
}

Compare value to another spreadsheet using array loop and write new values

Hello all I'm having trouble implementing array loops in my project... Here is what I want to do.
I have a spreadsheet called "Red Book" this sheet gets updated regularly once the staff have updated it I have a column where they can select to submit the data they've just entered on that specific row (editing this column calls an onEdit function).
The data will then be written to another spreadsheet (different file) called "Raw Data"
For each submit I have a unique identifier. I need the onEdit code to do the following...
Iterate through the column A to find the unique identifier
Once found update the data in columns 1 through 5
Below is the script I have so far:
function TransferToAppData(e) {
var destFile = SpreadsheetApp.openById('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
var destSheet = destFile.getSheetByName("Raw App Data");
var ss = e.source;
var s = ss.getActiveSheet();
var uniConstRng = s.getRange("A1");
var uniqueConstVal = uniConstRng.getValue();
var NextOpenRow = destSheet.getLastRow() + 1;
var ActiveRow = e.range.getRow();
Logger.log(ActiveRow);
var uniqueVal = s.getRange(ActiveRow,1).getValue();
var add = s.getRange(ActiveRow,2).getValue();
var name = s.getRange(ActiveRow,3).getValue();
var dt = s.getRange(ActiveRow,5).getValue()
if (uniqueVal == "") {
s.getRange(ActiveRow,1).setValue(uniqueVal + 1);
uniConstRng.setValue(uniqueVal + 1);
var transferVals = s.getRange(ActiveRow,1,1,5).getValues();
Logger.log(transferVals);
destSheet.getRange(NextOpenRow,1,1,5).setValues(transferVals);
destSheet.getRange(NextOpenRow, 6).setValue("Applicant");
}
else {
var destLastRow = destSheet.getLastRow();
var destDataRng = destSheet.getRange(2,1,destLastRow,5)
var destValues = destDataRng.getValues();
var sourceValues = s.getRange(ActiveRow,1,1,5).getValues();
for( var i = 0; i < destValues.length; ++i){
if (destValues([i][0])==uniqueVal) {
for(n=0;n<destValues[0].length;++n){
///I"m stuck!!!
}
}
}
}
}
As you can see I have the first array loop going, but I'm having trouble figuring out how to do a second loop that iterates only on the row where the unique value is found and write the source data to ONLY to row where the unique value was found not the whole sheet.
I figured it out...
Below is the code and here is how it works...
When values in certain columns are edited this code is fired.
1--It finds the unique identifier located in the row which was edited.
2--Compares that identifier with a column of unique identifiers in another spreadsheet.
3--When a match is found it writes the change to the new spreadsheet and exits the loop
function TransferToAppData(e) {
var destFile = SpreadsheetApp.openById('1V3R2RnpA8yXmz_JDZSkBsK9tGR2LjHZp52p5I1CuQvw');
var destSheet = destFile.getSheetByName("Raw App Data");
var ss = e.source;
var s = ss.getActiveSheet();
var uniqueConstRng = s.getRange("A1");
var uniqueConstVal = uniqueConstRng.getValue();
var NextOpenRow = destSheet.getLastRow() + 1;
var ActiveRow = e.range.getRow();
var uniqueVal = s.getRange(ActiveRow,1).getValue();
if (s.getRange(ActiveRow,2).getValue() == "" || s.getRange(ActiveRow,3).getValue()=="" || s.getRange(ActiveRow,4).getValue()=="" || s.getRange(ActiveRow,5).getValue()=="") {
s.getRange(ActiveRow,13).clearContent();
Browser.msgBox("Address, Name, Date Entered & Rent are required fields!");
} else{
if (uniqueVal == "") {
s.getRange(ActiveRow,1).setValue(uniqueConstVal + 1);
uniqueConstRng.setValue(uniqueConstVal + 1);
var transferVals = s.getSheetValues(ActiveRow,1,1,5);
destSheet.getRange(NextOpenRow,1,1,5).setValues(transferVals);
destSheet.getRange(NextOpenRow, 6).setValue("Applicant");
}
else {
var destLastRow = destSheet.getLastRow();
var destValues = destSheet.getSheetValues(2,1,destLastRow,5);
var sourceValues = s.getSheetValues(ActiveRow,1,1,5);
for(var i = 0; i < destValues.length; ++i){
if (destValues[i][0]===uniqueVal) {
destSheet.getRange(i+2,1,1,5).setValues(sourceValues);
break;
}
}
}
s.sort(1,false);
destSheet.sort(1,false);
}
}

Highlighting a Table Correctly Despite rowspan and colspan attributes - WITHOUT jQuery

Thanks to some !#$## in another department who wrote some crap code, I am unable to use the jQuery library - despite my fervent desire to do so. Their software has already been released into the world, and I have to be compatible.
============================================
I am trying to highlight a table. Desired behavior:
Clicking on a cell in the body highlights the row.
Clicking on a cell in the head highlights the column.
If a column and row are both highlighted, the intersection is highlighted a different color (super-highlight).
Clicking on a previously super-highlighted cell turns off the highlights.
This behavior is simple enough to do with a basic table, but when rowspans and colspans start rearing their ugly heads, things start to get a little wonky... highlighting cell[5], for instance, no longer works reliably.
My thought, in order to speed execution time of the highlighting itself (by changing a class name), is to pre-calculate the 'offsets' of all cells - with a 'colStart' and 'colEnd', 'rowStart' and 'rowEnd' when the page loads and store that in an array somehow.
The question: How would YOU implement this functionality? I am fairly rusty at my JavaScript, awfully rudimentary in my programming skills and would benefit greatly from some guidance.
Thanks,
Scott.
If the reasons for not being able to use jQuery are technical (e.g. someone's used $ for something silly), you could try jQuery's noConflict mode. Just wanted you to be aware of that =)
Your precalculation system seems like it'd work to me, otherwise.
I made a script that detects headers and sub-headers with colspans, but without rowspans in the table rows:
jQuery('#yourTable tbody td').bind('click',function(e) {
var tr = jQuery(e.target).parent('tr');
var y = parseInt(jQuery('tr', this).index(tr));
var x = parseInt(tr.children('td').index(jQuery(e.target)));
var jTdFecha = tr.find('td:first');
var sFecha = jTdFecha.text();
var arrCeldas = {};
var arrEncabezados = {};
var arrJFila = {};
var nTemp = 0;
var jTdEncabezadoFecha,nCantCabeceras,jTemp, nI, nJ, nK, nL, bTemp;
arrJFila[1]={
'arrHijos' : jQuery('#yourTable tbody tr:first-child')
};
jTdEncabezadoFecha = arrJFila[1]['arrHijos'].find('td:first');
nCantCabeceras = jTdEncabezadoFecha.attr('rowspan');
for(nI=1;nI<=nCantCabeceras;nI++){
if(nI>1){
arrJFila[nI]={
'arrHijos' : arrJFila[nI-1]['arrHijos'].next()
};
}
arrCeldas[nI] = {
'arrHijos' : arrJFila[nI]['arrHijos'].children(),
'arrColspan' : {},
'arrRowspan' : {},
'nCant' : '',
'arrLastIndex' : {},
'arrLastSavedColspan': {},
'arrLastColspan': {}
};
for(nJ=0;nJ<=nCantCabeceras;nJ++){
arrCeldas[nI]['arrLastIndex'][nJ] = 0;
arrCeldas[nI]['arrLastColspan'][nJ] = 0;
arrCeldas[nI]['arrLastSavedColspan'][nJ] = 0;
}
}
for(nI=1;nI<=nCantCabeceras;nI++){
arrCeldas[nI]['nCant'] = arrCeldas[nI]['arrHijos'].length;
nTemp = 0;
for(nJ=0;nJ<arrCeldas[nI]['nCant'];nJ++){ //Recorremos todas las celdas de cada cabecera
jTemp = jQuery(arrCeldas[nI]['arrHijos'][nJ]);
arrCeldas[nI]['arrColspan'][nJ] = parseInt(jTemp.attr('colspan'));
arrCeldas[nI]['arrRowspan'][nJ] = parseInt(jTemp.attr('rowspan'));
if(nI>1){
for(nK=1;nK<nCantCabeceras;nK++){
arrCeldas[nI]['arrLastColspan'] = arrCeldas[nI]['arrLastColspan'];
if (nI-nK>0){
//Recorremos las cabeceras anteriores
bTemp = nK==1?true:((arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastColspan'][nK-1]));
if(bTemp){
if(nI-nK==1){
bTemp = (arrCeldas[nI]['arrLastColspan'][nK]<nTemp);
}
}
//console.warn('nI: '+nI+' nK: '+nK+' arrLastColspan[nK='+nK+']:'+arrCeldas[nI]['arrLastColspan'][nK]+' arrLastColspan[nK-1='+(nK-1)+']:'+arrCeldas[nI]['arrLastColspan'][nK-1]);
if(bTemp){
for(nL=arrCeldas[nI]['arrLastIndex'][nK];nL<arrCeldas[nK]['nCant'];nL++){
if((parseInt(arrCeldas[nK]['arrRowspan'][nL])<=1) || isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))){
arrCeldas[nI]['arrLastIndex'][nK] = nL + 1;
if(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))==false){
if((arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastSavedColspan'][nK-1]) || (nK==1)){
arrCeldas[nI]['arrLastColspan'][nK] += arrCeldas[nK]['arrColspan'][nL];
}
}
break;
nL = 999999; //salimos del FOR.
}
if(nL!= 999999){
if(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))==false){
if(arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastSavedColspan'][nK-1]){
arrCeldas[nI]['arrLastColspan'][nK] += arrCeldas[nK]['arrColspan'][nL];
}
nTemp += arrCeldas[nK]['arrColspan'][nL];
}
}
//console.warn(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))+':'+parseInt(arrCeldas[nK]['arrColspan'][nL])+' nI:'+nI+' nL:'+nL+' nK:'+nK+' text: '+jQuery(arrCeldas[nK]['arrHijos'][nL]).text()+' arrLastColspan[nK='+nK+']:'+arrCeldas[nI]['arrLastColspan'][nK]+' arrLastIndex[nK='+nK+']:'+arrCeldas[nI]['arrLastIndex'][nK]);
}
}
}
}
//console.warn('nI: '+nI+' nJ: '+nJ+' pre: x:'+x+' nTemp:'+ nTemp);
if(x<=(nTemp-1)){
arrEncabezados[nI] = '';
break;
nJ = 999999; //salimos del FOR.
}
}
if(nJ!= 999999){
nTemp += arrCeldas[nI]['arrColspan'][nJ];
if(x<=(nTemp-1)){
for(nK=1;nK<=nCantCabeceras;nK++){
arrCeldas[nK]['arrLastSavedColspan'][nI] = nTemp;
}
arrEncabezados[nI] = jTemp.text();
break;
nJ = 999999; //salimos del FOR.
}
}
//console.warn('nI: '+nI+' nJ: '+nJ+' post: x:'+x+' nTemp:'+ nTemp+' text:'+jTemp.text()+' arrLastColspan [0]:'+arrCeldas[nI]['arrLastColspan'][0]+' [1]:'+arrCeldas[nI]['arrLastColspan'][1]+' [2]:'+arrCeldas[nI]['arrLastColspan'][2]+'[3]:'+arrCeldas[nI]['arrLastColspan'][3]+' arrLastSavedColspan [0]:'+arrCeldas[nI]['arrLastSavedColspan'][0]+' [1]:'+arrCeldas[nI]['arrLastSavedColspan'][1]+' [2]:'+arrCeldas[nI]['arrLastSavedColspan'][2]+'[3]:'+arrCeldas[nI]['arrLastSavedColspan'][3]);
}
}
console.warn(arrEncabezados[1]+' '+arrEncabezados[2]+' '+arrEncabezados[3]+' bTemp: '+bTemp+' nCantCabeceras: '+nCantCabeceras+' Fecha:'+sFecha+' ¿se ve fecha?:'+(isScrolledVerticalIntoView(jTdFecha.get(0))&&isScrolledHorizontalIntoView(jTdFecha.get(0)))+' ¿se ve encabezado?:'+(isScrolledVerticalIntoView(jTdEncabezadoFecha.next().get(0))&&isScrolledHorizontalIntoView(jTdEncabezadoFecha.next().get(0))));
tr = '';
y = '';
x = '';
jTdFecha = '';
sFecha = '';
arrCeldas = '';
arrEncabezados = '';
arrJFila = '';
nTemp = '';
jTdEncabezadoFecha = '';
nCantCabeceras = '';
jTemp = '';
nI = '';
nJ = '';
nK = '';
nL = '';
bTemp = '';
})
I'm still thinking how to have detected rows with rowspans

Categories

Resources