From e8125e7e3a298e969500a5cea121d33d70a49a7c Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Wed, 28 Sep 2022 15:39:39 +0800
Subject: [PATCH] refactor: user_info page with bs5

---
 web/app/controllers/user_info.php       | 354 +++++++++++++++++-------
 web/app/views/page-header.php           |   6 +
 web/css/jquery.calendar_heatmap.min.css |   9 +
 web/js/jquery.calendar_heatmap.min.js   |  10 +
 4 files changed, 273 insertions(+), 106 deletions(-)
 create mode 100644 web/css/jquery.calendar_heatmap.min.css
 create mode 100644 web/js/jquery.calendar_heatmap.min.js

diff --git a/web/app/controllers/user_info.php b/web/app/controllers/user_info.php
index 15c248b..c1bb21a 100644
--- a/web/app/controllers/user_info.php
+++ b/web/app/controllers/user_info.php
@@ -9,89 +9,239 @@
 
 	$username = $_GET['username'];
 
-	$REQUIRE_LIB['github_contribution_graph'] = '';
+	if (!validateUsername($username) || !($user = queryUser($username))) {
+		become404Page();
+	}
 	?>
-<?php if (validateUsername($username) && ($user = queryUser($username))): ?>
-	<?php echoUOJPageHeader($user['username'] . ' - ' . UOJLocale::get('user profile')) ?>
-	<?php
-		$esc_email = HTML::escape($user['email']);
-		$esc_qq = HTML::escape($user['qq'] != 0 ? $user['qq'] : 'Unfilled');
-		$esc_sex = HTML::escape($user['sex']);
-		$col_sex="color:blue";
-		if ($esc_sex == "M") {
-			$esc_sex="♂";
-			$col_sex="color:blue";
-		} elseif ($esc_sex == "F") {
-			$esc_sex="♀";
-			$col_sex="color:red";
-		} else {
-			$esc_sex="";
-			$col_sex="color:black";
-		}
-	$motto = addslashes($user['motto']);
+<?php
+	if (!isset($_COOKIE['bootstrap4'])) {
+		$REQUIRE_LIB['bootstrap5'] = '';
+		$REQUIRE_LIB['calendar_heatmap'] = '';
+	} else {
+		$REQUIRE_LIB['github_contribution_graph'] = '';
+	}
 	?>
-	<div class="card border-info">
-		<h5 class="card-header bg-info"><?= UOJLocale::get('user profile') ?></h5>
-		<div class="card-body">
-			<div class="row mb-4">
-				<div class="col-md-4 order-md-9">
-					<img class="media-object img-thumbnail d-block mx-auto" alt="<?= $user['username'] ?> Avatar" src="<?= HTML::avatar_addr($user, 256) ?>" />
+<?php echoUOJPageHeader($user['username'] . ' - ' . UOJLocale::get('user profile')) ?>
+<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+	<div class="row">
+		<div class="col-md-3">
+			<div class="card">
+				<img class="card-img-top" alt="Avatar of <?= $user['username'] ?>" src="<?= HTML::avatar_addr($user, 512) ?>" />
+				<div class="card-body">
+					<h3>
+						<?= $user['username'] ?>
+						<span class="fs-6 align-middle"
+						<?php if ($user['sex'] == 'M'): ?>
+							style="color: blue"><i class="bi bi-gender-male"></i>
+						<?php elseif ($user['sex' == 'F']): ?>
+							style="color: red"><i class="bi bi-gender-female"></i>
+						<?php endif ?>
+						</span>
+					</h3>
+					<?php $motto_id = uniqid("motto-{$user['username']}-"); ?>
+					<div class="card-text" id="<?= $motto_id ?>"></div>
+					<script type="text/javascript">
+						$(function() { $('#<?= $motto_id ?>').html(DOMPurify.sanitize(decodeURIComponent("<?= urlencode($user['motto']) ?>"), <?= DOM_SANITIZE_CONFIG ?>)); });
+					</script>
 				</div>
-				<div class="col-md-8 order-md-1">
-					<h2><span class="uoj-honor" data-realname="<?= $user['realname'] ?>"><?= $user['username'] ?></span> <span><strong style="<?= $col_sex ?>"><?= $esc_sex ?></strong></span></h2>
-					<div class="list-group">
-						<div class="list-group-item">
-							<h4 class="list-group-item-heading"><?= UOJLocale::get('email') ?></h4>
-							<p class="list-group-item-text"><?= $esc_email ?></p>
-						</div>
-						<div class="list-group-item">
-							<h4 class="list-group-item-heading"><?= UOJLocale::get('QQ') ?></h4>
-							<p class="list-group-item-text"><?= $esc_qq ?></p>
-						</div>
-						<div class="list-group-item">
-							<h4 class="list-group-item-heading"><?= UOJLocale::get('motto') ?></h4><?php
+				<ul class="list-group list-group-flush">
+					<?php if ($user['realname']): ?>
+					<li class="list-group-item">
+						<i class="bi bi-person-fill me-1"></i>
+						<?= $user['realname'] ?>
+					</li>
+					<?php endif ?>
+					<li class="list-group-item">
+						<i class="bi bi-envelope-fill me-1"></i>
+						<a class="text-decoration-none text-body" href="mailto:<?= HTML::escape($user['email']) ?>">
+							<?= HTML::escape($user['email']) ?>
+						</a>
+					</li>
+					<?php if ($user['qq']): ?>
+					<li class="list-group-item">
+						<i class="align-text-bottom me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16"><path d="M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741 0 31.345-16.136 72.247-51.051 101.786 16.842 5.192 54.843 19.167 45.803 34.421-7.316 12.343-125.51 7.881-159.632 4.037-34.122 3.844-152.316 8.306-159.632-4.037-9.045-15.25 28.918-29.214 45.783-34.415-34.92-29.539-51.059-70.445-51.059-101.792 0 0-33.334 54.134-44.859 52.741-5.37-.65-12.424-29.644 9.347-99.704 10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963 18.118 45.223 29.912 72.85 40.144 105.778 21.768 70.06 14.716 99.053 9.346 99.704z" fill="currentColor"/></svg></i>
+						<?= HTML::escape($user['qq']) ?>
+					</li>
+					<?php endif ?>
+				</ul>
+			</div>
+		</div>
+		<div class="col-md-9 mt-2 mt-md-0">
+			<nav class="nav mb-2">
+				<?php if (Auth::check()): ?>
+					<?php if (Auth::id() != $user['username']): ?>
+						<a class="nav-link" href="/user/msg?enter=<?= $user['username'] ?>">
+							<i class="bi bi-chat-left-dots"></i>
+							<?= UOJLocale::get('send private message') ?>
+						</a>
+					<?php else: ?>
+						<a class="nav-link" href="/user/modify-profile">
+							<i class="bi bi-pencil"></i>
+							<?= UOJLocale::get('modify my profile') ?>
+						</a>
+					<?php endif ?>
+				<?php endif ?>
+					
+				<a class="nav-link" href="<?= HTML::blog_url($user['username'], '/') ?>">
+					<i class="bi bi-arrow-right-square"></i>
+					<?= UOJLocale::get('visit his blog', $username) ?>
+				</a>
+				<a class="nav-link" href="<?= HTML::blog_url($user['username'], '/self_reviews') ?>">
+					<i class="bi bi-arrow-right-square"></i>
+					赛后总结
+				</a>
+			</nav>
+			<div class="card card-default mb-2">
+				<div class="card-body">
+	<?php
+	$_result = DB::query("select date_format(submit_time, '%Y-%m-%d'), problem_id from submissions where submitter = '{$username}' and score = 100 and date(submit_time) between date_sub(curdate(), interval 1 year) and curdate()");
+	$result = [];
+	$vis = [];
+	while ($row = DB::fetch($_result)) {
+		$id = $row["date_format(submit_time, '%Y-%m-%d')"] . ':' . $row['problem_id'];
+		if (!$vis[$id]) {
+			$vis[$id] = 1;
+			$result[$row["date_format(submit_time, '%Y-%m-%d')"]]++;
+		}
+	}
+	?>
+					<h4 class="card-title h5">
+						<?= UOJLocale::get('n accepted in last year', count($result)) ?>
+					</h4>
+					<div id="accepted-graph" style="font-size: 14px"></div>
+					<script>
+						var accepted_graph_data = [
+							<?php foreach ($result as $key => $val): ?>
+								{ date: '<?= $key ?>', count: <?= $val ?> },
+							<?php endforeach ?>
+						];
+
+						$(document).ready(function () {
+							$('#accepted-graph').CalendarHeatmap(accepted_graph_data, {});
+						});
+					</script>
+				</div>
+			</div>
+			<div class="card card-default mb-2">
+				<div class="card-body">
+				<?php $ac_problems = DB::selectAll("select a.problem_id as problem_id, b.title as title from best_ac_submissions a inner join problems b on a.problem_id = b.id where submitter = '{$user['username']}';") ?>
+				<h4 class="card-title h5">
+					<?= UOJLocale::get('accepted problems').': '.UOJLocale::get('n problems in total', count($ac_problems))?>
+				</h4>
+				<ul class="nav">
+					<?php foreach ($ac_problems as $problem): ?>
+						<li class="nav-item">
+							<a class="nav-link" href="/problem/<?= $problem['problem_id'] ?>" role="button">
+								#<?= $problem['problem_id'] ?>. <?= $problem['title'] ?>
+							</a>
+						</li>
+					<?php endforeach ?>
+
+					<?php if (empty($ac_problems)): ?>
+						<?= UOJLocale::get('none'); ?>
+					<?php endif ?>
+				</ul>
+				</div>
+			</div>
+
+			<?php if (isSuperUser($myUser)): ?>
+				<div class="card card-default">
+					<ul class="list-group list-group-flush">
+						<li class="list-group-item">
+							<h5 class="list-group-item-heading">register time</h5>
+							<p class="list-group-item-text"><?= $user['register_time'] ?></p>
+						</li>
+						<li class="list-group-item">
+							<h5 class="list-group-item-heading">remote_addr</h5>
+							<p class="list-group-item-text"><?= $user['remote_addr'] ?></p>
+						</li>
+						<li class="list-group-item">
+							<h5 class="list-group-item-heading">http_x_forwarded_for</h5>
+							<p class="list-group-item-text"><?= $user['http_x_forwarded_for'] ?></p>
+						</li>
+					</ul>
+				</div>
+			<?php endif ?>
+		</div>
+	</div>
+<?php else: ?>
+<?php
+	$esc_sex = HTML::escape($user['sex']);
+	$col_sex="color:blue";
+	if ($esc_sex == "M") {
+		$esc_sex="♂";
+		$col_sex="color:blue";
+	} elseif ($esc_sex == "F") {
+		$esc_sex="♀";
+		$col_sex="color:red";
+	} else {
+		$esc_sex="";
+		$col_sex="color:black";
+	}
+	?>
+<div class="card border-info">
+	<h5 class="card-header bg-info"><?= UOJLocale::get('user profile') ?></h5>
+	<div class="card-body">
+		<div class="row mb-4">
+			<div class="col-md-4 order-md-9">
+				<img class="media-object img-thumbnail d-block mx-auto" alt="<?= $user['username'] ?> Avatar" src="<?= HTML::avatar_addr($user, 256) ?>" />
+			</div>
+			<div class="col-md-8 order-md-1">
+				<h2><span class="uoj-honor" data-realname="<?= $user['realname'] ?>"><?= $user['username'] ?></span> <span><strong style="<?= $col_sex ?>"><?= $esc_sex ?></strong></span></h2>
+				<div class="list-group">
+					<div class="list-group-item">
+						<h4 class="list-group-item-heading"><?= UOJLocale::get('email') ?></h4>
+						<p class="list-group-item-text"><?= HTML::escape($user['email']) ?></p>
+					</div>
+					<div class="list-group-item">
+						<h4 class="list-group-item-heading"><?= UOJLocale::get('QQ') ?></h4>
+						<p class="list-group-item-text"><?= HTML::escape($user['qq'] != 0 ? $user['qq'] : 'Unfilled') ?></p>
+					</div>
+					<div class="list-group-item">
+						<h4 class="list-group-item-heading"><?= UOJLocale::get('motto') ?></h4>
+						<?php
 								$motto_id = uniqid("motto-{$user['username']}-");
 	$dom_sanitize_config = DOM_SANITIZE_CONFIG;
 	?>
-							<p class="list-group-item-text" id="<?= $motto_id ?>"></p>
-							<script type="text/javascript">
-								$(function() { $('#<?= $motto_id ?>').html(DOMPurify.sanitize('<?= $motto ?>', <?= $dom_sanitize_config ?>)); });
-							</script>
-						</div>
-						
-						<?php if (isSuperUser($myUser)): ?>
-						<div class="list-group-item">
-							<h4 class="list-group-item-heading">register time</h4>
-							<p class="list-group-item-text"><?= $user['register_time'] ?></p>
-						</div>
-						<div class="list-group-item">
-							<h4 class="list-group-item-heading">remote_addr</h4>
-							<p class="list-group-item-text"><?= $user['remote_addr'] ?></p>
-						</div>
-						<div class="list-group-item">
-							<h4 class="list-group-item-heading">http_x_forwarded_for</h4>
-							<p class="list-group-item-text"><?= $user['http_x_forwarded_for'] ?></p>
-						</div>
-						<?php endif ?>
+						<p class="list-group-item-text" id="<?= $motto_id ?>"></p>
+						<script type="text/javascript">
+							$(function() { $('#<?= $motto_id ?>').html(DOMPurify.sanitize('<?= addslashes($user['motto']) ?>', <?= $dom_sanitize_config ?>)); });
+						</script>
 					</div>
+					
+					<?php if (isSuperUser($myUser)): ?>
+					<div class="list-group-item">
+						<h4 class="list-group-item-heading">register time</h4>
+						<p class="list-group-item-text"><?= $user['register_time'] ?></p>
+					</div>
+					<div class="list-group-item">
+						<h4 class="list-group-item-heading">remote_addr</h4>
+						<p class="list-group-item-text"><?= $user['remote_addr'] ?></p>
+					</div>
+					<div class="list-group-item">
+						<h4 class="list-group-item-heading">http_x_forwarded_for</h4>
+						<p class="list-group-item-text"><?= $user['http_x_forwarded_for'] ?></p>
+					</div>
+					<?php endif ?>
 				</div>
 			</div>
-			<?php if (Auth::check()): ?>
-			<?php if (Auth::id() != $user['username']): ?>
-			<a type="button" class="btn btn-info btn-sm" href="/user/msg?enter=<?= $user['username'] ?>"><span class="glyphicon glyphicon-envelope"></span> <?= UOJLocale::get('send private message') ?></a>
-			<?php else: ?>
-			<a type="button" class="btn btn-info btn-sm" href="/user/modify-profile"><span class="glyphicon glyphicon-pencil"></span> <?= UOJLocale::get('modify my profile') ?></a>
-			<?php endif ?>
-			<?php endif ?>
-			
-			<a type="button" class="btn btn-success btn-sm" href="<?= HTML::blog_url($user['username'], '/') ?>"><span class="glyphicon glyphicon-arrow-right"></span> <?= UOJLocale::get('visit his blog', $username) ?></a>
-			<a type="button" class="btn btn-success btn-sm" href="<?= HTML::blog_url($user['username'], '/self_reviews') ?>"><span class="glyphicon glyphicon-arrow-right"></span> 查看 <?= $username ?> 的所有赛后总结</a>
-			
-			<div class="top-buffer-lg"></div>
-			<div class="list-group">
-				<div class="list-group-item">
-					<?php
-						$_result = DB::query("select date(submit_time), problem_id from submissions where submitter = '{$username}' and score = 100 and date(submit_time) between date_sub(curdate(), interval 1 year) and curdate()");
+		</div>
+		<?php if (Auth::check()): ?>
+		<?php if (Auth::id() != $user['username']): ?>
+		<a type="button" class="btn btn-info btn-sm" href="/user/msg?enter=<?= $user['username'] ?>"><span class="glyphicon glyphicon-envelope"></span> <?= UOJLocale::get('send private message') ?></a>
+		<?php else: ?>
+		<a type="button" class="btn btn-info btn-sm" href="/user/modify-profile"><span class="glyphicon glyphicon-pencil"></span> <?= UOJLocale::get('modify my profile') ?></a>
+		<?php endif ?>
+		<?php endif ?>
+		
+		<a type="button" class="btn btn-success btn-sm" href="<?= HTML::blog_url($user['username'], '/') ?>"><span class="glyphicon glyphicon-arrow-right"></span> <?= UOJLocale::get('visit his blog', $username) ?></a>
+		<a type="button" class="btn btn-success btn-sm" href="<?= HTML::blog_url($user['username'], '/self_reviews') ?>"><span class="glyphicon glyphicon-arrow-right"></span> 查看 <?= $username ?> 的所有赛后总结</a>
+		
+		<div class="top-buffer-lg"></div>
+		<div class="list-group">
+			<div class="list-group-item">
+				<?php
+					$_result = DB::query("select date(submit_time), problem_id from submissions where submitter = '{$username}' and score = 100 and date(submit_time) between date_sub(curdate(), interval 1 year) and curdate()");
 	$result = [];
 	$vis = [];
 	while ($row = DB::fetch($_result)) {
@@ -102,33 +252,33 @@
 		}
 	}
 	?>
-					<h4 class="list-group-item-heading"><?= UOJLocale::get('n accepted in last year', count($result)) ?></h4>
-					<div id="accepted-graph"></div>
-					<script>
-						var accepted_graph_data = [
-							<?php
-				foreach ($result as $key => $val) {
-					echo "{ timestamp: {$key}, count: {$val} }, ";
-				}
+				<h4 class="list-group-item-heading"><?= UOJLocale::get('n accepted in last year', count($result)) ?></h4>
+				<div id="accepted-graph"></div>
+				<script>
+					var accepted_graph_data = [
+						<?php
+			foreach ($result as $key => $val) {
+				echo "{ timestamp: {$key}, count: {$val} }, ";
+			}
 	?>
-						];
+					];
 
-						$(document).ready(function () {
-							$('#accepted-graph').github_graph({
-								data: accepted_graph_data,
-								texts: ['AC', 'AC'],
-								h_days: ['Tue', 'Thu', 'Sat'],
-							});
+					$(document).ready(function () {
+						$('#accepted-graph').github_graph({
+							data: accepted_graph_data,
+							texts: ['AC', 'AC'],
+							h_days: ['Tue', 'Thu', 'Sat'],
 						});
-					</script>
-				</div>
-				<div class="list-group-item">
-					<?php
+					});
+				</script>
+			</div>
+			<div class="list-group-item">
+				<?php
 						$ac_problems = DB::selectAll("select a.problem_id as problem_id, b.title as title from best_ac_submissions a inner join problems b on a.problem_id = b.id where submitter = '{$user['username']}';");
 	?>
-					<h4 class="list-group-item-heading"><?= UOJLocale::get('accepted problems').'：'.UOJLocale::get('n problems in total', count($ac_problems))?> </h4>
-					<ul class="list-group-item-text nav">
-					<?php
+				<h4 class="list-group-item-heading"><?= UOJLocale::get('accepted problems').'：'.UOJLocale::get('n problems in total', count($ac_problems))?> </h4>
+				<ul class="list-group-item-text nav">
+				<?php
 						foreach ($ac_problems as $problem) {
 							echo '<li class="mr-1 mb-1"><a href="/problem/', $problem['problem_id'], '" role="button" class="btn btn-light h-100" style="width: 12rem;">#', $problem['problem_id'], '. ', $problem['title'], '</a></li>';
 						}
@@ -137,19 +287,11 @@
 							echo UOJLocale::get('none');
 						}
 	?>
-					</ul>
-				</div>
+				</ul>
 			</div>
 		</div>
 	</div>
-<?php else: ?>
-	<?php echoUOJPageHeader('不存在该用户' . ' - 用户信息') ?>
-	<div class="card border-danger">
-		<div class="card-header bg-danger">用户信息</div>
-		<div class="card-body">
-		<h4>不存在该用户</h4>
-		</div>
-	</div>
+</div>
 <?php endif ?>
 
 <?php echoUOJPageFooter() ?>
diff --git a/web/app/views/page-header.php b/web/app/views/page-header.php
index df147d9..270e985 100644
--- a/web/app/views/page-header.php
+++ b/web/app/views/page-header.php
@@ -228,6 +228,12 @@
 			<?= HTML::js_src('/js/jquery.github_contribution_graph.js') ?>
 		<?php endif ?>
 
+		<?php if (isset($REQUIRE_LIB['calendar_heatmap'])): ?>
+			<!-- jquery-calendar-heatmap -->
+			<?= HTML::css_link('/css/jquery.calendar_heatmap.min.css') ?>
+			<?= HTML::js_src('/js/jquery.calendar_heatmap.min.js') ?>
+		<?php endif ?>
+
 		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 		<!--[if lt IE 9]>
 			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
diff --git a/web/css/jquery.calendar_heatmap.min.css b/web/css/jquery.calendar_heatmap.min.css
new file mode 100644
index 0000000..2e53614
--- /dev/null
+++ b/web/css/jquery.calendar_heatmap.min.css
@@ -0,0 +1,9 @@
+/*
+ *  jquery-calendar-heatmap - v1.3.0
+ *  A simple Calendar Heatmap for jQuery.
+ *  https://github.com/SeBassTian23/CalendarHeatmap
+ *
+ *  Made by Sebastian Kuhlgert
+ *  Under MIT License
+ */
+ .ch{display:table!important;clear:both}.ch-rounded .ch-day,.ch-rounded .ch-lvl{border-radius:35%}.ch-circle .ch-day,.ch-circle .ch-lvl{border-radius:100%}.ch-month,.ch-week-labels{font-size:0;display:inline-block;white-space:normal;margin:0 4px}.ch-day-labels,.ch-week{display:inline-block;width:11px;box-sizing:content-box}.ch-day-labels{width:inherit}.ch-month-label{text-align:center;font-size:12px;margin-top:10px;margin-bottom:10px}.ch-day-label{text-align:center;font-size:12px;display:block;margin:0;line-height:11px;box-sizing:content-box}.ch-day{display:inline-block;width:9px;height:9px;border:1px solid #fff;background-color:#c8d7e1;margin:0;box-sizing:content-box}.ch-day.is-outside-month,.ch-day.is-outside-month:hover,.ch-lvl.is-outside-month,.ch-lvl.is-outside-month:hover{background-color:transparent;border-color:transparent}.ch-day.lvl-0,.ch-lvl.lvl-0{background-color:#c8d7e1}.ch-day.is-after-today,.ch-lvl.is-after-today{background-color:#e9eff3}.ch-day.lvl-1,.ch-lvl.lvl-1{background-color:#a6c96a}.ch-day.lvl-2,.ch-lvl.lvl-2{background-color:#5cb85c}.ch-day.lvl-3,.ch-lvl.lvl-3{background-color:#009e47}.ch-day.lvl-4,.ch-lvl.lvl-4{background-color:#00753a}.ch-day:hover,.ch-lvl:hover{border-color:#ababab}.ch-legend{padding-top:10px;text-align:right}.ch-legend-left{text-align:left!important}.ch-legend-center{text-align:center!important}.ch-legend:after{content:".";display:block;height:0;width:0;clear:both;visibility:hidden}.ch-lvls{display:inline-block;margin:0;padding:0;list-style-type:none;padding:2px 9px 0 5px}.ch-lvl{width:10px;height:10px;float:left;margin-left:3px}.blue-1{background-color:#ffc!important}.earth-1{background-color:#f4ec15!important}.electric-1{background-color:#f9d824!important}.viridis-1{background-color:#dde218!important}.picknick-1{background-color:#dd2a91!important}.green-1{background-color:#d1be5a!important}.teal-1{background-color:#becfb6!important}.red-1{background-color:#deb7af!important}.blue-2{background-color:#41b6c4!important}.earth-2{background-color:#86bf76!important}.electric-2{background-color:#f38647!important}.viridis-2{background-color:#42bd70!important}.picknick-2{background-color:#b14dec!important}.green-2{background-color:#5f900b!important}.teal-2{background-color:#7db28f!important}.red-2{background-color:#cf8371!important}.blue-3{background-color:#0868ac!important}.earth-3{background-color:#117bd7!important}.electric-3{background-color:#8e0ca3!important}.viridis-3{background-color:#355c8c!important}.picknick-3{background-color:#2e8ebf!important}.green-3{background-color:#39811b!important}.teal-3{background-color:#107d79!important}.red-3{background-color:#b63b25!important}.blue-4{background-color:#253494!important}.earth-4{background-color:#363299!important}.electric-4{background-color:#2e0495!important}.viridis-4{background-color:#471164!important}.picknick-4{background-color:#139863!important}.green-4{background-color:#0d562c!important}.teal-4{background-color:#1c475d!important}.red-4{background-color:#90131c!important}
diff --git a/web/js/jquery.calendar_heatmap.min.js b/web/js/jquery.calendar_heatmap.min.js
new file mode 100644
index 0000000..da83ec6
--- /dev/null
+++ b/web/js/jquery.calendar_heatmap.min.js
@@ -0,0 +1,10 @@
+/*
+ *  jquery-calendar-heatmap - v1.3.0
+ *  A simple Calendar Heatmap for jQuery.
+ *  https://github.com/SeBassTian23/CalendarHeatmap
+ *
+ *  Made by Sebastian Kuhlgert
+ *  Under MIT License
+ */
+
+!function(b){"use strict";var n="CalendarHeatmap",a={title:null,months:12,weekStartDay:1,lastMonth:(new Date).getMonth()+1,lastYear:(new Date).getFullYear(),coloring:null,labels:{days:!1,months:!0,custom:{weekDayLabels:null,monthLabels:null}},tiles:{shape:"square"},legend:{show:!0,align:"right",minLabel:"Less",maxLabel:"More",divider:" to "},tooltips:{show:!1,options:{}}};function i(t,e,s){this.element=t,this.data=e,this.settings=b.extend(!0,{},a,s),this._defaults=a,this._name=n,this.init()}b.extend(i.prototype,{init:function(){this.calendarHeatmap()},_parse:function(t){var e=[];if(!Array.isArray(t)||"object"!=typeof t)return console.log("Invalid data source"),null;if(Array.isArray(t)&&0<t.length){var s=typeof t[0];if("object"!=typeof t[0]||Array.isArray(t[0])){if(-1<["string","date","number"].indexOf(s)){if(this._dateValid(t[0])){var a,n,i={};for(a in t){var l=this._dateFormat(t[a]);i[l]?i[l]+=1:i[l]=1}for(n in e=[],i)e.push({count:parseInt(i[n]),date:n});return e}return console.log("Invalid Date format."),null}return console.log("Invalid format."),null}if(t[0].date&&t[0].count){for(var r in e=[],t){var h=t[r].date;this._isNumeric(t[r].date)&&(h=parseInt(t[r].date)),e.push({count:parseInt(t[r].count),date:this._dateFormat(h)})}return e}return console.log("Invalid Object format."),null}if(Array.isArray(t)&&0===t.length)return[];if("object"!=typeof t||Object.empty(t))return null;s=Object.keys(t);if(!this._dateValid(s[0]))return console.log("Invalid Date format."),null;if(this._isNumeric(t[s[0]])){var d,o=[];for(d in t)o.push({count:parseInt(t[d]),date:this._dateFormat(d)});return o}},_pad:function(t,e){return(t=String(t)).length<e?this._pad("0"+t,e):t},_calculateBins:function(t){var e,s=this.settings.steps||4,a=["0"],n=[[0,0]],i=t.map(function(t){return parseInt(t.count)}),l=Math.min.apply(Math,i),i=Math.max.apply(Math,i),r=Math.ceil(i/s);for(0===r&&(r=i/s)<1&&(r=1),n=[[0,0]],a=Number.isFinite(l)?["0"]:[""],e=0;e<s;e++){var h=r*e+1,d=r*(e+1);n.push([h,d]),!Number.isFinite(l)||Number.isNaN(h)||!Number.isFinite(h)?a.push(""):h==d?a.push(String(h)):a.push(String(h)+(this.settings.legend.divider||" to ")+String(d))}for(e in t)t[e].level=this._matchBin(n,t[e].count);return{events:t,bins:a}},_matchBin:function(t,e){for(var s in t)if(e>=t[s][0]&&e<=t[s][1])return parseInt(s);return 0},_matchDate:function(t,e){return t.find(function(t){return t.date===e})||null},_matchDateIdx:function(t,e){return t.findIndex(function(t){return t.date===e})},_futureDate:function(t){var e=this._dateFormat().split("-"),t=t.split("-");return parseInt(e[0])<parseInt(t[0])||(parseInt(e[0])===parseInt(t[0])&&parseInt(e[1])<parseInt(t[1])||parseInt(e[0])===parseInt(t[0])&&parseInt(e[1])===parseInt(t[1])&&parseInt(e[2])<parseInt(t[2]))},_isNumeric:function(t){return!isNaN(parseFloat(t))&&isFinite(t)},_dateValid:function(t){return!!(String(t).match(/^(\d{4}-\d{2}-\d{2})$/)||String(t).match(/^(\d{1,13})$/)&&"number"==typeof t)},_dateWords:{MMM:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],MMMM:["January","February","March","April","May","June","July","August","September","October","November","December"],dd:["Su","Mo","Tu","We","Th","Fr","Sa"],ddd:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],dddd:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},_dateFormat:function(e,s){void 0===e?e=new Date:"string"==typeof e&&(e=e.split("-"),e=new Date(parseInt(e[0]),parseInt(e[1])-1,parseInt(e[2]))),void 0===s&&(s="YYYY-MM-DD");var a=this._dateWords;return s.replace(/(Y{2,4})|(M{1,4})|(d{1,4})|(D{1,2})/g,function(t){return"YY"===t?parseInt(e.getFullYear().toString().slice(2,4)):"YYYY"===t?e.getFullYear():"M"===t?e.getMonth()+1:"MM"===t?(s=String(e.getMonth()+1)).length<2?"0"+s:s:"MMM"===t||"MMMM"===t?a[t][e.getMonth()]:"D"===t?e.getDate():"DD"===t?(s=String(e.getDate())).length<2?"0"+s:s:"d"===t?e.getDay()+1:"dd"===t||"ddd"===t||"dddd"===t?a[t][e.getDay()]:t})},_addWeekColumn:function(){if(this.settings.labels.days){b(".ch-year",this.element).append('<div class="ch-week-labels"></div>'),b(".ch-week-labels",this.element).append('<div class="ch-week-label-col"></div>'),b(".ch-week-label-col",this.element).append('<div class="ch-day-labels"></div>'),this.settings.labels.months&&b(".ch-week-labels",this.element).append('<div class="ch-month-label">&nbsp;</div>');for(var t=this.settings.weekStartDay,e=0;e<7;e++){var s,a=e+t<7?e+t:e+t-7,n=this._dateWords.ddd[a];(e-1)%2?(s=this.settings.labels.custom.weekDayLabels,Array.isArray(s)?n=s[a]||"":"string"==typeof s?n=this._dateWords[s][a]||"":"function"==typeof s&&(n=s(a))):n="&nbsp;",b("<div>",{class:"ch-day-label",html:n}).appendTo(b(".ch-day-labels",this.element))}}},calendarHeatmap:function(){var t=this._parse(this.data);if(Array.isArray(t)){this.data=t;var e=this._calculateBins(t),s=e.events,a=e.bins,t=this.settings.lastMonth,e=this.settings.lastYear,n=this.settings.months,i=this.settings.weekStartDay||1;b(this.element).empty(),this.settings.title&&b("<h3>",{class:"ch-title",html:this.settings.title}).appendTo(b(this.element)),b(this.element).addClass("ch").append('<div class="ch-year"></div>'),this._addWeekColumn(),this.settings.tiles.shape&&"square"!==this.settings.tiles.shape&&b(this.element).addClass(" ch-"+this.settings.tiles.shape);for(var l=t,r=e,h=[],d=0;d<n;d++)(l+=-1)<0&&(--r,l+=12),h.push([l,r]);for(h.reverse(),d=0;d<h.length;d++){var l=h[d][0],r=h[d][1],o=this._dateFormat(r+"-"+(l+1)+"-1","MMM"),c=this.settings.labels.custom.monthLabels;c&&(o=Array.isArray(c)?c[l]||"":"function"==typeof c?c(r,l+1):this._dateFormat(r+"-"+(l+1)+"-1",c)),b(".ch-year",this.element).append('<div class="ch-month"></div>'),b(".ch-month:last",this.element).append('<div class="ch-weeks"></div>'),this.settings.labels.months&&b(".ch-month:last",this.element).append('<div class="ch-month-label">'+o+"</div>");var p=new Date(r,l+1,0).getDate();b(".ch-month:last .ch-weeks",this.element).append('<div class="ch-week"></div>');for(var u=0,g=0;g<p;g++){var m=r+"-"+this._pad(l+1,2);m+="-"+this._pad(g+1,2);var f,v=this._matchDate(s,m),y="";this._futureDate(m)&&(y=" is-after-today"),v?(f=v.count+" on ",f+=this._dateFormat(v.date,"MMM D, YYYY"),m="",this.settings.coloring&&(m=" "+this.settings.coloring+"-"+v.level),b("<div/>",{class:"ch-day lvl-"+v.level+m,title:f,"data-toggle":"tooltip"}).appendTo(b(".ch-month:last .ch-weeks .ch-week:last",this.element))):b("<div/>",{class:"ch-day"+y}).appendTo(b(".ch-month:last .ch-weeks .ch-week:last",this.element));y=new Date(r,l,g+2).getDay();u++,(y=0===y?7:y)===i&&g<p-1&&(b(".ch-month:last .ch-weeks",this.element).append('<div class="ch-week">'+g+"</div>"),u=0)}for(;u<7;u++)b(".ch-month:last .ch-weeks .ch-week:last",this.element).append('<div class="ch-day is-outside-month"></div>')}if(this.settings.legend.show)for(b("<div>",{class:"ch-legend"}).appendTo(this.element).append("<small>"+(this.settings.legend.minLabel||"")+"</small>").append('<ul class="ch-lvls"></ul>').append("<small>"+(this.settings.legend.maxLabel||"")+"</small>"),"left"===this.settings.legend.align&&b(".ch-legend",this.element).addClass("ch-legend-left"),"center"===this.settings.legend.align&&b(".ch-legend",this.element).addClass("ch-legend-center"),d=0;d<a.length;d++)b("<li>",{class:"ch-lvl lvl-"+d,title:a[d],"data-toggle":"tooltip"}).appendTo(b(".ch-lvls",this.element)),this.settings.coloring&&b(".ch-lvls li:last",this.element).addClass(this.settings.coloring+"-"+d);this.settings.tooltips.show&&"function"==typeof b.fn.tooltip&&b('[data-toggle="tooltip"]',this.element).tooltip(this.settings.tooltips.options)}},updateDates:function(t){this.data=t,this.calendarHeatmap()},appendDates:function(t){var e=this._parse(t);if(Array.isArray(e)&&Array.isArray(this.data))for(var s in e){var a=this._matchDateIdx(this.data,e[s].date);-1<a?this.data[a].count+=e[s].count:this.data.push(e[s])}this.calendarHeatmap()},updateOptions:function(t){this.settings=b.extend(!0,{},this.settings,t),this.calendarHeatmap()},getDates:function(){return this.data},getOptions:function(){return this.settings}}),b.fn[n]=function(e,t){var s,a=arguments;return Array.isArray(e)?this.each(function(){b.data(this,"plugin_"+n)||b.data(this,"plugin_"+n,new i(this,e,t))}):"string"==typeof e&&"_"!==e[0]&&"init"!==e?(this.each(function(){var t=b.data(this,"plugin_"+n);t instanceof i&&"function"==typeof t[e]&&(s=t[e].apply(t,Array.prototype.slice.call(a,1))),"destroy"===e&&b(this).removeData()}),void 0!==s?s:this):void 0}}(jQuery);