edit spinner etc

static/frontend.js

@@ -1,3 +1,53 @@
+// const response = [
+//     {
+//       "id": 446929723,
+//       "library_name": "DHT20",
+//       "hw_config": {
+//         "protocol": "I2C",
+//         "pin_connection_from_hw_to_arduino": {
+//           "arduino_mega": [["SDA", "21"], ["SCL", "21"]],
+//           "arduino_uno": [["SDA", "A4"], ["SCL", "A5"]],
+//           }
+//       },
+//       "usage_patterns": {
+//         "DHT20": [
+//           "DHT20.begin DHT20.lastRead DHT20.read DHT20.getHumidity DHT20.getTemperature",
+//           "DHT20.begin DHT20.read DHT20.getHumidity DHT20.getTemperature",
+//           "DHT20.begin DHT20.read DHT20.getHumidity"
+//         ], 
+//         "DHT12": [
+//           "DHT12.begin",
+//           "DHT12.begin DHT12.lastRead DHT12.read DHT12.getHumidity DHT12.getTemperature",
+//           "DHT12.begin DHT12.read DHT12.getHumidity DHT12.getTemperature"
+//         ]
+//       },
+//       "Sensor Type": "Sensors",
+//       "Github URL": "https://github.com/RobTillaart/DHT20",
+//       "Description": "Arduino library for I2C DHT20 temperature and humidity sensor."
+//     },
+//     {
+//       "id": 255120181,
+//       "library_name": "DHT12",
+//       "hw_config": {
+//         "protocol": "I2C",
+//         "pin_connection_from_hw_to_arduino": {
+//           "arduino_mega": [["SDA", "20"], ["SCL", "21"]],
+//           "arduino_uno": [["SDA", "A4"], ["SCL", "A5"]],
+//           }
+//         },
+//       "usage_patterns": {
+//         "DHT12": [
+//           "DHT12.begin",
+//           "DHT12.begin DHT12.lastRead DHT12.read DHT12.getHumidity DHT12.getTemperature",
+//           "DHT12.begin DHT12.read DHT12.getHumidity DHT12.getTemperature"
+//         ]
+//       },
+//       "Sensor Type": "Sensors",
+//       "Github URL": "https://github.com/RobTillaart/DHT12",
+//       "Description": "Arduino library for I2C DHT12 temperature and humidity sensor."
+//     }
+//   ];
+  
   //display the pop up with more information
   function onClickMore(string){
     document.getElementById(string).style.display ='block';
@@ -7,18 +57,17 @@
   function onOut(string){
     document.getElementById(string).style.display ='none';
   }
-  
+ 
   async function getResponse(url, user_query){
     try {
-      //let predictions = await fetch(url,{
-      //  method: 'GET',
-       // body: JSON.stringify({'user_query': user_query})
-      //});
       let final_url = url + '?user_query=' + user_query
       console.log(final_url)
+
       let predictions = await fetch(final_url);
       console.log(predictions)
+      
       return predictions.json()
+    
     } catch (error) {
       console.log(error)
     }
@@ -26,32 +75,28 @@
     
   //when retrieve is clicked
   async function onSubmit(){
-    
-    
+    document.getElementById("spinner").style.display = 'none';
+    document.getElementById("spinner").style.display = 'block';
+    document.getElementById("main-parent").innerHTML = '';
 
     let user_query = document.getElementById("exampleFormControlInput1").value
-    console.log(user_query)
     // let url_query = "http://10.27.32.183:8111/predict"
-
+    
     if (user_query != ''){
       document.getElementById("spinner").style.display = 'block';
       
-      console.log("making predictions")
       let url_query =  "/predict"
       let predictions = await getResponse(url_query, user_query)
-      console.log("displaying predictions")
       
       document.getElementById("spinner").style.display = 'none';
-      document.getElementById("grey-container").className = 'album py-5 bg-light';
+      // document.getElementById("grey-container").className = 'album py-5 bg-light';
       
       let response = predictions['predictions']
-      console.log(response)
-      
       //loop through number of results
       html = ''
       var w = 0
       for(let i=0; i < response.length; i++){
-        console.log(i)
+ 
         html += '<div class="row g-4 m-2" id="predictions">';                                           
         html +=   '<div class="col-6">';                                                                
         html +=     '<div class="card border-primary mb-3">';                                           
@@ -151,7 +196,7 @@
           html += '<div style="margin-bottom: 15px" class="accordion" id="accordionPanelsStayOpenExample"' + response[i]["id"] + key + '>'; //1
           
           for (let x=0; x < usages_arr.length; x++){
-            let pattern = usages_arr[x].split(" ")
+            let pattern = usages_arr[x].split("[API-SEP]")
             html += '<div data-bs-toggle="collapse" data-bs-target="#patternCollapse' + response[i]["id"] + key + x + '">'; //2
             html += '<div class="accordion-item">'; //3
             html += '<h2 class="accordion-header" id="panelsStayOpen-heading' + response[i]["id"] + key +'">';
@@ -221,4 +266,7 @@
       //append footer to allow going back to the top
       document.getElementById("footer").innerHTML = (html2);
     }
+    else {
+      document.getElementById("spinner").style.display = 'none';
+    }
   }