Merge pull request #79 from LCOGT/feature/remove-test-sites-from-map

Feature/remove test sites from map

Author: timbeccue

.gitignore

@@ -33,4 +33,4 @@ build/
 dist/
 node_modules/
 aws-exports.js
-awsconfiguration.json
+awsconfiguration.json

package-lock.json

@@ -1,9 +1,6 @@
 <template>
   <div id="app">
-    <router-view
-      v-if="$store.state.site_config.did_config_load_yet"
-      class="router-view"
-    />
+    <router-view class="router-view" />
 
     <!-- This is the home for the JS9 DOM elements. They are hidden here and only
     visible when moved into the js9 component. This avoid js9-reloading issues.-->
@@ -30,18 +27,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  beforeCreate () {
-    // Initial load of the config. This is the only time it needs to happen unless the user reloads the site.
-    this.$store.dispatch('site_config/update_config')
-  }
-}
-</script>
-
 <style scoped lang="scss">
 .router-view {
-  //height: calc(100vh - 75px);
   overflow-x: hidden;
 }
 </style>

src/App.vue

@@ -1,42 +1,42 @@
 <template>
-    <json-viewer :value="displayed_config" theme="jv-dark" expanded sort />
+  <json-viewer
+    :value="displayed_config"
+    theme="jv-dark"
+    expanded
+    sort
+  />
 </template>
 
 <script>
-import SiteSelectField from "@/components/FormElements/SiteSelectField";
 
 export default {
-  name: "SiteConfigViewer",
-  components: { SiteSelectField },
+  name: 'SiteConfigViewer',
   props: {
     // Specify a site to load when the component loads
     init_site: {
       type: String,
-      default: () => "all"
-    },
+      default: () => 'all'
+    }
   },
-  data() {
+  data () {
     return {
       loading: false,
-      selected_site: this.init_site,
-    };
-  },
-  mounted() {
-    this.$store.dispatch("site_config/update_config");
+      selected_site: this.init_site
+    }
   },
   computed: {
-    displayed_config() {
-        let global_config = this.$store.state.site_config.global_config;
-        if (this.init_site == "all") {
-            return global_config
-        } else if (Object.keys(global_config).includes(this.init_site)) {
-            return global_config[this.init_site]
-        } else {
-            return {}
-        }
-    },
-  },
-};
+    displayed_config () {
+      const global_config = this.$store.state.site_config.global_config
+      if (this.init_site == 'all') {
+        return global_config
+      } else if (Object.keys(global_config).includes(this.init_site)) {
+        return global_config[this.init_site]
+      } else {
+        return {}
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>

src/components/AdminTools/SiteConfigViewer.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="card-row">
-    <template v-for="s in all_sites_real">
+    <template v-for="s in sites">
       <div
-        v-if="!site_blacklist.includes(s.site)"
         :key="s.site"
         :val="s.site"
         class="card"
@@ -86,20 +85,10 @@ export default {
         this.site_images = response.data
       })
     }
-
   },
 
   computed: {
-    ...mapGetters('site_config', [
-      'all_sites_real',
-      'all_sites_simulated'
-    ]),
-
-    // We want to add enough empty (invisible) test sites so that the cards are sized the same as real sites.
-    // Compute the difference in number. If there are more test sites than real sites, don't add any empty sites.
-    empty_test_sites_needed () {
-      return Math.max(0, Object.keys(this.all_sites_real).length - Object.keys(this.all_sites_simulated).length)
-    }
+    ...mapGetters('site_config', ['all_sites_real'])
   }
 
 }

src/components/SitesOverviewCards.vue

@@ -36,7 +36,7 @@ export default {
     }
   },
   async mounted () {
-    this.global_config = await this.get_global_config()
+    this.global_config = this.$store.state.site_config.global_config
     this.initMap()
   },
   beforeDestroy () {
@@ -46,7 +46,7 @@ export default {
   },
 
   watch: {
-    all_sites () {
+    all_sites_real () {
       this.redrawMapSites()
     },
     site_open_status () {
@@ -96,7 +96,7 @@ export default {
     },
 
     async initMap () {
-      await this.$store.dispatch('sitestatus/getSiteOpenStatus')
+      await this.getSiteOpenStatus
       const sun_pos = { lat: nite.calculatePositionOfSun().lat(), lng: nite.calculatePositionOfSun().lng() }
       const map_center_latitude = 15 // puts sites at a more visibly comfortable location
       this.map = new google.maps.Map(document.getElementById(this.mapName), {
@@ -128,11 +128,14 @@ export default {
       function iwClose () { iw.close() }
       google.maps.event.addListener(this.map, 'click', iwClose)
 
-      let sites = this.all_sites
+      let sites = this.all_sites_real
+
+      // First, remove sites that don't have an available status
       sites = sites.filter(site => {
-        // First, remove sites that don't have an available status
         return Object.keys(this.site_open_status).includes(site.site)
       })
+
+      // Consolidate additional data used to render sites to the map
       sites.forEach(site => {
         const markerData = {
           lat: site.latitude,
@@ -304,7 +307,7 @@ export default {
 
     async redrawMapSites () {
       // Fetch the list of sites to display on the map
-      const sites = this.all_sites.reverse()
+      const sites = this.all_sites_real.reverse()
 
       // For each site, draw a marker with a popup (on click) to visit the site.
       sites.forEach(site => {
@@ -335,7 +338,8 @@ export default {
   },
 
   computed: {
-    ...mapGetters('site_config', ['all_sites']),
+    ...mapState('site_config', ['test_sites']),
+    ...mapGetters('site_config', ['all_sites_real']),
     ...mapState('sitestatus', ['site_open_status']),
     ...mapActions('sitestatus', ['getSiteOpenStatus'])
   }
@@ -344,8 +348,6 @@ export default {
 
 <style lang="scss" scoped>
 .google-map {
-    //width: 100vw;
-    //height: 50vh;
     min-width: 50px;
     min-height: 50px;
     width: 100%;

src/components/maps/TheWorldMap.vue

@@ -84,6 +84,19 @@
               @click="set_coordinates_from_aladin"
             />
           </div>
+          <div class="search-slew-container">
+            <command-button
+              :data="mount_slew_radec_command"
+              style="margin-bottom: 1em"
+              class="command-slew-button is-small is-success is-outlined"
+            />
+            <TargetSearchField
+              v-model="mount_object"
+              label="Search for objects..."
+              size="is-small"
+              @results="handle_object_name_search"
+            />
+          </div>
 
           <div class="sidebar-tabs">
             <div
@@ -111,11 +124,6 @@
 
           <div class="sidebar-tab-content">
             <div v-if="active_target_tab=='telescope controls'">
-              <TargetSearchField
-                v-model="mount_object"
-                label="Search for objects..."
-                @results="handle_object_name_search"
-              />
               <command-tabs-accordion
                 :controls="['Telescope', 'Camera']"
                 :init-instrument-open-view="0"
@@ -567,6 +575,7 @@ import TheSkyChart from '@/components/celestialmap/TheSkyChart'
 import DateTimeLocationPicker from '@/components/celestialmap/DateTimeLocationPicker'
 import TargetSearchField from '@/components/FormElements/TargetSearchField'
 import CommandTabsAccordion from '@/components/CommandTabsAccordion'
+import CommandButton from '@/components/FormElements/CommandButton'
 // import Celestial from '@/components/celestialmap/celestial'
 import celestial from 'd3-celestial'
 
@@ -586,6 +595,7 @@ export default {
     TargetSearchField,
     TheSkyChart,
     CommandTabsAccordion,
+    CommandButton,
     DateTimeLocationPicker,
     TargetCard
   },
@@ -1208,7 +1218,19 @@ $toggle-button-height: 32px;
     width: 100%;
     height: 300px;
     background-color:grey;
-    margin-bottom: 3em;
+}
+
+.search-slew-container {
+  position: relative;
+  height: 6em;
+  margin-top: 10px;
+  display:flex;
+  flex-direction: row-reverse;
+  gap: 1em;
+  padding-right: 1em;
+}
+.command-slew-button {
+  margin-top: 30px;
 }
 
 .command-tab-accordion {

src/components/sitepages/SiteTargets.vue

@@ -38,9 +38,12 @@ Vue.use(Auth0Plugin, {
 // Hide the 'you are running in development mode!' warning in the console.
 Vue.config.productionTip = false
 
-new Vue({
-  el: '#app',
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+// Load the config for all sites
+store.dispatch('site_config/update_config').then(() => {
+  new Vue({
+    el: '#app',
+    router,
+    store,
+    render: h => h(App)
+  }).$mount('#app')
+})

src/main.js

@@ -7,8 +7,7 @@ import _ from 'lodash'
 import axios from 'axios'
 
 const state = {
-
-  test_sites: ['tst', 'tst001', 'dht', 'sintezsim'],
+  test_sites: ['tst', 'tst001', 'dht'],
 
   global_config: {},
   is_site_selected: false,
@@ -236,13 +235,11 @@ const actions = {
      * This action gets the most recent config from AWS, which applies to all
      * observatories in the network.
      */
-  update_config ({ commit, dispatch, rootState }) {
+  async update_config ({ commit, rootState }) {
     const url = `${rootState.api_endpoints.active_api}/all/config`
-    axios.get(url).then(response => {
-      commit('setGlobalConfig', response.data)
-    }).catch(error => {
-      console.warn(error)
-    })
+    const response = await axios.get(url)
+    commit('setGlobalConfig', response.data)
+    return response.data
   },
 
   set_default_filter_option ({ commit, getters }) {