Google Scripts Web App not populating Googlesheet with data - javascript

I'm working on a google timeclock app that I got off of Packt. I cannot get it to work. There's an HTML file and a .gs. I think that the javascript in the HTML is not working. It's either that or the doGet function in the .gs code. I really don't know. I've tried chopping it down and isolating the error and I think that it's probably that the HTML isn't running the javascript.
Here's the code for the respective documents.
Code.gs
var ssid = "1BMb3P0G0nqYHfLrDGS113_CJ-pQx0x0QHrihnalaufk";
// Change date format as per your preference.
var DF = "MM/dd/yyyy HH:mm:ss";
var TZ = Session.getScriptTimeZone();
var ss = SpreadsheetApp.openById(ssid);
var TimeSheet = ss.getSheetByName("TimeSheet");
var EmpSheet = ss.getSheetByName("EmployeesList");
var BackupSheet = ss.getSheetByName("Backup");
var MessageSheet = ss.getSheetByName("Message");
/**
* Get employee names from the EmployeesList sheet,
* construct the data as an array and return.
*
*/
function getEmpList(){
var emp = [];
var data = EmpSheet.getDataRange().getValues();
for(var i in data) if(data[i][0]) emp.push(data[i][0]);
return emp;
}
function doGet(){
var template = HtmlService.createTemplateFromFile("Timesheet");
template.message = MessageSheet.getRange("A2").getValue();
template.empList = getEmpList();
var html = template.evaluate();
return html;
}
// Returns employee shift status as an array [status, name].
function getEmpStatus(emp){
var empData = EmpSheet.getDataRange().getValues();
var timeData = TimeSheet.getDataRange().getValues();
// Remove header
timeData.shift();
for(var i in timeData){
if(timeData[i][1] == emp)
return [timeData[i][0],empData[j][1]];
}
// Return null if employee not in shift
return ["",""];
}
function fmtDate_(d, format) {
// Set the default date format, if 'format' not passed.
var fmt = format || "MM/dd/yyyy HH:mm:ss";
var timeZone = Session.getScriptTimeZone();
return Utilities.formatDate(d, timeZone, fmt);
}
function postTime(name, val) {
var time = fmtDate_(new Date());
var data = TimeSheet.getDataRange().getValues();
// If 'shift start' clicked
if (val == "sb") {
// Update start time if clicked again.
for (var i in data) {
if (data[i][1] == name && data[i][0] == "sb") {
data[i][2] = time;
TimeSheet.getRange(1, 1, data.length, data[0].length)
.setValues(data);
return [val, name];
}
};
// Else insert new name and update start time.
TimeSheet.appendRow([val, name, time]);
return [val, name];
}
// If 'break start' clicked.
if(val == "bb"){
for(var i in data){
// Update break start time only if employee is in shift.
if(data[i][0] == "sb" && data[i][1] == name ){
data[i][0] = val;
data[i][3] = time;
TimeSheet.getRange(1, 1, data.length, data[0].length)
.setValues(data);
return [val,name];
}
};
// If 'break start' clicked before 'shift start'.
throw "Please start your shift.";
}
// If 'break end' clicked
if(val == "be"){
for(var i in data){
if(data[i][0] == "bb" && data[i][1] == name ){
data[i][0] = val;
data[i][4] = time;
TimeSheet.getRange(1, 1, data.length, data[0].length)
.setValues(data);
return [val,name];
}
};
// If 'break end' clicked before 'break start'.
throw "Please start your break.";
}
// If shift end clicked
if(val == "se"){
for(var i in data){
if(data[i][1] == name
&& (data[i][0] == "sb"|| data[i][0] == "be") ){
var backup = [];
backup.push(
data[i][1], // Name
data[i][2], // Shift Start
data[i][3], // Break Start
data[i][4], // Break End
time, // Shift end
'=(E2-B2)*24', // Col F formula,
'=(D2-C2)*24', // Col G formula
'=F2-G2' // Col H formula
);
/*
* Copy Timesheet data to Backup sheet.
* Insert a new row before row 2,
* so that the inserted formulas ever work.
*
*/
BackupSheet.insertRowBefore(2);
BackupSheet.getRange(2, 1, 1, backup.length)
.setValues([backup]);
/*
* Tidy timesheet.
* Ensure at least one data row before deleting,
* to avoid error.
*
*/
if(i<2) TimeSheet.appendRow(['']);
// Delete copied row
TimeSheet.deleteRow(Number(i)+1);
return [val,name];
}
};
// If 'shift end' clicked before 'break end'.
if(data[i][0] == "bb")
throw "Please end your break.";
// If 'shift end' clicked without starting shift.
throw "Please start your shift.";
}
}
And the HTML file is this ->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" />
<script src= "https://ajax.googleapis.com/ajax/libs /jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div>
<fieldset style="padding-bottom:25px;">
<legend>Timesheet</legend>
<select id="employee" name="employee">
<? for(var i in empList){ ?>
<option value="<?= empList[i] ?>" > <?= empList[i] ?></option>
<? } ?>
</select>
<br /><br />
<button id="sb" value="sb"><span>Shift Start</span></button>
<button id="bb" value="bb"><span>Break Start</span></button>
<button id="be" value="be"><span>Break End</span></button>
<button id="se" value="se"><span>Shift End</span></button>
</fieldset>
<fieldset>
<div id="message"><?!= message ?></div>
</fieldset>
</div>
<script>
$(function() {
// Disable all buttons.
$('#sb,#bb,#be,#se').prop("disabled", true);
// Set drop-down change event.
$('#employee').change(getStatus);
// Set buttons click event.
$('#sb,#bb,#be,#se').click(postTime);
getStatus();
});
function getStatus(){
// Remove all previous error messages.
$('#error,#success').remove();
// Disable all buttons.
$('#sb,#bb,#be,#se').prop("disabled", true);
// Get employee shift status.
google.script.run
.withSuccessHandler(function(status){
updateStatus(status);
})
.getEmpStatus($("#employee").val());
}
function postTime(){
// Remove all previous error messages.
$('#error,#success').remove();
// Disable all buttons.
$('#sb,#bb,#be,#se').prop("disabled", true);
// Post shift time to sheet.
google.script.run
.withSuccessHandler(function(msg){
updateStatus(msg[0]);
})
.withFailureHandler(function(msg, elm){
showError(msg, elm);
})
.withUserObject(this)
.postTime($("#employee").val(),$(this).val());
}
function updateStatus(status){
// Enable appropriate buttons only.
switch(status){
case "sb": $('#bb,#se').prop("disabled", false); break;
case "bb": $('#be').prop("disabled", false); break;
case "be": $('#se').prop("disabled", false); break;
default: $('#sb').prop("disabled", false);
}
}
function showError(msg, elm) {
var span = $('<span id="error" class="error">' + msg + '</span>');
$(elm).after(span);
}
</script>
</body>
</html>

Related

childNode.remove() doesn't seem to be working

I'm writing a google sheets add on that helps you track data as you play a game. In the sidebar, you can search for a monster in the game and after you hit the submit button the monster's stats, a list of what items they drop after a kill, and a link to the wiki is rendered on screen.
The problem I'm having is that when you search a new monster after having already searched for one, the old items from the drop section won't get removed. The other sections on stats and the wiki link will change, but instead of removing the old drop items, the new items just get added to the end of the list.
I've tried using parent.removeChild() and childNode.remove() and neither seem to do anything and I'm wondering if its because of how google apps script works.
Here is the html for the sidebar itself: note that include() is a custom function that google recommends you add to your script so you can import other files.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Info sidebar styles'); ?>
</head>
<body>
<form id="monsters">
<input class="monsterInput" type="text"placeholder="Monster Name" name="monsterName" />
<input class="monsterInput" type="text" placeholder="Monster Level" name="monsterLvl" />
<button id="submit">Search</button>
</form>
<div id="output">
</div>
<?!= include('sidebar script'); ?>
</body>
</html>
Here's the code for sidebar script:
<script>
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready(){
// create the divs that are later filled with info
var output = document.getElementById("output");
var stats = document.createElement("div");
stats.id = "statsDiv";
var drops = document.createElement("div");
drops.id = 'dropDiv';
var list = document.createElement("div");
list.id = "dropList";
var wiki = document.createElement("div");
wiki.id = "wiki";
output.appendChild(stats);
output.appendChild(drops);
output.appendChild(wiki);
var index = 0;
// the onSuccess for the onClick eventHandler. data is an object returned from the function call below
function onSuccess(data) {
console.log(`first index ${index}`);
// if the submit button has already been pushed and added the droplist to the DOM, increase the index
if(drops.getElementsByClassName("dropItem")[0]){
index++;
console.log(`second index ${index}`);
};
console.log(index);
// get the stats
var hitpoints = data.hitpoints;
var attackarray = data["attack_type"]
var attackTypes = '';
var attack1 = attackarray[0];
var attack2 = attackarray[1];
var attack3 = attackarray[2];
var attack4 = attackarray[3];
if(attackarray.length === 1){
attackTypes = attack1;
} else if (attackarray.length === 2){
attackTypes = `${attack1}, ${attack2}`;
} else if (attackarray.length === 3){
attackTypes = `${attack1}, ${attack2}, ${attack3}`;
} else if (attackarray.length === 4){
attackTypes = `${attack1}, ${attack2}, ${attack2}, ${attack4}`;
}
var attLvl = data["attack_level"];
var defLvl = data["defence_level"];
var magicLvl = data["magic_level"];
var rangeLvl = data["ranged_level"];
var maxHit = data["max_hit"];
var aggro = '';
if(data.aggressive){
aggro = "Yes";
} else {
aggro = "No";
}
var speed = data["attack_speed"];
// put the stats into html form
var statsInner =
`<h2> Stats </h2>
<ul id="statsList">
<li>Hitpoints: ${hitpoints}</li>
<li>Attack Level: ${attLvl}</li>
<li>Defense Level: ${defLvl}</li>
<li>Magic Level: ${magicLvl}</li>
<li>Ranged Level: ${rangeLvl}</li>
<li>Attack Style: ${attackTypes} </li>
<li>Attack Speed: ${speed}</li>
<li>Max Hit: ${maxHit} </li>
<li>Aggressive? ${aggro} </li>
</ul>`;
stats.innerHTML = statsInner;
drops.innerHTML = '<h2>Drops</h2>';
// Put the wiki url into HTML
var wikiURL = data["wiki_url"];
var wikiInner = `<p>For more info check out this monsters page on the wiki, <a href=${wikiURL}>here</a>.</p>`;
wiki.innerHTML = wikiInner;
// get the drop information and put it in html form. make the data-id attribute of each object equal the value of index
data.drops.forEach(function (item) {
var name = item.name;
var quant = item.quantity;
var members = '';
if(item.members){
members = "(m)";
}
var nameQM = `${name} (x${quant}) ${members}`;
var rarity = (item.rarity) * 100;
var rare = rarity.toFixed(2);
var nameNode = document.createElement("div");
var itemList =
`<p>${nameQM}</p>
<br>
<p> Rarity: ${rare} percent </p>`;
nameNode.innerHTML = itemList;
nameNode.className = "dropItem";
nameNode.dataset.id = index;
list.appendChild(nameNode);
})
drops.appendChild(list);
// if the drop item has a data-id that doesn't match the current index, remove it from the DOM.
var dropArray = list.getElementsByClassName("dropItem");
for(var i = 0; i < dropArray.length; i++){
var item = dropArray[i];
if(item.dataset.id != index){
item.remove();
}
}
}
//add the event listener to the submit button. getMonsterData makes an API call, parses the data, and returns an object filled with the data we add to the DOM through the success handler
document.getElementById("submit").addEventListener("click", function (e) {
e.preventDefault();
var parent = e.target.parentElement;
var monsterName = parent.elements[0].value;
var monsterlvl = parent.elements[1].value;
google.script.run.withSuccessHandler(onSuccess).getMonsterData(monsterName, monsterlvl);
});
}
</script>

how to get previous month and next month results on html using javascript

I have this code which you can select date and get results according to it. Now in the place of months and years selection i want a button that shows previous month and another button that shows next month. Like that Next day and previous day. Can someone please help me with this code snippet.
1. Button one - Previous month
2. Button two - Next month
3. Button three - Previous Day
4. Button four - Next Day
All results should be on HTML page.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
TD, TH {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1)
return firstDate.getDay()
}
function getMonthLen(theYear, theMonth) {
var oneDay = 1000 * 60 * 60 * 24
var thisMonth = new Date(theYear, theMonth, 1)
var nextMonth = new Date(theYear, theMonth + 1, 1)
var len = Math.ceil((nextMonth.getTime() -
thisMonth.getTime())/oneDay)
return len
}
var theMonths = ["January","February","March","April","May","June","July","August",
"September","October","November","December"]
function getObject(obj) {
var theObj
if (document.all) {
if (typeof obj == "string") {
return document.all(obj)
} else {
return obj.style
}
}
if (document.getElementById) {
if (typeof obj == "string") {
return document.getElementById(obj)
} else {
return obj.style
}
}
return null
}
function populateTable(form) {
var theMonth = form.chooseMonth.selectedIndex
var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text)
// initialize date-dependent variables
var firstDay = getFirstDay(theYear, theMonth)
var howMany = getMonthLen(theYear, theMonth)
// fill in month/year in table header
getObject("tableHeader").innerHTML = theMonths[theMonth] +
" " + theYear
// initialize vars for table creation
var dayCounter = 1
var TBody = getObject("tableBody")
// clear any existing rows
while (TBody.rows.length > 0) {
TBody.deleteRow(0)
}
var newR, newC
var done=false
while (!done) {
// create new row at end
newR = TBody.insertRow(TBody.rows.length)
for (var i = 0; i < 7; i++) {
// create new cell at end of row
newC = newR.insertCell(newR.cells.length)
if (TBody.rows.length == 1 && i < firstDay) {
// no content for boxes before first day
newC.innerHTML = ""
continue
}
if (dayCounter == howMany) {
// no more rows after this one
done = true
}
// plug in date (or empty for boxes after last day)
newC.innerHTML = (dayCounter <= howMany) ?
dayCounter++ : ""
}
}
}
function fillYears() {
var today = new Date()
var thisYear = today.getFullYear()
var yearChooser = document.dateChooser.chooseYear
for (i = thisYear; i < thisYear + 5; i++) {
yearChooser.options[yearChooser.options.length] = new Option(i, i)
}
setCurrMonth(today)
}
// set month choice to current month
function setCurrMonth(today) {
document.dateChooser.chooseMonth.selectedIndex = today.getMonth()
}
</SCRIPT>
</HEAD>
<BODY onLoad="fillYears(); populateTable(document.dateChooser)">
<H1>Calender</H1>
<HR>
<TABLE style="width:100%;height:80%;" ID="calendarTable" BORDER=1 ALIGN="center">
<TR>
<TH ID="tableHeader" COLSPAN=7></TH>
</TR>
<TR><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH>
<TH>Thu</TH><TH>Fri</TH><TH>Sat</TH></TR>
<TBODY ID="tableBody"></TBODY>
<TR>
<TD COLSPAN=7>
<P>
<FORM NAME="dateChooser">
<SELECT NAME="chooseMonth"
onChange="populateTable(this.form)">
<OPTION SELECTED>January<OPTION>February
<OPTION>March<OPTION>April<OPTION>May
<OPTION>June<OPTION>July<OPTION>August
<OPTION>September<OPTION>October
<OPTION>November<OPTION>December
</SELECT>
<SELECT NAME="chooseYear" onChange="populateTable(this.form)">
</SELECT>
</FORM>
</P></TD>
</TR>
</TABLE>
</BODY>
</HTML
I suggest to use moment.js. It helps alot when you work with time and date.
e.g. after pressing a button "next month" you can use moment().add(1, 'months') to add 1 month to your current date. you can store the date after switching e.g. on data attributes or hidden input or ...
complete documentation you can find on https://momentjs.com/docs/

how to split the string in javascript?

I have a text file which contains list of dates and respective events, which looks as follows,
txt:
2017-05-01: All Day Event:
2017-05-06: Day Event:
2017-05-15: abc Event:
2017-06-05: All Event:
2017-06-03: Al Event:
At first, I am using a simple split function to split the contents of the text file,
var text=xmlhttp.responseText;
var amber=text.split(':');
In the amber array each date and events are stored simultaneously, what I need to do is access the dates alone and split the day, month and year, I tried using the following code
var stwo="";
for (var i = 0; i < amber.length; i += 2) {
stwo = amber[i].split('-');
}
but when I try to access the contents of stwo[] it shows "undefined", I've also tried declaring stwo like this
stwo=[" "," "];
because I thought stwo wasn't defined as an array, what have I done wrong? Is there any other way I can split the dates?
here is my complete code.,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<title>SAPUI5 EVENT CALENDAR</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap" data-sap-ui-libs="sap.m,sap.ui.layout,sap.me"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
jQuery.sap.require("sap.me.Calendar");
jQuery.sap.require("sap.m.RadioButton");
calendar = new sap.me.Calendar({
firstDayOffset : 1
});
var xmlhttp,text;
xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET','C:/Users/Manimaran/Desktop/project/nn.txt',false);
xmlhttp.send();
var text=xmlhttp.responseText;
var amber=text.split(':');
for (var t = 0; t < amber.length; t+=2)
{
calendar.toggleDatesType([amber[t]],sap.me.CalendarEventType.Type07,
true);
//document.write(a[i+1]+"<br>");
}
calendar.toggleDatesType([ "2017/05/15" ],
sap.me.CalendarEventType.Type07,
true);
var msgLabel = new sap.m.Label({
width : "100%"
});
calendar.attachTapOnDate(function(oEvent) {
/* date=oEvent.getParameters().date;
msgLabel.setText(date)*/
});
calendar.attachChangeCurrentDate(function(oEvent) {
var stwo=[" "," "];
for (var i=0;i<amber.length;i+=2)
{
stwo=amber[i].split('-');
}
/*for (var j=1;j<stwo.length;j+=3)
{
switch(stwo[j]){
case '01' : stwo[j]="Jan";
break;
case '02' : stwo[j]="Feb";
break;
case '03' : stwo[j]="Mar";
break;
case '04' : stwo[j]="Apr";
break;
case '05' : stwo[j]="May";
break;
case '06' : stwo[j]="Jun";
break;
case '07' : stwo[j]="Jul";
break;
case '08' : stwo[j]="Aug";
break;
case '09' : stwo[j]="Sep";
break;
case '10' : stwo[j]="Oct";
break;
case '11' : stwo[j]="Nov";
break;
case '12' : stwo[j]="Dec";
break;
default:"gokka makka";
}
}*/
var comp=oEvent.getParameters().currentDate;
var tmp=comp.split(' ');
if(tmp[1]==tmp[1]){
msgLabel.setText(stwo);
alert(stwo[1]);
}else{
alert('error');
}
});
var unselectBtn = new sap.m.Button({
text : "unselect all",
press : function() {
var aDates = calendar.getSelectedDates();
calendar.unselectAllDates();
msgLabel.setText("unselected " + aDates.length + " dates");
alert(text);
}
});
var app = new sap.m.App();
var page = new sap.m.Page({
headerContent : unselectBtn,
content : [ calendar, new sap.m.Label({
width : "100%",
text : "Messages log"
}), msgLabel]
});
// Colgate: weeks start on sunday, and show 2 months
calendar.setSingleRow(false);
calendar.setMonthsToDisplay(1);
// calendar.setWeeksPerRow(1);
calendar.setMonthsPerRow(1);
calendar.setFirstDayOffset(0);
app.addPage(page);
app.placeAt('content');
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
<p id="display"></p>
</body>
</html>
You are just assigning the value to stwo every time..
So all the split values before the last one will be lost.
Also the last string in the split(':') would be empty because after the last : there is nothing in the give string.
So finally nothing will be assigned to stwo.
Check this snippet
var text = "2017-05-01: All Day Event:2017-05-06: Day Event:2017-05-15: abc Event:2017-06-05: All Event:2017-06-03: Al Event:";
var amber = text.split(':');
var stwo;
console.log(amber);
for (var i = 0; i < amber.length; i += 2) {
if (amber[i] != "") {
stwo = amber[i].split('-');
}
}
console.log(stwo);
If you can see, even if check for empty strings.. Only the last date will be split and added to the variable stwo.
To store each split value you can use an Array within an Array (MultiDimesional array)
var text = "2017-05-01: All Day Event:2017-05-06: Day Event:2017-05-15: abc Event:2017-06-05: All Event:2017-06-03: Al Event:";
var amber = text.split(':');
var stwo = new Array();
console.log(amber);
var j = 0;
for (var i = 0; i < amber.length; i += 2) {
if (amber[i] != "" && amber[i].indexOf('-') > 1) {
stwo[j] = amber[i].split('-');
j++;
}
}
console.log(stwo);
You parse through each log line like so:
// ES6
const txt = `
2017-05-01: All Day Event:
2017-05-06: Day Event:
2017-05-15: abc Event:
2017-06-05: All Event:
2017-06-03: Al Event:
`
const amber = txt.trim().split('\n');
const logDates = amber.map(line => line.split(':')[0]);
const logDatesSplitted = logDates.map(logDate => logDate.split('-'));
console.log(logDatesSplitted);
// ES5: Fast Splitting by colon
var amber_ = txt.trim().split(':');
var logDates_ = [];
for(var i = 0; i < amber_.length; i += 2) {
if(amber_[i] == "") continue; // filter out last empty log record;
var logDate = amber_[i].trim().split('-');
logDates_.push(logDate);
}
console.log(logDates_);
Checkout this
var test = '2017-05-01: All Day Event:2017-05-06: Day Event:2017-05-15: abc Event:2017-06-05: All Event:2017-06-03: Al Event:';
test = test.replace(/:+$/g,"");
var test1 = test.split(':');
var test2 = [];
for (var i = 0; i < test1.length; i += 2) {
test2.push(test1[i].split('-'));
//console.log(test2);
}
console.log(test2);

Delete duplicate array element

I am working on a program that records customer name and status(child/adult), the program allows add, display and delete customer records from array. However, if user enters the same name and status e.g:
Name: james, status: adult
Name: james, status: adult
I want the function to delete just one record,but now it delete both of them, do i have to add break here? Please help.
PS: I can't use any inbuilt JavaScript functions such as slice(),delete(), concat(), join(), pop(), push(), reverse(), shift(), slice(), sort(), splice(), toString(), unshift() or valueOf()
const MAX_CUSTOMERS = 5;
//create new Array
var customerList = new Array();
function addCustomer() //add customer
{
if (customerList.length >= MAX_CUSTOMERS) //check max customers
alert('Sorry, no more than ' + String(MAX_CUSTOMERS) + ' customers are allowed on the trampoline.')
else
{
var newIndex = customerList.length; //add new user
customerList[newIndex] = new Object;
customerList[newIndex].name = prompt('What is the customer\'s name?'); //ask user enter their name
customerList[newIndex].status = prompt('Are you a Child or an Adult?'); //ask user enter their status
while (!(customerList[newIndex].status == 'child' || customerList[newIndex].status == 'adult')) //check user is child or adult
{
customerList[newIndex].status = (prompt('Error! Please Enter \'child\' or \'adult\':'));
}
}
}
function displayAllCustomers() //display customers
{
var message = ''; //create message
for (var i = 0; i < customerList.length; i++) //loop customers
{
message += 'Name:' + customerList[i].name + ', Status: ' + String(customerList[i].status) + '. \n'; //add customer to message
}
if (message == '') //check message
message = 'Sorry, there are no customer to display!';
alert(message); //output message
}
function identifyThenDeleteCustomer() //identify then delete customer
{
var customerName = prompt('Enter the name of the customer to delete:'); //get customer name
var customerStatus = prompt('Enter \'child\' or \'adult\':'); //get customer status
while (!(customerStatus == 'child' || customerStatus == 'adult')) //check customer status
customerStatus = prompt('Error - enter \'child\' or \'adult\':');
deleteCustomer(customerName, customerStatus); //delete customer
}
function deleteCustomer(aName, aStatus) //delete customer
{
var newCustomerList = new Array(); //create new array
for (var i = 0; i < customerList.length; i++) //loop customers
{
var customer = customerList[i];
if ((customer.name != aName) || (customer.status != aStatus)) //check customer
{
var newIndex = newCustomerList.length; //add new user
newCustomerList[newIndex] = customer;
}
}
if (newCustomerList.length < customerList.length) //check deleted
{
alert('The customer has been deleted.');
}
else
{
alert('There are no customer to delete!');
}
customerList = newCustomerList; //update customer list
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>Coursework 2</title>
<script src="ZouYuncongINSTG018cw2.js" type="text/javascript"></script>
</head>
<body>
<div>
<button type="button" onclick="addCustomer();">Add Customer</button><br>
<button type="button" onclick="displayAllCustomers();">Display All Customers</button><br>
<button type="button" onclick="identifyThenDeleteCustomer();">Identify then Delete Customer</button>
</div>
</body>
</html>
You can make your delete function like this,
function deleteCustomer(aName, aStatus) //delete customer
{
for (var i = 0; i < customerList.length; i++) //loop customers
{
var customer = customerList[i];
if ((customer.name == aName) && (customer.status == aStatus)) //check customer
{
customerList = array.splice(i, 1);//delete from array itself
alert('The customer has been deleted.');
return;//stop
}
}
alert('There are no customer to delete!');
}
It will delete just one.
Since you said you cant use built in functions. In that case you have to copy the elements before and after the one to remove. You can have a control variable marking that you already found the one to delete. So no more deletions will happen.
For example,
function deleteCustomer(aName, aStatus) //delete customer
{
var onedeleted = false;
var newCustomerList = new Array(); //create new array
for (var i = 0; i < customerList.length; i++) //loop customers
{
var customer = customerList[i];
if ((customer.name != aName) || (customer.status != aStatus) || onedeleted) //check customer
{
var newIndex = newCustomerList.length; //add new user
newCustomerList[newIndex] = customer;
}
else
onedeleted = true;
}
if (newCustomerList.length < customerList.length) //check deleted
{
alert('The customer has been deleted.');
}
else
{
alert('There are no customer to delete!');
}
customerList = newCustomerList; //update customer list
}

Allow to select only predifened combination from available values

let us say we have parameter with A,B,C and D values. Now we want to force the user to choose only A,B,C or A,C,D or A or B or C.
Instead of Allowing all possible 16 combination, we want to allow only 5 predefined combination. I tried it but for this i have to put condition for each and every selection.
If we assume this values are bind with checkbox and we need to check whether selected values are as per our predifined combination or not.
I need to achieve this in javascript or either angular.js. Please help me with proper algorithm for such operation.
I tried below logic to achieve this but this will not infor user instantly, alert only after final submission
// multi-dimentional array of defined combinations
var preDefinedCombinations = [['a','b','c'], ['a','c','d'], ['a'], ['b'], ['c']];
// Combination user select
var selectedvalues = [];
// Function called on selection or removing value (i.e a,b,c,d)
function selectOption(value){
var checkIndex = selectedvalues.indexof(value);
if(checkIndex == -1){
selectedvalues.push(value);
}else{
selectedvalues.splice(checkIndex, 1);
}
}
// function called on submition of combination
function checkVaildCombination(){
if(preDefinedCombinations.indexOf(selectedvalues) == -1){
alert('Invalid Combination');
}else{
alert('Valid Combination');
}
}
This code gives information only about combination is valid or not, not about which may be possible combinations as per selections.
stolen from https://stackoverflow.com/a/1885660/1029988 :
function intersect_safe(a, b)
{
var ai=0, bi=0;
var result = new Array();
while( ai < a.length && bi < b.length )
{
if (a[ai] < b[bi] ){ ai++; }
else if (a[ai] > b[bi] ){ bi++; }
else /* they're equal */
{
result.push(a[ai]);
ai++;
bi++;
}
}
return result;
}
then in your code:
function checkVaildCombination(){
function get_diff(superset, subset) {
var diff = [];
for (var j = 0; j < superset.length; j++) {
if (subset.indexOf(superset[j]) == -1) { // actual missing bit
diff.push(superset[j]);
}
}
return diff;
}
if(preDefinedCombinations.indexOf(selectedvalues) == -1){
missing_bits = [];
diffed_bits = [];
for (var i = 0; i < preDefinedCombinations.length; i++) {
var intersection = intersect_safe(preDefinedCombinations[i], selectedvalues);
if (intersection.length == selectedvalues.length) { // candidate for valid answer
missing_bits.push(get_diff(preDefinedCombinations[i], intersection));
} else {
var excess_bits = get_diff(selectedvalues, intersection),
missing_bit = get_diff(preDefinedCombinations[i], intersection);
diffed_bits.push({
excess: excess_bits,
missing: missing_bit
});
}
}
var message = 'Invalid Combination, if you select any of these you`ll get a valid combination:\n\n' + missing_bits.toString();
message += '\n\n Alternatively, you can reach a valid combination by deselected some bits and select others:\n';
for (var j = 0; j < diffed_bits.length; j++) {
message += '\ndeselect: ' + diffed_bits[j].excess.toString() + ', select: ' + diffed_bits[j].missing.toString();
}
alert(message);
} else {
alert('Valid Combination');
}
}
you will of course want to format the output string, but that code will (hopefully, it is napkin code after all) give you the missing bits to make valid combos with what you've got selected already
May be following code could help you to solve ur problem
<script>
function validateForm(){
var checkBoxValues = this.a.checked.toString() + this.b.checked.toString() + this.c.checked.toString() + this.d.checked.toString();
if( checkBoxValues == 'truetruetruefalse' || // abc
checkBoxValues == 'truefalsetruetrue' || // acd
checkBoxValues == 'truefalsefalsefalse' || // a
checkBoxValues == 'falsetruefalsefalse' || // b
checkBoxValues == 'falsefalsetruefalse' ){ // c
return true;
}
return false;
}
</script>
<form onsubmit="return validateForm()" action="javascript:alert('valid')">
<input type="checkbox" name="mygroup" id="a">
<input type="checkbox" name="mygroup" id="b">
<input type="checkbox" name="mygroup" id="c">
<input type="checkbox" name="mygroup" id="d">
<input type="submit">
</form>

Categories