principal-dashboard-lib-v2 0.0.29 → 0.0.31

package/bundles/principal-dashboard-lib-v2.umd.js

@@ -29,6 +29,8 @@
             //for get details of selected user
             this.detailedviewData = new rxjs.BehaviorSubject(this.userMetadata);
             this.detailedviewData$ = this.detailedviewData.asObservable();
+            this.openSmallTable = new rxjs.BehaviorSubject(false);
+            this.openSmallTable$ = this.openSmallTable.asObservable();
         }
         PrincipalDashboardLibV2Service.prototype.genarateResourseReqiuredData = function (data) {
             this.isResoureMetaDataReady.next(false);
@@ -190,7 +192,6 @@
                     // const randomNumber = document.createElement('span');
                     // randomNumber.innerHTML = i.toString();
                     //usermetadataMatrixUpdated[i].userName = usermetadataMatrixUpdated[i].userName + " --- " + i;
-                    //satyajit 28 aug 2024 removed count from userName
                     usermetadataMatrixUpdated[i].userName = usermetadataMatrixUpdated[i].userName;
                     usersMetadataMatrix.push(usermetadataMatrixUpdated[i]); //adding same name users in usermetadataMatrix with some random charators
                     this.usersMetaData = usersMetadataMatrix;
@@ -312,7 +313,6 @@
                         }
                         if (userConsoleResources != null) {
                             if (userConsoleResources.userConsoleResource !== undefined) {
-                                // satyajit resource wise duration added
                                 userConsoleResources.userConsoleResource.forEach(function (item) {
                                     //console.log("lookingFor: ",item)
                                     resourceMetauserConsoleData.push(item.resourceId); // get name of user w.r.t. ID
@@ -395,7 +395,6 @@
                         if (typeof this.userConsoleData[i].userName === undefined) {
                             this.userConsoleData[i].userName = (Math.floor(Math.random() * 100)).toString();
                         }
-                        /// SATYAJIT TO CHECK 19 SEPT.
                         if (this.userConsoleData[i].userName === undefined) {
                             this.userConsoleData[i].userName = "-";
                             //console.log('pakad',this.userConsoleData[i].userName = "-", this.userConsoleData[i].userId)
@@ -585,7 +584,6 @@
             return { forChartData: dataTableforChart, fordurationTable: allRoomsDetails };
         };
         PrincipalDashboardLibV2Service.prototype.dataForTableView = function (userConsoleMatrix, resourceMetadataMatrix) {
-            console.log("AAA userConsoleMatrix", userConsoleMatrix, "-resourceMetadataMatrix->", resourceMetadataMatrix);
             var currentDate;
             var resourceMatrixForTableChart = new Array();
             var resourceMatrixForExcel = new Array();
@@ -654,24 +652,18 @@
                     for (var k = 0; k < resourceMetadataIDs.length; k++) {
                         for (var i_4 = 0; i_4 < resourceMetadataMatrix.length; i_4++) {
                             if (resourceMetadataIDs[k] === resourceMetadataMatrix[i_4].resouseID) {
-                                // satyajit
                                 subject = resourceMetadataMatrix[i_4].subject;
                                 grade = resourceMetadataMatrix[i_4].grade;
                                 chapter = resourceMetadataMatrix[i_4].chapter;
                                 topicName = resourceMetadataMatrix[i_4].topicName;
                                 teachingPoint = resourceMetadataMatrix[i_4].teachingPoint;
                                 if (resourceMetadataMatrix[i_4].title.toLowerCase() === 'whiteboard' || resourceMetadataMatrix[i_4].title.toLowerCase() === 'question') {
-                                    //AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i].type) + ' : ' + resourceMetadataIDsDuration[k] + ' sec';
                                     AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i_4].type) + ' : ' + this.convertSeconds(resourceMetadataIDsDuration[k]);
-                                    //convertSeconds
                                 }
                                 else {
-                                    //AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i].type) + " : " + resourceMetadataMatrix[i].title + ' : ' + resourceMetadataIDsDuration[k] + ' sec';
                                     AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i_4].type) + " : " + resourceMetadataMatrix[i_4].title + ' : ' + this.convertSeconds(resourceMetadataIDsDuration[k]);
                                 }
                                 //AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i].type) + " : " + resourceMetadataMatrix[i].title + ' : ' + resourceMetadataIDsDuration[k];
-                                //console.log('roomDetail',roomDetail)
-                                console.log('teachingPoint', teachingPoint);
                                 resourceArrayForTableChart = [teacherName, teacherSubject, currentDate, startTime, endTime, duration, roomDetail, subject, grade, chapter, teachingPoint, AssestDetail, launchedFrom];
                                 resourceMatrixForTableChart.push(resourceArrayForTableChart);
                                 teacherName = undefined;
@@ -734,12 +726,8 @@
                 chapter = undefined;
                 teachingPoint = undefined;
                 AssestDetail = undefined;
-                // resourceArrayForTableChart = [subject,grade,chapter,teachingPoint,AssestDetail];
-                // detailedView_ResourceDataMatrix.push(resourceArrayForTableChart);
             }
             else {
-                //satyajit
-                //resourceMetadataMatrix = [resouseID,subject,grade,chapter,teachingPoint,type,title]
                 for (var k = 0; k < resourceMetadataIDs.length; k++) {
                     for (var i = 0; i < resourceMetadataMatrix.length; i++) {
                         if (resourceMetadataIDs[k] === resourceMetadataMatrix[i].resouseID) {
@@ -748,12 +736,12 @@
                             chapter = resourceMetadataMatrix[i].chapter;
                             teachingPoint = resourceMetadataMatrix[i].teachingPoint;
                             if (resourceMetadataMatrix[i].title.toLowerCase() === 'whiteboard' || resourceMetadataMatrix[i].title.toLowerCase() === 'question') {
-                                //AssestDetail = resourceMetadataMatrix[i].type + ": " + this.convertSeconds(resourceMetadataIDsduration[k]);
+                                AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i].type) + ": " + this.convertSeconds(resourceMetadataIDsduration[k]);
                             }
                             else {
-                                //AssestDetail = resourceMetadataMatrix[i].type + ": " + resourceMetadataMatrix[i].title + ": " + this.convertSeconds(resourceMetadataIDsduration[k]);
+                                AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i].type) + ": " + resourceMetadataMatrix[i].title + ": " + this.convertSeconds(resourceMetadataIDsduration[k]);
                             }
-                            AssestDetail = resourceMetadataMatrix[i].type + ": " + resourceMetadataMatrix[i].title + ": " + this.convertSeconds(resourceMetadataIDsduration[k]);
+                            //AssestDetail = this.getDisplaytypeValue(resourceMetadataMatrix[i].type) + ": " + resourceMetadataMatrix[i].title + ": " + this.convertSeconds(resourceMetadataIDsduration[k]);
                             resourceArrayForTableChart = [subject, grade, chapter, teachingPoint, AssestDetail];
                             detailedView_ResourceDataMatrix.push(resourceArrayForTableChart);
                         }
@@ -882,7 +870,7 @@
     PrincipalDashboardLibV2Component.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lib-principal-dashboard-lib-v2',
-                    template: "<div id=\"reprtModule\">\n    <div id=\"pd-mainDiv\" class=\"pd-mainContainer\">\n      <lib-header [data]=\"data\" (userSelectedDate)=\"onUserSelectDate($event)\">\n      </lib-header>\n      <lib-chartheader></lib-chartheader>\n       \n      <div id=\"pd-preloader\" class=\"pd-preloaderDiv\" *ngIf=\"responseStatus !== 'true' && !data\">\n      {{messageForUser}} \n      </div>\n      <lib-chartview *ngIf=\"data\" [data]=\"data\"></lib-chartview>\n      <lib-tableview *ngIf=\"data\" [data]=\"data\"></lib-tableview>\n      <lib-detailedview *ngIf=\"data\" [data]=\"data\"></lib-detailedview>\n      \n    </div>\n</div>\n  ",
+                    template: "<div id=\"reprtModule\">\n    <div id=\"pd-mainDiv\" class=\"pd-mainContainer\">\n      <lib-header [data]=\"data\" (userSelectedDate)=\"onUserSelectDate($event)\">\n      </lib-header>\n      <lib-chartheader></lib-chartheader>\n       \n      <div id=\"pd-preloader\" class=\"pd-preloaderDiv\" *ngIf=\"responseStatus !== 'true' && !data\">\n      {{messageForUser}} \n      </div>\n      <lib-chartview *ngIf=\"data\" [data]=\"data\"></lib-chartview>\n      <!-- <lib-tableview *ngIf=\"data\" [data]=\"data\"></lib-tableview>  -->\n      <lib-full-table-view *ngIf=\"data\"  [data]=\"data\"></lib-full-table-view>\n      <!-- <lib-detailedview *ngIf=\"data\" [data]=\"data\"></lib-detailedview> -->\n      <lib-small-table-view *ngIf=\"data\" [data]=\"data\"></lib-small-table-view>\n      \n    </div>\n</div>\n  ",
                     styles: [".pd-mainContainer{width:100%;height:100%}.pd-mainContainer .pd-preloaderDiv{text-align:center;line-height:27;position:absolute;width:100%;height:87%;z-index:2}.bs-datepicker-head{background-color:#000!important}"]
                 },] }
     ];
@@ -903,7 +891,7 @@
             this.isChartView = true;
         }
         ChartheaderComponent.prototype.ngOnInit = function () {
-            this.libVersion = "0.0.29";
+            this.libVersion = "0.0.31";
             // this.myIcon = document.getElementById('myIconImg');
             // this.changeChatType() 
         };
@@ -1382,7 +1370,7 @@
             }else{
               this.chartDataTable =  this.myChartDataMatrix;
             }*/
-            console.log("this.myChartDataMatrix", this.myChartDataMatrix);
+            //console.log("this.myChartDataMatrix",this.myChartDataMatrix);
             (this.myChartOptions = {
                 tooltip: {
                     trigger: 'none',
@@ -1403,16 +1391,11 @@
             }, 1000);
         };
         ChartviewComponent.prototype.filterUserHasDash = function (callee) {
-            console.log('6dec callee', callee);
-            console.log('6dec left', this.myChartDataMatrix);
-            console.log('6dec right', this.currentdataList.userConsoleData);
             var leftData = this.myChartDataMatrix;
             var rightData = this.currentdataList.userConsoleData;
             var updatedChartData = leftData.filter(function (row) { return row[0] !== "-"; });
             // Filter out objects in rightData where the userName is "-"
             var updatedRightData = rightData.filter(function (item) { return item.userName !== "-"; });
-            console.log('6dec updatedChartData left', updatedChartData);
-            console.log('6dec updatedRightData right', updatedRightData);
             return {
                 updatedChartData: updatedChartData,
                 updatedRightData: updatedRightData
@@ -1420,7 +1403,6 @@
         };
         ChartviewComponent.prototype.calulateTotalDuration = function (detailViewMatrix) {
             //
-            console.log('detailViewMatrix-->', detailViewMatrix);
             //const filteredData = detailViewMatrix.filter(item => item.userName !== "-" && item.userName !== "--");
             //detailViewMatrix = filteredData;
             var id_durationArray;
@@ -1550,7 +1532,9 @@
             else {
                 this.selectedUserData = this.pdService.dataForDetailedView(this.currentdataList.userConsoleData, this.resourceDataList, row);
             }
+            var smallData = [{ 'a': this.currentdataList, 'b': row }];
             //  console.log("this.selectedUserData",this.selectedUserData);
+            this.pdService.openSmallTable.next(this.selectedUserData);
             this.pdService.detailedviewData.next(this.selectedUserData);
             this.updateChart();
             // alluserList
@@ -1700,7 +1684,7 @@
                     if (data.resourceDetails.length > 0) {
                         data.resourceDetails = _this.replaceLabelChapterAndTopic(data.resourceDetails);
                         _this.createResourcesTable(data.resourceDetails);
-                        console.log("11dec resourceDetails", data.resourceDetails);
+                        //console.log("11dec resourceDetails",data.resourceDetails);
                     }
                 }
             });
@@ -2699,6 +2683,7 @@
         };
         TableviewComponent.prototype.loadTable = function (response) {
             var _this = this;
+            console.log('mresponse: ', response);
             // let parse = new DOMParser();
             // this.myXmlData = parse.parseFromString(response, 'application/xml');
             if (response) {
@@ -2713,7 +2698,6 @@
                     this.alluserList = fetchAlluserList.fordurationTable;
                     // resoureMetadata list
                     this.currentResoursedataList = this.pdService.genarateResourseReqiuredData(this.myXmlData);
-                    console.log('11decc data', this.currentResoursedataList);
                     //console.log("AAA genarateUserReqiuredData-->>",genarateUserReqiuredData)
                     //console.log("AAA this.currentResoursedataList-->>",this.currentResoursedataList)
                 }
@@ -2725,12 +2709,10 @@
             this.pdService.chartType.subscribe(function (data) {
                 if (data) {
                     _this.updateChartType(data);
-                    console.log('11decc data', data);
                 }
             });
             this.pdService.isUserWise_data.subscribe(function (data) {
                 _this.updateDataType(data);
-                console.log('11decc data', data);
             });
             this.pdService.isAllUsers.subscribe(function (data) {
                 if (data) {
@@ -2756,7 +2738,6 @@
         };
         TableviewComponent.prototype.showCurrentDataUser = function () {
             this.tableViewData = this.pdService.dataForTableView(this.currentdataList, this.currentResoursedataList);
-            console.log('11decc tableViewDataBBB', this.replaceTopicAndChapter(this.tableViewData));
             this.tableViewData = this.replaceTopicAndChapter(this.tableViewData);
             //this.tableViewData = this.findAndSimplifyNestedArray(this.tableViewData);
             var newTableViewData;
@@ -2771,8 +2752,6 @@
             if (this.tableViewData) {
                 //this.ueserWiseTableView(this.tableViewData);
                 this.ueserWiseTableView(this.tableViewData);
-                console.log('11decc tableViewData', this.tableViewData);
-                console.log('11decc tableViewDataAAA', this.replaceTopicAndChapter(this.tableViewData));
             }
             //console.log('AAA mlaunchedFromm tableViewData', this.tableViewData)
         };
@@ -2908,6 +2887,438 @@
         data: [{ type: i0.Input }]
     };
 
+    var FullTableViewComponent = /** @class */ (function () {
+        function FullTableViewComponent(pdService) {
+            this.pdService = pdService;
+            this.currentUserArray = [];
+            this.remaningUsers = [];
+            this.allUsers = [];
+            this.usersCheckboxChecked = false;
+            this.isDisplay = false;
+        }
+        Object.defineProperty(FullTableViewComponent.prototype, "data", {
+            set: function (res) {
+                if (res !== null) {
+                    console.log('newtable', JSON.parse(res));
+                    this.jsonResponse = JSON.parse(res);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FullTableViewComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.loadUserData();
+            this.pdService.chartType.subscribe(function (data) {
+                if (data) {
+                    console.log('newTable', data);
+                    _this.isDisplay = data === "Table";
+                }
+            });
+        };
+        FullTableViewComponent.prototype.loadUserData = function () {
+            var _this = this;
+            var json = this.jsonResponse;
+            var usersConsole = json.usersConsole.userConsole;
+            var usersMetadata = json.usersMetadata.userMetadata;
+            var resourcesMetadata = json.resourcesMetadata.resourceMetadata;
+            usersConsole.forEach(function (user) {
+                var _a;
+                var userDetails = usersMetadata.find(function (userMeta) { return userMeta.userId === user.userId; });
+                if (user === null || user === void 0 ? void 0 : user.userConsoleResources) {
+                    var userConsoleResource = (_a = user.userConsoleResources) === null || _a === void 0 ? void 0 : _a.userConsoleResource;
+                    if (userConsoleResource && userConsoleResource.length > 0) {
+                        userConsoleResource.forEach(function (userResource, userIndex) {
+                            var _a, _b, _c, _d, _e, _f;
+                            var resourceId = userResource.resourceId;
+                            var resourceDetails = resourcesMetadata.find(function (resource) { return resource.resourceId === resourceId &&
+                                userResource.type === resource.type; });
+                            var prefix = _this.getDisplayTypeValue(userResource.type);
+                            var title = (resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title) || '';
+                            var tp = (_a = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.teachingPoint) === null || _a === void 0 ? void 0 : _a.title;
+                            var subject = (_b = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.subject) === null || _b === void 0 ? void 0 : _b.title;
+                            var chapter = (_c = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.chapter) === null || _c === void 0 ? void 0 : _c.title;
+                            var grade = (_d = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.grade) === null || _d === void 0 ? void 0 : _d.title;
+                            var startTime = new Date(user === null || user === void 0 ? void 0 : user.startTime);
+                            var endTime = new Date(user === null || user === void 0 ? void 0 : user.endTime);
+                            var totalDuration = _this.formatTime(Math.round((endTime.getTime() - startTime.getTime()) / 1000));
+                            var duration = parseInt((userResource === null || userResource === void 0 ? void 0 : userResource.duration) || '0');
+                            //duration = duration === 0 ? "<span style='colore:red;'>(Seen)</span>" : this.formatTime(duration);
+                            if (((_e = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _e === void 0 ? void 0 : _e.includes('question')) || ((_f = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _f === void 0 ? void 0 : _f.includes('cquestion'))) {
+                                duration = 0;
+                            }
+                            else {
+                                duration = duration === 0 ? "<span class='seenTag' style='color:blue;'>(Seen)</span>" : _this.formatTime(duration);
+                            }
+                            var finalAssetTitle = prefix + " : " + title + " : " + duration;
+                            if (title === '') {
+                                finalAssetTitle = prefix + " : " + duration;
+                            }
+                            _this.currentUserArray.push({
+                                userId: user.userId,
+                                teacherName: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.fullName : '',
+                                subjects: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.userSubjects : '',
+                                date: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.selectedDate : '',
+                                startTime: userIndex === 0 ? _this.formatDate(startTime) : '',
+                                endtime: userIndex === 0 ? _this.formatDate(endTime) : '',
+                                totalDuration: userIndex === 0 ? totalDuration : '',
+                                room: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.terminalIP : '',
+                                tp: tp,
+                                subject: subject,
+                                chapter: chapter,
+                                grade: grade,
+                                details: finalAssetTitle,
+                            });
+                        });
+                    }
+                }
+            });
+            var currentUserIds = this.currentUserArray
+                .map(function (x) { return x.userId; })
+                .filter(function (x, i, a) { return a.indexOf(x) === i; });
+            this.remaningUsers = usersMetadata
+                .filter(function (user) { return !currentUserIds.includes(user.userId); })
+                .map(function (user) {
+                return {
+                    userId: user.userId,
+                    teacherName: user === null || user === void 0 ? void 0 : user.fullName,
+                    subjects: user === null || user === void 0 ? void 0 : user.userSubjects,
+                    date: '',
+                    startTime: '',
+                    endtime: '',
+                    totalDuration: '0s',
+                    room: '',
+                    tp: '',
+                    subject: '',
+                    chapter: '',
+                    grade: '',
+                    details: '',
+                };
+            });
+            this.allUsers = __spread(this.currentUserArray, this.remaningUsers);
+            this.loadTable(this.currentUserArray);
+        };
+        FullTableViewComponent.prototype.getDisplayTypeValue = function (key) {
+            var assetTypeConfig = [
+                { type: 'asset_media', display: 'Media' },
+                { type: 'asset_print', display: 'Print' },
+                { type: 'quiz', display: 'Quiz' },
+                { type: 'question', display: 'Question' },
+                { type: 'chapter', display: 'Chapter' },
+                { type: 'tp', display: 'Topic' },
+                { type: 'whiteboard', display: 'Whiteboard' },
+                { type: 'widget', display: 'Widget' },
+                { type: 'casset_media', display: 'cMedia' },
+                { type: 'casset_print', display: 'cPrint' },
+                { type: 'cquiz', display: 'cQuiz' },
+                { type: 'cquestion', display: 'cQuestion' },
+                { type: 'image', display: 'Image' },
+                { type: 'video', display: 'Video' },
+                { type: 'tools', display: 'Tools' },
+                { type: 'feature', display: 'Feature' },
+            ];
+            var asset = assetTypeConfig.find(function (value) { return value.type === key; });
+            return asset ? asset.display : key;
+        };
+        FullTableViewComponent.prototype.formatDate = function (now) {
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            var seconds = now.getSeconds();
+            var ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12 || 12;
+            return hours.toString().padStart(2, '0') + ":" + minutes
+                .toString()
+                .padStart(2, '0') + ":" + seconds.toString().padStart(2, '0') + " " + ampm;
+        };
+        FullTableViewComponent.prototype.formatTime = function (seconds) {
+            var days = Math.floor(seconds / 86400);
+            var hours = Math.floor((seconds % 86400) / 3600);
+            var minutes = Math.floor((seconds % 3600) / 60);
+            var secs = seconds % 60;
+            if (seconds < 60)
+                return secs + "s";
+            if (seconds < 3600)
+                return minutes + "m " + secs + "s";
+            if (seconds < 86400)
+                return hours + "h " + minutes + "m " + secs + "s";
+            return days + "d " + hours + "h " + minutes + "m " + secs + "s";
+        };
+        FullTableViewComponent.prototype.loadTable = function (data) {
+            /*
+            const tableBody = document.querySelector("#teacherTable tbody");
+        
+              data.forEach((item) => {
+                const row = document.createElement("tr");
+                for (const key in item) {
+                  const cell = document.createElement("td");
+                  cell.textContent = item[key];
+                  if (key !== "userId") {
+                    row.appendChild(cell);
+                  }
+                }
+                tableBody.appendChild(row);
+              });*/
+        };
+        FullTableViewComponent.prototype.toggleUsers = function () {
+            this.usersCheckboxChecked = !this.usersCheckboxChecked;
+            this.loadTable(this.usersCheckboxChecked
+                ? this.allUsers
+                : this.currentUserArray);
+        };
+        FullTableViewComponent.prototype.getMockJson = function () {
+            // Replace with actual data fetching logic
+            return {};
+        };
+        return FullTableViewComponent;
+    }());
+    FullTableViewComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lib-full-table-view',
+                    template: "\n<div class=\"tableViewList\" *ngIf=\"isDisplay\">\n    <!-- <label for=\"usersCheckbox\">All</label>\n        <input\n          type=\"checkbox\"\n          id=\"usersCheckbox\"\n          [checked]=\"usersCheckboxChecked\"\n          (change)=\"toggleUsers()\"\n        /> -->\n    <div class=\"tableArea\">\n        \n        <table id=\"teacherTable\">\n          <thead class=\"tablehead\">\n            <tr>\n              <th>Teacher Name</th>\n              <th>Subjects</th>\n              <th>Date</th>\n              <th>Start Time</th>\n              <th>End Time</th>\n              <th>Total Duration</th>\n              <th>Room</th>\n              <th>Topic</th>\n              <th>Subject</th>\n              <th>Chapter</th>\n              <th>Grade</th>\n              <th>Details</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let user of currentUserArray\">\n              <td>{{ user.teacherName }}</td>\n              <td>{{ user.subjects }}</td>\n              <td>{{ user.date }}</td>\n              <td>{{ user.startTime }}</td>\n              <td>{{ user.endtime }}</td>\n              <td>{{ user.totalDuration }}</td>\n              <td>{{ user.room }}</td>\n              <td>{{ user.tp }}</td>\n              <td>{{ user.subject }}</td>\n              <td>{{ user.chapter }}</td>\n              <td>{{ user.grade }}</td>\n              <td><div [innerHTML]=\"user.details\"></div></td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    \n</div>\n  ",
+                    styles: ["body{font-family:Arial,sans-serif;margin:20px}.tablehead{position:sticky;top:0;background:#fff}table{width:100%;border-collapse:collapse}td,th{border:1px solid #ddd;padding:8px;text-align:left}th{background-color:#f4f4f4;font-weight:700}tr:nth-child(2n){background-color:#f9f9f9}tr:hover{background-color:#f1f1f1}.tableViewList{position:absolute;margin-top:20px}.tableArea{height:700px;overflow:scroll;font-size:12px;margin:20px 5px 5px}.seenTag{color:#00f}"]
+                },] }
+    ];
+    FullTableViewComponent.ctorParameters = function () { return [
+        { type: PrincipalDashboardLibV2Service }
+    ]; };
+    FullTableViewComponent.propDecorators = {
+        data: [{ type: i0.Input }]
+    };
+
+    var SmallTableViewComponent = /** @class */ (function () {
+        function SmallTableViewComponent(pdService) {
+            this.pdService = pdService;
+            this.currentTimeFrameUserArray = [];
+            this.currentUserArray = [];
+            this.remaningUsers = [];
+            this.allUsers = [];
+            this.usersCheckboxChecked = false;
+            this.isDisplay = false;
+        }
+        Object.defineProperty(SmallTableViewComponent.prototype, "data", {
+            set: function (res) {
+                if (res !== null) {
+                    //console.log('smallTable',JSON.parse(res));
+                    this.jsonResponse = JSON.parse(res);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SmallTableViewComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.pdService.openSmallTable$.subscribe(function (data) {
+                if (data) {
+                    _this.isDisplay = true;
+                    var userid = _this.findUserIdByName(data['userDetails'][0]);
+                    var startTime = data['userDetails'][1];
+                    var endTime = data['userDetails'][3];
+                    _this.loadUserData(userid, startTime, endTime);
+                }
+                else {
+                    _this.isDisplay = false;
+                }
+            });
+        };
+        SmallTableViewComponent.prototype.findUserIdByName = function (name) {
+            var json = this.jsonResponse;
+            var user = json.usersMetadata.userMetadata.find(function (user) { return user.fullName === name; });
+            return user ? user.userId : null;
+        };
+        SmallTableViewComponent.prototype.loadUserData = function (userId, inputStartTime, inputEndTime) {
+            var _this = this;
+            var json = this.jsonResponse;
+            var usersConsole = json.usersConsole.userConsole;
+            var usersMetadata = json.usersMetadata.userMetadata;
+            var resourcesMetadata = json.resourcesMetadata.resourceMetadata;
+            var filteredUsersConsole = userId
+                ? usersConsole.filter(function (user) { return user.userId === userId; })
+                : usersConsole;
+            filteredUsersConsole.forEach(function (user) {
+                var _a;
+                var userDetails = usersMetadata.find(function (userMeta) { return userMeta.userId === user.userId; });
+                if (user === null || user === void 0 ? void 0 : user.userConsoleResources) {
+                    var userConsoleResource = (_a = user.userConsoleResources) === null || _a === void 0 ? void 0 : _a.userConsoleResource;
+                    if (userConsoleResource && userConsoleResource.length > 0) {
+                        userConsoleResource.forEach(function (userResource, userIndex) {
+                            var _a, _b, _c, _d, _e, _f;
+                            var resourceId = userResource.resourceId;
+                            var resourceDetails = resourcesMetadata.find(function (resource) { return resource.resourceId === resourceId &&
+                                userResource.type === resource.type; });
+                            var prefix = _this.getDisplayTypeValue(userResource.type);
+                            var title = (resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.title) || '';
+                            var tp = (_a = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.teachingPoint) === null || _a === void 0 ? void 0 : _a.title;
+                            var subject = (_b = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.subject) === null || _b === void 0 ? void 0 : _b.title;
+                            var chapter = (_c = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.chapter) === null || _c === void 0 ? void 0 : _c.title;
+                            var grade = (_d = resourceDetails === null || resourceDetails === void 0 ? void 0 : resourceDetails.grade) === null || _d === void 0 ? void 0 : _d.title;
+                            var startTime = new Date(user === null || user === void 0 ? void 0 : user.startTime);
+                            var endTime = new Date(user === null || user === void 0 ? void 0 : user.endTime);
+                            var totalDuration = _this.formatTime(Math.round((endTime.getTime() - startTime.getTime()) / 1000));
+                            var duration = parseInt((userResource === null || userResource === void 0 ? void 0 : userResource.duration) || '0');
+                            //duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : this.formatTime(duration);                    
+                            if (((_e = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _e === void 0 ? void 0 : _e.includes('question')) || ((_f = userResource === null || userResource === void 0 ? void 0 : userResource.type) === null || _f === void 0 ? void 0 : _f.includes('cquestion'))) {
+                                duration = 0;
+                            }
+                            else {
+                                duration = duration === 0 ? "<span class='dddd'>(Seen)</span>" : _this.formatTime(duration);
+                            }
+                            var finalAssetTitle = prefix + " : " + title + " : " + duration;
+                            if (title === '') {
+                                finalAssetTitle = prefix + " : " + duration;
+                            }
+                            _this.currentUserArray.push({
+                                userId: user.userId,
+                                teacherName: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.fullName : '',
+                                subjects: userIndex === 0 ? userDetails === null || userDetails === void 0 ? void 0 : userDetails.userSubjects : '',
+                                date: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.selectedDate : '',
+                                startTime: userIndex === 0 ? _this.formatDate(startTime) : _this.formatDate(startTime),
+                                endtime: userIndex === 0 ? _this.formatDate(endTime) : _this.formatDate(endTime),
+                                totalDuration: userIndex === 0 ? totalDuration : '',
+                                room: userIndex === 0 ? user === null || user === void 0 ? void 0 : user.terminalIP : '',
+                                tp: tp,
+                                subject: subject,
+                                chapter: chapter,
+                                grade: grade,
+                                details: finalAssetTitle,
+                            });
+                        });
+                    }
+                }
+            });
+            var currentUserIds = this.currentUserArray
+                .map(function (x) { return x.userId; })
+                .filter(function (x, i, a) { return a.indexOf(x) === i; });
+            this.remaningUsers = usersMetadata
+                .filter(function (user) { return !currentUserIds.includes(user.userId); })
+                .map(function (user) {
+                return {
+                    userId: user.userId,
+                    teacherName: user === null || user === void 0 ? void 0 : user.fullName,
+                    subjects: user === null || user === void 0 ? void 0 : user.userSubjects,
+                    date: '',
+                    startTime: '',
+                    endtime: '',
+                    totalDuration: '0s',
+                    room: '',
+                    tp: '',
+                    subject: '',
+                    chapter: '',
+                    grade: '',
+                    details: '',
+                };
+            });
+            this.allUsers = __spread(this.currentUserArray, this.remaningUsers);
+            this.currentTimeFrameUserArray = this.filterDataByCriteria(this.currentUserArray, userId, inputStartTime, inputEndTime);
+            //console.log('smallData', this.currentTimeFrameUserArray)
+        };
+        SmallTableViewComponent.prototype.filterDataByCriteria = function (userData, inputUserId, inputStartTime, inputEndTime) {
+            var parseTime = function (timeString) {
+                if (!timeString)
+                    return null;
+                var _g = __read(timeString.split(' '), 2), time = _g[0], meridian = _g[1];
+                var _h = __read(time.split(':').map(Number), 3), hours = _h[0], minutes = _h[1], seconds = _h[2];
+                var isPM = meridian === 'PM';
+                return new Date(0, 0, 0, isPM && hours < 12 ? hours + 12 : hours, minutes, seconds);
+            };
+            var startTime = parseTime(inputStartTime);
+            var endTime = parseTime(inputEndTime);
+            var filteredData = userData.filter(function (entry) {
+                if (entry.userId !== inputUserId)
+                    return false;
+                if (!entry.startTime || !entry.endtime)
+                    return false;
+                var entryStart = parseTime(entry.startTime);
+                var entryEnd = parseTime(entry.endtime);
+                return entryStart && entryEnd && entryStart >= startTime && entryEnd <= endTime;
+            });
+            return filteredData.map(function (entry, index) { return (Object.assign(Object.assign({}, entry), { subsequentCount: index })); });
+        };
+        SmallTableViewComponent.prototype.getDisplayTypeValue = function (key) {
+            var assetTypeConfig = [
+                { type: 'asset_media', display: 'Media' },
+                { type: 'asset_print', display: 'Print' },
+                { type: 'quiz', display: 'Quiz' },
+                { type: 'question', display: 'Question' },
+                { type: 'chapter', display: 'Chapter' },
+                { type: 'tp', display: 'Topic' },
+                { type: 'whiteboard', display: 'Whiteboard' },
+                { type: 'widget', display: 'Widget' },
+                { type: 'casset_media', display: 'cMedia' },
+                { type: 'casset_print', display: 'cPrint' },
+                { type: 'cquiz', display: 'cQuiz' },
+                { type: 'cquestion', display: 'cQuestion' },
+                { type: 'image', display: 'Image' },
+                { type: 'video', display: 'Video' },
+                { type: 'tools', display: 'Tools' },
+                { type: 'feature', display: 'Feature' },
+            ];
+            var asset = assetTypeConfig.find(function (value) { return value.type === key; });
+            return asset ? asset.display : key;
+        };
+        SmallTableViewComponent.prototype.formatDate = function (now) {
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            var seconds = now.getSeconds();
+            var ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12 || 12;
+            return hours.toString().padStart(2, '0') + ":" + minutes
+                .toString()
+                .padStart(2, '0') + ":" + seconds.toString().padStart(2, '0') + " " + ampm;
+        };
+        SmallTableViewComponent.prototype.formatTime = function (seconds) {
+            var days = Math.floor(seconds / 86400);
+            var hours = Math.floor((seconds % 86400) / 3600);
+            var minutes = Math.floor((seconds % 3600) / 60);
+            var secs = seconds % 60;
+            if (seconds < 60)
+                return secs + "s";
+            if (seconds < 3600)
+                return minutes + "m " + secs + "s";
+            if (seconds < 86400)
+                return hours + "h " + minutes + "m " + secs + "s";
+            return days + "d " + hours + "h " + minutes + "m " + secs + "s";
+        };
+        SmallTableViewComponent.prototype.loadTable = function (data) {
+            /*
+            const tableBody = document.querySelector("#teacherTable tbody");
+        
+              data.forEach((item) => {
+                const row = document.createElement("tr");
+                for (const key in item) {
+                  const cell = document.createElement("td");
+                  cell.textContent = item[key];
+                  if (key !== "userId") {
+                    row.appendChild(cell);
+                  }
+                }
+                tableBody.appendChild(row);
+              });*/
+        };
+        SmallTableViewComponent.prototype.toggleUsers = function () {
+            this.usersCheckboxChecked = !this.usersCheckboxChecked;
+            this.loadTable(this.usersCheckboxChecked
+                ? this.allUsers
+                : this.currentUserArray);
+        };
+        SmallTableViewComponent.prototype.onCloseBtnClick = function () {
+            this.isDisplay = false;
+        };
+        return SmallTableViewComponent;
+    }());
+    SmallTableViewComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lib-small-table-view',
+                    template: "<div id=\"pd-deatilViewContainer\" *ngIf=\"isDisplay\">\n    <div class=\"pd-detailview-header\">\n      <div class=\"pd-detailview-title\">Details</div>\n      <div id=\"pd-closeButton\" (click)=\"onCloseBtnClick()\">+</div>\n    </div>\n\n    <div class=\"newTablesContainer\">\n\n        <table id=\"userDataTable\" class=\"table table-bordered\">\n            <tbody>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Name:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.teacherName || '' }}</label></td>\n                    <th style=\"font-weight: bold;\"><label>Start Time:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.startTime || '' }}</label></td>\n                </tr>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Subject:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.subject || '' }}</label></td>\n                    <th style=\"font-weight: bold;\"><label>End Time:</label></th>\n                    <td><label>{{ currentTimeFrameUserArray[0]?.endtime || '' }}M</label></td>\n                </tr>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Room Details:</label></th>\n                    <td><label> {{ currentTimeFrameUserArray[0]?.room || '' }}</label></td>\n                </tr>\n            </tbody>\n        </table>\n        \n      \n\n          <table class=\"table table-bordered\" id=\"resoureMetadataTable\">\n            <tbody>\n                <tr>\n                    <th style=\"font-weight: bold;\"><label>Subject</label></th>\n                    <th style=\"font-weight: bold;\"><label>Class</label></th>\n                    <th style=\"font-weight: bold;\"><label>Chapter Name</label></th>\n                    <th style=\"font-weight: bold;\"><label>Topic Name</label></th>\n                    <th style=\"font-weight: bold;\"><label>Assets Details</label></th>\n                </tr>\n                <tr *ngFor=\"let item of currentTimeFrameUserArray\">\n                    <td><label>{{ item.subject || '' }}</label></td>\n                    <td><label>{{ item.grade || '' }}</label></td>\n                    <td><label>{{ item.chapter || '' }}</label></td>\n                    <td [innerHTML]=\"item.tp || ''\"></td> <!-- Use innerHTML to handle HTML content -->\n                    <td [innerHTML]=\"item.details || ''\"></td> <!-- Assets Details column -->\n                  </tr>\n            </tbody>\n        </table>\n\n        \n    </div>  \n  </div>",
+                    styles: ["#pd-deatilViewContainer{position:absolute;background:#fff;box-shadow:0 0 17px #818181;font-size:12px;width:50%;max-height:350px;top:140px;left:230px}#pd-deatilViewContainer .pd-detailview-header{position:relative;width:100%;height:35px;background-color:#e6e6e6}#pd-deatilViewContainer .pd-detailview-title{position:absolute;margin-left:5px;font-size:20px;line-height:35px}#pd-deatilViewContainer #pd-closeButton{width:24px;position:absolute;float:right;right:0;cursor:pointer;height:24px;background:#000;border-radius:12px;color:#fff;line-height:22px;text-align:center;font-size:26px;transform:rotate(45deg);margin:5px}#pd-deatilViewContainer #pd-deatilViewTable{overflow:scroll;scroll-behavior:smooth;height:auto;margin:5px;max-height:300px}.newTablesContainer{overflow:scroll;height:310px;padding:3px;background:#fff;margin-bottom:2px}.dddd{color:#00f!important}"]
+                },] }
+    ];
+    SmallTableViewComponent.ctorParameters = function () { return [
+        { type: PrincipalDashboardLibV2Service }
+    ]; };
+    SmallTableViewComponent.propDecorators = {
+        data: [{ type: i0.Input }]
+    };
+
     var PrincipalDashboardLibV2Module = /** @class */ (function () {
         function PrincipalDashboardLibV2Module() {
         }
@@ -2921,7 +3332,9 @@
                         DetailedviewComponent,
                         HeaderComponent,
                         TableviewComponent,
-                        PrincipalDashboardLibV2Component
+                        PrincipalDashboardLibV2Component,
+                        FullTableViewComponent,
+                        SmallTableViewComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -2951,6 +3364,8 @@
     exports.ɵd = HeaderComponent;
     exports.ɵe = ExceldataService;
     exports.ɵf = TableviewComponent;
+    exports.ɵg = FullTableViewComponent;
+    exports.ɵh = SmallTableViewComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });