From 5efab58162674da5733c1bd8253199e847fa3403 Mon Sep 17 00:00:00 2001
From: JerryHamm <jeremiahhammond14@gmail.com>
Date: Sun, 15 Sep 2024 00:32:11 +0000
Subject: [PATCH] Add modifications to oscar_station.xml and
 station_oscar_export.html

---
 api/wx/oscar_surface_xml/oscar_station.xml    |  20 +-
 api/wx/templates/wx/station_oscar_export.html | 235 +++++++++++++++++-
 2 files changed, 236 insertions(+), 19 deletions(-)

diff --git a/api/wx/oscar_surface_xml/oscar_station.xml b/api/wx/oscar_surface_xml/oscar_station.xml
index 6f28a36..09ff598 100644
--- a/api/wx/oscar_surface_xml/oscar_station.xml
+++ b/api/wx/oscar_surface_xml/oscar_station.xml
@@ -3,7 +3,7 @@
     <gml:boundedBy xsi:nil="true"/>
     <wmdr:headerInformation>
         <wmdr:Header>
-            <wmdr:fileDateTime>2024-09-14T03:57:20Z</wmdr:fileDateTime>
+            <wmdr:fileDateTime>2024-09-15T00:25:07Z</wmdr:fileDateTime>
                 <wmdr:recordOwner>
                     <gmd:CI_ResponsibleParty id="wmo_meteoswiss">
 
@@ -56,8 +56,8 @@
     </wmdr:headerInformation>
     <wmdr:facility>
         <wmdr:ObservingFacility>
-            <gml:identifier codeSpace="0-84-45462-234">0-84-45462-234</gml:identifier>
-            <gml:name>Station-6</gml:name>
+            <gml:identifier codeSpace="0-84-5-OSCSURF31">0-84-5-OSCSURF31</gml:identifier>
+            <gml:name>OSCAR-SURFACE-31</gml:name>
             <gml:boundedBy xsi:nil="true"/>
             <wmdr:responsibleParty>
                 <wmdr:ResponsibleParty>
@@ -73,7 +73,7 @@
                     </wmdr:responsibleParty>
                     <wmdr:validPeriod xlink:type="simple">
                         <gml:TimePeriod gml:id="id-time_orga">
-                            <gml:beginPosition>2024-04-15T01:36:03Z</gml:beginPosition>
+                            <gml:beginPosition>2024-04-14T18:23:29Z</gml:beginPosition>
                             <gml:endPosition/>
                         </gml:TimePeriod>
                     </wmdr:validPeriod>
@@ -83,26 +83,26 @@
                 <wmdr:GeospatialLocation>
                     <wmdr:geoLocation>
                         <gml:Point gml:id="id-coord">
-                            <gml:pos>16.656654410720172 -88.94643742789677 2.0</gml:pos>
+                            <gml:pos>17.18625645791305 -88.61620246942381 3.0</gml:pos>
                         </gml:Point>
                     </wmdr:geoLocation>
                     <wmdr:validPeriod xlink:type="simple">
                         <gml:TimePeriod gml:id="id-time_coord">
-                            <gml:beginPosition>2024-04-15T01:36:03Z</gml:beginPosition>
+                            <gml:beginPosition>2024-04-14T18:23:29Z</gml:beginPosition>
                             <gml:endPosition/>
                         </gml:TimePeriod>
                     </wmdr:validPeriod>
                 </wmdr:GeospatialLocation>
             </wmdr:geospatialLocation>
             <wmdr:facilityType xlink:type="simple" xlink:href="http://codes.wmo.int/wmdr/FacilityType/landFixed"/>
-			<wmdr:dateEstablished>2024-09-14Z</wmdr:dateEstablished>
+			<wmdr:dateEstablished>2024-09-15Z</wmdr:dateEstablished>
             <wmdr:wmoRegion xlink:type="simple" xlink:href="http://codes.wmo.int/wmdr/WMORegion/northCentralAmericaCaribbean"/>
             <wmdr:territory>
                 <wmdr:Territory>
                     <wmdr:territoryName xlink:type="simple" xlink:href="http://codes.wmo.int/wmdr/TerritoryName/BLZ"/>
                     <wmdr:validPeriod xlink:type="simple">
                         <gml:TimePeriod gml:id="id-time_territory">
-                            <gml:beginPosition>2024-04-15T01:36:03Z</gml:beginPosition>
+                            <gml:beginPosition>2024-04-14T18:23:29Z</gml:beginPosition>
                             <gml:endPosition/>
                         </gml:TimePeriod>
                     </wmdr:validPeriod>
@@ -116,7 +116,7 @@
                             <wmdr:reportingStatus xlink:type="simple" xlink:href="http://codes.wmo.int/wmdr/ReportingStatus/operational"/>
                             <wmdr:validPeriod xlink:type="simple">
 							<gml:TimePeriod gml:id="id-time_prog">
-								<gml:beginPosition>2024-04-15T01:36:03Z</gml:beginPosition>
+								<gml:beginPosition>2024-04-14T18:23:29Z</gml:beginPosition>
 								<gml:endPosition/>
 							</gml:TimePeriod>
                             </wmdr:validPeriod>
@@ -127,7 +127,7 @@
             <wmdr:observation xlink:type="simple">
                 <wmdr:ObservingCapability>
                     <gml:boundedBy xsi:nil="true"/>
-                    <wmdr:facility xlink:type="simple" xlink:href="http://codes.wmo.int/wmdr/0-84-45462-234"/>
+                    <wmdr:facility xlink:type="simple" xlink:href="http://codes.wmo.int/wmdr/0-84-5-OSCSURF31"/>
                     <wmdr:programAffiliation xlink:type="simple" xlink:href="http://codes.wmo.int/wmdr/ProgramAffiliation/nonAffiliated"/>
                     <wmdr:observation xlink:type="simple">
                         <om:OM_Observation>
diff --git a/api/wx/templates/wx/station_oscar_export.html b/api/wx/templates/wx/station_oscar_export.html
index 1a35a1a..b20dda5 100644
--- a/api/wx/templates/wx/station_oscar_export.html
+++ b/api/wx/templates/wx/station_oscar_export.html
@@ -15,24 +15,24 @@
     <form id="oscar-station-form">
 
       <div>
-        <div id="min_oscar_error_container" class="hide-msg" style="padding: 5px; background-color: #f8d7da; border-left: 5px solid #f44336; border-radius: 0px 20px 20px 0px; width: 30%; padding-right: 10px;">
+        <div id="min_oscar_error_container" class="hide-msg">
 
           <h6 style="font-weight: bolder; color: #d32f2f; cursor: pointer;" onclick="openStatusMsg()">
+            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="font-size: larger;"></i>&nbsp&nbsp
             OSCAR Upload Failed!
             <i class="fa fa-chevron-circle-down" aria-hidden="true" style="float: right; font-size: larger;"></i>
           </h6>
 
         </div>
 
-        <div id="oscar_error_container" class="hide-msg" style="padding: 10px; background-color: #f8d7da; border-left: 5px solid #f44336; border-radius: 0px 20px 20px 0px;">
+        <div id="oscar_error_container" class="hide-msg">
 
           <h4 style="font-weight: bolder; color: #d32f2f;">
               <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> OSCAR Upload Failed!
               <i class="fa fa-chevron-circle-up" aria-hidden="true" style="float: right; cursor: pointer;" onclick="closeStatusMsg()"></i>
           </h4>
   
-          <div style="color: #d32f2f; font-size: 1rem; line-height: 1.5; white-space: pre-wrap;"> <!-- Preserves line breaks -->
-            Lorem ipsum color
+          <div id="status_msg">
           </div>
   
         </div>
@@ -58,8 +58,8 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee
         <tbody>
           {% for station in object_list %}
             <tr>
-              <td id="{{ station.name }}">
-                <label>
+              <td>
+                <label id="{{ station.name }}">
                   <input type="checkbox" class="filled-in" name="selected_ids[]" value="{{ station.wigos }}"/>
                   <span></span>
                 </label>
@@ -96,6 +96,7 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee
 
       </div>
 
+
     </form>
 
     <!-- spinner and overlay -->
@@ -107,6 +108,96 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee
   </div>
 </div>
 <style>
+.station_status_msg {
+  padding: 10px;
+  margin-bottom: 10px;
+  position: relative;
+  transition: background-color 0.3s ease; /* Smooth background color transition */
+  border-radius: 20px;
+}
+
+.station_status_msg:hover {
+  background-color: rgb(85, 84, 84); /* Background changes on hover */
+}
+
+.station_status_msg:hover h6{
+ color: white;
+}
+
+.clickable-heading {
+  cursor: pointer; /* Make the heading look clickable */
+  color: #b01f1f; /* Default color */
+  transition: color 0.2s ease; /* Smooth color transition */
+}
+
+/* Change the h6 text color on hover */
+.clickable-heading:hover {
+  color: white;
+}
+
+/* Change h6 text color to white when content is visible */
+.station_status_msg.active-background .clickable-heading {
+  color: white;
+}
+
+.hidden-content {
+  display: none; /* Initially hidden */
+}
+
+.visible-content {
+  display: block;
+  color: white; /* Text color when visible */
+  transition: color 0.3s ease; /* Smooth text color transition */
+}
+
+.active-background {
+  background-color: rgb(85, 84, 84); /* Background color when content is visible */
+}
+
+.close-btn-bottom {
+  margin-top: 10px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 2px;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.close-btn-bottom:hover {
+  background-color: #d32f2f; /* Darker shade on hover */
+}
+
+
+  /* oscar status msg styling start*/
+  #min_oscar_error_container {
+    padding: 5px; 
+    background-color: #f8d7da; 
+    border-left: 5px solid #f44336; 
+    border-radius: 0px 20px 20px 0px; 
+    width: 30%; 
+    padding-right: 10px;
+  }
+
+  #oscar_error_container {
+    padding: 10px; 
+    background-color: #f8d7da; 
+    border-left: 5px solid #f44336; 
+    border-radius: 0px 20px 20px 0px;
+    max-height: 50vh;
+    overflow: auto;
+  }
+
+  #status_msg {
+    color: #d32f2f; 
+    font-size: 1rem; 
+    line-height: 1.5; 
+    white-space: pre-wrap;
+  }
+
+  /* oscar status msg styling end*/
+
   .show-msg {
     display: block;
   }
@@ -224,12 +315,105 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee
 
                 // console.log(response.status_station_names);
 
-                // display the error messages
-                document.getElementById('oscar_error_container').classList.remove('hide-msg');
+                // unselect options
+                unSelectAll();
+
+                var oscar_status_msg = response.oscar_status_msg;
+
+                var station_names = response.status_station_names;
+
+                // clear the status message container of any existing messages
+                document.getElementById("status_msg").innerHTML = "";
+
+
+                // looping through status messages
+                for (let index = 0; index < oscar_status_msg.length; index++) {
+                  let msg_dict = oscar_status_msg[index];
+
+                  let msg = '';
+
+                  // Check if 'code' exists in msg_dict
+                  if (msg_dict.hasOwnProperty('code')) {
+                      if (msg_dict['code'] === 401) {
+                          msg = "Incorrect API token!\nTo be able to access OSCAR a valid API token is required.\nEnter the correct API token or please contact OSCAR service desk!";
+                      } else if (msg_dict['code'] === 412) {
+                          msg = msg_dict['description'];
+                      } else {
+                          msg = "An error occurred when attempting to add a station to OSCAR during station creation!";
+                      }
+                  }
+
+                  // Check if 'xmlStatus' exists in msg_dict
+                  else if (msg_dict.hasOwnProperty('xmlStatus')) {
+                      if (msg_dict['xmlStatus'] === 'SUCCESS') {
+                          // replace tick box with success icon
+                          clearAndInsertIcon(station_names[index]);
+                          continue;
+                      } else {
+                          msg = msg_dict['logs'];
+                      }
+                  }
+
+                  // display the error messages
+                  document.getElementById('oscar_error_container').classList.remove('hide-msg');
+
+                  // Create a div element
+                  let div = document.createElement('div');
+                  div.className = 'station_status_msg'; // Add class to the div
+
+                  // Create an h6 element and add text from the looped data
+                  let heading = document.createElement('h6');
+                  heading.innerHTML = `<b>${station_names[index]}</b>&nbsp;<i class="fa fa-info-circle" aria-hidden="true"></i>`;
+                  heading.classList.add('clickable-heading'); // Add class for cursor and hover effect
+
+                  // Create a paragraph element and add text from the looped data, initially hidden
+                  let paragraph = document.createElement('p');
+                  paragraph.innerHTML = msg;
+                  paragraph.classList.add('hidden-content'); // Initially hidden content
+
+                  // Create a close button for the bottom, initially hidden
+                  let closeBtnBottom = document.createElement('button');
+                  closeBtnBottom.innerHTML = 'Close';
+                  closeBtnBottom.classList.add('close-btn-bottom', 'hidden-content'); // Initially hidden
+                  closeBtnBottom.type = 'button';
+
+                  // Append the heading, paragraph, and bottom close button to the div
+                  div.appendChild(heading);
+                  div.appendChild(paragraph);
+                  div.appendChild(closeBtnBottom);
+
+                  // Add a click event listener to the heading to toggle visibility of the paragraph and close button
+                  heading.addEventListener('click', function () {
+                    const isVisible = paragraph.classList.contains('visible-content');
+                    paragraph.classList.toggle('visible-content', !isVisible); // Toggle content visibility
+                    closeBtnBottom.classList.toggle('visible-content', !isVisible); // Toggle close button visibility
+                    div.classList.toggle('active-background', !isVisible); // Toggle background color
+                  });
+
+                  // Add a click event listener to the bottom close button
+                  closeBtnBottom.addEventListener('click', function () {
+                    paragraph.classList.remove('visible-content'); // Hide content
+                    closeBtnBottom.classList.remove('visible-content'); // Hide close button
+                    div.classList.remove('active-background'); // Reset background color
+                  });
+
+                  // Finally, append the div to the target element
+                  document.getElementById('status_msg').appendChild(div);
+                }
+
+
+                // Check if the status_msg container has no child elements or no text content then hide oscar_error_container
+                if (!document.getElementById("status_msg").hasChildNodes() || document.getElementById("status_msg").textContent.trim() === "") {
+                    // Add a class to hide the div
+                    document.getElementById("oscar_error_container").classList.add("hide-msg");
+                }
+
+
                 // move to the top of the page
                 window.scrollTo({top:0, behavior: 'smooth',});
                 
-            } else {
+            } 
+            else {
                 // hide the spinner, text, and overlay
                 document.getElementById('overlay').style.display = 'none';
                 document.getElementById('spinner').style.display = 'none';
@@ -237,7 +421,17 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee
 
                 console.log(response.message);  // Show the error message
 
+                // display the status msg in the error container
+                document.getElementById('status_msg').innerText = response.oscar_status_msg[0]['description'];
+
+                // unselect options
+                unSelectAll();
+
+                // show the error container
                 document.getElementById('oscar_error_container').classList.remove('hide-msg');
+
+                // move to the top of the page
+                window.scrollTo({top:0, behavior: 'smooth',});
             }
         },
       error: function() {
@@ -276,6 +470,11 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee
     submitForm();
   }
 
+  // unselect all options
+  function unSelectAll() {
+    $('input[name="selected_ids[]"]').prop('checked', false);
+  }
+
 
   // disable submit selected button until an option is selected
   document.addEventListener('DOMContentLoaded', function () {
@@ -312,6 +511,24 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee
     document.getElementById('oscar_error_container').classList.remove('show-msg');
   }
 
+  // clear div and insert a sucess icon
+  function clearAndInsertIcon(divId) {
+    let selectedDiv = document.getElementById(divId);
+
+    // Clear the div content
+    selectedDiv.innerHTML = '';
+
+    // Create the icon element
+    let icon = document.createElement('i');
+    icon.className = 'fa fa-check-square';
+    icon.setAttribute('aria-hidden', 'true');
 
+    // Add style to make the icon green and of decent size
+    icon.style.color = 'green';
+    icon.style.fontSize = '2.5em'; // Adjust size as needed
+
+    // Insert the icon into the div
+    selectedDiv.appendChild(icon);
+  }
 </script>
 {% endblock %}