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

Compare commits

merge into: vicky:trunk
Branches Tags
vicky:trunk
vicky:book
remi:book
remi:master
...
pull from: vicky:book
Branches Tags
vicky:book
vicky:trunk
remi:book
remi:master

2 Commits
trunk ... book

Author SHA1 Message Date
Remi Rampin 3faeabb299 WIP book 2022-05-12 23:31:52 -04:00
Remi Rampin 26006c698f WIP book 2022-05-12 23:31:52 -04:00
2 changed files with 289 additions and 18 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, redirect, request
from flask import Flask, jsonify, make_response, redirect, request
from google.auth.transport.requests import Request
from google.oauth2.credentials import Credentials
from googleapiclient.discovery import build
@ -14,7 +14,8 @@ WEEK_DAYS = {1, 2, 3, 4, 5}
FROM = 9
TO = 17
TIMEZONE = pytz.timezone('America/New_York')
TIMEZONE_NAME = 'America/New_York'
TIMEZONE = pytz.timezone(TIMEZONE_NAME)
AVAILABILITY_LIFETIME = timedelta(minutes=2)
@ -31,8 +32,12 @@ def read_datetime(dct):
return dt
def asiso(dt):
return dt.isoformat()[:19]
def asutciso(dt):
return dt.astimezone(UTC).isoformat()[:19] + 'Z'
return asiso(dt.astimezone(UTC)) + 'Z'
def aslocal(dt):
@ -111,6 +116,49 @@ def api_availability():
return jsonify({'availability': [asutciso(time) for time in availability]})
@app.route('/book', methods=['POST'])
@app.route('/book', methods=['POST', 'OPTIONS'])
def api_book():
TODO
# 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

237
form.html
View File

@ -7,7 +7,7 @@
<body>
<div class="container px-5 my-5">
<form id="contactForm">
<form id="contactForm" action="https://contact.vicky.rampin.org/book" method="POST">
<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,18 +22,197 @@
</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="optionA" type="radio" name="date" />
<label class="form-check-label" for="optionA">option A</label>
<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="optionB" type="radio" name="date" />
<label class="form-check-label" for="optionB">option B</label>
<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="optionC" type="radio" name="date" />
<label class="form-check-label" for="optionC">option C</label>
<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>
<div class="d-grid">
<button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button>
@ -42,5 +221,49 @@
</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>