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=1682680061;
	bh=2QRGDRrLodTl9xYjCwzcyfeF63jbeT28834ZkIoWZvs=;
	h=From:To:Cc:Subject:Date:In-Reply-To:References;
	b=mvr27wFRzzExfZUV6/0pbEuyOkdsUYwirclehrIZIwM4nb2pfRXRn1+aAZ3PPCIqa
	 JKs/6Oe9xUYKMb5YscyGLOj7zl6odsRwY1SBmWGNWZHwrik6kUsWDCHzcS82bHO3Bo
	 gxqVqLUMEZcm6GguKemavzmqEY526TemRJlxWx+WcKvPrSnI2hLzHlbogJMKQRtIQ8
	 GV1a2bCNQgBWb0zqo7BtUZGrmAD2rDuMzZJaOgnJ7F5opP5I68vPMeyY7g4IHz3OTy
	 +hzNc1oqRkuSzaCbSrfMv4e9teikmhtOdsjsOUf+9QAX5Pz8wuPgyPmqm52UAaF2wL
	 eJLu2C0WT5f6A==
Received: from localhost.localdomain (unknown [182.1.37.28])
	by gnuweeb.org (Postfix) with ESMTPSA id 76AFC245A27;
	Fri, 28 Apr 2023 18:07:39 +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 v3 2/2] gwspamd: web: Add new layout profile with demo chart
Date: Fri, 28 Apr 2023 18:07:27 +0700
Message-Id: <20230428110727.331117-3-zxce3@gnuweeb.org>
X-Mailer: git-send-email 2.34.1
In-Reply-To: <20230428110727.331117-1-zxce3@gnuweeb.org>
References: <20230428110727.331117-1-zxce3@gnuweeb.org>
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>
---
v2:
	- Delete script tag for CDN and change it localy
	- Refactoring The Javascript code
	- Make it more responsive
---
 web/views/pages/profile.php | 123 +++++++++++++++++++++++++++---------
 1 file changed, 94 insertions(+), 29 deletions(-)

diff --git a/web/views/pages/profile.php b/web/views/pages/profile.php
index a67ce79..04dcadf 100644
--- a/web/views/pages/profile.php
+++ b/web/views/pages/profile.php
@@ -3,37 +3,102 @@
 $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>
+			<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 type="text/javascript" src="<?= e(asset("js/chart.min.js")); ?>"></script>
+<script type="text/javascript">
+function getChartOptions() {
+    return {
+        type: "line",
+				data: {
+					labels: ['Sun', 'Mon', 'Tue', 'Thu', 'Fri', 'Sat'],
+					datasets: [{
+						label: '# Not Spam',
+						data: [12, 19, 3, 5, 2, 3],
+						borderWidth: 2,
+						borderColor: '#36A2EB',
+					}, {
+						label: '# Spam',
+						data: [16, 10, 7, 2, 9, 4],
+						borderWidth: 2,
+						borderColor: '#FF6384',
+					}]
+				},
+
+				options: {
+					scales: {
+						y: {
+							beginAtZero: true
+						}
+					}
+				}
+    }
+}
+var rootElem = document.documentElement;
+try {
+    var demoChart = new Chart(
+        gid("chart-demo").getContext("2d"),
+        getChartOptions()
+    );
+}
+catch(err) {}
+</script>
-- 
Memet Zx