From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <zxce3@gnuweeb.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org
X-Spam-Level: 
X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED,
	DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED autolearn=ham
	autolearn_force=no version=3.4.6
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org;
	s=default; t=1682638559;
	bh=OnWz1eVnmaYhc7s7sAr99tGMkjli0HGfzbcfDkERp6E=;
	h=From:To:Cc:Subject:Date;
	b=ZBU27XUysshbEwF/yRqlxOhMz+TrfdREoRHCoC+UK1Fr1NpR4egwKkyFLPe3/6VhA
	 EVUEzygCnPx4va55Y2M9EV62WWluJeQop+GtWTj4TyTFmsepT2FXGrHO7XTE7g2N6e
	 xYaisZ9kxb9IzFxyivzPGAz61EMlvtdtO5ph2cK1eQuQ0aHkYfqzfsdC/ZevgTV5rH
	 DZJU2yFnwSAK70JMH/fSJaxUBeDDOQYW4+W58b23UOBQ10/c5980fCpBGuQr5yqp4s
	 6xvzEIjfR1jlmS70x23cquLg8+8AyHk6iD1iZ7VW96Pw1CBFo6HdH660CY7NXrOvhj
	 0p5xXRAfh1fWQ==
Received: from localhost.localdomain (unknown [182.1.23.2])
	by gnuweeb.org (Postfix) with ESMTPSA id B3319245A07;
	Fri, 28 Apr 2023 06:35:56 +0700 (WIB)
From: Memet Zx <zxce3@gnuweeb.org>
To: Ammar Faizi <ammarfaizi2@gnuweeb.org>
Cc: Memet Zx <zxce3@gnuweeb.org>,
	GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>,
	Memet Zx <memetpea25@gmail.com>
Subject: [PATCH gwspamd] gwspamd: web: Add new layout profile with demo chart
Date: Fri, 28 Apr 2023 06:35:50 +0700
Message-Id: <20230427233550.286187-1-zxce3@gnuweeb.org>
X-Mailer: git-send-email 2.34.1
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
List-Id: <gwml.vger.gnuweeb.org>

This commit adds a new layout profile with a demo chart to display the
difference between spam and non-spam messages. We added a script tag for
a CDN to enable the chart. This improves the user experience.

Signed-off-by: Memet Zx <zxce3@gnuweeb.org>
---
 web/views/pages/profile.php | 113 +++++++++++++++++++++++++++---------
 1 file changed, 84 insertions(+), 29 deletions(-)

diff --git a/web/views/pages/profile.php b/web/views/pages/profile.php
index a67ce79..e54dce0 100644
--- a/web/views/pages/profile.php
+++ b/web/views/pages/profile.php
@@ -3,37 +3,92 @@
 $opt["title"] = $u["full_name"];
 
 ?>
-<div class="mw-full  text-center">
+<div class="mw-full card   text-center">
 	<img id="user-photo" class="img-fluid mt-5 rounded-circle" src="<?= e($u["photo_path"]); ?>" alt="<?= e($u["full_name"]); ?> Images">
 
-	<h1 class="font-weight-bolder"><?= $u["full_name"]; ?></h1>
-	<a href="settings.php?section=profile" class="btn btn-action m-5">Edit Profile</a>
+	<h1 class="font-weight-bolder"><?= $u["full_name"]; ?> <a href="settings.php?section=profile">
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
+				<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
+				<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" />
+			</svg>
+		</a>
+	</h1>
 </div>
 
-<div class="mw-full d-flex justify-content-center">
-	<table class="table w-400 table-striped">
-		<tbody>
-			<tr>
-				<th>User ID</th>
-				<td><?= e($u["id"]); ?></td>
-			</tr>
-			<tr>
-				<th>First Name</th>
-				<td><?= e($u["first_name"]); ?></td>
-			</tr>
-			<tr>
-				<th>Last Name</th>
-				<td><?= e($u["last_name"]); ?></td>
-			</tr>
-			<tr>
-				<th>User Name</th>
-				<td><?= e($u["username"]); ?></td>
-			</tr>
-			<tr>
-				<th>Email</th>
-				<td><?= e($u["email"]); ?></td>
-			</tr>
-		</tbody>
-	</table>
+<div class="row row-eq-spacing-lg">
+	<div class="col-lg-4">
+		<div class="card">
+			<h2 class="card-title">
+				Info
+			</h2>
+			<table class="table">
+				<tbody>
+					<tr>
+						<th>User ID</th>
+						<td><?= e($u["id"]); ?></td>
+					</tr>
+					<tr>
+						<th>First Name</th>
+						<td><?= e($u["first_name"]); ?></td>
+					</tr>
+					<tr>
+						<th>Last Name</th>
+						<td><?= e($u["last_name"]); ?></td>
+					</tr>
+					<tr>
+						<th>User Name</th>
+						<td><?= e($u["username"]); ?></td>
+					</tr>
+					<tr>
+						<th>Email</th>
+						<td><?= e($u["email"]); ?></td>
+					</tr>
+				</tbody>
+			</table>
+			<a href="settings.php?section=profile" class="btn btn-action m-5">Edit Profile</a>
+		</div>
+	</div>
+	<div class="col-lg-8">
+		<div class="card">
+			<h2 class="card-title">
+				Stats
+			</h2>
+			<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+			<div class="content h-full">
+				<canvas id="chart-demo" class="w-full h-auto"></canvas>
+			</div>
+			<div class="fake-content bg-primary mb-20"></div>
+			<div class="fake-content mb-20"></div>
+			<div class="fake-content mb-20"></div>
+			<div class="fake-content mb-20"></div>
+			<div class="fake-content mb-10"></div>
+		</div>
+	</div>
 </div>
-</div>
\ No newline at end of file
+<script>
+	const ctx = gid('chart-demo');
+
+	new Chart(ctx, {
+		type: 'line',
+		data: {
+			labels: ['Sun', 'Mon', 'Tue', 'Thu', 'Friday', 'Sat'],
+			datasets: [{
+				label: '# Not Spam',
+				data: [12, 19, 3, 5, 2, 3],
+				borderWidth: 2
+			}, {
+				label: '# Spam',
+				data: [16, 10, 7, 2, 9, 4],
+				borderWidth: 2
+			}]
+		},
+		options: {
+			responsive: false,
+			scales: {
+				y: {
+					beginAtZero: true
+				}
+			}
+		}
+	});
+</script>

base-commit: 961deae39a099913ca8566e7fec8f3d3f9c4b5f2
-- 
Memet Zx