Change code

Author: Shani

Code.gs

@@ -1,123 +1,31 @@
-// --- API Endpoints ---
-
-// Handle CORS preflight OPTIONS requests (no custom headers possible)
-function doOptions(e) {
-  // Google Apps Script does not support setting CORS headers for APIs.
-  // This will just return a 200 OK with a simple JSON body.
-  return ContentService.createTextOutput(
-      JSON.stringify({ status: "ok" })
-    )
-    .setMimeType(ContentService.MimeType.JSON);
-}
-
-// Handle GET requests
-function doGet(e) {
-  let responseData;
-  try {
-    const action = e.parameter.action;
-    
-    // Parse JSON parameters
-    const params = {};
-    for (const key in e.parameter) {
-      if (key !== 'action' && key !== 'callback') {
-        try {
-          params[key] = JSON.parse(e.parameter[key]);
-        } catch (error) {
-          params[key] = e.parameter[key];
-        }
-      }
-    }
-    
-    switch (action) {
-      case 'login':
-        responseData = loginUser(params.username, params.password);
-        break;
-      case 'register':
-        responseData = registerUser(params.username, params.password);
-        break;
-      case 'getTasks':
-        responseData = getTasks(params.username);
-        break;
-      case 'addTask':
-        responseData = addTask(params.task, params.username);
-        break;
-      case 'updateTask':
-        responseData = updateTask(params.taskId, params.updates, params.username);
-        break;
-      case 'getUsers':
-        responseData = getUsersList();
-        break;
-      default:
-        responseData = { success: false, message: 'Invalid action' };
-    }
-  } catch (error) {
-    responseData = { success: false, message: 'Error: ' + error.toString() };
-  }
-  
-  // Handle JSONP callback
-  const callback = e.parameter.callback;
-  if (callback) {
-    return ContentService.createTextOutput(callback + '(' + JSON.stringify(responseData) + ')')
-      .setMimeType(ContentService.MimeType.JAVASCRIPT);
-  } else {
-    return ContentService.createTextOutput(JSON.stringify(responseData))
-      .setMimeType(ContentService.MimeType.JSON);
-  }
+// --- Main function to serve the web app ---
+function doGet() {
+  return HtmlService.createTemplateFromFile('index')
+    .evaluate()
+    .setTitle('Friends Task Manager')
+    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
 }
 
-// Handle POST requests
-function doPost(e) {
-  let responseData;
-  try {
-    const requestData = JSON.parse(e.postData.contents);
-    const action = requestData.action;
-
-    switch (action) {
-      case 'login':
-        responseData = loginUser(requestData.username, requestData.password);
-        break;
-      case 'register':
-        responseData = registerUser(requestData.username, requestData.password);
-        break;
-      case 'getTasks':
-        responseData = getTasks(requestData.username);
-        break;
-      case 'addTask':
-        responseData = addTask(requestData.task, requestData.username);
-        break;
-      case 'updateTask':
-        responseData = updateTask(requestData.taskId, requestData.updates, requestData.username);
-        break;
-      case 'getUsers':
-        responseData = getUsersList();
-        break;
-      default:
-        responseData = { success: false, message: 'Invalid action' };
-    }
-  } catch (error) {
-    responseData = { success: false, message: 'Error: ' + error.toString(), stack: error.stack };
-  }
-
-  return ContentService.createTextOutput(JSON.stringify(responseData))
-    .setMimeType(ContentService.MimeType.JSON);
+// --- Include HTML, CSS, JS files ---
+function include(filename) {
+  return HtmlService.createHtmlOutputFromFile(filename).getContent();
 }
 
 // --- Configuration ---
-const SPREADSHEET_ID = SpreadsheetApp.getActiveSpreadsheet().getId();
 const TASKS_SHEET_NAME = "Tasks";
 const USERS_SHEET_NAME = "Users";
 
 // --- Helper Functions ---
 function getSheet(sheetName) {
-  return SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(sheetName);
+  return SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
 }
 
 function generateUniqueId() {
   return Utilities.getUuid();
 }
 
 function setupSheetsIfNeeded() {
-  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
+  const ss = SpreadsheetApp.getActiveSpreadsheet();
 
   // Check and create Users sheet if needed
   let usersSheet = ss.getSheetByName(USERS_SHEET_NAME);
@@ -187,7 +95,7 @@ function getUsersList() {
 }
 
 // --- Task Management ---
-function getTasks(username) {
+function getTasks() {
   setupSheetsIfNeeded();
   const tasksSheet = getSheet(TASKS_SHEET_NAME);
   if (!tasksSheet) return { success: false, tasks: [], message: 'Tasks sheet not found.' };

README.md

@@ -13,7 +13,7 @@ A web-based task management application where friends can collaborate on tasks.
 
 ## Technology Stack
 
-- Frontend: HTML, CSS, JavaScript (vanilla)
+- Frontend: HTML, CSS, JavaScript
 - Backend: Google Apps Script
 - Database: Google Sheets
 
@@ -27,8 +27,12 @@ A web-based task management application where friends can collaborate on tasks.
 ### 2. Set up Google Apps Script
 
 1. In your Google Sheet, click on "Extensions" > "Apps Script"
-2. Delete any code in the editor and paste the contents of `Code.gs` from this repository
-3. Save the project with a name like "Task Management API"
+2. Create the following files in the Apps Script editor:
+   - `Code.gs`: Copy the content from the Code.gs file in this repository
+   - `index.html`: Create a new HTML file and copy the content from index.html
+   - `style.html`: Create a new HTML file and copy the content from style.html
+   - `script.html`: Create a new HTML file and copy the content from script.html
+3. Save the project with a name like "Task Management App"
 4. Deploy the project as a web app:
    - Click "Deploy" > "New deployment"
    - Select type: "Web app"
@@ -37,18 +41,11 @@ A web-based task management application where friends can collaborate on tasks.
    - Click "Deploy"
    - Copy the web app URL provided after deployment
 
-### 3. Configure the Frontend
+### 3. Access Your Application
 
-1. Open `script.js` in a text editor
-2. Replace `YOUR_GOOGLE_SCRIPT_ID_HERE` in the `API_URL` constant with your deployed web app URL
-
-### 4. Deploy to GitHub Pages
-
-1. Create a new GitHub repository
-2. Upload all files from this project to your repository
-3. Go to repository Settings > Pages
-4. Select the main branch as the source and click Save
-5. Your site will be published at `https://yourusername.github.io/repository-name/`
+1. Open the web app URL in your browser
+2. Register a new account
+3. Start creating and managing tasks
 
 ## Usage
 
@@ -67,10 +64,15 @@ This application uses a simple authentication system and stores passwords in pla
 
 You can customize the application by:
 
-- Modifying the CSS in `style.css` to change the appearance
+- Modifying the CSS in `style.html` to change the appearance
 - Adding additional fields to tasks by updating the HTML, JavaScript, and Google Apps Script code
 - Implementing more advanced features like task comments, file attachments, etc.
 
-## License
+## Troubleshooting
+
+If you encounter issues:
 
-This project is available for personal use.
+1. Make sure your Google Apps Script deployment is set to "Anyone" for access
+2. Check that all HTML files are correctly included in the Apps Script project
+3. Verify that the spreadsheet has the correct permissions
+4. Check the browser console for any JavaScript errors

index.html

@@ -4,7 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Friends Task Manager</title>
-    <link rel="stylesheet" href="style.css">
+    <base target="_top">
+    <style>
+      <?!= include('style'); ?>
+    </style>
 </head>
 <body>
     <div class="container">
@@ -113,6 +116,8 @@ <h2>Edit Task / Add Solution</h2>
         </div>
     </div>
 
-    <script src="script.js"></script>
+    <script>
+      <?!= include('script'); ?>
+    </script>
 </body>
 </html>