Skip to content

Commit

Permalink
Add modifications to oscar_station.xml and station_oscar_export.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@JerryHamm @fabiosato
JerryHamm authored and fabiosato committed Oct 7, 2024
1 parent 852e9b9 commit 5efab58
Show file tree
Hide file tree
Showing 2 changed files with 236 additions and 19 deletions.
20 changes: 10 additions & 10 deletions api/wx/oscar_surface_xml/oscar_station.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
235 changes: 226 additions & 9 deletions api/wx/templates/wx/station_oscar_export.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -96,6 +96,7 @@ <h6 style="color: #9e9e9e;"><span style="color: red;">**</span>Only stations mee

</div>


</form>

<!-- spinner and overlay -->
Expand All @@ -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;
}
Expand Down Expand Up @@ -224,20 +315,123 @@ <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';
document.getElementById('spinner-text').style.display = 'none';

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() {
Expand Down Expand Up @@ -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 () {
Expand Down Expand Up @@ -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 %}

0 comments on commit 5efab58

Please sign in to comment.