Script HTML Template

#GCP #tutorial

Following project Flask Web Deployment on Google Cloud and Convert Schedule to .ics

Last this is a very sample template that allow running with Python script.

The structure is accepting input then, send input to backend Python generate result.

Note: you need to be careful when you use index.html with send_file function in Flask. The version of Flask need to be known when you deployment to GCP. And save it to static folder.

source code here

HTML

Your index.html file is the front-end part of your web application for converting schedules into ICS (iCalendar) format. Let's break down its components:

HTML Structure

DOCTYPE and HTML Tag

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>: Declares the document type and HTML version (HTML5 here).
<html lang="en">: Starts the HTML document and sets the language to English.

Head Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schedule to ICS Converter</title>
</head>

<meta charset="UTF-8">: Sets the character encoding for the HTML document to UTF-8, which includes most characters from all known languages.
<meta name="viewport" ...>: Ensures your page is responsive and works well on all devices by controlling the viewport's size and scale.
<title>: Sets the title of the webpage, which appears in the browser tab.

Body Section

<body>
    <h1>Upload Your Schedule</h1>
    ...
</body>

Contains the content of your webpage.
Note. if you want to start a new tab you can use

<a href="https://my.wisc.edu/web/expanded" target="_blank">MyUW</a>

Form for Schedule Input

<form id="scheduleForm">
    ...
    <input type="submit" value="Generate ICS File">
</form>

A form to input the schedule data, start date, and end date.
textarea: For entering the schedule.
input type="date": For selecting start and end dates.
input type="submit": A button to submit the form.

JavaScript for Form Submission

Event Listener for Form Submission

document.getElementById('scheduleForm').addEventListener('submit', function(event) {
    ...
});

Adds an event listener to the form. When the form is submitted, it prevents the default form submission process and instead handles the submission using JavaScript.

Form Data Collection and Fetch Request

const formData = new FormData(event.target);
...
fetch('https://schedule-maker-411505.uc.r.appspot.com/generate-ics', {
    ...
});

Collects data from the form and converts it into a JSON object.
Uses the fetch API to send this data to your server endpoint (/generate-ics) for processing.

Handling the Server Response

.then(response => response.blob())
.then(blob => {
    ...
});

Converts the response to a blob (binary large object).
Creates a temporary link and triggers a download of the received file (schedule.zip).

Error Handling

.catch(error => console.error('Error:', error));

Catches and logs any errors that occur during the fetch request.

Summary

The index.html file sets up a user interface for users to input their schedules and select date ranges. When the form is submitted, a JavaScript function collects this data and sends it to your Flask server. The server processes this data and returns a ZIP file containing the .ics files, which the front-end then automatically downloads. This setup provides a seamless user experience for converting schedule information into calendar files.