jimmy/events (#6)

Co-authored-by: Jimmy Vargo <james@ayo.tokyo>
Reviewed-on: ayo/website#6

.gitignore

@@ -1,8 +1,10 @@
 node_modules
 public
 package-lock.json
+events/.venv
 
 *.log
 *.lock
 *.zip
 *.DS_Store
+*.pyc

events/app.py

@@ -0,0 +1,75 @@
+from flask import Flask, request, render_template
+import json
+from pathlib import Path
+
+from form_content import FormContent
+
+app = Flask(__name__)
+save_path = Path('data.txt')
+all_keys = set(FormContent.times | FormContent.topics | FormContent.languages) | { 'name', 'email', 'topic-other' }
+
+def get_data_stats() -> dict:
+    data = {}
+    summed = {
+        key: {
+            'sum': 0,
+            'total': 0,
+            'percent': 0
+        } for key in all_keys
+    }
+    summed['topic-other'] = set()
+
+    if save_path.exists():
+        for raw_line in save_path.read_text().split('\n'):
+            if raw_line:
+                line = json.loads(raw_line)
+                data[line['email']] = line
+        for line in data.values():
+            for key, value in dict.items(line):
+                if key == 'topic-other' and value is not None:
+                    summed['topic-other'] = summed['topic-other'] | { value }
+                if type(value) is bool:
+                    sum = summed[key]['sum'] if key in summed else 0
+                    sum = sum + 1 if value is True else sum
+                    total = summed[key]['total'] + 1 if key in summed else 1
+                    summed[key] = {
+                        'sum': sum,
+                        'total': total,
+                        'percent': f'{((sum / total) * 100):.1f}'
+                    }
+    summed['topic-other'] = list(summed['topic-other'])
+    return summed
+
+stats_cache = (0, get_data_stats())
+
+@app.route('/')
+def form():
+    return render_template('form.html', times=FormContent.times, topics=FormContent.topics, languages=FormContent.languages)
+
+@app.route('/submit', methods=['POST'])
+def submit():
+    if save_path.exists() and save_path.stat().st_size > 1_000_000:
+        return { 'error': 'Database full.' }, 500
+    if len(request.data) > 1000:
+        return { 'error': 'Request too long.' }, 400
+
+    data = request.get_json()
+
+    if set(data) != all_keys:
+        return { 'error': 'Invalid request format.' }, 400
+
+    with save_path.open(mode='a') as file:
+        file.write(f'{json.dumps(data)}\n')
+    return {}, 200
+
+@app.route('/stats')
+def stats():
+    global stats_cache
+    if save_path.exists() and save_path.stat().st_mtime > stats_cache[0]:
+        stats_cache = (save_path.stat().st_mtime, get_data_stats())
+    return render_template('stats.html', times=FormContent.times, topics=FormContent.topics,
+                           languages=FormContent.languages, data=stats_cache[1])
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=9700, debug=False)

events/form_content.py

@@ -0,0 +1,21 @@
+class FormContent:
+    times = {
+        'time-weekday-evenings': 'Monday to Thursday Evenings 月曜日〜木曜日の夕方',
+        'time-friday-evenings': 'Friday Evenings 金曜日の夕方',
+        'time-saturday-daytime': 'Saturday Daytime 土曜日の昼',
+        'time-saturday-evenings': 'Saturday Evenings 土曜日の夕方',
+        'time-sunday-daytime': 'Sunday Daytime 日曜日の昼',
+        'time-sunday-evenings': 'Sunday Evenings 日曜日の夕方'
+    }
+    topics = {
+        'topic-hardware': 'Hardware ハードウェア',
+        'topic-containerization': 'Containerization コンテナー開発 (Docker, etc.)',
+        'topic-programming-languages': 'Programming Languages プログラミング言語 (Python, Rust, C++, etc.)',
+        'topic-linux': 'Linux',
+        'topic-ai': 'AI / Deep Learning libraries ディープラーニングのライブラリー (Pytorch, Tensorflow, etc.) ',
+        'topic-web-dev': 'Web Development ウェブ開発'
+    }
+    languages = {
+        'language-english': 'English 英語',
+        'language-japanese': 'Japanese 日本語',
+    }

events/static/app.css

@@ -0,0 +1,200 @@
+* {
+	box-sizing: border-box;
+}
+
+html {
+	background: #222;
+	color: #fff;
+	font-family: 'Avenir', sans-serif;
+	text-align: center;
+}
+
+body {
+	margin: 0;
+	margin-bottom: 4rem;
+}
+
+p, span, label {
+	margin: 0;
+	font-size: 0.9rem;
+}
+
+input[type="text"], input[type="email"] {
+	outline: none;
+	width: 100%;
+	padding: 0.5rem 0.75rem;
+	border: 0;
+	border-radius: 4px;
+	background-color: #ccc;
+	font-family: 'Avenir', sans-serif;
+}
+
+input[type="text"]:focus, input[type="email"]:focus {
+	background-color: #fff;
+}
+
+select {
+	outline: none;
+	appearance: none;
+	width: 100%;
+	padding: 0.5rem 0.65rem;
+	padding-right: 2rem;
+	border: 0;
+	border-radius: 4px;
+	background: url('caret.svg') calc(100% - 0.65rem) calc(50% - 1px) / 8px no-repeat, #ccc;
+	font-family: 'Avenir', sans-serif;
+}
+
+select:focus {
+	background: url('caret.svg') calc(100% - 0.65rem) calc(50% - 1px) / 8px no-repeat, #fff;
+}
+
+button {
+	outline: none;
+	padding: 0.5rem 1.25rem;
+	border: 0;
+	border-radius: 4px;
+	color: #fff;
+	background-color: #3663a2;
+	font-family: 'Avenir', sans-serif;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+}
+
+button:hover {
+	background-color: #497ec8;
+}
+
+.header {
+	width: 100%;
+	height: 200px;
+	margin-bottom: 1rem;
+	object-fit: cover;
+	object-position: 50% 30%;
+}
+
+.instructions {
+	color: #aaa;
+}
+
+.questionnaire-content {
+	width: 100%;
+	max-width: 400px;
+	margin: 2rem auto;
+	text-align: left;
+}
+
+.info {
+	margin: 1.5rem 0;
+}
+.info p {
+	margin-bottom: 0.5rem;
+}
+
+.question {
+	margin: 3rem 0;
+}
+.question p {
+	margin-bottom: 0.5rem;
+	white-space: pre-line;
+}
+
+.row {
+	display: flex;
+	align-items: flex-start;
+	color: #ccc;
+	margin: 0.25rem 0;
+	user-select: none;
+}
+.row label {
+	padding-left: 0.25rem;
+}
+.row, .row * {
+	cursor: pointer;
+}
+.row:hover {
+	color: #fff;
+}
+
+#other-text {
+	display: none;
+}
+
+.required::after {
+	content: '*';
+	color: rgb(245, 84, 84);
+	margin-left: 0.25rem;
+}
+
+#error {
+	display: none;
+	width: 100%;
+	padding: 0.75rem 1.25rem;
+	border-radius: 6px;
+	color: #ff6262;
+	background-color: #3d2525;
+	white-space: pre-line;
+}
+
+.stats-table {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	border-spacing: 1rem;
+	margin: auto;
+	max-width: 720px;
+}
+
+.stats-header {
+	margin-top: 2rem;
+	margin-bottom: 1rem;
+	grid-column: 1 / -1;
+	font-size: 1.1rem;
+}
+
+.stat-item {
+	display: flex;
+	align-items: center;
+	margin: 1rem;
+}
+
+.stat-label {
+	text-align: left;
+	font-size: 0.85rem;
+	font-weight: 300;
+	word-wrap: break-word;
+}
+
+.stat-chart {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-right: 1rem;
+}
+
+.stat-percent {
+	padding-top: 0.5rem;
+	font-size: 0.75rem;
+	color: #aaa;
+}
+
+.stat-other-topics {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	grid-column: 1 / -1;
+}
+
+.stat-other-topics p {
+	margin: 0.25rem 0;
+}
+
+.pie-chart {
+	--color: #2a74c2;
+	--bg: #3c4452;
+
+	width: 48px;
+	height: 48px;
+	background-color: #555;
+	border-radius: 100%;
+}

events/static/app.js

@@ -0,0 +1,101 @@
+const isEmailValid = (email) => {
+	const match = email.match(/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/)
+	return !!match?.[0] && match.index === 0 ? match?.[0] : null
+}
+
+const toggleOtherTopic = () => {
+	const otherInput = document.getElementById('other-text')
+	if (document.getElementById('topic-other')?.checked) {
+		otherInput.style.display = 'block'
+	}
+	else {
+		otherInput.style.display = 'none'
+	}
+}
+
+
+const send = () => {
+	const error = document.getElementById('error')
+	error.style.display = 'none'
+
+	const name = document.getElementById('name')
+	if (!name.value.trim()) {
+		error.style.display = 'block'
+		error.innerHTML = 'Please enter your name.
名前を入力してください。'
+		return
+	}
+
+	const email = document.getElementById('email')
+	if (!isEmailValid(email.value)) {
+		error.style.display = 'block'
+		error.innerHTML = 'Please enter a valid email.
有効なメールアドレスを入力してください。'
+		return
+	}
+
+	const times = [...document.querySelectorAll('[id^=time-]')]?.reduce((entries, checkbox) => {
+		return { ...entries, [checkbox.id]: checkbox.checked }
+	}, {})
+	if (Object.values(times).every(time => time == false)) {
+		error.style.display = 'block'
+		error.innerHTML = 'Please select at least one convenient time.
都合の時間を一つ以上を選択してください。'
+		return
+	}
+
+	const topics = [...document.querySelectorAll('[id^=topic-]')]?.reduce((entries, checkbox) => {
+		return { ...entries, [checkbox.id]: checkbox.checked }
+	}, {})
+	if (Object.values(topics).every(time => time == false)) {
+		error.style.display = 'block'
+		error.innerHTML = 'Please select at least one topic of interest.
興味あるテーマを一つ以上を選択してください。'
+		return
+	}
+
+	const otherText = document.getElementById('other-text')
+	if (topics['topic-other'] && !otherText.value.trim()) {
+		error.style.display = 'block'
+		error.innerHTML = 'Please enter your other topic of interest.
その他の興味あるテーマを入力してください。'
+		return
+	}
+
+	const language = document.getElementById('language')
+	const data = {
+		name: name.value,
+		email: email.value,
+		...times,
+		...topics,
+		'topic-other': topics['topic-other'] ? otherText.value : null,
+		'language-english': language.value == 'english' || language.value == 'either',
+		'language-japanese': language.value == 'japanese' || language.value == 'either',
+	}
+
+	fetch('/submit', {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		body: JSON.stringify(data)
+	})
+		.then(async response => {
+			return {
+				ok: response.ok,
+				status: response.status,
+				...await response.json()
+			}
+		})
+		.then(response => {
+			if (!response.ok) {
+				throw response.error || 'Bad request'
+			}
+			window.location.href = '/stats'
+
+			if (response.status >= 200 && response.status < 300) {
+				window.location.href = '/stats'
+			}
+			else {
+				throw response.error || 'Bad request'
+			}
+		})
+		.catch(error => {
+			console.error(error);
+		})
+}

events/static/caret.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+	<path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/>
+</svg>

events/static/favicon.svg

@@ -0,0 +1,20 @@
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   viewBox="0 0 523.2 185.7"
+   id="ayo_logo">
+  <rect width="523.2" height="185.7" fill="#fff"/>
+  <g
+     aria-label="AYO"
+     id="title">
+    <path
+       d="m 129.1,148.4 h -70.57 l -11.14,31.9 h -45.39 l 64.86,-175.133 h 53.84 l 64.8,175.133 h -45.3 z m -59.31,-32.5 h 48.01 l -23.97,-69.69 z"
+       id="path10" />
+    <path
+       d="m 161.4,5.167 h 49.4 l 39.8,62.393 39.9,-62.393 h 49.5 l -66.7,101.333 v 73.8 h -45.2 v -73.8 z"
+       id="path12" />
+    <path
+       d="m 431.1,34.72 q -20.6,0 -32,15.25 -11.4,15.24 -11.4,42.92 0,27.61 11.4,42.81 11.4,15.2 32,15.2 20.8,0 32.2,-15.2 11.3,-15.2 11.3,-42.81 0,-27.68 -11.3,-42.92 -11.4,-15.25 -32.2,-15.25 z m 0,-32.72 q 42.2,0 66.2,24.16 23.9,24.16 23.9,66.73 0,42.41 -23.9,66.61 -24,24.2 -66.2,24.2 -42.1,0 -66.1,-24.2 -23.9,-24.2 -23.9,-66.61 0,-42.57 23.9,-66.73 24,-24.16 66.1,-24.16 z"
+       id="path14" />
+  </g>
+</svg>

events/templates/form.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width">
+		<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
+		<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.svg') }}">
+		<title>AYO Events</title>
+		<script src="{{ url_for('static', filename='app.js') }}"></script>
+	</head>
+	<body>
+		<img class="header" src="{{ url_for('static', filename='event_header.jpeg') }}" />
+
+		<h1>AYO Events</h1>
+
+		<p>Questionnaire / アンケート</p>
+		<br>
+		
+		<div class="questionnaire-content">
+			
+			<div class="info">
+				<p class="required">Name 名前</p>
+				<input id="name" type="text" />
+			</div>
+			
+			<div class="info">
+				<p class="required">Email メールアドレス</p>
+				<input id="email" type="email" />
+			</div>
+			
+			<br>
+
+			<p class="instructions">Please provide answers to the following questions.</p>
+			<p class="instructions">以下のアンケートにお答えしていただければ幸いです。</p>
+
+			<div class="question">
+				<p class="required">What days and times of the week are convenient for you?&NewLine;都合の良い時間を教えてください。</p>
+				{% for id, name in times.items() %}
+					<div class="row">
+						<input id="{{ id }}" type="checkbox" />
+						<label for="{{ id }}">{{ name }}</label>
+					</div>
+				{% endfor %}
+			</div>
+
+			<div class="question">
+				<p class="required">What topics are of interest to you?&NewLine;どのテーマに興味がありますか？</p>
+				{% for id, name in topics.items() %}
+					<div class="row">
+						<input id="{{ id }}" type="checkbox" />
+						<label for="{{ id }}">{{ name }}</label>
+					</div>
+				{% endfor %}
+				<div class="row">
+					<input id="topic-other" type="checkbox" onchange="toggleOtherTopic()" />
+					<label for="topic-other">Other その他</label>
+				</div>
+				<input id="other-text" type="text" placeholder="Other その他" />
+			</div>
+
+			<div class="question">
+				<p class="required">What language would you prefer?&NewLine;どちらの言語が良いですか？</p>
+				<select id="language">
+					<option value="english">English 英語</option>
+					<option value="japanese">Japanese 日本語</option>
+					<option value="either">Either One どっちでも良い</option>
+				</select>
+			</div>
+
+			<p id="error"></p>
+		</div>
+
+		<br>
+
+		<button onclick="send()">Submit Response</button>
+	</body>
+</html>

events/templates/stats.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width">
+		<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
+		<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.svg') }}">
+		<title>AYO Events</title>
+		<script src="{{ url_for('static', filename='app.js') }}"></script>
+	</head>
+	<body>
+		<img class="header" src="{{ url_for('static', filename='event_header.jpeg') }}" />
+
+		<h1>AYO Events</h1>
+
+		<p>Thank you for your feedback submission!</p>
+		<p>アンケートのご協力いただき、ありがとうございました！</p>
+
+		<br>
+		<p class="instructions">Here are some insights into what others have said.</p>
+		<p class="instructions">以下は他の方からいただいた回答についての情報があります。</p>
+		<br>
+
+		<div class="stats-table">
+			<span class="stats-header">Times 都合の時間</span>
+			{% for id, label in times.items() %}
+			<div class="stat-item">
+				<div class="stat-chart">
+					<div class="pie-chart" style="background: conic-gradient(var(--color) 0%, var(--color) {{ data[id]['percent'] }}%, var(--bg) {{ data[id]['percent'] }}%, var(--bg) 100%);"></div>
+					<span class="stat-percent">{{ data[id]['percent'] }}%</span>
+				</div>
+				<div><p class="stat-label">{{ label }}</p></div>
+			</div>
+			{% endfor %}
+			
+			<span class="stats-header">Topics of Interest 興味あるテーマ</span>
+			{% for id, label in topics.items() %}
+			<div class="stat-item">
+				<div class="stat-chart">
+					<div class="pie-chart" style="background: conic-gradient(var(--color) 0%, var(--color) {{ data[id]['percent'] }}%, var(--bg) {{ data[id]['percent'] }}%, var(--bg) 100%);"></div>
+					<span class="stat-percent">{{ data[id]['percent'] }}%</span>
+				</div>
+				<div><p class="stat-label">{{ label }}</p></div>
+			</div>
+			{% endfor %}
+
+			<span class="stats-header">Other Topics of Interest その他の興味あるテーマ</span>
+			<div class="stat-other-topics">
+				{% for item in data['topic-other'] %}
+				<p>{{ item }}</p>
+				{% endfor %}
+			</div>
+
+			<span class="stats-header">Languages 言語</span>
+			{% for id, label in languages.items() %}
+			<div class="stat-item">
+				<div class="stat-chart">
+					<div class="pie-chart" style="background: conic-gradient(var(--color) 0%, var(--color) {{ data[id]['percent'] }}%, var(--bg) {{ data[id]['percent'] }}%, var(--bg) 100%);"></div>
+					<span class="stat-percent">{{ data[id]['percent'] }}%</span>
+				</div>
+				<div><p class="stat-label">{{ label }}</p></div>
+			</div>
+			{% endfor %}
+		</div>
+	</body>
+</html>