loading spinner

docs/available-imagery-products.md

@@ -1,18 +1,22 @@
 # Available Imagery Products
 
 <div id="page-container" class="rst-content">
+
  <div class="section">
- <category-selector
- v-bind:categories="categories"
- v-bind:selected-category="selectedCategory"
- v-bind:select-category="selectCategory">
- </category-selector>
- <p id="imagery-products">
- <measurement-container 
- v-for="measurement in measurements" 
- :key="measurement.title" 
- :measurement="measurement">
- </measurement-container> 
- </p>
+ <div v-if="loading" class="loader"></div>
+ <div v-else>
+ <category-selector
+ v-bind:categories="categories"
+ v-bind:selected-category="selectedCategory"
+ v-bind:select-category="selectCategory">
+ </category-selector>
+ <p id="imagery-products">
+ <measurement-container 
+ v-for="measurement in measurements" 
+ :key="measurement.title" 
+ :measurement="measurement">
+ </measurement-container> 
+ </p>
+ </div>
  </div>
 </div>

docs/css/loading-spinner.css

@@ -0,0 +1,15 @@
+.loader {
+ border: 16px solid #f3f3f3; /* Light grey */
+ border-top: 16px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 120px;
+ height: 120px;
+ animation: spin 2s linear infinite;
+ text-align: center;
+ margin: 200px auto;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}

docs/css/style.css

@@ -14,7 +14,7 @@ code {
  font-size: 12px !important;
 }
 .wy-nav-content {
- max-width: 1200px;
+ max-width: 1400px;
 }
 th {
  text-align: center;
@@ -28,6 +28,9 @@ th {
 }
 
 /* Imagery Products Styles */
+#page-container {
+ min-height: 600px;
+}
 #page-container h2 {
  margin: 10px 10px 20px 0;
 }

docs/javascript/imagery-products.js

@@ -76,105 +76,101 @@ Vue.component('measurement-container', {
  }
 })
 
-$(document).ready(() => { 
 
- let allLayers = {};
- let allMeasurements = {};
- let allCategories = {};
- let selectedCategory = 'All';
+function getMeasurementsForCategory(category, allCategories, allLayers, allMeasurements) { 
+ const keys = allCategories[category].measurements;
+ const mForCategory = {}
+ keys.forEach(key => {
+ const measurement = allMeasurements[key]
+ measurement.layers = [];
+ mForCategory[key] = measurement;
+ });
 
- function getMeasurementsForCategory(category) { 
- const keys = allCategories[category].measurements;
- const mForCategory = {}
- keys.forEach(key => {
- const measurement = allMeasurements[key]
- measurement.layers = [];
- mForCategory[key] = measurement;
- });
+ Object.keys(allLayers).forEach(key => {
+ const layer = allLayers[key];
+ let { layergroup } = layer; 
+ if (!layergroup) {
+ layergroup = 'Other';
+ }
+ if (layergroup === 'Reference') {
+ layergroup = 'Reference Map'
+ }
+ if (!mForCategory[layergroup]) {
+ console.error(layergroup);
+ return;
+ }
+ mForCategory[layergroup].layers.push(layer); 
+ });
 
- Object.keys(allLayers).forEach(key => {
- const layer = allLayers[key];
- let { layergroup } = layer; 
- if (!layergroup) {
- layergroup = 'Other';
- }
- if (layergroup === 'Reference') {
- layergroup = 'Reference Map'
- }
- if (!mForCategory[layergroup]) {
- console.error(layergroup);
- return;
- }
- mForCategory[layergroup].layers.push(layer); 
- });
+ return Object.keys(mForCategory).map(key => mForCategory[key]);
+}
 
- return Object.keys(mForCategory).map(key => mForCategory[key]);
+function getDate (layer, key) {
+ if (!layer[key]) {
+ return key === 'endDate' && layer['startDate'] ? 'Present' : '';
  }
+ const { period, inactive } = layer;
+ const date = period === 'subdaily' ? layer[key] : layer[key].split('T')[0];
+ return (key === 'endDate' && !inactive) ? 'Present' : date;
+}
 
- function getDate (layer, key) {
- if (!layer[key]) {
- return key === 'endDate' && layer['startDate'] ? 'Present' : '';
+function formatLayers (layers) {
+ Object.keys(layers).map(id => {
+ const layer = layers[id];
+ const projections = Object.keys(layer.projections);
+ const startDate = getDate(layer, 'startDate');
+ const endDate = getDate(layer, 'endDate');
+ const format = (layer.format || ' / ').split('/')[1];
+ const product = (layer.conceptIds || []).map(({shortName}) => shortName).join(', ');
+ const [ platform, instrument ] = (layer.subtitle || ' / ').split('/');
+
+ layers[id] = {
+ ...layer,
+ projections,
+ format,
+ product,
+ startDate,
+ endDate,
+ platform,
+ instrument,
  }
- const { period, inactive } = layer;
- const date = period === 'subdaily' ? layer[key] : layer[key].split('T')[0];
- return (key === 'endDate' && !inactive) ? 'Present' : date;
- }
+ });
+ return layers;
+}
 
- function formatLayers (layers) {
- Object.keys(layers).map(id => {
- const layer = layers[id];
- const projections = Object.keys(layer.projections);
- const startDate = getDate(layer, 'startDate');
- const endDate = getDate(layer, 'endDate');
- const format = (layer.format || ' / ').split('/')[1];
- const product = (layer.conceptIds || []).map(({shortName}) => shortName).join(', ');
- const [ platform, instrument ] = (layer.subtitle || ' / ').split('/');
-
- layers[id] = {
- ...layer,
- projections,
- format,
- product,
- startDate,
- endDate,
- platform,
- instrument,
- }
- });
- return layers;
+const app = new Vue({
+ el: '#page-container',
+ data: {
+ loading: true,
+ allMeasurements: undefined,
+ allLayers: undefined,
+ measurements: undefined,
+ categories: undefined, 
+ selectedCategory: 'All',
+ },
+ methods: {
+ selectCategory: function(event) {
+ const category = event.target.options[event.target.options.selectedIndex].text
+ this.measurements = getMeasurementsForCategory(category, this.categories, this.allLayers, this.allMeasurements);
+ this.selectedCategory = category;
+ },
  }
+});
 
- function main( data ) {
- allLayers = formatLayers(data.layers);
- allMeasurements = data.measurements;
- allCategories = data.categories["science disciplines"];
- const measurements = getMeasurementsForCategory(selectedCategory);
-
- const app = new Vue({
- el: '#page-container',
- data: {
- measurements: measurements,
- categories: allCategories, 
- selectedCategory: selectedCategory,
- },
- methods: {
- selectCategory: function(event) {
- const category = event.target.options[event.target.options.selectedIndex].text
- this.measurements = getMeasurementsForCategory(category);
- this.selectedCategory = category;
- }
- }
- });
-
+const requestSettings = {
+ url: "https://worldview.sit.earthdata.nasa.gov/config/wv.json",
+ type: "GET",
+ crossDomain: true,
+ dataType: "json",
+ success: function (data) {
+ app.loading = false;
+ app.allMeasurements = data.measurements;
+ app.allLayers = formatLayers(data.layers);
+ app.categories = data.categories['science disciplines'];
+ app.measurements = getMeasurementsForCategory(app.selectedCategory, app.categories, app.allLayers, app.allMeasurements)
  }
+}
 
- const requestSettings = {
- url: "https://worldview.sit.earthdata.nasa.gov/config/wv.json",
- type: "GET",
- crossDomain: true,
- dataType: "json",
- success: main
- }
+$(document).ready(() => { 
  $.ajax(requestSettings);
-
 });

mkdocs.yml

@@ -10,6 +10,7 @@ nav:
  - Accessing via Map Libraries and Scripts: map-library-usage.md
 extra_css:
  - css/style.css
+ - css/loading-spinner.css
 extra_javascript:
  - https://cdn.jsdelivr.net/npm/vue@2
  - javascript/overrides.js