From 700d8b2d1fba405a379f688b640f7ed7b1b5efef Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Tue, 2 Mar 2021 17:07:48 -0800
Subject: [PATCH 01/15] Get formatFloat function from lib

---
 src/components/CoInvestigatorTable.vue |  5 ++---
 src/utils.js                           | 15 +--------------
 src/views/ProposalDetail.vue           |  5 +++--
 src/views/SemesterAdminTable.vue       |  4 ++--
 src/views/SemesterDetail.vue           |  4 ++--
 5 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/components/CoInvestigatorTable.vue b/src/components/CoInvestigatorTable.vue
index f46b9b2..8409a1f 100644
--- a/src/components/CoInvestigatorTable.vue
+++ b/src/components/CoInvestigatorTable.vue
@@ -115,16 +115,15 @@
 </template>
 <script>
 import $ from 'jquery';
-import { OCSMixin } from 'ocs-component-lib';
+import { OCSMixin, OCSUtil } from 'ocs-component-lib';
 
-import { formatFloat } from '@/utils.js';
 import { confirmMixin, clearAndSetErrorsMixin } from '@/components/util/utilMixins.js';
 
 export default {
   name: 'CoInvestigatorTable',
   filters: {
     formatFloat: function(value, precision) {
-      return formatFloat(value, precision);
+      return OCSUtil.formatFloat(value, precision);
     }
   },
   mixins: [OCSMixin.paginationAndFilteringMixin, confirmMixin, clearAndSetErrorsMixin],
diff --git a/src/utils.js b/src/utils.js
index 964f271..4a6b2b4 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -157,18 +157,6 @@ function getFieldDescription(value) {
   }
 }
 
-function formatFloat(value, precision) {
-  /* Round a number and format it the given precision */
-  let valueAsNumber = Number(value);
-  precision = precision || 0;
-  if (valueAsNumber === 0 || valueAsNumber) {
-    const multiplier = Math.pow(10, precision);
-    return (Math.round(valueAsNumber * multiplier) / multiplier).toFixed(precision);
-  } else {
-    return value;
-  }
-}
-
 function extractTopLevelErrors(errors) {
   let topLevelErrors = [];
   if (_.isString(errors)) {
@@ -415,6 +403,5 @@ export {
   tooltipConfig,
   getCookie,
   csrfSafeMethod,
-  extractTopLevelErrors,
-  formatFloat
+  extractTopLevelErrors
 };
diff --git a/src/views/ProposalDetail.vue b/src/views/ProposalDetail.vue
index b9940c0..b07d892 100644
--- a/src/views/ProposalDetail.vue
+++ b/src/views/ProposalDetail.vue
@@ -211,8 +211,9 @@
 <script>
 import _ from 'lodash';
 import $ from 'jquery';
+import { OCSUtil } from 'ocs-component-lib';
 
-import { formatFloat, tooltipConfig } from '@/utils.js';
+import { tooltipConfig } from '@/utils.js';
 import DataLoader from '@/components/DataLoader.vue';
 import CoInvestigatorTable from '@/components/CoInvestigatorTable.vue';
 import ProposalInvitations from '@/components/ProposalInvitations.vue';
@@ -223,7 +224,7 @@ export default {
   name: 'ProposalDetail',
   filters: {
     formatFloat: function(value, precision) {
-      return formatFloat(value, precision);
+      return OCSUtil.formatFloat(value, precision);
     }
   },
   components: {
diff --git a/src/views/SemesterAdminTable.vue b/src/views/SemesterAdminTable.vue
index f845941..e6dc143 100644
--- a/src/views/SemesterAdminTable.vue
+++ b/src/views/SemesterAdminTable.vue
@@ -131,8 +131,8 @@
 <script>
 import $ from 'jquery';
 import _ from 'lodash';
+import { OCSUtil } from 'ocs-component-lib';
 
-import { formatFloat } from '@/utils.js';
 import DataLoader from '@/components/DataLoader.vue';
 import { getDataListMixin } from '@/components/util/getDataMixins.js';
 
@@ -143,7 +143,7 @@ export default {
   },
   filters: {
     formatFloat: function(value, precision) {
-      return formatFloat(value, precision);
+      return OCSUtil.formatFloat(value, precision);
     }
   },
   mixins: [getDataListMixin],
diff --git a/src/views/SemesterDetail.vue b/src/views/SemesterDetail.vue
index 9bc4ba4..5c99ebf 100644
--- a/src/views/SemesterDetail.vue
+++ b/src/views/SemesterDetail.vue
@@ -94,8 +94,8 @@
 </template>
 <script>
 import _ from 'lodash';
+import { OCSUtil } from 'ocs-component-lib';
 
-import { formatFloat } from '@/utils.js';
 import DataLoader from '@/components/DataLoader.vue';
 import { getDataListMixin } from '@/components/util/getDataMixins.js';
 
@@ -106,7 +106,7 @@ export default {
   },
   filters: {
     formatFloat: function(value, precision) {
-      return formatFloat(value, precision);
+      return OCSUtil.formatFloat(value, precision);
     },
     initial: function(value) {
       return value.charAt(0);

From e021ab3f912276e56a3de8fa6baf81c83398dd3e Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Tue, 2 Mar 2021 17:09:02 -0800
Subject: [PATCH 02/15] Get requestgroupheader from lib

---
 src/components/RequestgroupHeader.vue | 144 --------------------------
 src/views/RequestgroupDetail.vue      |  73 ++++++++++++-
 2 files changed, 68 insertions(+), 149 deletions(-)
 delete mode 100644 src/components/RequestgroupHeader.vue

diff --git a/src/components/RequestgroupHeader.vue b/src/components/RequestgroupHeader.vue
deleted file mode 100644
index fb588fd..0000000
--- a/src/components/RequestgroupHeader.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <div>
-    <b-row>
-      <b-col>
-        <h2 class="text-break">
-          {{ requestgroup.name }}
-        </h2>
-        <h4>RequestGroup # {{ requestgroup.id }}</h4>
-      </b-col>
-    </b-row>
-    <div class="d-flex flex-wrap">
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <div class="font-weight-bold">State</div>
-        <div :class="requestgroup.state | stateToBsClass('text')" class="text-truncate" :title="requestgroup.state">
-          <i :class="requestgroup.state | stateToIcon" />{{ requestgroup.state }}
-        </div>
-      </b-col>
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <!-- TODO: Translate this -->
-        <div class="font-weight-bold">Updated</div>
-        <div>{{ requestgroup.modified | formatDate }}</div>
-      </b-col>
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <div class="font-weight-bold">Submitted</div>
-        <div>{{ requestgroup.created | formatDate }}</div>
-      </b-col>
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <div class="font-weight-bold">Proposal</div>
-        <div>
-          <router-link :to="{ name: 'proposalDetail', params: { id: requestgroup.proposal } }">
-            {{ requestgroup.proposal }}
-          </router-link>
-        </div>
-      </b-col>
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <div class="font-weight-bold text-truncate">Submitter</div>
-        <div>{{ requestgroup.submitter }}</div>
-      </b-col>
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <div class="font-weight-bold">IPP</div>
-        <div>{{ requestgroup.ipp_value | formatIpp }}</div>
-      </b-col>
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <!-- TODO: Translate this -->
-        <div class="font-weight-bold" title="Observation Type">Type</div>
-        <div>{{ requestgroup.observation_type }}</div>
-      </b-col>
-      <b-col lg="auto" cols="12" class="p-1 flex-lg-fill">
-        <span class="mr-0 px-0">
-          <div class="dropdown">
-            <button
-              id="rgOptionsButton"
-              type="button"
-              class="btn btn-outline-secondary dropdown-toggle btn-block px-0"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-              title="Options"
-              block
-            >
-              <i class="fas fa-cog"></i><span class="d-inline-block d-lg-none">&nbsp;Options</span>
-            </button>
-            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="rgOptionsButton">
-              <router-link class="dropdown-item" title="Copy this request" :to="{ name: 'create', query: { requestgroupid: requestgroup.id } }">
-                <i class="fa fa-copy" /> Copy
-              </router-link>
-              <a
-                v-if="userIsAuthenticated && requestgroup.state == 'PENDING'"
-                class="dropdown-item"
-                title="Cancel this request"
-                @click="cancelRequestGroup"
-              >
-                <i class="fa fa-times" /> Cancel
-              </a>
-            </div>
-          </div>
-        </span>
-      </b-col>
-    </div>
-  </div>
-</template>
-<script>
-import $ from 'jquery';
-import { OCSUtil } from 'ocs-component-lib';
-
-import { formatFloat } from '@/utils.js';
-
-export default {
-  name: 'RequestgroupHeader',
-  filters: {
-    stateToBsClass: function(state, prefix) {
-      return OCSUtil.stateToBsClass(state, prefix);
-    },
-    stateToIcon: function(state) {
-      return OCSUtil.stateToIcon(state);
-    },
-    formatIpp: function(ipp) {
-      return formatFloat(ipp, 6);
-    },
-    formatDate: function(date) {
-      return OCSUtil.formatDate(date);
-    }
-  },
-  props: {
-    requestgroup: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    userIsAuthenticated: function() {
-      return this.$store.state.userIsAuthenticated;
-    },
-    observationPortalApiUrl: function() {
-      return this.$store.state.urls.observationPortalApi;
-    }
-  },
-  methods: {
-    cancelRequestGroup: function() {
-      let that = this;
-      if (confirm('Cancel this request? This action cannot be undone')) {
-        $.ajax({
-          type: 'POST',
-          url: this.observationPortalApiUrl + '/api/requestgroups/' + this.requestgroup.id + '/cancel/',
-          contentType: 'application/json',
-          success: function() {
-            // TODO: Redirect with router
-            window.location = '/requestgroups/' + that.requestgroup.id + '/';
-          },
-          error: function(response) {
-            if (response.status === 429) {
-              alert(
-                'Your account has submitted too many cancel requests in a day, so your request to cancel has been throttled. Please contact support.'
-              );
-            } else {
-              alert(response.responseJSON.errors[0]);
-            }
-          }
-        });
-      }
-    }
-  }
-};
-</script>
diff --git a/src/views/RequestgroupDetail.vue b/src/views/RequestgroupDetail.vue
index 804764f..de0a894 100644
--- a/src/views/RequestgroupDetail.vue
+++ b/src/views/RequestgroupDetail.vue
@@ -1,6 +1,48 @@
 <template>
   <data-loader :data-loaded="requestgroupLoaded" :data-load-error="requestgroupLoadError" :data-not-found="requestgroupNotFound">
-    <requestgroup-header :requestgroup="requestgroup" />
+    <b-row>
+      <b-col>
+        <h2 class="text-break">
+          {{ requestgroup.name }}
+        </h2>
+        <h4>RequestGroup # {{ requestgroup.id }}</h4>
+      </b-col>
+    </b-row>
+    <ocs-request-group-header
+      :requestgroup="requestgroup"
+      :proposalLink="{ to: { name: 'proposalDetail', params: { id: requestgroup.proposal } } }"
+      show-extra-column
+    >
+      <template v-slot:extra-column-content>
+        <div class="dropdown">
+          <button
+            id="rgOptionsButton"
+            type="button"
+            class="btn btn-outline-secondary dropdown-toggle btn-block px-0"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+            title="Options"
+            block
+          >
+            <i class="fas fa-cog"></i><span class="d-inline-block d-lg-none">&nbsp;Options</span>
+          </button>
+          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="rgOptionsButton">
+            <router-link class="dropdown-item" title="Copy this request" :to="{ name: 'create', query: { requestgroupid: requestgroup.id } }">
+              <i class="fa fa-copy" /> Copy
+            </router-link>
+            <a
+              v-if="userIsAuthenticated && requestgroup.state == 'PENDING'"
+              class="dropdown-item"
+              title="Cancel this request"
+              @click="cancelRequestGroup"
+            >
+              <i class="fa fa-times" /> Cancel
+            </a>
+          </div>
+        </div>
+      </template>
+    </ocs-request-group-header>
     <b-row>
       <b-col>
         <b-breadcrumb class="bg-light">
@@ -50,7 +92,6 @@
 import $ from 'jquery';
 import _ from 'lodash';
 
-import RequestgroupHeader from '@/components/RequestgroupHeader.vue';
 import RequestDetail from '@/components/RequestDetail.vue';
 import RequestRow from '@/components/RequestRow.vue';
 import DataLoader from '@/components/DataLoader.vue';
@@ -58,7 +99,6 @@ import DataLoader from '@/components/DataLoader.vue';
 export default {
   name: 'RequestgroupDetail',
   components: {
-    RequestgroupHeader,
     RequestDetail,
     RequestRow,
     DataLoader
@@ -80,8 +120,8 @@ export default {
     observationPortalApiUrl: function() {
       return this.$store.state.urls.observationPortalApi;
     },
-    dataLoaded: function() {
-      return this.requestgroupLoaded && this.archiveTokenLoaded;
+    userIsAuthenticated: function() {
+      return this.$store.state.userIsAuthenticated;
     },
     numberOfRequests: function() {
       if (this.requestgroup.requests) {
@@ -183,6 +223,29 @@ export default {
         .always(function() {
           that.requestgroupLoaded = true;
         });
+    },
+    cancelRequestGroup: function() {
+      let that = this;
+      if (confirm('Cancel this request? This action cannot be undone')) {
+        $.ajax({
+          type: 'POST',
+          url: this.observationPortalApiUrl + '/api/requestgroups/' + this.requestgroup.id + '/cancel/',
+          contentType: 'application/json',
+          success: function() {
+            // TODO: Redirect with router
+            window.location = '/requestgroups/' + that.requestgroup.id + '/';
+          },
+          error: function(response) {
+            if (response.status === 429) {
+              alert(
+                'Your account has submitted too many cancel requests in a day, so your request to cancel has been throttled. Please contact support.'
+              );
+            } else {
+              alert(response.responseJSON.errors[0]);
+            }
+          }
+        });
+      }
     }
   }
 };

From 8fc337beca8b3320adcc50634d7ead11140dc077 Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Thu, 4 Mar 2021 12:54:27 -0800
Subject: [PATCH 03/15] Get request overview from lib

---
 src/components/RequestRow.vue    | 151 ++++++++++++-------------------
 src/views/RequestgroupDetail.vue |   2 +-
 src/views/SemesterAdminTable.vue |   2 +-
 3 files changed, 58 insertions(+), 97 deletions(-)

diff --git a/src/components/RequestRow.vue b/src/components/RequestRow.vue
index 27c3274..3611ad3 100644
--- a/src/components/RequestRow.vue
+++ b/src/components/RequestRow.vue
@@ -1,87 +1,54 @@
 <template>
-  <b-row class="m-0 border position-relative">
-    <div class="state-color-marker" :class="request.state | stateToBsClass('bg')"></div>
-    <b-col md="10">
+  <ocs-request-overview
+    :request="request"
+    :instruments="instruments"
+    :request-link="requestLink"
+    :extra-column-attrs="{ cols: 12, md: 6, 'align-self': 'center' }"
+    show-extra-column
+  >
+    <template v-slot:extra-column-content>
       <b-row>
-        <b-col md="4" class="requestgroup-block border-right">
-          <router-link v-if="link" class="requestgroup-title" :to="{ name: 'requestDetail', params: { id: request.id } }">
-            # {{ request.id }}
-          </router-link>
-          <span v-else class="requestgroup-title"># {{ request.id }}</span>
-          <p>
-            <i class="far fa-clock" />
-            <span title="Total exposure time + observing overhead">Duration: {{ request.duration }} seconds</span>
-          </p>
-          <p>
-            <i class="fa fa-camera" />
-            Instrument: {{ instrumentName }}
-          </p>
-        </b-col>
-        <b-col md="4" class="requestgroup-block border-right">
-          <p>
-            <span :class="request.state | stateToBsClass('text')">
-              <i :class="request.state | stateToIcon" />
-              {{ request.state }}
-            </span>
-          </p>
-          <p>
-            <i class="fa fa-clipboard-check" />
-            Acceptability Threshold: {{ request.acceptability_threshold }}%
-          </p>
-          <p>
-            <i class="fa fa-calendar" />
-            {{ request.modified | formatDate }}
-          </p>
+        <b-col align-self="center" class="border-right">
+          <b-row align-h="center">
+            <b-button-group>
+              <b-button :href="requestApiUrl" variant="outline-secondary">View in API</b-button>
+              <b-button v-if="requestIsComplete" variant="outline-secondary" :disabled="!archiveDataIsAvailable" @click="downloadAllData">
+                <i class="fa fa-fw fa-download" /> Download
+              </b-button>
+            </b-button-group>
+          </b-row>
         </b-col>
-        <b-col md="4" class="requestgroup-block my-auto">
-          <b-row class="border-right mx-auto">
+        <b-col align-self="center" class="text-center">
+          <template v-if="requestIsComplete">
+            <b-img v-if="thumbnailUrl" :src="thumbnailUrl" fluid :alt="frame.filename" :title="frame.filename" />
+            <div v-else-if="thumbnailError">
+              {{ thumbnailError }}
+            </div>
+            <div v-else-if="archiveError">
+              {{ archiveError }}
+            </div>
+            <i v-else class="fa fa-spin fa-spinner" />
+          </template>
+          <template v-else-if="requestIsPending">
             <div>
-              <div class="btn-group mr-2" role="group" aria-label="button group">
-                <a :href="requestApiUrl" class="btn btn-outline-secondary"> <i class="fa fa-fw fa-code" /> View in API </a>
-                <button
-                  v-if="request.state === 'COMPLETED'"
-                  class="btn btn-outline-secondary"
-                  type="button"
-                  :disabled="!archiveDataIsAvailable"
-                  @click="downloadAllData"
-                >
-                  <i class="fa fa-fw fa-download" /> Download
-                </button>
+              <template v-if="schedulingInformation.found">
+                <div>
+                  <strong>{{ schedulingInformation.site }}</strong>
+                  <br />
+                  {{ schedulingInformation.start | formatDate }} to
+                  {{ schedulingInformation.end | formatDate }}
+                </div>
+              </template>
+              <div v-else-if="schedulingInformation.error">
+                {{ schedulingInformation.error }}
               </div>
+              <i v-else class="fa fa-spinner fa-spin" />
             </div>
-          </b-row>
+          </template>
         </b-col>
       </b-row>
-    </b-col>
-    <b-col md="2" class="text-center my-auto">
-      <template v-if="request.state == 'COMPLETED'">
-        <b-img v-if="thumbnailUrl" :src="thumbnailUrl" fluid :alt="frame.filename" :title="frame.filename" />
-        <div v-else-if="thumbnailError">
-          {{ thumbnailError }}
-        </div>
-        <div v-else-if="archiveError">
-          {{ archiveError }}
-        </div>
-        <i v-else class="fa fa-spin fa-spinner" />
-      </template>
-      <template v-else-if="request.state == 'PENDING'">
-        <div>
-          <template v-if="schedulingInformation.found">
-            <div>
-              <strong>{{ schedulingInformation.site }}</strong>
-              <br />
-              {{ schedulingInformation.start | formatDate }} to
-              {{ schedulingInformation.end | formatDate }}
-            </div>
-          </template>
-          <div v-else-if="schedulingInformation.error">
-            {{ schedulingInformation.error }}
-          </div>
-          <i v-else class="fa fa-spinner fa-spin" />
-        </div>
-      </template>
-    </b-col>
-  </b-row>
+    </template>
+  </ocs-request-overview>
 </template>
 <script>
 import $ from 'jquery';
@@ -158,6 +125,19 @@ export default {
     },
     archiveDataIsAvailable: function() {
       return this.frame.id ? true : false;
+    },
+    requestLink: function() {
+      if (this.link) {
+        return { to: { name: 'requestDetail', params: { id: this.request.id } } };
+      } else {
+        return {};
+      }
+    },
+    requestIsComplete: function() {
+      return this.request.state === 'COMPLETED';
+    },
+    requestIsPending: function() {
+      return this.request.state === 'PENDING';
     }
   },
   created: function() {
@@ -216,22 +196,3 @@ export default {
   }
 };
 </script>
-<style scoped>
-.requestgroup-block > p {
-  margin: 0px;
-  padding-bottom: 0px;
-}
-.requestgroup-title {
-  font-size: 1em;
-  margin-left: 4px;
-  font-weight: 600;
-}
-.state-color-marker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  max-width: 10px;
-  min-width: 10px;
-  height: 100%;
-}
-</style>
diff --git a/src/views/RequestgroupDetail.vue b/src/views/RequestgroupDetail.vue
index de0a894..dd95f12 100644
--- a/src/views/RequestgroupDetail.vue
+++ b/src/views/RequestgroupDetail.vue
@@ -10,7 +10,7 @@
     </b-row>
     <ocs-request-group-header
       :requestgroup="requestgroup"
-      :proposalLink="{ to: { name: 'proposalDetail', params: { id: requestgroup.proposal } } }"
+      :proposal-link="{ to: { name: 'proposalDetail', params: { id: requestgroup.proposal } } }"
       show-extra-column
     >
       <template v-slot:extra-column-content>
diff --git a/src/views/SemesterAdminTable.vue b/src/views/SemesterAdminTable.vue
index e6dc143..f248f0e 100644
--- a/src/views/SemesterAdminTable.vue
+++ b/src/views/SemesterAdminTable.vue
@@ -320,7 +320,7 @@ export default {
     },
     sumFormatter: function(field) {
       let data = _.map(this.filteredTimeallocations, field);
-      return formatFloat(_.sum(data), 3);
+      return OCSUtil.formatFloat(_.sum(data), 3);
     },
     getTdClass: function(allocation, used) {
       return allocation > 0 && used >= allocation ? 'bg-danger' : '';

From 2966ceca6987a11c4804088714a05d7db5348acc Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Thu, 4 Mar 2021 13:41:06 -0800
Subject: [PATCH 04/15] Get observation detail from lib

---
 src/views/ObservationDetail.vue | 94 ++-------------------------------
 1 file changed, 4 insertions(+), 90 deletions(-)

diff --git a/src/views/ObservationDetail.vue b/src/views/ObservationDetail.vue
index 62c5064..54a9817 100644
--- a/src/views/ObservationDetail.vue
+++ b/src/views/ObservationDetail.vue
@@ -1,84 +1,13 @@
 <template>
   <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
     <h1>Observation {{ id }}</h1>
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Request</th>
-          <th>Site</th>
-          <th>Enclosure</th>
-          <th>Telescope</th>
-          <th>Start</th>
-          <th>End</th>
-          <th>State</th>
-          <th>Priority</th>
-          <th>Modified</th>
-          <th>Created</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <router-link :to="{ name: 'requestDetail', params: { id: data.request } }">
-              {{ data.request }}
-            </router-link>
-          </td>
-          <td>{{ data.site }}</td>
-          <td>{{ data.enclosure }}</td>
-          <td>{{ data.telescope }}</td>
-          <td>{{ data.start | formatDate }}</td>
-          <td>{{ data.end | formatDate }}</td>
-          <td>{{ data.state }}</td>
-          <td>{{ data.priority }}</td>
-          <td>{{ data.modified | formatDate }}</td>
-          <td>{{ data.created | formatDate }}</td>
-        </tr>
-      </tbody>
-    </table>
-    <table class="table table-striped">
-      <thead>
-        <tr>
-          <th colspan="4" style="border-right: 2px solid black">Config Status</th>
-          <th colspan="6">Summary</th>
-        </tr>
-        <tr>
-          <th>Id</th>
-          <th>Instrument</th>
-          <th>Guider</th>
-          <th style="border-right: 2px solid black">State</th>
-          <th>State</th>
-          <th>Start</th>
-          <th>End</th>
-          <th>Reason</th>
-          <th>Time</th>
-          <th>Events</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="c_status in data.configuration_statuses" :key="c_status.id">
-          <td>{{ c_status.id }}</td>
-          <td>{{ c_status.instrument_name }}</td>
-          <td>{{ c_status.guide_camera_name }}</td>
-          <td style="border-right: 2px solid black">{{ c_status.state }}</td>
-          <template v-if="c_status.summary">
-            <td>{{ c_status.summary.state }}</td>
-            <td>{{ c_status.summary.start | formatDate }}</td>
-            <td>{{ c_status.summary.end | formatDate }}</td>
-            <td>{{ c_status.summary.reason }}</td>
-            <td>{{ c_status.summary.time_completed }}</td>
-            <td><a href="#" @click="openEvents(c_status.summary.events)">View</a></td>
-          </template>
-          <template v-else>
-            <td colspan="6">No summary</td>
-          </template>
-        </tr>
-      </tbody>
-    </table>
+    <ocs-observation-detail
+      :observation="data"
+      :request-link="{ to: { name: 'requestDetail', params: { id: data.request } } }"
+    ></ocs-observation-detail>
   </data-loader>
 </template>
 <script>
-import { OCSUtil } from 'ocs-component-lib';
-
 import DataLoader from '@/components/DataLoader.vue';
 import { getDataMixin } from '@/components/util/getDataMixins.js';
 
@@ -87,11 +16,6 @@ export default {
   components: {
     DataLoader
   },
-  filters: {
-    formatDate(value) {
-      return OCSUtil.formatDate(value);
-    }
-  },
   mixins: [getDataMixin],
   props: {
     id: {
@@ -102,16 +26,6 @@ export default {
   methods: {
     initializeDataEndpoint: function() {
       return '/api/observations/' + this.id + '/';
-    },
-    openEvents: function(events_text) {
-      var y = window.top.outerHeight / 2 + window.top.screenY - 300;
-      var x = window.top.outerWidth / 2 + window.top.screenX - 300;
-      var newWin = open(
-        '',
-        'Events',
-        'scrollbars=yes, toolbar=no, location=no, menubar=no, width=' + 600 + ', height=' + 600 + ', top=' + y + ', left=' + x
-      );
-      newWin.document.write('<pre>' + JSON.stringify(events_text, null, 2) + '</pre>');
     }
   }
 };

From bfe41d4c9feef060114061edf5671d5599af95a9 Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Thu, 4 Mar 2021 14:31:08 -0800
Subject: [PATCH 05/15] Get window detail from lib

---
 src/components/RequestDetail.vue | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/components/RequestDetail.vue b/src/components/RequestDetail.vue
index a8ad054..c35a890 100644
--- a/src/components/RequestDetail.vue
+++ b/src/components/RequestDetail.vue
@@ -9,20 +9,7 @@
           <div v-if="request.windows && request.windows.length != 0" class="row">
             <div class="col-md-12">
               <h4>Windows</h4>
-              <table class="table table-sm">
-                <thead class="no-top-border">
-                  <tr>
-                    <td><strong>Start</strong></td>
-                    <td><strong>End</strong></td>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(window, index) in request.windows" :key="'window-' + index">
-                    <td>{{ window.start | formatDate }}</td>
-                    <td>{{ window.end | formatDate }}</td>
-                  </tr>
-                </tbody>
-              </table>
+              <ocs-request-windows-detail :windows="request.windows"></ocs-request-windows-detail>
             </div>
           </div>
           <div v-if="scheduled && scheduled.start" class="row">

From 2d2fcf8658d3d59681d6e9c5ad514ee9667edc7e Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Fri, 5 Mar 2021 18:00:07 -0800
Subject: [PATCH 06/15] Get observation history, telescope states, and airmass
 plots from lib

---
 src/components/Airmass.vue                | 203 ------------------
 src/components/AirmassTelescopeStates.vue | 121 ++++++++---
 src/components/ObservationHistory.vue     | 240 ----------------------
 src/components/RequestDetail.vue          |   9 +-
 src/components/TelescopeStates.vue        | 186 -----------------
 src/components/Window.vue                 |  18 +-
 6 files changed, 110 insertions(+), 667 deletions(-)
 delete mode 100644 src/components/Airmass.vue
 delete mode 100644 src/components/ObservationHistory.vue
 delete mode 100644 src/components/TelescopeStates.vue

diff --git a/src/components/Airmass.vue b/src/components/Airmass.vue
deleted file mode 100644
index 90262c4..0000000
--- a/src/components/Airmass.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<template>
-  <div class="airmassPlot">
-    <plot-controls v-show="showZoomControls" @plotZoom="plotZoom" />
-  </div>
-</template>
-<script>
-import vis from 'vis';
-import $ from 'jquery';
-import _ from 'lodash';
-import 'vis/dist/vis.css';
-import '@/assets/css/plot_style.css';
-
-import PlotControls from '@/components/util/PlotControls.vue';
-import { siteToColor, siteCodeToName } from '@/utils.js';
-import { plotZoomMixin } from '@/components/util/plotMixins.js';
-
-export default {
-  components: {
-    PlotControls
-  },
-  mixins: [plotZoomMixin],
-  props: {
-    data: {
-      type: Object,
-      required: true
-    },
-    showZoomControls: Boolean,
-    alignleft: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: function() {
-    let options = {
-      dataAxis: {
-        left: {
-          format: function(value) {
-            return Math.abs(value).toPrecision(2);
-          }
-        },
-        width: this.alignleft ? '129px' : ''
-      },
-      orientation: 'top',
-      legend: {
-        enabled: true,
-        left: {
-          visible: true,
-          position: 'bottom-right'
-        }
-      },
-      zoomKey: 'ctrlKey',
-      moment: function(date) {
-        return vis.moment(date).utc();
-      }
-    };
-    return {
-      options: options
-    };
-  },
-  computed: {
-    toVis: function() {
-      let plotSites = new vis.DataSet();
-      let visData = new vis.DataSet();
-      if (!$.isEmptyObject(this.data)) {
-        let i = 0;
-        let airmass_limit = this.data.airmass_limit;
-        for (let site in this.data.airmass_data) {
-          let airmasses = this.data.airmass_data[site]['airmasses'];
-          let airmass_times = this.data.airmass_data[site]['times'];
-          let p = 0;
-          let last_time = new Date(airmass_times[0] + 'Z');
-          let current_time = last_time;
-          plotSites.add({
-            id: i,
-            content: siteCodeToName[site],
-            options: {
-              drawPoints: {
-                enabled: true,
-                size: 9,
-                style: 'circle',
-                styles: 'stroke:' + siteToColor[site] + '; fill: ' + siteToColor[site] + '; visibility: hidden;'
-              },
-              excludeFromLegend: false
-            },
-            style: 'stroke: ' + siteToColor[site] + ';'
-          });
-          for (p = 0; p < airmass_times.length; p++) {
-            current_time = new Date(airmass_times[p] + 'Z');
-            // This 16 is a magic number, greater than the spacing between datapoints to detect horizon split
-            if (Math.floor((current_time - last_time) / 1000.0 / 60.0) > 16.0) {
-              //another group is used for the case when the horizon is split in the >24 hour period, so we
-              //have separate time groups that are above the airmass threshold
-              i++;
-              plotSites.add({
-                id: i,
-                content: siteCodeToName[site],
-                options: {
-                  drawPoints: {
-                    enabled: true,
-                    size: 7,
-                    style: 'circle',
-                    styles: 'stroke:' + siteToColor[site] + '; fill: ' + siteToColor[site] + '; visibility: hidden;'
-                  },
-                  excludeFromLegend: true
-                },
-                style: 'stroke: ' + siteToColor[site] + ';'
-              });
-            }
-            last_time = current_time;
-            visData.add([
-              {
-                x: airmass_times[p] + 'Z',
-                y: -airmasses[p],
-                group: i,
-                label: {
-                  content:
-                    'Site: ' + siteCodeToName[site] + '<br>Time: ' + airmass_times[p].replace('T', ' ') + '<br>Airmass: ' + airmasses[p].toFixed(2),
-                  className: 'graphtt'
-                }
-              }
-            ]);
-          }
-          i++;
-        }
-        // Now add a group for the airmass limit line
-        plotSites.add({
-          id: i,
-          content: 'limit',
-          options: {
-            drawPoints: { enabled: false },
-            excludeFromLegend: false
-          },
-          style: 'stroke: black;'
-        });
-        if (airmass_limit) {
-          let limitMin = new Date(visData.min('x')['x']);
-          limitMin.setMinutes(limitMin.getMinutes() - 30);
-          let limitMax = new Date(visData.max('x')['x']);
-          limitMax.setMinutes(limitMax.getMinutes() + 30);
-          visData.add([
-            { x: limitMin, y: -1 * airmass_limit, group: i },
-            { x: limitMax, y: -1 * airmass_limit, group: i }
-          ]);
-        }
-      }
-      return { datasets: visData, groups: plotSites };
-    }
-  },
-  watch: {
-    data: function() {
-      let datasets = this.toVis;
-      // Need to first zero out the items and groups or vis.js throws an error
-      this.plot.setItems(new vis.DataSet());
-      this.plot.setGroups(new vis.DataSet());
-      this.plot.setGroups(datasets.groups);
-      this.plot.setItems(datasets.datasets);
-      this.plot.fit();
-    }
-  },
-  mounted: function() {
-    this.plot = this.buildPlot();
-  },
-  methods: {
-    buildPlot: function() {
-      // Set a unique name for the plot element, since vis.js needs this to separate plots
-      this.$el.setAttribute('class', _.uniqueId(this.$el.className));
-      let plot = new vis.Graph2d(this.$el, new vis.DataSet([]), this.options);
-      let that = this;
-      plot.on('changed', function() {
-        $(that.$el)
-          .find('.vis-point')
-          .each(function() {
-            $(this).attr(
-              'title',
-              $(this)
-                .next()
-                .text()
-            );
-            $(this).attr(
-              'data-original-title',
-              $(this)
-                .next()
-                .text()
-            );
-            $(this).attr('data-html', 'true');
-            let label = $(this).next();
-            $(this).appendTo($(this).parent());
-            label.appendTo($(this).parent());
-          });
-        $(that.$el)
-          .find('.vis-legend svg path')
-          .each(function() {
-            $(this).appendTo($(this).parent());
-          });
-      });
-      plot.on('rangechanged', function() {
-        that.$emit('rangechanged', that.plot.getWindow());
-      });
-      return plot;
-    }
-  }
-};
-</script>
diff --git a/src/components/AirmassTelescopeStates.vue b/src/components/AirmassTelescopeStates.vue
index 28db7fd..6a5465d 100644
--- a/src/components/AirmassTelescopeStates.vue
+++ b/src/components/AirmassTelescopeStates.vue
@@ -1,54 +1,37 @@
 <template>
   <div class="airmassTelescopeStatesCombo">
-    <airmass
+    <ocs-airmass-plot
       v-show="'airmass_limit' in airmassData"
       ref="airmass"
       :data="airmassData"
       :show-zoom-controls="true"
       :alignleft="true"
+      :site-code-to-color="siteToColor"
+      :site-code-to-name="siteCodeToName"
       @rangechanged="updateTelescopeStatesRange"
     />
     <p />
-    <telescope-states
+    <ocs-telescope-states-plot
       v-show="'airmass_limit' in airmassData"
       ref="telescope_states"
       :data="telescopeStatesData"
       :active-observation="activeObservation"
       :show-zoom-controls="false"
+      :site-code-to-color="siteToColor"
+      :site-code-to-name="siteCodeToName"
+      :legend-data="legendData"
+      show-legend
       @rangechanged="updateAirmassRange"
     />
-    <div class="visibilityHistoryPlotLegend text-center">
-      <ul class="list-inline mt-1">
-        <li class="list-inline-item">
-          <span class="legend-item AVAILABLE align-middle mb-1 mr-1" />
-          Available
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item NOT_OK_TO_OPEN align-middle mb-1 mr-1" />
-          Weather
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item SEQUENCER_DISABLED align-middle mb-1 mr-1" />
-          Manually Disabled
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item NO_CONNECTION align-middle mb-1 mr-1" />
-          No Connection to Telescope
-        </li>
-      </ul>
-    </div>
   </div>
 </template>
 <script>
-import Airmass from '@/components/Airmass.vue';
-import TelescopeStates from '@/components/TelescopeStates.vue';
+import _ from 'lodash';
+
+import { siteToColor, siteCodeToName } from '@/utils.js';
 
 export default {
   name: 'AirmassTelescopeStates',
-  components: {
-    Airmass,
-    TelescopeStates
-  },
   props: {
     airmassData: {
       type: Object,
@@ -64,9 +47,48 @@ export default {
     }
   },
   data: function() {
-    return {};
+    return {
+      siteToColor: siteToColor,
+      siteCodeToName: siteCodeToName,
+      legendData: [
+        { eventType: 'AVAILABLE', text: 'Available' },
+        { eventType: 'NOT_OK_TO_OPEN', text: 'Weather' },
+        { eventType: 'SEQUENCER_DISABLED', text: 'Manually Disabled' },
+        { eventType: 'NO_CONNECTION', text: 'No Connection to Telescope' }
+      ],
+      additionalEventTypeText: {
+        AVAILABLE: 'Available',
+        NOT_OK_TO_OPEN: '',
+        SEQUENCER_DISABLED: 'Manually Disabled',
+        SITE_AGENT_UNRESPONSIVE: 'No Connection to Telescope',
+        OFFLINE: 'Manually Disabled',
+        ENCLOSURE_INTERLOCK: '',
+        SEQUENCER_UNAVAILABLE: '',
+        NO_CONNECTION: ''
+      },
+      unavailableEventTypeCodes: ['NOT_OK_TO_OPEN', 'ENCLOSURE_INTERLOCK'],
+      initializingEventTypeCodes: ['SEQUENCER_UNAVAILABLE']
+    };
+  },
+  created: function() {
+    this.transformEventData();
   },
   methods: {
+    transformEventData: function() {
+      for (let telescope in this.telescopeStatesData) {
+        for (let i in this.telescopeStatesData[telescope]) {
+          let event = this.telescopeStatesData[telescope][i];
+          let reason = '';
+          if (this.unavailableEventTypeCodes.indexOf(event['event_type']) > -1) {
+            reason = event['event_reason'];
+          } else if (this.initializingEventTypeCodes.indexOf(event['event_type']) > -1) {
+            reason = ': Telescope initializing';
+          }
+          let additionalText = _.get(this.additionalEventTypeText, [event['event_type']], '');
+          this.telescopeStatesData[telescope][i]['event_reason'] = additionalText + reason;
+        }
+      }
+    },
     updateAirmassRange: function(window) {
       this.$refs.airmass.updateWindow(window);
     },
@@ -76,3 +98,44 @@ export default {
   }
 };
 </script>
+<style>
+.AVAILABLE {
+  background-color: deepskyblue;
+  border-color: deepskyblue;
+}
+
+.OFFLINE {
+  background-color: orange;
+  border-color: orange;
+}
+
+.NOT_OK_TO_OPEN {
+  background-color: purple;
+  border-color: purple;
+}
+
+.SITE_AGENT_UNRESPONSIVE {
+  background-color: black;
+  border-color: black;
+}
+
+.SEQUENCER_DISABLED {
+  background-color: orange;
+  border-color: orange;
+}
+
+.ENCLOSURE_INTERLOCK {
+  background-color: purple;
+  border-color: purple;
+}
+
+.SEQUENCER_UNAVAILABLE {
+  background-color: purple;
+  border-color: purple;
+}
+
+.NO_CONNECTION {
+  background-color: black;
+  border-color: darkgrey;
+}
+</style>
diff --git a/src/components/ObservationHistory.vue b/src/components/ObservationHistory.vue
deleted file mode 100644
index 9b9ad6f..0000000
--- a/src/components/ObservationHistory.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-  <div>
-    <div id="plot" class="observationHistoryPlot">
-      <plot-controls v-show="showZoomControls" @plotZoom="plotZoom" />
-    </div>
-    <div class="observationHistoryPlotLegend text-center">
-      <ul class="list-inline mt-1">
-        <li class="list-inline-item">
-          <span class="legend-item CANCELED align-middle mb-1 mr-1" />
-          Superseded by new schedule
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item SCHEDULED align-middle mb-1 mr-1" />
-          Scheduled
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item NOT_ATTEMPTED align-middle mb-1 mr-1" />
-          Not Attempted
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item IN_PROGRESS align-middle mb-1 mr-1" />
-          In Progress
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item FAILED align-middle mb-1 mr-1" />
-          Failed
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item ABORTED align-middle mb-1 mr-1" />
-          Aborted
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item PARTIALLY-COMPLETED align-middle mb-1 mr-1" />
-          Partially Completed
-        </li>
-        <li class="list-inline-item ml-3">
-          <span class="legend-item COMPLETED align-middle mb-1 mr-1" />
-          Completed
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-<script>
-import vis from 'vis';
-import _ from 'lodash';
-import 'vis/dist/vis.css';
-
-import '@/assets/css/plot_style.css';
-import PlotControls from '@/components/util/PlotControls.vue';
-import { plotZoomMixin } from '@/components/util/plotMixins.js';
-
-export default {
-  components: {
-    PlotControls
-  },
-  mixins: [plotZoomMixin],
-  props: {
-    data: {
-      type: Array,
-      required: true
-    },
-    showZoomControls: {
-      type: Boolean
-    }
-  },
-  data: function() {
-    let options = {
-      groupOrder: 'content',
-      maxHeight: '450px',
-      minHeight: '120px',
-      align: 'right',
-      dataAttributes: ['toggle', 'html'],
-      selectable: false,
-      snap: null,
-      zoomKey: 'ctrlKey',
-      moment: function(date) {
-        return vis.moment(date).utc();
-      },
-      tooltip: {
-        overflowMethod: 'cap'
-      }
-    };
-    return {
-      options: options
-    };
-  },
-  computed: {
-    toVis: function() {
-      let visGroups = new vis.DataSet();
-      let visData = new vis.DataSet();
-      let timeline_min = 0;
-      let timeline_max = 0;
-      if (this.data.length > 0) {
-        let previousObservation = this.data[0];
-        let previousObservationIndex = 1;
-        let index = 0;
-        for (let i = 0; i < this.data.length; i++) {
-          let observation = this.data[i];
-          let state = observation.state;
-          if (state === 'PENDING') {
-            if (new Date(observation.end) > new Date()) {
-              state = 'SCHEDULED';
-            } else {
-              state = 'NOT_ATTEMPTED';
-            }
-          }
-          if (state != 'COMPLETED' && new Date(observation.end) < new Date() && observation.percent_completed > 0) {
-            state = 'PARTIALLY-COMPLETED';
-          }
-          observation.state = state;
-
-          if (_.isString(observation.fail_reason) && observation.fail_reason !== '') {
-            observation.fail_reason = '<br/>reason: ' + observation.fail_reason;
-          } else {
-            observation.fail_reason = '';
-          }
-
-          if (_.isFinite(observation.percent_completed) && observation.percent_completed > 0) {
-            observation.percent_completed = '<br/>percent completed: ' + observation.percent_completed.toFixed(1);
-          } else {
-            observation.percent_completed = '';
-          }
-          if (
-            observation.start !== previousObservation.start ||
-            observation.site !== previousObservation.site ||
-            observation.state !== previousObservation.state ||
-            observation.enclosure !== previousObservation.enclosure ||
-            observation.telescope !== previousObservation.telescope
-          ) {
-            let className = 'timeline_observation ' + previousObservation.state;
-            visGroups.add({ id: index, content: previousObservationIndex });
-            visData.add({
-              id: index,
-              group: index,
-              observationId: previousObservation.id,
-              title:
-                'telescope: ' +
-                previousObservation.site +
-                '.' +
-                previousObservation.enclosure +
-                '.' +
-                previousObservation.telescope +
-                previousObservation.percent_completed +
-                previousObservation.fail_reason +
-                '<br/>start: ' +
-                previousObservation.start.replace('T', ' ') +
-                '<br/>end: ' +
-                previousObservation.end.replace('T', ' '),
-              className: className,
-              start: previousObservation.start,
-              end: previousObservation.end,
-              toggle: 'tooltip',
-              html: true,
-              type: 'range'
-            });
-            index++;
-            previousObservationIndex = i + 1;
-          }
-          previousObservation = observation;
-        }
-        visGroups.add({ id: index, content: previousObservationIndex });
-        visData.add({
-          id: index,
-          group: index,
-          observationId: previousObservation.id,
-          title:
-            'telescope: ' +
-            previousObservation.site +
-            '.' +
-            previousObservation.enclosure +
-            '.' +
-            previousObservation.telescope +
-            previousObservation.percent_completed +
-            previousObservation.fail_reason +
-            '<br/>start: ' +
-            previousObservation.start.replace('T', ' ') +
-            '<br/>end: ' +
-            previousObservation.end.replace('T', ' '),
-          className: 'timeline_observation ' + previousObservation.state,
-          start: previousObservation.start,
-          end: previousObservation.end,
-          toggle: 'tooltip',
-          html: true,
-          type: 'range'
-        });
-        index++;
-        timeline_min = new Date(visData.get(index - 1)['start']);
-        timeline_max = new Date(visData.get(index - 1)['end']);
-        if (index > 12) {
-          for (let k = index - 1; k >= index - 12; k--) {
-            let start = new Date(visData.get(k)['start']);
-            let end = new Date(visData.get(k)['end']);
-            if (start < timeline_min) {
-              timeline_min = start;
-            }
-            if (end > timeline_max) {
-              timeline_max = end;
-            }
-          }
-          timeline_max.setMinutes(timeline_max.getMinutes() + 30);
-          timeline_min.setMinutes(timeline_min.getMinutes() - 30);
-        }
-      }
-      return { datasets: visData, groups: visGroups, window: { start: timeline_min, end: timeline_max } };
-    }
-  },
-  watch: {
-    data: function() {
-      let datasets = this.toVis;
-      //Need to first zero out the items and groups or vis.js throws an error
-      this.plot.setItems(new vis.DataSet());
-      this.plot.setGroups(new vis.DataSet());
-      this.plot.setGroups(datasets.groups);
-      this.plot.setItems(datasets.datasets);
-      this.plot.setWindow(datasets.window.start, datasets.window.end);
-    }
-  },
-  mounted: function() {
-    this.plot = this.buildPlot();
-    let that = this;
-    this.plot.on('click', function(event) {
-      if (event.item !== null) {
-        // An observation on the timeline was cliked, get that observation info
-        let item = that.toVis.datasets.get(event.item);
-        if (item !== null) {
-          that.$router.push({ name: 'observationDetail', params: { id: item.observationId } });
-        }
-      }
-    });
-  },
-  methods: {
-    buildPlot: function() {
-      // Set a unique name for the plot element, since vis.js needs this to separate plots
-      this.$el.setAttribute('class', _.uniqueId(this.$el.className));
-      return new vis.Timeline(document.getElementById('plot'), new vis.DataSet([]), this.options);
-    }
-  }
-};
-</script>
diff --git a/src/components/RequestDetail.vue b/src/components/RequestDetail.vue
index c35a890..80d3dcf 100644
--- a/src/components/RequestDetail.vue
+++ b/src/components/RequestDetail.vue
@@ -46,7 +46,12 @@
           <template slot="title">
             <span title="Scheduling history.">Scheduling</span>
           </template>
-          <observation-history v-show="observationData.length > 0" :data="observationData" :show-plot-controls="true" />
+          <ocs-observation-history-plot
+            v-show="observationData.length > 0"
+            :data="observationData"
+            show-plot-controls
+            show-legend
+          ></ocs-observation-history-plot>
           <div v-show="observationData.length < 1" class="text-center">
             <h3>This request has not been scheduled.</h3>
           </div>
@@ -100,7 +105,6 @@ import { OCSUtil } from 'ocs-component-lib';
 
 import Thumbnail from '@/components/Thumbnail.vue';
 import ArchiveTable from '@/components/ArchiveTable.vue';
-import ObservationHistory from '@/components/ObservationHistory.vue';
 import AirmassTelescopeStates from '@/components/AirmassTelescopeStates.vue';
 import { getLatestFrame } from '@/archive.js';
 
@@ -113,7 +117,6 @@ export default {
   components: {
     Thumbnail,
     ArchiveTable,
-    ObservationHistory,
     AirmassTelescopeStates
   },
   props: {
diff --git a/src/components/TelescopeStates.vue b/src/components/TelescopeStates.vue
deleted file mode 100644
index 609072f..0000000
--- a/src/components/TelescopeStates.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div class="telescopeStatesPlot">
-    <plot-controls v-show="showZoomControls" @plotZoom="plotZoom" />
-  </div>
-</template>
-<script>
-import vis from 'vis';
-import _ from 'lodash';
-import 'vis/dist/vis.css';
-
-import '@/assets/css/plot_style.css';
-import { siteToColor, siteCodeToName } from '@/utils.js';
-import PlotControls from '@/components/util/PlotControls.vue';
-import { plotZoomMixin } from '@/components/util/plotMixins.js';
-
-export default {
-  name: 'TelescopeStates',
-  components: {
-    PlotControls
-  },
-  mixins: [plotZoomMixin],
-  props: {
-    data: {
-      validator: function(value) {
-        return value === undefined || typeof value === 'object';
-      },
-      default: function() {
-        return undefined;
-      }
-    },
-    activeObservation: {
-      type: Object,
-      default: function() {
-        return null;
-      }
-    },
-    showZoomControls: {
-      type: Boolean
-    }
-  },
-  data: function() {
-    let event_types = {
-      AVAILABLE: 'Available',
-      NOT_OK_TO_OPEN: '',
-      SEQUENCER_DISABLED: 'Manually Disabled',
-      SITE_AGENT_UNRESPONSIVE: 'No Connection to Telescope',
-      OFFLINE: 'Manually Disabled',
-      ENCLOSURE_INTERLOCK: '',
-      SEQUENCER_UNAVAILABLE: ''
-    };
-
-    let options = {
-      groupOrder: 'id',
-      stack: false,
-      maxHeight: '450px',
-      minHeight: '120px',
-      align: 'left',
-      dataAttributes: ['toggle', 'html'],
-      selectable: false,
-      zoomKey: 'ctrlKey',
-      moment: function(date) {
-        return vis.moment(date).utc();
-      },
-      tooltip: {
-        overflowMethod: 'cap'
-      }
-    };
-
-    return {
-      options: options,
-      event_types: event_types
-    };
-  },
-  computed: {
-    toVis: function() {
-      let plotSites = new vis.DataSet();
-      let visData = new vis.DataSet();
-
-      if (this.data !== undefined) {
-        let sorted_telescopes = Object.keys(this.data).sort(function keyOrder(k1, k2) {
-          let s1 = k1.split('.')[2];
-          let s2 = k2.split('.')[2];
-
-          if (s1 < s2) return -1;
-          else if (s1 > s2) return +1;
-          else if (k1 < k2) return -1;
-          else if (k1 > k2) return +1;
-          else return 0;
-        });
-
-        let g = 0;
-        let used_telescopes = {};
-        for (let telescope in sorted_telescopes) {
-          let site = sorted_telescopes[telescope].split('.')[0];
-          if (!(site in used_telescopes)) {
-            used_telescopes[site] = 0;
-          }
-          used_telescopes[site]++;
-          plotSites.add({
-            id: g,
-            content: siteCodeToName[site] + ' ' + used_telescopes[site],
-            title: sorted_telescopes[telescope],
-            style: 'color: ' + siteToColor[sorted_telescopes[telescope].split('.')[0]] + ';' + 'width: 130px;'
-          });
-          for (let index in this.data[sorted_telescopes[telescope]]) {
-            let event = this.data[sorted_telescopes[telescope]][index];
-            let reason = '';
-            if (event['event_type'] === 'NOT_OK_TO_OPEN' || event['event_type'] === 'ENCLOSURE_INTERLOCK') {
-              reason = event['event_reason'];
-            } else if (event['event_type'] === 'SEQUENCER_UNAVAILABLE') {
-              reason = ': Telescope initializing';
-            }
-            visData.add({
-              group: g,
-              title:
-                this.event_types[event['event_type']] +
-                reason +
-                '<br/>start: ' +
-                event['start'].replace('T', ' ') +
-                '<br/>end: ' +
-                event['end'].replace('T', ' '),
-              className: event['event_type'],
-              start: event['start'],
-              end: event['end'],
-              toggle: 'tooltip',
-              html: true,
-              type: 'range'
-            });
-          }
-          if (
-            this.activeObservation !== null &&
-            this.activeObservation.site === site &&
-            this.activeObservation.enclosure === sorted_telescopes[telescope].split('.')[1] &&
-            this.activeObservation.telescope === sorted_telescopes[telescope].split('.')[2]
-          ) {
-            visData.add({
-              group: g,
-              title:
-                this.activeObservation.state.toLowerCase() +
-                ' at ' +
-                sorted_telescopes[telescope] +
-                '<br/>start: ' +
-                this.activeObservation.start +
-                '<br/>end: ' +
-                this.activeObservation.end,
-              className: this.activeObservation.state,
-              start: this.activeObservation.start,
-              end: this.activeObservation.end,
-              toggle: 'tooltip',
-              html: true,
-              type: 'range'
-            });
-          }
-          g++;
-        }
-      }
-      return { datasets: visData, groups: plotSites };
-    }
-  },
-  watch: {
-    data: function() {
-      let datasets = this.toVis;
-      //Need to first zero out the items and groups or vis.js throws an error
-      this.plot.setItems(new vis.DataSet());
-      this.plot.setGroups(new vis.DataSet());
-      this.plot.setGroups(datasets.groups);
-      this.plot.setItems(datasets.datasets);
-    }
-  },
-  mounted: function() {
-    this.plot = this.buildPlot();
-  },
-  methods: {
-    buildPlot: function() {
-      // Set a unique name for the plot element, since vis.js needs this to separate plots
-      this.$el.setAttribute('class', _.uniqueId(this.$el.className));
-      let plot = new vis.Timeline(this.$el, new vis.DataSet([]), this.options);
-      let that = this;
-      plot.on('rangechanged', function() {
-        that.$emit('rangechanged', that.plot.getWindow());
-      });
-      return plot;
-    }
-  }
-};
-</script>
diff --git a/src/components/Window.vue b/src/components/Window.vue
index 88cdcf9..13c5164 100644
--- a/src/components/Window.vue
+++ b/src/components/Window.vue
@@ -32,7 +32,13 @@
           <h4 v-show="showAirmass" class="text-center">
             Visibility
           </h4>
-          <airmass v-show="showAirmass" :data="airmassData" :show-zoom-controls="true" />
+          <ocs-airmass-plot
+            v-show="showAirmass"
+            :data="airmassData"
+            :site-code-to-color="siteToColor"
+            :site-code-to-name="siteCodeToName"
+            show-zoom-controls
+          />
         </b-col>
         <b-col :md="show ? 6 : 12">
           <b-form>
@@ -104,13 +110,12 @@
 import $ from 'jquery';
 import _ from 'lodash';
 
-import { collapseMixin, extractTopLevelErrors } from '@/utils.js';
+import { collapseMixin, extractTopLevelErrors, siteToColor, siteCodeToName } from '@/utils.js';
 import Panel from '@/components/util/Panel.vue';
 import CustomAlert from '@/components/util/CustomAlert.vue';
 import CustomDatetime from '@/components/util/CustomDatetime.vue';
 import CustomField from '@/components/util/CustomField.vue';
 import CustomSelect from '@/components/util/CustomSelect.vue';
-import Airmass from '@/components/Airmass.vue';
 
 export default {
   components: {
@@ -118,8 +123,7 @@ export default {
     CustomField,
     CustomSelect,
     Panel,
-    CustomAlert,
-    Airmass
+    CustomAlert
   },
   mixins: [collapseMixin],
   props: {
@@ -153,7 +157,9 @@ export default {
       showAirmass: false,
       cadence: 'none',
       period: 24.0,
-      jitter: 12.0
+      jitter: 12.0,
+      siteToColor: siteToColor,
+      siteCodeToName: siteCodeToName
     };
   },
   computed: {

From cca8205f55e6b620ee4263722760a738ca41c37b Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Mon, 8 Mar 2021 11:11:07 -0800
Subject: [PATCH 07/15] Get data loader component and get data mixins from lib

---
 src/components/EditSciApplication.vue   |  18 ++--
 src/components/ProposalInvitations.vue  |   7 +-
 src/components/SciApplications.vue      |   5 +-
 src/components/util/PlotControls.vue    |  40 --------
 src/components/util/getDataMixins.js    | 131 ------------------------
 src/components/util/plotMixins.js       |  18 ----
 src/views/Apply.vue                     |   5 +-
 src/views/ObservationDetail.vue         |  16 +--
 src/views/ProposalDetail.vue            |  18 ++--
 src/views/RequestgroupDetail.vue        |  11 +-
 src/views/SciApplicationCombinedPdf.vue |  17 +--
 src/views/SciApplicationDetail.vue      |  18 ++--
 src/views/SemesterAdminTable.vue        |  20 ++--
 src/views/SemesterDetail.vue            |  20 ++--
 src/views/SemesterDetailCurrent.vue     |  14 ++-
 src/views/UpdateSciApplication.vue      |  18 ++--
 16 files changed, 107 insertions(+), 269 deletions(-)
 delete mode 100644 src/components/util/PlotControls.vue
 delete mode 100644 src/components/util/getDataMixins.js
 delete mode 100644 src/components/util/plotMixins.js

diff --git a/src/components/EditSciApplication.vue b/src/components/EditSciApplication.vue
index b217e4d..9fb24ad 100644
--- a/src/components/EditSciApplication.vue
+++ b/src/components/EditSciApplication.vue
@@ -1,5 +1,8 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <b-row>
       <b-col>
         <b-breadcrumb class="bg-light">
@@ -408,23 +411,22 @@
         </template>
       </b-col>
     </b-row>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
 import $ from 'jquery';
 import _ from 'lodash';
-import { OCSUtil } from 'ocs-component-lib';
+import { OCSUtil, OCSMixin } from 'ocs-component-lib';
 
-import DataLoader from '@/components/DataLoader.vue';
 import BasicCustomField from '@/components/util/BasicCustomField.vue';
-import { getDataMixin } from '@/components/util/getDataMixins.js';
+import NotFound from '@/components/NotFound.vue';
 import { confirmMixin } from '@/components/util/utilMixins.js';
 
 export default {
   name: 'CreateSciApplication',
   components: {
-    DataLoader,
-    BasicCustomField
+    BasicCustomField,
+    NotFound
   },
   filters: {
     formatDate: function(value) {
@@ -437,7 +439,7 @@ export default {
       return _.lowerCase(value);
     }
   },
-  mixins: [getDataMixin, confirmMixin],
+  mixins: [OCSMixin.getDataMixin, confirmMixin],
   props: {
     callId: {
       type: [String, Number],
diff --git a/src/components/ProposalInvitations.vue b/src/components/ProposalInvitations.vue
index 774bb53..b4e544e 100644
--- a/src/components/ProposalInvitations.vue
+++ b/src/components/ProposalInvitations.vue
@@ -30,19 +30,18 @@
 </template>
 <script>
 import $ from 'jquery';
-import { OCSUtil } from 'ocs-component-lib';
+import { OCSUtil, OCSMixin } from 'ocs-component-lib';
 
-import { getDataListWithCountMixin } from '@/components/util/getDataMixins.js';
 import { confirmMixin } from '@/components/util/utilMixins.js';
 
 export default {
-  name: 'ProposalInvitaions',
+  name: 'ProposalInvitations',
   filters: {
     formatDate: function(date) {
       return OCSUtil.formatDate(date);
     }
   },
-  mixins: [getDataListWithCountMixin, confirmMixin],
+  mixins: [OCSMixin.getDataListWithCountMixin, confirmMixin],
   props: {
     proposalId: {
       type: String,
diff --git a/src/components/SciApplications.vue b/src/components/SciApplications.vue
index e9fe7bf..2988f09 100644
--- a/src/components/SciApplications.vue
+++ b/src/components/SciApplications.vue
@@ -94,9 +94,8 @@
 <script>
 import $ from 'jquery';
 import _ from 'lodash';
-import { OCSUtil } from 'ocs-component-lib';
+import { OCSUtil, OCSMixin } from 'ocs-component-lib';
 
-import { getDataListWithCountMixin } from '@/components/util/getDataMixins.js';
 import { confirmMixin } from '@/components/util/utilMixins.js';
 
 export default {
@@ -110,7 +109,7 @@ export default {
       }
     }
   },
-  mixins: [getDataListWithCountMixin, confirmMixin],
+  mixins: [OCSMixin.getDataListWithCountMixin, confirmMixin],
   props: {
     isSciCollab: {
       type: Boolean,
diff --git a/src/components/util/PlotControls.vue b/src/components/util/PlotControls.vue
deleted file mode 100644
index 7cf6838..0000000
--- a/src/components/util/PlotControls.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <b-container class="plot-controls">
-    <b-button id="zoom-in" class="float-right" variant="transparent" @click="zoomIn">
-      <i class="fas fa-search-plus" />
-    </b-button>
-    <b-button id="zoom-in" class="float-right" variant="transparent" @click="zoomOut">
-      <i class="fas fa-search-minus" />
-    </b-button>
-  </b-container>
-</template>
-<script>
-export default {
-  props: {
-    zoomInPercent: {
-      type: Number,
-      default: -0.2
-    },
-    zoomOutPercent: {
-      type: Number,
-      default: 0.2
-    }
-  },
-  methods: {
-    zoomIn: function() {
-      this.$emit('plotZoom', this.zoomInPercent);
-    },
-    zoomOut: function() {
-      this.$emit('plotZoom', this.zoomOutPercent);
-    }
-  }
-};
-</script>
-<style scoped>
-.plot-controls {
-  position: absolute;
-  right: 0;
-  /* Stays under modals but above its vis graph */
-  z-index: 500;
-}
-</style>
diff --git a/src/components/util/getDataMixins.js b/src/components/util/getDataMixins.js
deleted file mode 100644
index 3060fb8..0000000
--- a/src/components/util/getDataMixins.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import $ from 'jquery';
-
-export var getDataMixin = {
-  /*
-  Mixin to retrieve a single object from the observation portal API given an endpoint to query.
-  You must override the `initializeDataEndpoint()` function.
-  */
-  data: function() {
-    const dataEndpoint = this.initializeDataEndpoint();
-    return {
-      dataLoadError: false,
-      dataLoaded: false,
-      dataNotFound: false,
-      data: this.initializeEmptyData(),
-      dataEndpoint: dataEndpoint
-    };
-  },
-  computed: {
-    observationPortalApiUrl: function() {
-      return this.$store.state.urls.observationPortalApi;
-    }
-  },
-  created: function() {
-    this.getData();
-  },
-  methods: {
-    initializeDataEndpoint: function() {
-      // Override this method to initialize the endpoint from which data will be retrieved.
-      return '';
-    },
-    setDataEndpoint: function(newEndpoint) {
-      this.dataEndpoint = newEndpoint;
-    },
-    initializeEmptyData: function() {
-      return {};
-    },
-    getData: function() {
-      this.clearLoadStates();
-      let that = this;
-      $.ajax({
-        url: this.observationPortalApiUrl + this.dataEndpoint
-      })
-        .done(function(response) {
-          that.successCallback(response);
-        })
-        .fail(function(response) {
-          that.failCallback(response);
-        })
-        .always(function() {
-          that.dataLoaded = true;
-        });
-    },
-    clearLoadStates: function() {
-      this.dataLoaded = false;
-      this.dataLoadError = false;
-      this.dataNotFound = false;
-    },
-    failCallback: function(response) {
-      if (response.status === 404 || response.status === 403) {
-        this.dataNotFound = true;
-      } else {
-        this.dataLoadError = true;
-      }
-    },
-    successCallback: function(response) {
-      this.data = response;
-      this.onSuccessfulRetrieval(response);
-    },
-    onSuccessfulRetrieval: function(response) {
-      // Override this function to run an action when data retrieval is successful.
-      return response;
-    }
-  }
-};
-
-export var getDataListMixin = {
-  /*
-  Extends `getDataMixin`.
-
-  Mixin to retrieve a list of objects from the observation portal API given an endpoint to query.
-  You must override the `initializeDataEndpoint()` function.
-  */
-  mixins: [getDataMixin],
-  data: function() {
-    return {
-      setNotFoundOnEmptyList: this.initializeSetNotFoundOnEmptyList()
-    };
-  },
-  methods: {
-    initializeEmptyData: function() {
-      return [];
-    },
-    initializeSetNotFoundOnEmptyList: function() {
-      // Override this to return true if the desired behavior is to set that data is not found
-      // when an empty list is returned.
-      return false;
-    },
-    successCallback(response) {
-      if (response.length < 1 && this.setNotFoundOnEmptyList) {
-        this.dataNotFound = true;
-      } else {
-        this.onSuccessfulRetrieval(response);
-        this.data = response;
-      }
-    }
-  }
-};
-
-export var getDataListWithCountMixin = {
-  /*
-  Extends `getDataListMixin`.
-
-  Mixin to retrieve an object containing a list of results as well as a count of how many results
-  there are in total from the observation portal API given an endpoint to query. You must override
-  the `initializeDataEndpoint()` function.
-  */
-  mixins: [getDataListMixin],
-  methods: {
-    initializeEmptyData: function() {
-      return { count: 0, results: [] };
-    },
-    successCallback(response) {
-      if (response.results.length < 1 && this.setNotFoundOnEmptyList) {
-        this.dataNotFound = true;
-      } else {
-        this.onSuccessfulRetrieval(response);
-        this.data = response;
-      }
-    }
-  }
-};
diff --git a/src/components/util/plotMixins.js b/src/components/util/plotMixins.js
deleted file mode 100644
index 34ed663..0000000
--- a/src/components/util/plotMixins.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export var plotZoomMixin = {
-  methods: {
-    plotZoom: function(zoomValue) {
-      var range = this.plot.getWindow();
-      var interval = range.end - range.start;
-      this.plot.setWindow({
-        start: range.start.valueOf() - interval * zoomValue,
-        end: range.end.valueOf() + interval * zoomValue
-      });
-    },
-    updateWindow: function(window) {
-      var currentWindow = this.plot.getWindow();
-      if (currentWindow.start !== window.start || currentWindow.end !== window.end) {
-        this.plot.setWindow(window.start, window.end, { animation: false });
-      }
-    }
-  }
-};
diff --git a/src/views/Apply.vue b/src/views/Apply.vue
index b07b176..899f0b0 100644
--- a/src/views/Apply.vue
+++ b/src/views/Apply.vue
@@ -74,10 +74,9 @@
 </template>
 <script>
 import _ from 'lodash';
-import { OCSUtil } from 'ocs-component-lib';
+import { OCSUtil, OCSMixin } from 'ocs-component-lib';
 
 import SciApplications from '@/components/SciApplications.vue';
-import { getDataListWithCountMixin } from '@/components/util/getDataMixins.js';
 
 export default {
   name: 'Apply',
@@ -93,7 +92,7 @@ export default {
       }
     }
   },
-  mixins: [getDataListWithCountMixin],
+  mixins: [OCSMixin.getDataListWithCountMixin],
   data: function() {
     return {
       collabCallsFields: [{ key: 'semester' }, { key: 'allocations' }, { key: 'deadline' }, { key: 'addProposal', label: '' }],
diff --git a/src/views/ObservationDetail.vue b/src/views/ObservationDetail.vue
index 54a9817..f3b0586 100644
--- a/src/views/ObservationDetail.vue
+++ b/src/views/ObservationDetail.vue
@@ -1,22 +1,26 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <h1>Observation {{ id }}</h1>
     <ocs-observation-detail
       :observation="data"
       :request-link="{ to: { name: 'requestDetail', params: { id: data.request } } }"
     ></ocs-observation-detail>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
-import DataLoader from '@/components/DataLoader.vue';
-import { getDataMixin } from '@/components/util/getDataMixins.js';
+import { OCSMixin } from 'ocs-component-lib';
+
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   name: 'ObservationDetail',
   components: {
-    DataLoader
+    NotFound
   },
-  mixins: [getDataMixin],
+  mixins: [OCSMixin.getDataMixin],
   props: {
     id: {
       type: [String, Number],
diff --git a/src/views/ProposalDetail.vue b/src/views/ProposalDetail.vue
index b07d892..8aecb74 100644
--- a/src/views/ProposalDetail.vue
+++ b/src/views/ProposalDetail.vue
@@ -1,5 +1,8 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <b-row>
       <b-col>
         <b-row>
@@ -206,19 +209,18 @@
         </div>
       </b-col>
     </b-row>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
 import _ from 'lodash';
 import $ from 'jquery';
-import { OCSUtil } from 'ocs-component-lib';
+import { OCSUtil, OCSMixin } from 'ocs-component-lib';
 
 import { tooltipConfig } from '@/utils.js';
-import DataLoader from '@/components/DataLoader.vue';
+import NotFound from '@/components/NotFound.vue';
 import CoInvestigatorTable from '@/components/CoInvestigatorTable.vue';
 import ProposalInvitations from '@/components/ProposalInvitations.vue';
 import InviteCoInvestigatorsForm from '@/components/InviteCoInvestigatorsForm.vue';
-import { getDataMixin } from '@/components/util/getDataMixins.js';
 
 export default {
   name: 'ProposalDetail',
@@ -228,12 +230,12 @@ export default {
     }
   },
   components: {
-    DataLoader,
     CoInvestigatorTable,
     ProposalInvitations,
-    InviteCoInvestigatorsForm
+    InviteCoInvestigatorsForm,
+    NotFound
   },
-  mixins: [getDataMixin],
+  mixins: [OCSMixin.getDataMixin],
   props: {
     id: {
       type: String,
diff --git a/src/views/RequestgroupDetail.vue b/src/views/RequestgroupDetail.vue
index dd95f12..86aafe1 100644
--- a/src/views/RequestgroupDetail.vue
+++ b/src/views/RequestgroupDetail.vue
@@ -1,5 +1,8 @@
 <template>
-  <data-loader :data-loaded="requestgroupLoaded" :data-load-error="requestgroupLoadError" :data-not-found="requestgroupNotFound">
+  <ocs-data-loader :data-loaded="requestgroupLoaded" :data-load-error="requestgroupLoadError" :data-not-found="requestgroupNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <b-row>
       <b-col>
         <h2 class="text-break">
@@ -86,7 +89,7 @@
         aria-controls="requests-table"
       />
     </template>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
 import $ from 'jquery';
@@ -94,14 +97,14 @@ import _ from 'lodash';
 
 import RequestDetail from '@/components/RequestDetail.vue';
 import RequestRow from '@/components/RequestRow.vue';
-import DataLoader from '@/components/DataLoader.vue';
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   name: 'RequestgroupDetail',
   components: {
     RequestDetail,
     RequestRow,
-    DataLoader
+    NotFound
   },
   data: function() {
     return {
diff --git a/src/views/SciApplicationCombinedPdf.vue b/src/views/SciApplicationCombinedPdf.vue
index a93d5a1..319069c 100644
--- a/src/views/SciApplicationCombinedPdf.vue
+++ b/src/views/SciApplicationCombinedPdf.vue
@@ -1,10 +1,13 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <iframe id="combined-pdf" style="position:absolute; left: 0; top: 0; border: none;" width="100%" height="100%" type="application/pdf" />
     <b-embed type="iframe" height="0" width="0" style="border: none;">
       <sci-application-detail-template id="pdf-content" :sci-app="data" is-combined-pdf></sci-application-detail-template>
     </b-embed>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
 import $ from 'jquery';
@@ -12,17 +15,17 @@ import _ from 'lodash';
 import Vue from 'vue';
 import { PDFDocument } from 'pdf-lib';
 import html2pdf from 'html2pdf.js';
+import { OCSMixin } from 'ocs-component-lib';
 
-import DataLoader from '@/components/DataLoader.vue';
 import SciApplicationDetailTemplate from '@/components/SciApplicationDetailTemplate.vue';
-import { getDataMixin } from '@/components/util/getDataMixins.js';
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   components: {
-    DataLoader,
-    SciApplicationDetailTemplate
+    SciApplicationDetailTemplate,
+    NotFound
   },
-  mixins: [getDataMixin],
+  mixins: [OCSMixin.getDataMixin],
   props: {
     sciAppId: {
       type: [String, Number],
diff --git a/src/views/SciApplicationDetail.vue b/src/views/SciApplicationDetail.vue
index b8fdc27..cdf0a8d 100644
--- a/src/views/SciApplicationDetail.vue
+++ b/src/views/SciApplicationDetail.vue
@@ -1,19 +1,23 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <sci-application-detail-template :sci-app="data"></sci-application-detail-template>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
-import DataLoader from '@/components/DataLoader.vue';
+import { OCSMixin } from 'ocs-component-lib';
+
 import SciApplicationDetailTemplate from '@/components/SciApplicationDetailTemplate.vue';
-import { getDataMixin } from '@/components/util/getDataMixins.js';
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   components: {
-    DataLoader,
-    SciApplicationDetailTemplate
+    SciApplicationDetailTemplate,
+    NotFound
   },
-  mixins: [getDataMixin],
+  mixins: [OCSMixin.getDataMixin],
   props: {
     sciAppId: {
       type: [String, Number],
diff --git a/src/views/SemesterAdminTable.vue b/src/views/SemesterAdminTable.vue
index f248f0e..d6c0a23 100644
--- a/src/views/SemesterAdminTable.vue
+++ b/src/views/SemesterAdminTable.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+      <template v-slot:not-found>
+        <not-found />
+      </template>
       <b-row>
         <b-col md="8">
           <b-form inline>
@@ -122,7 +125,7 @@
           <br />
         </template>
       </b-table>
-    </data-loader>
+    </ocs-data-loader>
     <!-- These are included for downloading the table data-->
     <script src="https://cdn.lco.global/script/tableExport.min.js" type="application/javascript"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js" type="application/javascript"></script>
@@ -131,22 +134,21 @@
 <script>
 import $ from 'jquery';
 import _ from 'lodash';
-import { OCSUtil } from 'ocs-component-lib';
+import { OCSUtil, OCSMixin } from 'ocs-component-lib';
 
-import DataLoader from '@/components/DataLoader.vue';
-import { getDataListMixin } from '@/components/util/getDataMixins.js';
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   name: 'SemesterAdminTable',
-  components: {
-    DataLoader
-  },
   filters: {
     formatFloat: function(value, precision) {
       return OCSUtil.formatFloat(value, precision);
     }
   },
-  mixins: [getDataListMixin],
+  components: {
+    NotFound
+  },
+  mixins: [OCSMixin.getDataListMixin],
   props: {
     id: {
       type: String,
diff --git a/src/views/SemesterDetail.vue b/src/views/SemesterDetail.vue
index 5c99ebf..4ab17c7 100644
--- a/src/views/SemesterDetail.vue
+++ b/src/views/SemesterDetail.vue
@@ -1,5 +1,8 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <h1>{{ id }} proposals</h1>
     <template v-if="data.length < 1">
       There are no active proposals for this semester.
@@ -90,20 +93,16 @@
         </table>
       </div>
     </template>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
 import _ from 'lodash';
-import { OCSUtil } from 'ocs-component-lib';
+import { OCSUtil, OCSMixin } from 'ocs-component-lib';
 
-import DataLoader from '@/components/DataLoader.vue';
-import { getDataListMixin } from '@/components/util/getDataMixins.js';
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   name: 'SemesterDetail',
-  components: {
-    DataLoader
-  },
   filters: {
     formatFloat: function(value, precision) {
       return OCSUtil.formatFloat(value, precision);
@@ -112,7 +111,10 @@ export default {
       return value.charAt(0);
     }
   },
-  mixins: [getDataListMixin],
+  components: {
+    NotFound
+  },
+  mixins: [OCSMixin.getDataListMixin],
   props: {
     id: {
       type: String,
diff --git a/src/views/SemesterDetailCurrent.vue b/src/views/SemesterDetailCurrent.vue
index 1ee4187..caa48c8 100644
--- a/src/views/SemesterDetailCurrent.vue
+++ b/src/views/SemesterDetailCurrent.vue
@@ -1,19 +1,23 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound"></data-loader>
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
+  </ocs-data-loader>
 </template>
 <script>
 import moment from 'moment';
+import { OCSMixin } from 'ocs-component-lib';
 
 import { datetimeFormat } from '@/utils.js';
-import DataLoader from '@/components/DataLoader.vue';
-import { getDataListWithCountMixin } from '@/components/util/getDataMixins.js';
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   name: 'SemesterDetailCurrent',
   components: {
-    DataLoader
+    NotFound
   },
-  mixins: [getDataListWithCountMixin],
+  mixins: [OCSMixin.getDataListWithCountMixin],
   methods: {
     initializeDataEndpoint: function() {
       let datetimeNow = moment.utc().format(datetimeFormat);
diff --git a/src/views/UpdateSciApplication.vue b/src/views/UpdateSciApplication.vue
index 47c4c68..bf3cc3f 100644
--- a/src/views/UpdateSciApplication.vue
+++ b/src/views/UpdateSciApplication.vue
@@ -1,20 +1,24 @@
 <template>
-  <data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+  <ocs-data-loader :data-loaded="dataLoaded" :data-load-error="dataLoadError" :data-not-found="dataNotFound">
+    <template v-slot:not-found>
+      <not-found />
+    </template>
     <edit-sci-application v-if="data.call" :call-id="data.call.id" :initial-sci-app="data"> </edit-sci-application>
-  </data-loader>
+  </ocs-data-loader>
 </template>
 <script>
-import { getDataMixin } from '@/components/util/getDataMixins.js';
-import DataLoader from '@/components/DataLoader.vue';
+import { OCSMixin } from 'ocs-component-lib';
+
 import EditSciApplication from '@/components/EditSciApplication.vue';
+import NotFound from '@/components/NotFound.vue';
 
 export default {
   name: 'UpdateSciApplication',
   components: {
-    DataLoader,
-    EditSciApplication
+    EditSciApplication,
+    NotFound
   },
-  mixins: [getDataMixin],
+  mixins: [OCSMixin.getDataMixin],
   props: {
     sciAppId: {
       type: [String, Number],

From dda0e8637af30ba4f7e1f4d655dfcf5f37b34cb4 Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Mon, 8 Mar 2021 16:22:45 -0800
Subject: [PATCH 08/15] navigate to observation page on click on an observation
 in the plot

---
 src/components/RequestDetail.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/RequestDetail.vue b/src/components/RequestDetail.vue
index 80d3dcf..b3b4a49 100644
--- a/src/components/RequestDetail.vue
+++ b/src/components/RequestDetail.vue
@@ -51,7 +51,8 @@
             :data="observationData"
             show-plot-controls
             show-legend
-          ></ocs-observation-history-plot>
+            @observationClicked="onObservationClicked"
+          />
           <div v-show="observationData.length < 1" class="text-center">
             <h3>This request has not been scheduled.</h3>
           </div>
@@ -307,6 +308,9 @@ export default {
         that.loadingColor = false;
         window.open(data['url'], '_blank');
       });
+    },
+    onObservationClicked: function(observationId) {
+      this.$router.push({ name: 'observationDetail', params: { id: observationId } });
     }
   }
 };

From e1e1ff8f1d513989e7bc87da475506756347246f Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Mon, 8 Mar 2021 17:27:54 -0800
Subject: [PATCH 09/15] Update link set for mixin

---
 src/assets/css/plot_style.css           | 154 ------------------------
 src/components/DataLoader.vue           |  48 --------
 src/components/EditSciApplication.vue   |   2 +-
 src/components/ProposalInvitations.vue  |   2 +-
 src/components/SciApplications.vue      |   2 +-
 src/views/Apply.vue                     |   2 +-
 src/views/ObservationDetail.vue         |   2 +-
 src/views/ProposalDetail.vue            |   2 +-
 src/views/SciApplicationCombinedPdf.vue |   2 +-
 src/views/SciApplicationDetail.vue      |   2 +-
 src/views/SemesterAdminTable.vue        |   2 +-
 src/views/SemesterDetail.vue            |   2 +-
 src/views/SemesterDetailCurrent.vue     |   2 +-
 src/views/UpdateSciApplication.vue      |   2 +-
 14 files changed, 12 insertions(+), 214 deletions(-)
 delete mode 100644 src/assets/css/plot_style.css
 delete mode 100644 src/components/DataLoader.vue

diff --git a/src/assets/css/plot_style.css b/src/assets/css/plot_style.css
deleted file mode 100644
index f3c8256..0000000
--- a/src/assets/css/plot_style.css
+++ /dev/null
@@ -1,154 +0,0 @@
-.vis-line-graph text{
-	display: none;
-	pointer-events: none;
-}
-
-.vis-point {
-	pointer-events: all;
-}
-
-.vis-item.vis-range{
-	border-radius: 0px;
-}
-
-div.vis-tooltip{
-    word-wrap: break-word;
-    max-width: 80em;
-    white-space: normal;
-}
-
-.AVAILABLE {
-	background-color: deepskyblue;
-	border-color: deepskyblue;
-}
-
-.OFFLINE {
-	background-color: orange;
-	border-color: orange;
-}
-
-.NOT_OK_TO_OPEN {
-	background-color: purple;
-	border-color: purple;
-}
-
-.SITE_AGENT_UNRESPONSIVE {
-	background-color: black;
-	border-color: black;
-}
-
-.SEQUENCER_DISABLED {
-	background-color: orange;
-	border-color: orange;
-}
-
-.ENCLOSURE_INTERLOCK {
-	background-color: purple;
-	border-color: purple;
-}
-
-.SEQUENCER_UNAVAILABLE {
-	background-color: purple;
-	border-color: purple;
-}
-
-.SCHEDULED {
-    background-color: #c8dac2;
-    border-color: #658e57;
-}
-
-.NOT_ATTEMPTED {
-    background-color: olive;
-    border-color: darkolivegreen;
-}
-
-.CANCELED {
-    background-color: grey;
-    border-color: darkgrey;
-}
-
-.IN_PROGRESS {
-    background-color: lightgreen;
-    border-color: green;
-}
-
-.COMPLETED {
-    color: white;
-    background-color: green;
-    border-color: darkgreen;
-}
-
-.PARTIALLY-COMPLETED {
-    background-color: yellow;
-    border-color: goldenrod;
-}
-
-.FAILED {
-    background-color: red;
-    border-color: maroon;
-}
-
-.ABORTED {
-    background-color: orange;
-    border-color: darkorange;
-}
-
-.NO_CONNECTION {
-    background-color: black;
-    border-color: darkgrey;
-}
-
-
-.legend-item {
-    width: 18px;
-    height: 12px;
-    display: inline-block;
-}
-
-.panel-default>.panel-heading:hover{
-	background-color: #dcdcdc;
-	border-color: #cfcfcf;
-}
-
-.panel-success>.panel-heading:hover{
-	background-color: #c1e2b3;
-	border-color: #b2dba1;
-}
-
-.panel-warning>.panel-heading:hover{
-	background-color: #f7ecb5;
-	border-color: #f5e79e;
-}
-
-.plot_controls {
-    position: absolute;
-    right: 0;
-    margin-right: 22px;
-    margin-top: 4px;
-    z-index: 9999;
-}
-
-.clickable-thumbnail {
-	display:block;
-	width: 100%;
-	height: 100%;
-}
-
-.clickable-thumbnail:visited, .clickable-thumbnail:link{
-	text-decoration: none;
-	color: lightgrey;
-}
-
-.clickable-thumbnail:hover{
-	color:white;
-}
-
-.width180 {
-	width: 180px;
-	font-size: 21px;
-}
-
-.width120 {
-	width: 120px;
-	font-size: 21px;
-}
diff --git a/src/components/DataLoader.vue b/src/components/DataLoader.vue
deleted file mode 100644
index 778fe19..0000000
--- a/src/components/DataLoader.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <b-container fluid class="p-0">
-    <template v-if="dataLoadError">
-      <p class="text-center my-2">
-        {{ loadErrorMessage }}
-      </p>
-    </template>
-    <template v-else-if="!dataLoaded">
-      <div class="text-center my-2">
-        <i class="fa fa-spin fa-spinner" />
-      </div>
-    </template>
-    <template v-else-if="dataLoaded && dataNotFound">
-      <not-found />
-    </template>
-    <template v-else>
-      <slot> </slot>
-    </template>
-  </b-container>
-</template>
-<script>
-import NotFound from '@/components/NotFound.vue';
-
-export default {
-  name: 'DataLoader',
-  components: {
-    NotFound
-  },
-  props: {
-    dataLoaded: {
-      type: Boolean,
-      required: true
-    },
-    dataLoadError: {
-      type: Boolean,
-      required: true
-    },
-    dataNotFound: {
-      type: Boolean,
-      required: true
-    },
-    loadErrorMessage: {
-      type: String,
-      default: 'Oops, there was a problem getting your data. Please try again.'
-    }
-  }
-};
-</script>
diff --git a/src/components/EditSciApplication.vue b/src/components/EditSciApplication.vue
index 9fb24ad..38cd51a 100644
--- a/src/components/EditSciApplication.vue
+++ b/src/components/EditSciApplication.vue
@@ -553,7 +553,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/calls/' + this.callId + '/';
+      return this.$store.state.urls.observationPortalApi + '/api/calls/' + this.callId + '/';
     },
     getSciAppData: function(callId, initialSciApp) {
       // Return sciApp data. If `initialSciApp` is passed in, the sciApp data that
diff --git a/src/components/ProposalInvitations.vue b/src/components/ProposalInvitations.vue
index b4e544e..f6a4fea 100644
--- a/src/components/ProposalInvitations.vue
+++ b/src/components/ProposalInvitations.vue
@@ -61,7 +61,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/invitations/?pending=true&proposal=' + this.proposalId;
+      return this.$store.state.urls.observationPortalApi + '/api/invitations/?pending=true&proposal=' + this.proposalId;
     },
     getDeleteInvitationConfirmationMessage: function(email) {
       return 'Are you sure you want to delete the invitation for ' + email + ' for this proposal?';
diff --git a/src/components/SciApplications.vue b/src/components/SciApplications.vue
index 2988f09..d6657bb 100644
--- a/src/components/SciApplications.vue
+++ b/src/components/SciApplications.vue
@@ -171,7 +171,7 @@ export default {
   methods: {
     initializeDataEndpoint: function() {
       // TODO: Paginate results
-      let endpoint = '/api/scienceapplications/?only_authored=true&limit=1000&ordering=-call__semester';
+      let endpoint = this.$store.state.urls.observationPortalApi + '/api/scienceapplications/?only_authored=true&limit=1000&ordering=-call__semester';
       if (this.isSciCollab) {
         return endpoint + '&proposal_type=COLAB';
       } else {
diff --git a/src/views/Apply.vue b/src/views/Apply.vue
index 899f0b0..f990c86 100644
--- a/src/views/Apply.vue
+++ b/src/views/Apply.vue
@@ -125,7 +125,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/calls/?only_open=true';
+      return this.$store.state.urls.observationPortalApi + '/api/calls/?only_open=true';
     },
     getTimeRequested: function(callId, telescopeName) {
       for (let call of this.data.results) {
diff --git a/src/views/ObservationDetail.vue b/src/views/ObservationDetail.vue
index f3b0586..a2d39b3 100644
--- a/src/views/ObservationDetail.vue
+++ b/src/views/ObservationDetail.vue
@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/observations/' + this.id + '/';
+      return this.$store.state.urls.observationPortalApi + '/api/observations/' + this.id + '/';
     }
   }
 };
diff --git a/src/views/ProposalDetail.vue b/src/views/ProposalDetail.vue
index 8aecb74..f4db3a1 100644
--- a/src/views/ProposalDetail.vue
+++ b/src/views/ProposalDetail.vue
@@ -294,7 +294,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/proposals/' + this.id + '/';
+      return this.$store.state.urls.observationPortalApi + '/api/proposals/' + this.id + '/';
     },
     clearMessages: function() {
       this.$store.commit('clearAllMessages');
diff --git a/src/views/SciApplicationCombinedPdf.vue b/src/views/SciApplicationCombinedPdf.vue
index 319069c..59344fe 100644
--- a/src/views/SciApplicationCombinedPdf.vue
+++ b/src/views/SciApplicationCombinedPdf.vue
@@ -90,7 +90,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/scienceapplications/' + this.sciAppId + '/';
+      return this.$store.state.urls.observationPortalApi + '/api/scienceapplications/' + this.sciAppId + '/';
     },
     createCombinedPdf: function(uploadedPdfArrayBuffer) {
       var options = {
diff --git a/src/views/SciApplicationDetail.vue b/src/views/SciApplicationDetail.vue
index cdf0a8d..deeea3b 100644
--- a/src/views/SciApplicationDetail.vue
+++ b/src/views/SciApplicationDetail.vue
@@ -43,7 +43,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/scienceapplications/' + this.sciAppId + '/';
+      return this.$store.state.urls.observationPortalApi + '/api/scienceapplications/' + this.sciAppId + '/';
     }
   }
 };
diff --git a/src/views/SemesterAdminTable.vue b/src/views/SemesterAdminTable.vue
index d6c0a23..aad3d08 100644
--- a/src/views/SemesterAdminTable.vue
+++ b/src/views/SemesterAdminTable.vue
@@ -315,7 +315,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return this.generateDataEndpoint();
+      return this.$store.state.urls.observationPortalApi + this.generateDataEndpoint();
     },
     generateDataEndpoint: function() {
       return '/api/semesters/' + this.id + '/timeallocations/';
diff --git a/src/views/SemesterDetail.vue b/src/views/SemesterDetail.vue
index 4ab17c7..817fe86 100644
--- a/src/views/SemesterDetail.vue
+++ b/src/views/SemesterDetail.vue
@@ -128,7 +128,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/semesters/' + this.id + '/proposals/';
+      return this.$store.state.urls.observationPortalApi + '/api/semesters/' + this.id + '/proposals/';
     },
     getAllocationForInstrument: function(allocation, instrumentType) {
       let hours = 0;
diff --git a/src/views/SemesterDetailCurrent.vue b/src/views/SemesterDetailCurrent.vue
index caa48c8..2b37fe1 100644
--- a/src/views/SemesterDetailCurrent.vue
+++ b/src/views/SemesterDetailCurrent.vue
@@ -21,7 +21,7 @@ export default {
   methods: {
     initializeDataEndpoint: function() {
       let datetimeNow = moment.utc().format(datetimeFormat);
-      return '/api/semesters/?semester_contains=' + datetimeNow;
+      return this.$store.state.urls.observationPortalApi + '/api/semesters/?semester_contains=' + datetimeNow;
     },
     initializeSetNotFoundOnEmptyList: function() {
       return true;
diff --git a/src/views/UpdateSciApplication.vue b/src/views/UpdateSciApplication.vue
index bf3cc3f..0f80676 100644
--- a/src/views/UpdateSciApplication.vue
+++ b/src/views/UpdateSciApplication.vue
@@ -27,7 +27,7 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return '/api/scienceapplications/' + this.sciAppId + '/?status=DRAFT';
+      return this.$store.state.urls.observationPortalApi + '/api/scienceapplications/' + this.sciAppId + '/?status=DRAFT';
     }
   }
 };

From 50f8de93910a481dac665c497b857771c34a8364 Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Mon, 8 Mar 2021 18:02:38 -0800
Subject: [PATCH 10/15] Rename variable

---
 src/components/AirmassTelescopeStates.vue | 4 ++--
 src/views/ObservationDetail.vue           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AirmassTelescopeStates.vue b/src/components/AirmassTelescopeStates.vue
index 6a5465d..d941f21 100644
--- a/src/components/AirmassTelescopeStates.vue
+++ b/src/components/AirmassTelescopeStates.vue
@@ -56,7 +56,7 @@ export default {
         { eventType: 'SEQUENCER_DISABLED', text: 'Manually Disabled' },
         { eventType: 'NO_CONNECTION', text: 'No Connection to Telescope' }
       ],
-      additionalEventTypeText: {
+      eventTypeReasonPrefix: {
         AVAILABLE: 'Available',
         NOT_OK_TO_OPEN: '',
         SEQUENCER_DISABLED: 'Manually Disabled',
@@ -84,7 +84,7 @@ export default {
           } else if (this.initializingEventTypeCodes.indexOf(event['event_type']) > -1) {
             reason = ': Telescope initializing';
           }
-          let additionalText = _.get(this.additionalEventTypeText, [event['event_type']], '');
+          let additionalText = _.get(this.eventTypeReasonPrefix, [event['event_type']], '');
           this.telescopeStatesData[telescope][i]['event_reason'] = additionalText + reason;
         }
       }
diff --git a/src/views/ObservationDetail.vue b/src/views/ObservationDetail.vue
index a2d39b3..a19b0dd 100644
--- a/src/views/ObservationDetail.vue
+++ b/src/views/ObservationDetail.vue
@@ -7,7 +7,7 @@
     <ocs-observation-detail
       :observation="data"
       :request-link="{ to: { name: 'requestDetail', params: { id: data.request } } }"
-    ></ocs-observation-detail>
+    />
   </ocs-data-loader>
 </template>
 <script>

From 7e5f69cd8852ad131411e20fb4dc85c40ef4c7c0 Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Mon, 8 Mar 2021 18:09:17 -0800
Subject: [PATCH 11/15] Fix mispelled word

---
 src/views/Profile.vue        | 4 ++--
 src/views/ProposalDetail.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 4ab68bc..0bf8ed0 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -51,7 +51,7 @@
         <b-form-group id="checkbox-group-notifications-enabled" label-for="checkbox-notifications-enabled">
           <template slot="description">
             <p>
-              Recieve email notifications for every completed observation on all proposals. To recieve email notifications for a single proposal,
+              Receive email notifications for every completed observation on all proposals. To receive email notifications for a single proposal,
               update your preferences on that proposal's detail page.
             </p>
           </template>
@@ -66,7 +66,7 @@
         <b-form-group id="checkbox-group-notifications-on-authored-only" label-for="checkbox-notifications-on-authored-only">
           <template slot="description">
             <p>
-              Only recieve email notifications for requests you have submitted yourself. Note this setting alone does not enable any notifications.
+              Only receive email notifications for requests you have submitted yourself. Note this setting alone does not enable any notifications.
               You must either enable the "Notifications enabled" setting above or enable notifications on a specific proposal for this to take effect.
             </p>
           </template>
diff --git a/src/views/ProposalDetail.vue b/src/views/ProposalDetail.vue
index f4db3a1..ede539c 100644
--- a/src/views/ProposalDetail.vue
+++ b/src/views/ProposalDetail.vue
@@ -36,7 +36,7 @@
             ><sup
               v-b-tooltip="tooltipConfig"
               class="text-primary"
-              title="If notifications are enabled, you will recieve notifications whenever a requested observation on this proposal is completed."
+              title="If notifications are enabled, you will receive notifications whenever a requested observation on this proposal is completed."
               >?</sup
             >
             <b-form @submit="updateProposalNotification">

From f3ae5ad52a9c844ed675a7d5092df123826a8f5f Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Thu, 11 Mar 2021 13:02:20 -0800
Subject: [PATCH 12/15] Add a couple of telescope states that had been missing
 from the telescope states plot, some tweaking

---
 src/components/AirmassTelescopeStates.vue | 38 ++++++++++++++++-------
 src/components/EditSciApplication.vue     |  3 ++
 src/components/ProposalInvitations.vue    |  5 +++
 src/components/RequestRow.vue             |  2 +-
 src/views/SemesterAdminTable.vue          |  4 +--
 5 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/AirmassTelescopeStates.vue b/src/components/AirmassTelescopeStates.vue
index d941f21..d89d931 100644
--- a/src/components/AirmassTelescopeStates.vue
+++ b/src/components/AirmassTelescopeStates.vue
@@ -14,7 +14,7 @@
     <ocs-telescope-states-plot
       v-show="'airmass_limit' in airmassData"
       ref="telescope_states"
-      :data="telescopeStatesData"
+      :data="transformedTelescopeData"
       :active-observation="activeObservation"
       :show-zoom-controls="false"
       :site-code-to-color="siteToColor"
@@ -27,6 +27,7 @@
 </template>
 <script>
 import _ from 'lodash';
+import { OCSUtil } from 'ocs-component-lib';
 
 import { siteToColor, siteCodeToName } from '@/utils.js';
 
@@ -61,34 +62,39 @@ export default {
         NOT_OK_TO_OPEN: '',
         SEQUENCER_DISABLED: 'Manually Disabled',
         SITE_AGENT_UNRESPONSIVE: 'No Connection to Telescope',
+        NOT_AVAILABLE: 'No Connection to Telescope',
         OFFLINE: 'Manually Disabled',
         ENCLOSURE_INTERLOCK: '',
+        ENCLOSURE_DISABLED: '',
         SEQUENCER_UNAVAILABLE: '',
         NO_CONNECTION: ''
       },
-      unavailableEventTypeCodes: ['NOT_OK_TO_OPEN', 'ENCLOSURE_INTERLOCK'],
+      unavailableEventTypeCodes: ['NOT_OK_TO_OPEN', 'ENCLOSURE_INTERLOCK', 'ENCLOSURE_DISABLED'],
       initializingEventTypeCodes: ['SEQUENCER_UNAVAILABLE']
     };
   },
-  created: function() {
-    this.transformEventData();
-  },
-  methods: {
-    transformEventData: function() {
+  computed: {
+    transformedTelescopeData: function() {
+      let transformedData = {};
       for (let telescope in this.telescopeStatesData) {
+        transformedData[telescope] = [];
         for (let i in this.telescopeStatesData[telescope]) {
-          let event = this.telescopeStatesData[telescope][i];
+          transformedData[telescope].push(OCSUtil.copyObject(this.telescopeStatesData[telescope][i]));
+          let event = transformedData[telescope][i];
           let reason = '';
           if (this.unavailableEventTypeCodes.indexOf(event['event_type']) > -1) {
             reason = event['event_reason'];
           } else if (this.initializingEventTypeCodes.indexOf(event['event_type']) > -1) {
             reason = ': Telescope initializing';
           }
-          let additionalText = _.get(this.eventTypeReasonPrefix, [event['event_type']], '');
-          this.telescopeStatesData[telescope][i]['event_reason'] = additionalText + reason;
+          let prefixText = _.get(this.eventTypeReasonPrefix, [event['event_type']], '');
+          transformedData[telescope][i]['event_reason'] = prefixText + reason;
         }
       }
-    },
+      return transformedData;
+    }
+  },
+  methods: {
     updateAirmassRange: function(window) {
       this.$refs.airmass.updateWindow(window);
     },
@@ -129,11 +135,21 @@ export default {
   border-color: purple;
 }
 
+.ENCLOSURE_DISABLED {
+  background-color: purple;
+  border-color: purple;
+}
+
 .SEQUENCER_UNAVAILABLE {
   background-color: purple;
   border-color: purple;
 }
 
+.NOT_AVAILABLE {
+  background-color: purple;
+  border-color: purple;
+}
+
 .NO_CONNECTION {
   background-color: black;
   border-color: darkgrey;
diff --git a/src/components/EditSciApplication.vue b/src/components/EditSciApplication.vue
index 38cd51a..7ed1de8 100644
--- a/src/components/EditSciApplication.vue
+++ b/src/components/EditSciApplication.vue
@@ -519,6 +519,9 @@ export default {
     },
     coInvestigatorsNonFieldErrors: function() {
       return _.get(this.apiValidationErrors, ['coinvestigator_set', 'non_field_errors'], []);
+    },
+    observationPortalApiUrl: function() {
+      return this.$store.state.urls.observationPortalApi;
     }
   },
   watch: {
diff --git a/src/components/ProposalInvitations.vue b/src/components/ProposalInvitations.vue
index f6a4fea..6921fe2 100644
--- a/src/components/ProposalInvitations.vue
+++ b/src/components/ProposalInvitations.vue
@@ -59,6 +59,11 @@ export default {
       }
     };
   },
+  computed: {
+    observationPortalApiUrl: function() {
+      return this.$store.state.urls.observationPortalApi;
+    }
+  },
   methods: {
     initializeDataEndpoint: function() {
       return this.$store.state.urls.observationPortalApi + '/api/invitations/?pending=true&proposal=' + this.proposalId;
diff --git a/src/components/RequestRow.vue b/src/components/RequestRow.vue
index 3611ad3..04ac58d 100644
--- a/src/components/RequestRow.vue
+++ b/src/components/RequestRow.vue
@@ -11,7 +11,7 @@
         <b-col align-self="center" class="border-right">
           <b-row align-h="center">
             <b-button-group>
-              <b-button :href="requestApiUrl" variant="outline-secondary">View in API</b-button>
+              <b-button :href="requestApiUrl" variant="outline-secondary"><i class="fa fa-fw fa-code" /> View in API</b-button>
               <b-button v-if="requestIsComplete" variant="outline-secondary" :disabled="!archiveDataIsAvailable" @click="downloadAllData">
                 <i class="fa fa-fw fa-download" /> Download
               </b-button>
diff --git a/src/views/SemesterAdminTable.vue b/src/views/SemesterAdminTable.vue
index aad3d08..ef0f966 100644
--- a/src/views/SemesterAdminTable.vue
+++ b/src/views/SemesterAdminTable.vue
@@ -315,10 +315,10 @@ export default {
   },
   methods: {
     initializeDataEndpoint: function() {
-      return this.$store.state.urls.observationPortalApi + this.generateDataEndpoint();
+      return this.generateDataEndpoint();
     },
     generateDataEndpoint: function() {
-      return '/api/semesters/' + this.id + '/timeallocations/';
+      return this.$store.state.urls.observationPortalApi + '/api/semesters/' + this.id + '/timeallocations/';
     },
     sumFormatter: function(field) {
       let data = _.map(this.filteredTimeallocations, field);

From c2154d35780e76a7b6a9c535e51f9d5b2417984c Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Thu, 11 Mar 2021 13:05:03 -0800
Subject: [PATCH 13/15] Fix lint error

---
 src/views/ObservationDetail.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/views/ObservationDetail.vue b/src/views/ObservationDetail.vue
index a19b0dd..a3e1bf1 100644
--- a/src/views/ObservationDetail.vue
+++ b/src/views/ObservationDetail.vue
@@ -4,10 +4,7 @@
       <not-found />
     </template>
     <h1>Observation {{ id }}</h1>
-    <ocs-observation-detail
-      :observation="data"
-      :request-link="{ to: { name: 'requestDetail', params: { id: data.request } } }"
-    />
+    <ocs-observation-detail :observation="data" :request-link="{ to: { name: 'requestDetail', params: { id: data.request } } }" />
   </ocs-data-loader>
 </template>
 <script>

From 3502a0831af2c31e5b171551e22f996c29406c6c Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Thu, 11 Mar 2021 13:57:50 -0800
Subject: [PATCH 14/15] Add backend url where it was removed

---
 src/components/SciApplications.vue | 3 +++
 src/views/CreateSciApplication.vue | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/SciApplications.vue b/src/components/SciApplications.vue
index d6657bb..aad2402 100644
--- a/src/components/SciApplications.vue
+++ b/src/components/SciApplications.vue
@@ -157,6 +157,9 @@ export default {
     };
   },
   computed: {
+    observationPortalApiUrl: function() {
+      return this.$store.state.urls.observationPortalApi;
+    },
     submittedApplications: function() {
       return _.filter(this.data.results, app => {
         return app.status !== 'DRAFT';
diff --git a/src/views/CreateSciApplication.vue b/src/views/CreateSciApplication.vue
index 2a4f433..580b153 100644
--- a/src/views/CreateSciApplication.vue
+++ b/src/views/CreateSciApplication.vue
@@ -5,7 +5,7 @@
 import EditSciApplication from '@/components/EditSciApplication.vue';
 
 export default {
-  name: 'UpdateSciApplication',
+  name: 'CreateSciApplication',
   components: {
     EditSciApplication
   },

From e610c912f379813185fa8d9bc14cfa67a096935a Mon Sep 17 00:00:00 2001
From: eheinrich <eheinrichjosties@gmail.com>
Date: Thu, 11 Mar 2021 14:22:10 -0800
Subject: [PATCH 15/15] Update version of ocs-component-lib

---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fe24052..3976a93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10213,9 +10213,9 @@
       "dev": true
     },
     "ocs-component-lib": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/ocs-component-lib/-/ocs-component-lib-0.2.1.tgz",
-      "integrity": "sha512-27CRYNVjl7NEkYMg7mpP9loNF+NmcvzeuOafzLrAiW3mhsOobX6S0fsvd8e7Z7qtkwjYygUv3uvAsJc847W/iA==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/ocs-component-lib/-/ocs-component-lib-0.3.0.tgz",
+      "integrity": "sha512-IrSTA9N/4/QRIE06BjzxkOQWKhSYRWtahW1d4r3cs+OIDeTseyuS8JMWWUvqfwRefuGZYB+NielwWZluqDhhfA==",
       "requires": {
         "core-js": "^3.6.5",
         "vue": "^2.6.11"
diff --git a/package.json b/package.json
index 06cfb4c..360e854 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "jquery-file-download": "^1.4.6",
     "lodash": "^4.17.13",
     "moment": "^2.22.1",
-    "ocs-component-lib": "^0.2.1",
+    "ocs-component-lib": "^0.3.0",
     "pdf-lib": "^1.12.0",
     "popper.js": "^1.16.1",
     "vis": "4.19.1",