Die Schaltfläche Senden funktioniert nicht auf meinem Einreichungsformular [Duplikat] ⇐ HTML

[Anonymous]

Ich habe ein GoogleSheet, um meine Ausgaben für mein Turo -Geschäft zu verfolgen. Ich habe ein Formular erstellt, das ich eine Quittung hochlade und die Informationen zu dieser Quittung ausschließe. Ich kann sehen, dass es die in meinem googledRive benötigten Ordner erstellt, um die Quittungen zu speichern und zu speichern, aber es hält dort an und speichert die Quittung nicht und es nimmt nicht die Daten, die ich in das Formular eingegeben habe, und speichern sie im Einreichungsdatenblatt. Es ermöglicht mir nur, die Taste Senden zu drücken. />
Code.gs:

Code: Select all

function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('Turo Tools').addItem('Upload Receipt', 'showDialog').addToUi();
}

function showDialog() {
const html = HtmlService.createHtmlOutputFromFile('Dialog')
.setWidth(1800)
.setHeight(1600);
SpreadsheetApp.getUi().showModalDialog(html, 'Upload Receipt');
}

function getDropdownData() {
const sheet =
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Dropdowns');
const ranges = ['Category', 'Payment Method', 'Tax-Deductible', 'Account'];
const data = {};

ranges.forEach((range) => {
const headerRow = sheet.getRange('1:1').getValues()[0]; // Get header row
const columnIndex = headerRow.indexOf(range) + 1; // Find column index for the range name

if (columnIndex > 0) {
const rangeValues = sheet
.getRange(2, columnIndex, sheet.getLastRow() - 1)
.getValues()
.flat()
.filter((cell) => cell !== '');
data[range] = rangeValues;
}
});

return data;
}

// Pull Vehicle, Guest Name, and Trip ID from 'CSV Data' sheet
function getCSVData() {
const sheet =
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('CSV Data');
const data = sheet.getDataRange().getValues();

const vehicles = [];
const guestNames = [];
const tripIds = [];
const vehicleGuestMap = {}; // Maps vehicles to guest names
const tripIDGuestMap = {}; // Maps vehicle -> guest -> trip ID

const vehicleColIndex = 4; // Column E (index 4)
const guestNameColIndex = 2; // Column C (index 2)
const tripIdColIndex = 1; // Column B (index 1)

for (let i = 2; i < data.length; i++) {
const vehicle = data[i][vehicleColIndex];
const guestName = data[i][guestNameColIndex];
const tripId = String(data[i][tripIdColIndex]); // Ensure trip ID is a string

if (vehicle && !vehicles.includes(vehicle)) {
vehicles.push(vehicle);
}
if (guestName && !guestNames.includes(guestName)) {
guestNames.push(guestName);
}
if (tripId && !tripIds.includes(tripId)) {
tripIds.push(tripId);
}

// Map vehicles to guest names
if (vehicle) {
if (!vehicleGuestMap[vehicle]) {
vehicleGuestMap[vehicle] = new Set();
}
vehicleGuestMap[vehicle].add(guestName);
}

// Map vehicles and guest names to trip IDs
if (vehicle && guestName && tripId) {
if (!tripIDGuestMap[vehicle]) {
tripIDGuestMap[vehicle] = {};
}
if (!tripIDGuestMap[vehicle][guestName]) {
tripIDGuestMap[vehicle][guestName] = [];
}
tripIDGuestMap[vehicle][guestName].push(tripId);
}
}

// Convert Sets to arrays for JSON compatibility
for (let vehicle in vehicleGuestMap) {
vehicleGuestMap[vehicle] = Array.from(vehicleGuestMap[vehicle]);
}

// Ensure the tripIDGuestMap is returned with the correct structure
Logger.log({
vehicles,
guestNames,
tripIds,
vehicleGuestMap,
tripIDGuestMap,
});

return {
vehicles,
guestNames,
tripIds,
vehicleGuestMap,
tripIDGuestMap,
};
}

function saveReceipt(formData, base64File) {
try {
const driveFolderId = '1pN7V57tRqhf1LU_M5rZlB8YJMNGSwAPu';  // Turo folder ID
const driveFolder = DriveApp.getFolderById(driveFolderId);

const date = new Date(formData.date);
const year = date.getFullYear();
const month = Utilities.formatDate(
date,
Session.getScriptTimeZone(),
'MMMM'
);

let receiptsFolder = driveFolder.getFoldersByName('Receipts');
receiptsFolder = receiptsFolder.hasNext()
? receiptsFolder.next()
: driveFolder.createFolder('Receipts');

let yearFolder = receiptsFolder.getFoldersByName(year.toString());
yearFolder = yearFolder.hasNext()
? yearFolder.next()
: receiptsFolder.createFolder(year.toString());

let monthFolder = yearFolder.getFoldersByName(month);
monthFolder = monthFolder.hasNext()
? monthFolder.next()
: yearFolder.createFolder(month);

let categoryFolder = monthFolder.getFoldersByName(formData.category);
categoryFolder = categoryFolder.hasNext()
? categoryFolder.next()
: monthFolder.createFolder(formData.category);

// Handle Base64 file properly
const base64Parts = base64File.split(',');
if (base64Parts.length < 2) {
throw new Error('Invalid base64 file format');
}

const contentType = base64Parts[0].match(/:(.*?);/)[1];
const decodedFile = Utilities.base64Decode(base64Parts[1]);

const uniqueId = Utilities.getUuid();
const fileName = `${formData.vendor}_${formData.date}_${uniqueId}`;
const fileBlob = Utilities.newBlob(decodedFile, contentType, fileName);
const savedFile = categoryFolder.createFile(fileBlob);
const fileUrl = savedFile.getUrl();

console.log('File successfully saved:', fileUrl);

// Save submission data
const submissionSheet =
SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Submission Data');
const lastRow = submissionSheet.getLastRow();
const firstEmptyRow = lastRow + 1;  // Ensures data is written in the next available row

submissionSheet
.getRange(firstEmptyRow, 1, 1, 19)
.setValues([
[
formData.date,
formData.category,
formData.description,
formData.vendor,
formData.paymentMethod,
formData.account,
formData.amount.subtotal,
formData.amount.salesTax,
formData.amount.useTax,
formData.amount.liquorTax,
formData.amount.fee,
formData.amount.tip,
formData.amount.total,
formData.taxDeductible,
formData.vehicle,
formData.guestName,
formData.tripId,
fileUrl,
formData.notes,
],
]);

console.log('Form data successfully recorded in the spreadsheet.');

return 'File saved and data recorded successfully!';
} catch (error) {
console.error('Error in saveReceipt:', error);
return `Error: ${error.message}`;
}
}
< /code>
dialog.html



Upload Receipt

body {
font-family: Arial, sans-serif;
color: #333;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.preview {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.preview h3 {
margin-bottom: 15px;
}
.form {
flex: 2;
padding: 10px;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
}
input,
select,
textarea {
width: 150px;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
font-family: Arial, sans-serif;
color: #333;
background-color: #fff;
}
button {
padding: 12px 20px;
font-size: 16px;
color: #fff;
background-color: #4caf50;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
iframe {
border: 1px solid #ddd;
border-radius: 5px;
width: 400px;
height: 800px;
}
.amount-grid {
display: grid;
grid-template-columns: repeat(2, 10fr);
gap: 10px;
}
.trip-grid {
display: grid;
grid-template-columns: repeat(3, 10fr);
gap: 10px;
}
.receipt-grid {
display: grid;
grid-template-columns: repeat(2, 10fr);
gap: 10px;
}
.notes-grid {
display: grid;
grid-template-columns: repeat(1, 10fr);
gap: 10px;
}





Preview




[h4]Trip Details[/h4]







[h4]Receipt Details[/h4]











[h4]Amount[/h4]















Submit




document.addEventListener('DOMContentLoaded', function () {
google.script.run
.withSuccessHandler(populateDropdowns)
.getDropdownData();

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const preview = document.getElementById('filePreview');
preview.src = e.target.result;
preview.alt = 'File Preview';
};
reader.readAsDataURL(file);
}
});
});

function populateDropdowns(data) {
const dropdownMapping = {
category: { key: 'Category', placeholder: 'Category' },
paymentMethod: {
key: 'Payment Method',
placeholder: 'Payment Method',
},
taxDeductible: {
key: 'Tax-Deductible',
placeholder: 'Tax Deductible',
},
account: { key: 'Account', placeholder: 'Account' },
};

Object.entries(dropdownMapping).forEach(
([dropdownId, { key, placeholder }]) => {
const dropdown = document.getElementById(dropdownId);
if (data[key]) {
dropdown.innerHTML = ''; // Clear existing options
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = placeholder;
defaultOption.disabled = true;
defaultOption.selected = true;
dropdown.appendChild(defaultOption);

// Add actual options
data[key].forEach((item) => {
const option = document.createElement('option');
option.value = item;
option.textContent = item;
dropdown.appendChild(option);
});
}
}
);

// Update the dropdowns for vehicle, guest, and trip ID from CSV data
updateVehicleDropdown();
}

function updateVehicleDropdown() {
const vehicleDropdown = document.getElementById('vehicle');

google.script.run
.withSuccessHandler(function (csvData) {
if (!csvData.vehicles || csvData.vehicles.length === 0) {
console.log('No vehicles found.');
return;
}

vehicleDropdown.innerHTML =
'Select Vehicle';
csvData.vehicles.forEach((vehicle) => {
const option = document.createElement('option');
option.value = vehicle;
option.textContent = vehicle;
vehicleDropdown.appendChild(option);
});
})
.getCSVData();
}

function updateGuestNameDropdown() {
const vehicle = document.getElementById('vehicle').value;
const guestNameDropdown = document.getElementById('guestName');

google.script.run
.withSuccessHandler(function (csvData) {
// Check if vehicleGuestMap exists and has data
if (!csvData.vehicleGuestMap || !csvData.vehicleGuestMap[vehicle]) {
console.log('No guests found for the selected vehicle.');
return;
}

// Get the guests for the selected vehicle from the vehicleGuestMap
const guestsForVehicle = csvData.vehicleGuestMap[vehicle];

// Clear and repopulate the dropdown
guestNameDropdown.innerHTML =
'Select Guest';
guestsForVehicle.forEach((guest) =>  {
const option = document.createElement('option');
option.value = guest;
option.textContent = guest;
guestNameDropdown.appendChild(option);
});

// Log guests for debugging
console.log('Guests for selected vehicle:', guestsForVehicle);
})
.getCSVData();
}

function updateTripIdDropdown() {
const vehicle = document.getElementById('vehicle').value;
const guestName = document.getElementById('guestName').value;
const tripIdDropdown = document.getElementById('tripId');

google.script.run
.withSuccessHandler(function (csvData) {
if (
!csvData.tripIDGuestMap ||
Object.keys(csvData.tripIDGuestMap).length === 0
) {
console.log('No trip IDs found.');
return;
}

const tripsForVehicleGuest =
(csvData.tripIDGuestMap[vehicle] &&
csvData.tripIDGuestMap[vehicle][guestName]) ||
[];

tripIdDropdown.innerHTML =
'Select Trip ID';
tripsForVehicleGuest.forEach((tripId) => {
const option = document.createElement('option');
option.value = tripId;
option.textContent = tripId;
tripIdDropdown.appendChild(option);
});

if (tripsForVehicleGuest.length === 0) {
console.log(
`No trip IDs found for vehicle: ${vehicle} and guest: ${guestName}`
);
}
})
.getCSVData();
}

function submitForm() {
const formData = {
date: document.getElementById('date').value,
category: document.getElementById('category').value,
description: document.getElementById('description').value,
vendor: document.getElementById('vendor').value,
paymentMethod: document.getElementById('paymentMethod').value,
account: document.getElementById('account').value,
taxDeductible: document.getElementById('taxDeductible').value,
vehicle: document.getElementById('vehicle').value,
guestName: document.getElementById('guestName').value,
tripId: document.getElementById('tripId').value,
amount: {
subtotal: document.getElementById('subtotal').value,
salesTax: document.getElementById('salesTax').value,
useTax: document.getElementById('useTax').value,
liquorTax: document.getElementById('liquorTax').value,
fee: document.getElementById('fee').value,
tip: document.getElementById('tip').value,
total: document.getElementById('total').value,
},
notes: document.getElementById('notes').value,
};

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const base64File = e.target.result.split(',')[1];
google.script.run.saveReceipt(formData, base64File);
};
reader.readAsDataURL(file);
}

function updateTotal() {
const subtotal =
parseFloat(document.getElementById('subtotal').value) || 0;
const salesTax =
parseFloat(document.getElementById('salesTax').value) || 0;
const useTax = parseFloat(document.getElementById('useTax').value) || 0;
const liquorTax =
parseFloat(document.getElementById('liquorTax').value) || 0;
const fee = parseFloat(document.getElementById('fee').value) || 0;
const tip = parseFloat(document.getElementById('tip').value) || 0;

const total = subtotal + salesTax + useTax + liquorTax + fee + tip;
document.getElementById('total').value = total.toFixed(2);
}