add document table of content

src/scripts/views/popup/service.ts

@@ -229,20 +229,28 @@ function populateListDocCategories(allPoints: ServicePoint[], documents: Service
     } catch (error) {
         console.warn(error)
     }
-    console.log(documents)
-    // Split points by Document and display them seperatly
+
+    // prepare the Document Index
+    const indexElement = document.getElementById("documentIndex") as HTMLElement
+    indexElement.style = "display:block"
+
+        // Split points by Document and display them seperatly
     for (let i of documents) {
         const element = i;
 
         const docPoints = allPoints.filter((point:ServicePoint) => point.document_id === element.id)
         const sortedPoints = filterPoints(docPoints)
 
-        if (sortedPoints.blocker.length + sortedPoints.bad.length + sortedPoints.neutral.length + sortedPoints.good.length > 0) {
+
+        addDocumentToIndex(element, indexElement, sortedPoints)
+
+        // check if the document has points and either display it with the points else add them to the bottom
+        if (sortedPoints.blocker.length + sortedPoints.bad.length + sortedPoints.neutral.length + sortedPoints.good.length > 0) { //documents with points
             const doc = document.createElement('div');
             const temp = `
             <div class="">
                 <div class="documentHeader">
-                    <h3 class="documentTitle">${element.name}</h3>
+                    <h3 id="documents_${element.id}" class="documentTitle" >${element.name}</h3>
                     <a href="${element.url}" target="_blank">Read Original></a>
                 </div>
                     <div id="pointList_${element.id}" class="pointList">
@@ -265,7 +273,7 @@ function populateListDocCategories(allPoints: ServicePoint[], documents: Service
             const doc = document.createElement('div');
             const temp = `
                 <div class="documentHeader">
-                    <h3 class="documentTitle">${element.name}</h3>
+                    <h3 class="documentTitle" id="documents_${element.id}">${element.name}</h3>
                     <a href="${element.url}" target="_blank">Read Original></a>
                 </div>`;
             doc.innerHTML = temp.trim();
@@ -364,6 +372,57 @@ function createPointList(pointsFiltered: ServicePoint[], pointsList: HTMLElement
         pointsList.appendChild(divider);
     }
 }
+function addDocumentToIndex(serviceDocument:ServiceDocument, indexElement:HTMLElement, points:FilteredPoints) { //creates an index of the documents
+    const list = document.createElement('li')
+    const item = document.createElement('a')
+
+    const pointSummary = docuemntIndexPointSummary(points)
+
+    item.innerText = serviceDocument.name
+    item.href = `#documents_${serviceDocument.id}`
+
+
+    list.appendChild(item)
+    list.appendChild(pointSummary)
+
+    indexElement.appendChild(list)
+
+    function docuemntIndexPointSummary(points:FilteredPoints) { //adds the number of points of each classification as a summary below the document index entry
+        const pointsSummanry = document.createElement("div")
+        pointsSummanry.classList = "indexSummaryWraper"
+
+        createSummary("good")
+        createSummary("neutral")
+        createSummary("bad")
+        createSummary("blocker")
+
+        return pointsSummanry
+
+        function createSummary(classification:"good" | "bad" | "neutral" | "blocker") {
+            const wrapper = document.createElement("div")
+            const count = points[classification].length
+
+            //add the classification icon
+            const img = document.createElement("img");
+            img.src = `icons/${classification}.svg`
+
+            wrapper.appendChild(img)
+
+
+            //add number of points of classification
+            const div = document.createElement("div");
+            div.innerText = `${count}`;
+            div.classList.add("indexSummary", classification);
+
+            wrapper.appendChild(div)
+
+            pointsSummanry.appendChild(wrapper)
+        }
+    }
+}
+
+
+
 
 
 function renderCuratorTag(status: string): string {

src/views/popup.html

@@ -98,7 +98,7 @@ <h3 class="center" id="notreviewedShown" style="display: none">
         <h3 style="display: none">
             Points for <a class="serviceName">...</a>:
         </h3>
-
+        <ul id="documentIndex" class="documentIndex pointList" style="display: none;"></ul>
         <div id="documentList">
             <a style="display: none">...</a>
         </div>

src/views/style/popup.css

@@ -149,7 +149,7 @@ html {
     padding-left: 10px;
 }
 
-#title {
+.title {
     font-size: 2rem;
     padding: 0.5rem;
     margin-bottom: 0.5rem;
@@ -307,9 +307,45 @@ h3 {
         text-decoration: underline;
 
 }
-.documentHeader > h3 {
+.documentHeader h3 {
     all:revert
 }
+.documentIndex {
+    padding : 1rem
+}
+.documentIndex > li {
+    margin-bottom : 0.4rem;
+}
+.documentIndex > li > a {
+    color : black
+}
+.indexSummaryWraper {
+    display: flex;
+    justify-content: space-around;
+}
+.indexSummary {
+    font-size: small;
+}
+.indexSummaryWraper > div {
+    display: flex;
+    align-items: center;
+}
+.indexSummaryWraper > div > img {
+    height: 13px;
+}
+.indexSummaryWraper > div > .good {
+   color: #46a546;
+}
+.indexSummaryWraper > div > .neutral {
+    color: #969696;
+}
+.indexSummaryWraper > div > .bad {
+    color: #f89406;
+}
+.indexSummaryWraper > div > .blocker {
+    color: #c43c35;
+}
+
 
 button {
     border: none;
@@ -359,6 +395,9 @@ button {
 .dark-mode .documentHeader  a {
     color: #cccbcb;
 }
+.dark-mode .documentIndex > li > a {
+    color : #fbfbfd
+}
 
 #toggleButton,
 #settingsButton,
@@ -375,7 +414,7 @@ button {
     box-shadow: 0px 0px 5px black;
 }
 
-.dark-mode #title {
+.dark-mode .title {
     text-shadow: 0px 0px 5px black;
 }
 
@@ -397,4 +436,4 @@ button {
     padding: .5rem;
     margin-bottom: .5rem;
     line-height: 1;
-}
+}