popup makes succesfull calls to api, adressed issues 32, 15, 42

index.html

@@ -15,6 +15,9 @@
 
   <main class="container"> 
     <section class="leftpane">
+      <div id="spinner" style="display: none;">
+        <img src="icons/load.gif" alt="Loading..." />
+      </div>
       <div id="evaluation" class="boxed center2">🎓️ No evaluation yet</div>
       <div id="score" class="center" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
     </section>
@@ -31,12 +34,14 @@
   <footer>
     <div class="w3-container">
       <div class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue">
-        <p>Copyright (c) 2023 Maastricht University Library</p>
+        <p>More info? Visit the<a href="https://github.com/MaastrichtU-Library/the-FAIR-extension">Github repo 😸</a></p>
         <p><a href="https://github.com/MaastrichtU-Library/the-FAIR-extension/blob/main/disclaimer.md">Privacy Disclaimer</a> last update 24/10/22</p>
         <p><a href="https://github.com/MaastrichtU-Library/the-FAIR-extension/releases/tag/Beta">the FAIR extension</a> v1.1.0 - beta</p>
+        <p>Copyright (c) 2023 Maastricht University Library</p>
       </div>
     </div>
   </footer>
 </body>
 <script src="contentScript.js"></script>
+<script src="popup.js"></script>
 </html>

popup.js

@@ -1,13 +1,10 @@
-// Copyright 2022 Maastricht University Library
+// Copyright 2023 Maastricht University Library
 
 // Use of this source code is governed by an Apache 2.0-style
 // license that can be found in the LICENSE file or at
 // https://github.com/MaastrichtU-Library/the-FAIR-extension/blob/main/LICENSE
 
-// Original version of bundle.js
-
-var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
-
+//var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
 
 function fair(id){
  // posts evaluation using the doi and the FAIR api
@@ -19,10 +16,12 @@ function fair(id){
  xhr.setRequestHeader("Content-Type", "application/json");
 
  xhr.onreadystatechange = function () {
+  console.log(xhr.status, xhr.responseText);
   //If response is successful
     if (xhr.readyState === 4) {
        var data=xhr.responseText;
        var jsonResponse = JSON.parse(data);
+       console.log(jsonResponse);
        //Add evaluation score
        document.getElementById("evaluation").innerHTML = "<br>🎓️ Evaluation score: <br><br>"+jsonResponse["score"]+"/22";
        //Add score percentage
@@ -38,58 +37,42 @@ function fair(id){
 
        var find = ["f1-data-identifier-persistent","f1-metadata-identifier-persistent","f1-metadata-identifier-unique","f2-grounded-metadata" ,"f2-structured-metadata" , "f3-data-identifier-in-metadata" ,"f3-metadata-identifier-in-metadata","f4-searchable" ] 
        var findStatement = ["F1 - Data identifier is persistent", "F1 - Resource identifier is persistent", "F1 - Resource metadata identifier is unique", "F2 - Metadata is grounded and machine-readable" , "F2 - Metadata is structured" , "F3 - Data identifier explicitly in metadata", "F3 - Metadata identifier explicitly in metadata", "F4 - The resource is indexed in a searchable resource"];
-
-
        var access  = ["a1-metadata-protocol","a1-data-protocol","a1-data-authorization","a1-metadata-authorization","a2-metadata-persistent"]
-
        var accessState  = ["A1.1 - Metadata uses an open free protocol for metadata retrieval", "A1.1 - Uses an open free protocol for data retrieval", "A1.2 - Data authentication and authorization" , "A1.2 - Metadata authentication and authorization", "A2 - Metadata is persistent"]
-
        var inter =  ["i1-data-knowledge-representation-semantic", "i1-data-knowledge-representation-structured" , "i1-metadata-knowledge-representation-semantic", "i1-metadata-knowledge-representation-structured","i2-fair-vocabularies-known","i2-fair-vocabularies-resolve","i3-metadata-contains-outward-links"]
-
        var interState = ["I1 - Data uses a formal semantic knowledge representation language", "I1 - Data uses a formal structured knowledge representation language", "I1 - Metadata uses a formal semantic knowledge representation language", "I1 - Metadata uses a formal structured knowledge representation language", "I2 - Metadata uses FAIR Vocabularies registered in known repositories", "I2 - Metadata uses resolvable FAIR Vocabularies", "I3 - Metadata contains outward references"]
        var reuse =  ["r1-includes-license","r1-includes-standard-license"]
-
        var reuseState = ["R2 - Metadata include a License","R1 - Metadata includes a standard License"]
 
-
-
-
-
-
-
+
        //Findable
        for(let i=0;i<find.length;i++){
         if(jsonResponse["contains"][url+find[i]][0][testurl][0]["@value"]==1){
           document.getElementById("find").innerHTML += "<div  class=\"boxed3 center3\" style=\"background-color:white\">&nbsp ✅ &nbsp" + findStatement[i]+"</div>" 
-
         }
        }
        //accessible
        for(let i=0;i<access.length;i++){
         if(jsonResponse["contains"][url+access[i]][0][testurl][0]["@value"]==1){
           document.getElementById("access").innerHTML += "<div  class=\"boxed3 center3\" style=\"background-color:white\">&nbsp ✅ &nbsp" + accessState[i]+"</div>" 
-
         }
        }
        //inetroperable
        for(let i=0;i<inter.length;i++){
         if(jsonResponse["contains"][url+inter[i]][0][testurl][0]["@value"]==1){
           document.getElementById("inter").innerHTML += "<div  class=\"boxed3 center3\" style=\"background-color:white\">&nbsp ✅ &nbsp" + interState[i]+"</div>" 
-
         }
        }
        //Reusable 
        for(let i=0;i<reuse.length;i++){
         if(jsonResponse["contains"][url+reuse[i]][0][testurl][0]["@value"]==1){
           document.getElementById("reuse").innerHTML += "<div  class=\"boxed3 center3\" style=\"background-color:white\">&nbsp ✅ &nbsp" + reuseState[i]+"</div>" 
-
         }
        }
        //Clear storage when done to avoid wrong results in different pages
        chrome.storage.local.clear() 
        return [0,1];
 
-
     }};
  // data used to post request
  var data = `{
@@ -98,34 +81,41 @@ function fair(id){
  }`;
 
  xhr.send(data);
-
 }
 
-
-
-
-
-
-function getDoi() {
-  // Retreive the DOI indicated by the user from chrome storage
-      chrome.storage.local.get(['key'], async function(result) {
+// function getDoi() {
+//   // Retreive the DOI indicated by the user from chrome storage
+//       chrome.storage.local.get(['key'], async function(result) {
+//       //Check if there are any DOI's in the storage
+//       if(result.key != null){ 
+//       //Let the user know evaluation is under process        
+//       document.getElementById("evaluation").innerText = "🎓️Evaluation under process";
+//       //Start the evaluation
+//       const results = await fair(result.key);
+//       }
+//     });
+//   }
+  function getDoi() {
+    // Retrieve the DOI indicated by the user from chrome storage
+    chrome.storage.local.get(['key'], async function(result) {
       //Check if there are any DOI's in the storage
       if(result.key != null){ 
-      //Let the user know evaluation is under process        
-      document.getElementById("evaluation").innerText = "🎓️Evaluation under process";
-      //Start the evaluation
-      const results = await fair(result.key);
-
+        //Let the user know evaluation is under process
+        document.getElementById("evaluation").innerText = "🎓️Evaluation under process";
+        // Show spinner
+        document.getElementById('spinner').style.display = 'block';
+        // Start the evaluation
+        await fair(result.key);
+        // Hide spinner
+        document.getElementById('spinner').style.display = 'none';
       }
-
-
-
-
-
     });
-
-  }
-
+  }  
 
 // initiates popup functions
-getDoi();
+//getDoi();
+
+document.addEventListener('DOMContentLoaded', (event) => {
+  // The DOM is fully loaded. You can safely manipulate it here.
+  getDoi();
+});

styles.css

@@ -53,6 +53,7 @@ body, html {
     border: 0.01px solid lightgray;
     padding: 1em;
     flex-shrink: 0;
+    font-size: 9px;
 }
 
 #find {
@@ -161,3 +162,10 @@ div[role="progressbar"]::before {
     counter-reset: percentage var(--value);
     content: counter(percentage) '%';
 }
+
+#spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+