Add dynamic render title and name info

Author: lucthienphong1120

datasheet.json

@@ -1,13 +1,57 @@
 {
-    "CMS001": "Q01TLURhby1UaGFuaC1Mb25nLnBkZg==",
-    "CMS002": "Q01TLUh1eW5oLVRoaS1OZ29jLUhhbi5wZGY=",
-    "CMS003": "Q01TLU5nby1UaGFvLU5ndXllbi5wZGY=",
-    "CMS004": "Q01TLVRyYW4tTWFuLU1hbi5wZGY=",
-    "CMS005": "Q01TLVZ1LUFuaC1UdWFuLnBkZg==",
-    "DBS001": "REJTLUhvYW5nLVllbi1OaGkucGRm",
-    "DBS002": "REJTLUx1b25nLVR1YW4tQW5oLnBkZg==",
-    "DBS003": "REJTLU5ndXllbi1WYW4tTGluaC5wZGY=",
-    "DBS004": "REJTLVRyYW4tTWFuLU1hbi5wZGY=",
-    "DBS005": "REJTLVRyYW4tTmhhdC1QaGkucGRm",
-    "DBS006": "REJTLVZ1LUFuaC1UdWFuLnBkZg=="
+    "CMS001": {
+        "courseTitle": "CMS - Content Management System",
+        "certifiedName": "Đào Thanh Long",
+        "certData": "Q01TLURhby1UaGFuaC1Mb25nLnBkZg=="
+    },
+    "CMS002": {
+        "courseTitle": "CMS - Content Management System",
+        "certifiedName": "Huỳnh Thị Ngọc Hân",
+        "certData": "Q01TLUh1eW5oLVRoaS1OZ29jLUhhbi5wZGY="
+    },
+    "CMS003": {
+        "courseTitle": "CMS - Content Management System",
+        "certifiedName": "Ngô Thảo Nguyên",
+        "certData": "Q01TLU5nby1UaGFvLU5ndXllbi5wZGY="
+    },
+    "CMS004": {
+        "courseTitle": "CMS - Content Management System",
+        "certifiedName": "Trần Mẫn Mẫn",
+        "certData": "Q01TLVRyYW4tTWFuLU1hbi5wZGY="
+    },
+    "CMS005": {
+        "courseTitle": "CMS - Content Management System",
+        "certifiedName": "Vũ Anh Tuấn",
+        "certData": "Q01TLVZ1LUFuaC1UdWFuLnBkZg=="
+    },
+    "DBS001": {
+        "courseTitle": "DBS - Database System",
+        "certifiedName": "Hoàng Yến Nhi",
+        "certData": "REJTLUhvYW5nLVllbi1OaGkucGRm"
+    },
+    "DBS002": {
+        "courseTitle": "DBS - Database System",
+        "certifiedName": "Lương Tuấn Anh",
+        "certData": "REJTLUx1b25nLVR1YW4tQW5oLnBkZg=="
+    },
+    "DBS003": {
+        "courseTitle": "DBS - Database System",
+        "certifiedName": "Nguyễn Văn Linh",
+        "certData": "REJTLU5ndXllbi1WYW4tTGluaC5wZGY="
+    },
+    "DBS004": {
+        "courseTitle": "DBS - Database System",
+        "certifiedName": "Trần Mẫn Mẫn",
+        "certData": "REJTLVRyYW4tTWFuLU1hbi5wZGY="
+    },
+    "DBS005": {
+        "courseTitle": "DBS - Database System",
+        "certifiedName": "Trần Nhật Phi",
+        "certData": "REJTLVRyYW4tTmhhdC1QaGkucGRm"
+    },
+    "DBS006": {
+        "courseTitle": "DBS - Database System",
+        "certifiedName": "Vũ Anh Tuấn",
+        "certData": "REJTLVZ1LUFuaC1UdWFuLnBkZg=="
+    }
 }

render.js

@@ -36,7 +36,7 @@ class CertData {
     async renderPDF(url) {
         // Đặt workerSrc để tránh lỗi "Deprecated API usage"
         pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js";
-        
+
         const loadingTask = pdfjsLib.getDocument(url);
         loadingTask.promise.then(pdf => {
             pdf.getPage(1).then(page => {
@@ -70,12 +70,15 @@ class CertData {
     async renderData() {
         // Check if the ID is valid
         if (this.validIds.includes(this.codeId) && this.verifyData()) {
-            // Extract the image data from the data source file
+            // Extract the cert data and other info from the data source file
             const renderData = this.data[this.codeId];
+            // Cập nhật thông tin tiêu đề và mô tả chứng chỉ
+            document.getElementById("courseTitle").textContent = renderData.courseTitle;
+            document.getElementById("certifiedName").textContent = renderData.certifiedName;
             // Get final data string from course and id
-            const finalData = `${this.course.toUpperCase()}/Certificates/${atob(renderData)}`; // /CMS/Certificates/CMS-Dao-Thanh-Long.pdf
+            const finalData = `${this.course.toUpperCase()}/Certificates/${atob(renderData.certData)}`; // /<course>/Certificates/<cert-path>.pdf
             // Add the data parameter to the URL if it is not already present
-            const checkData = renderData.slice(-20, -5);
+            const checkData = renderData.certData.slice(-20, -5); // ?id=<uuid>&data=<encoded>
             if (this.urlParams.get('data') != checkData) {
                 this.urlParams.set("data", checkData)
                 window.location.search = this.urlParams;

verify.html

@@ -56,8 +56,8 @@
         </section>
         <section class="details">
             <h1>Certificate Title</h1>
-            <p>Student Name</p>
-            <p>Teacher Comments and Grade</p>
+            <p id="courseTitle"></p>
+            <p>Certify for: <span id="certifiedName"></span></p>
         </section>
         <section class="description">
             <h2>Certificate Description</h2>