We Keep Coding

How to post current time when checkbox = TRUE

I'll try to keep this short and sweet.
I am making a packaging form using Google Sheets. Users fill out the form using the dropdowns on the spreadsheet and press the Submit button to send the data to Packaging Form Responses. This script works perfectly. Now I'm struggling to write a script to make it so that the checkbox in cell O13 auto-populates the data in the "Time Out" section in row 13 with the current time. You'll notice that I have the current time broken down into different cells on row 24 (hh , mm , am/pm). Basically, when the checkbox is = TRUE, I want the data in row 24 to be posted in row 13's "Time Out" section (side note: rows 22-24 will be hidden when the form is live). Haven't used onEdit() function very much so I could use some help here.
Here is my code thus far:
function onEdit(e) {
var range = e.range;
var spreadSheet = e.source;
var column = range.getColumn;
var row = range.getRow;
var hours = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Packaging Form').getRange('H24').getValue();
var minutes = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Packaging Form').getRange('I24').getValue();
var ampm = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Packaging Form').getRange('J24').getValue();
if(column == 15 && row == 13){
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Packaging Form').getRange('D13').setValue(hours);
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Packaging Form').getRange('F13').setValue(minutes);
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Packaging Form').getRange('H13').setValue(ampm)
}
}
Not sure what is wrong here, I believe it has to do with my local variables hours, minutes, and ampm.
Also I haven't gotten this far yet, but would like for the current time that gets posted in row 13 to be cleared when the checkbox no longer = TRUE (i.e. when the user un-checks the "Use current time" checkbox, the data in the "Time Out" section is cleared). Any help would be greatly appreciated, thank you.

Replace
var column = range.getColumn;
var row = range.getRow;
by
var column = range.getColumn();
var row = range.getRow();
or even better
var column = range.columnStart;
var row = range.rowStart;
P.S. you might also change SpreadsheetApp.getActiveSpreadsheet() by spreadsheet.

Date as class in datepicker

I am looking for a way to make each td in the datepicker unique. I have set a price under each highlighted date but the problem is that the price is the same on every date.
addCustomInformation : function(x) {
window.bookingRequest.totalPrice = 0;
window.bookingRequest.totalAccommodationOnlyPrice = 0;
window.rateTableRowIndex = 0;
var selectedTimeFrom = x;
var selectedTimeTo = x + 604800000;
while (selectedTimeFrom < selectedTimeTo) {
accommodations.buildRateRow(selectedTimeFrom, 1, 0, 3);
selectedTimeFrom += (86400000 * 7);
}
var price = accommodations.formatPrice(window.bookingRequest.totalAccommodationOnlyPrice);
var newprice = price.substring(3);
setTimeout(function() {
$(".ui-datepicker-calendar td").filter(function() {
var date = $(this).text();
return /\d/.test(date);
}).find("a").attr('data-custom', newprice); // Add custom data here
}, 0)
}
This code fetches the price but the price is assigned to ".ui-datepicker-calendar td" which it should not. I want it to add the price to the current td in the calendar loop. The addCustomInformation function run on every highlighted td.
My thought was to add the date as a class for each td so it would look something like this
<td class="05-08-2016 dp-highlight"></td>
<td class="06-08-2016 dp-highlight"></td>
Can not figure out how to do this. If it can be done I could send the current date in the loop as a parameter to the function and add the price to the correct td.
I can not use return in "beforeShowDay" because this is used to return the different classes for highlighted and disabled dates. Adding the class in a current return like return [true, 'dp-highlight current-date'] is also not possible as I can not run the addCustomInformation function after the return.
x in the function is the current date in miliseconds used to calculate the price.
Any other solution would also be welcome.
Michael

In the datepicker file i managed to get a id added to each active/clickable td in the calendar. My custom function now looks like this:
addCustomInformation : function(currentday, dateclass) {
window.bookingRequest.totalAccommodationOnlyPrice = 0;
window.rateTableRowIndex = 0;
var selectedTimeFrom = currentday;
var selectedTimeTo = currentday + 604800000 // the day one week from current day ;
while (selectedTimeFrom < selectedTimeTo) {
accommodations.buildRateRow(selectedTimeFrom, 1, 0, 3);
selectedTimeFrom += (86400000 * 7);
}
var price = accommodations.formatPrice(window.bookingRequest.totalAccommodationOnlyPrice);
var newprice = price.substring(4) // remove DKK from price;
setTimeout(function() {
$("." + dateclass).text('DKK ' + newprice) // add the price to the td;
},1000)
Take a look at this page http://designunivers.dk/green2green/hotel/hotel-isla-canela-golf/ and chose the tab "Priser og bestilling". Next press the "Vælg datoer" button in fx "Billund - Sevilla". In the calendar go to the months february, march, april. Sometimes the price shows DKK 0 and other times it shows the correct price. If you refresh the page and try again it shows the price on some of the dates that returned DKK 0 before. Totally weird.
Any ideas on the problem? Is it because the "newprice" variable is not yet calculated before I add it to the td field? Any solutions on this in such case?

PivotTable.js conditionally change color on text

So I'm working with PivotTable.js which has been a great help at work.
Right now though, I'm trying to get a filter going to change the color of cells or font within the cell depending on the value.
For example, if I have an array of dates in my dataset
dates = ["N/A", "4/12/2016", "7/9/2024", "7/9/2024", "4/1/2013"]
I want to make it so any dates before 6/1/2016 to change colors.
I have my data being passed in locally as a variable 'data' if that makes any difference
$(function(){
var derivers = $.pivotUtilities.derivers;
var renderes = $.extend($.pivoUtilities.renderers, $.pivotUtilities.export_renderers);
$("#pivot_table").pivotUI(data, {
derivedAttributes: function(data){
// not sure how to access the css of the element from here
}
rows: [],
cols: ["Name", "Date", "Organization", "Cost"],
renderers: renderers,
rendererName: "Table"
});
});
I've tried going into derivedAttributes, but everything I tried wasn't working.
Any help or brainstorming would be much appreciated on this

So...I actually solved it on my own haha...
One of the great things about PivotTable.js is the flexibility in options and sorting. So I used the onRefresh attribute and fed it this function
onRefresh: function() {
var $labels = $('.pvtRowLabel')
var today = new Date();
var d = today.getDate();
var m = today.getMonth()+1;
var y = today.getFullYear();
var date;
var dateReg = /^\d{1,2}[\/]\d{1,2}[\/]\d{4}$/;
// Goes through each cell with the class '.pvtRowLabel'
for (var i=0; i<$labels.length; i++) {
if ($labels[i].innerHTML.match(dateReg)) {
date = $labels[i].innerHTML.split('/');
if (Number(date[2]) == y) {
if (Number(date[0]) == m) {
if (Number(date[1]) <= d) {
$('.pvtRowLabel').eq(i).addClass('expired');
}
} else if (Number(date[0]) < m) {
$('.pvtRowLabel').eq(i).addClass('expired');
}
} else if (Number(date[2]) < y) {
$('.pvtRowLabel').eq(i).addClass('expired');
}
}
};
},
After that, just use a css selecter to specify the color you want to use
.expired { background-color: #F08080 !important; }
The problem with my solution is that it adds more strain on the browser since it's checking the DOM and adding classes every time the table is refreshed. I'm not sure if there's a way to accomplish this when it's first rendered, so those cells are always going to be labeled as expired when generated.

Here's one solution I found to change the font color of a single row in the table, say row no. 5:
$("#pivot-table").pivotUI(data, {
...
onRefresh: function (config) {
// Show row no.5 as red
$("#pivot-table").find('.pvtVal.row5').css('color', 'red');
},
...
});

I did custom coloring by editing the pivot.min.js file.
You may have to tweak the loop to segregate the data and add required css style in the js file.

Trying to compare html datetime with current time for conditional formatting

I have a sharepoint discussion list. There's a field called "Last Updated". I'm trying to highlight rows where last updated is greater than 1 hour.
This is what I'm currently trying:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js"></script>
<script>
$(document).ready(function(){
var now = moment().format('l h:mm:ss a');
console.log(now);
//$row = $("td .ms-vb2:contains('6/13/2014 9:46 AM')");
$rows = $("td[id$='WPQ3'] .ms-vb2:contains('AM'), td[id$='WPQ3'] .ms-vb2:contains('PM')");
console.log($rows);
$times = $rows.children
$rows.parent().css("background-color", "rgba(203, 231, 57, 0.37)");
});
</script>
</head>
</html>
Right now, every cell is highlighted based on my selector.
$rows contains 2 objects and the innerText for both objects contains the time, so something like "6/13/2014 9:46 AM".
I'm not sure how to look at the time for each row, compare it with the now variable and then highlight if my condition is met, which is "Highlight if less than 1 hour difference"

I was able to solve this using moment.js and a bit more research into jQuery.
Here's my solution:
$(document).ready(function(){
//STORE CURRENT TIME
var now = moment()
//GET ALL ROWS I'M TRYING TO HIGHLIGHT
$rows = $("td[id$='WPQ3'] .ms-vb2:contains('AM'), td[id$='WPQ3'] .ms-vb2:contains('PM')");
//GO THROUGH EACH ROW FOUND
$.each($rows, function (index, row){
//FOR EACH ROW CONVERT TIME INTO MOMEMTJS OBJECT
var lastUpdateTime = moment(row.innerText)
//USING MOMENT JS, FIND THE DIFFERENCE BETWEEN LAST UPDATE AND NOW
var difference = now.diff(lastUpdateTime, 'hours');
//IF THE DIFFERENCE IS LESS THAN AN HOUR HIGHLIGHT THE CURRENT ROWA
if(difference <= 1){
$(this).parent().css("background-color", "rgba(203, 231, 57, 0.37)");
}
})
});

Creating a simple JQuery tooltip?

Has anybody here got any experience in creating simple tooptips using JQuery?
I have created a table:
<tr id="mon_Section">
<td id="day_Title">Monday</td>`
<td id="mon_Row" onmousemove="calculate_Time(event)"></td>
</tr>`
the function "calculate_Time" will be called and this gets the X position of the mouse cursor and from the value, uses IF and ELSE-IF statements to calculate the values of other variables i have created:
var mon_Pos;
var hour;
var minute;
var orig;
var myxpos;
function calculate_Time(event) {
myxpos = event.pageX;
myxpos = myxpos-194;
if (myxpos<60) {
orig = myxpos;
minute = myxpos;
hour = 07;
} else if (myxpos>=60 && myxpos<120) {
orig = myxpos;
minute=myxpos-60;
hour=08;
}
}
How do i go about creating a stylized tooltip containing the Hour and Minute variables that i created, I need the tooltip to be updated everytime the X position of the cursor changes. I know that with myxpos variable does change whenever the mouse is moved because i tried it out using an alert(myxpos) and as expected, if the mouse moves, a new alert box popups with a new value. I just cant work out how to place that value in a tooltip?

Simplest answer: Don't redo what has already been done and done well. Both support callbacks that can be used to modify the text being displayed.