vicky
/
calendar-booking
forked from remi/calendar-booking
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Compare commits

base: vicky:book
Branches Tags
vicky:trunk
vicky:book
remi:book
remi:master
..
compare: remi:master
Branches Tags
remi:book
remi:master
vicky:trunk
vicky:book

No commits in common. "book" and "master" have entirely different histories.
book ... master

2 changed files with 18 additions and 289 deletions
Show Stats Expand all files Collapse all files

58
calendar_booking_api.py
View File

@ -1,6 +1,6 @@
import bisect
from datetime import datetime, timedelta
from flask import Flask, jsonify, make_response, redirect, request
from flask import Flask, jsonify, redirect, request
from google.auth.transport.requests import Request
from google.oauth2.credentials import Credentials
from googleapiclient.discovery import build
@ -14,8 +14,7 @@ WEEK_DAYS = {1, 2, 3, 4, 5}
FROM = 9
TO = 17
TIMEZONE_NAME = 'America/New_York'
TIMEZONE = pytz.timezone(TIMEZONE_NAME)
TIMEZONE = pytz.timezone('America/New_York')
AVAILABILITY_LIFETIME = timedelta(minutes=2)
@ -32,12 +31,8 @@ def read_datetime(dct):
return dt
def asiso(dt):
return dt.isoformat()[:19]
def asutciso(dt):
return asiso(dt.astimezone(UTC)) + 'Z'
return dt.astimezone(UTC).isoformat()[:19] + 'Z'
def aslocal(dt):
@ -116,49 +111,6 @@ def api_availability():
return jsonify({'availability': [asutciso(time) for time in availability]})
@app.route('/book', methods=['POST', 'OPTIONS'])
@app.route('/book', methods=['POST'])
def api_book():
# Allow cross-origin
if request.method == 'OPTIONS':
response = make_response()
response.headers.add(
'Access-Control-Allow-Origin',
'https://vicky.rampin.org',
)
response.headers.add(
'Access-Control-Allow-Headers',
'Content-Type',
)
response.headers.add(
'Access-Control-Allow-Methods',
'POST',
)
return response
if not creds.valid:
creds.refresh(Request())
service = build('calendar', 'v3', credentials=creds)
full_name = request.form['name']
email = request.form['email']
topic = request.form['topic']
date = request.form['date']
end = start + timedelta(minutes=30)
service.events().insert(
calendarId='primary',
body=dict(
start={'dateTime': asiso(start), 'timeZone': TIMEZONE_NAME},
end={'dateTime': asiso(end), 'timeZone': TIMEZONE_NAME},
summary="Meeting with Vicky",
description="Meeting scheduled from the web",
),
)
response = redirect('https://vicky.rampin.org/book-successful', 303)
response.headers.add(
'Access-Control-Allow-Origin',
'https://vicky.rampin.org',
)
return response
TODO

249
form.html
View File

@ -7,7 +7,7 @@
<body>
<div class="container px-5 my-5">
<form id="contactForm" action="https://contact.vicky.rampin.org/book" method="POST">
<form id="contactForm">
<div class="mb-3">
<label class="form-label" for="name">Full name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Full name" />
@ -22,197 +22,18 @@
</div>
<div class="mb-3">
<label class="form-label d-block">Which day and time works best for us to meet on Zoom?</label>
<table class="table">
<thead>
<tr>
<th scope="col">Thursday 5/12</th>
<th scope="col">Friday 5/13</th>
<th scope="col">Monday 5/16</th>
<th scope="col">Tuesday 5/17</th>
<th scope="col">Wednesday 5/18</th>
<th scope="col">Thursday 5/19</th>
<th scope="col">Friday 5/20</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-12T09:00:00" value="2022-05-12T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-12T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-13T09:00:00" value="2022-05-13T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-13T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-16T09:00:00" value="2022-05-16T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-16T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T09:00:00" value="2022-05-17T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T09:00:00" value="2022-05-18T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T09:00:00" value="2022-05-19T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T09:00:00" value="2022-05-20T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T09:00:00">9:00</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-12T09:30:00" value="2022-05-12T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-12T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-13T09:30:00" value="2022-05-13T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-13T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-16T09:30:00" value="2022-05-16T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-16T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T09:30:00" value="2022-05-17T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T09:30:00" value="2022-05-18T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T09:30:00" value="2022-05-19T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T09:30:00" value="2022-05-20T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T09:30:00">9:30</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-12T10:00:00" value="2022-05-12T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-12T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-13T10:00:00" value="2022-05-13T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-13T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-16T10:00:00" value="2022-05-16T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-16T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T10:00:00" value="2022-05-17T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T10:00:00" value="2022-05-18T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T10:00:00" value="2022-05-19T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T10:00:00" value="2022-05-20T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T10:00:00">10:00</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-12T10:30:00" value="2022-05-12T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-12T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-13T10:30:00" value="2022-05-13T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-13T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-16T10:30:00" value="2022-05-16T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-16T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T10:30:00" value="2022-05-17T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T10:30:00" value="2022-05-18T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T10:30:00" value="2022-05-19T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T10:30:00" value="2022-05-20T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T10:30:00">10:30</label>
</div>
</td>
</tr>
</tbody>
</table>
<div class="form-check form-check-inline">
<input class="form-check-input" id="optionA" type="radio" name="date" />
<label class="form-check-label" for="optionA">option A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="optionB" type="radio" name="date" />
<label class="form-check-label" for="optionB">option B</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="optionC" type="radio" name="date" />
<label class="form-check-label" for="optionC">option C</label>
</div>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button>
@ -221,49 +42,5 @@
</div>
<script src=".bootstrap/bootstrap.bundle.min.js"></script>
<script>
let contactForm = document.getElementById("contactForm");
function formValid() {
console.log("name: ", contactForm.name.value);
if(!contactForm.name.value) {
console.log("wrong name ", contactForm.name.value);
return false;
}
console.log("email: ", contactForm.email.value);
if(!contactForm.email.value) {
console.log("wrong email ", contactForm.email.value);
return false;
}
console.log("topic: ", contactForm.topic.value);
if(!contactForm.topic.value) {
console.log("wrong topic ", contactForm.topic.value);
return false;
}
console.log("date: ", contactForm.date.value);
if(!contactForm.date.value) {
console.log("wrong date ", contactForm.date.value);
return false;
}
return true;
}
contactForm.addEventListener("submit", function submitEventHandler(e) {
if(!formValid()) {
e.preventDefault();
}
});
contactForm.addEventListener("change", function changeEventHandler(e) {
if(formValid()) {
console.log("change, valid=true");
document.getElementById("submitButton").classList.remove("disabled");
} else {
console.log("change, valid=false");
document.getElementById("submitButton").classList.add("disabled");
}
});
</script>
</body>
</html>