Merge pull request #3 from observatorycontrolsystem/feature/add-compose-form

Feature/add compose form

Author: eheinrich

package-lock.json

@@ -8,22 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "babel-plugin-polyfill-corejs2": "^0.2.0",
+    "@vue/composition-api": "^1.0.0-rc.7",
     "bootstrap": "^4.5.3",
-    "bootstrap-table": "^1.14.2",
     "bootstrap-vue": "^2.20.1",
-    "chart.js": "^2.8.0",
-    "chartjs-plugin-annotation": "^0.5.7",
     "core-js": "^3.6.5",
-    "html2pdf.js": "^0.9.2",
-    "http-parser-js": "^0.5.3",
     "jquery": "^3.5.0",
     "lodash": "^4.17.13",
     "moment": "^2.22.1",
-    "ocs-component-lib": "^0.6.0",
-    "pdf-lib": "^1.12.0",
-    "popper.js": "^1.16.1",
-    "terser": "3.14",
+    "ocs-component-lib": "^0.7.0",
     "vis": "4.19.1",
     "vue": "^2.6.11",
     "vue-ctk-date-time-picker": "^2.0.9",

package.json

@@ -3,10 +3,16 @@
     <div>
       <b-navbar toggleable="lg" variant="dark" type="dark">
         <b-navbar-brand>
-          <div id="name-large" class="text-left pl-2 align-top d-none d-lg-inline-block">
-            Example<br/>Observation Portal
+          <div
+            id="name-large"
+            class="text-left pl-2 align-top d-none d-lg-inline-block"
+          >
+            Example<br />Observation Portal
           </div>
-          <div id="name-small" class="text-left pl-2 align-middle d-inline-block d-lg-none">
+          <div
+            id="name-small"
+            class="text-left pl-2 align-middle d-inline-block d-lg-none"
+          >
             Observation Portal
           </div>
         </b-navbar-brand>
@@ -16,12 +22,15 @@
             <b-nav-item :to="{ name: 'requests' }">Requests</b-nav-item>
             <b-nav-item :to="{ name: 'create' }">Submit Observation</b-nav-item>
             <b-nav-item :to="{ name: 'observations' }">Observations</b-nav-item>
-
             <template v-if="userIsAuthenticated">
               <hr class="w-100 d-lg-none border-light" />
-              <b-nav-text class="d-lg-none"><i class="fas fa-user-alt"></i>
-              <span class="font-weight-bold">{{ profile.username }}</span></b-nav-text >
-              <b-nav-item class="d-lg-none" :to="{ name: 'profile' }" >Profile</b-nav-item >
+              <b-nav-text class="d-lg-none">
+                <i class="fas fa-user-alt"></i>
+                <span class="font-weight-bold">{{ profile.username }}</span>
+              </b-nav-text>
+              <b-nav-item class="d-lg-none" :to="{ name: 'profile' }">
+                Profile
+              </b-nav-item>
               <passthrough-get
                 class="d-lg-none"
                 endpoint="/accounts/logout/"
@@ -33,10 +42,11 @@
               />
             </template>
             <template v-else>
-              <b-nav-item class="d-lg-none" :to="{ name: 'login' }">Login</b-nav-item>
+              <b-nav-item class="d-lg-none" :to="{ name: 'login' }">
+                Login
+              </b-nav-item>
             </template>
           </b-navbar-nav>
-
           <b-navbar-nav class="ml-auto">
             <b-nav-item-dropdown
               v-if="userIsAuthenticated"
@@ -46,16 +56,14 @@
               <template #button-content>
                 <i class="fas fa-user-alt"></i>
               </template>
-              <b-dropdown-text
-                >Logged in as
-                <span class="font-weight-bold">{{
-                  profile.username
-                }}</span></b-dropdown-text
-              >
+              <b-dropdown-text>
+                Logged in as
+                <span class="font-weight-bold">{{ profile.username }}</span>
+              </b-dropdown-text>
               <b-dropdown-divider></b-dropdown-divider>
-              <b-dropdown-item :to="{ name: 'profile' }"
-                >Profile</b-dropdown-item
-              >
+              <b-dropdown-item :to="{ name: 'profile' }">
+                Profile
+              </b-dropdown-item>
               <passthrough-get
                 endpoint="/accounts/logout/"
                 :as-link="true"
@@ -65,12 +73,17 @@
                 error-message="Oops, there was an error logging out, please try again."
               />
             </b-nav-item-dropdown>
-            <b-nav-item v-else :to="{ name: 'login' }" class="d-none d-lg-block">Login</b-nav-item >
+            <b-nav-item
+              v-else
+              :to="{ name: 'login' }"
+              class="d-none d-lg-block"
+            >
+              Login
+            </b-nav-item>
           </b-navbar-nav>
         </b-collapse>
       </b-navbar>
     </div>
-
     <b-container :fluid="isFluidPage" class="flex-shrink-0 p-1">
       <b-row>
         <b-col md="12">
@@ -89,19 +102,22 @@
       </b-row>
       <router-view class="my-3" />
     </b-container>
-
     <div class="footer text-center mt-auto pt-2">
       <ul>
         <li>
-          <a class="black" title="github" href="https://github.com/observatorycontrolsystem/" >
-            <i class="fab fa-github"></i> View the Observatory Control System on Github </a>
+          <a
+            class="black"
+            title="github"
+            href="https://github.com/observatorycontrolsystem/"
+          >
+            <i class="fab fa-github"></i> View the Observatory Control System on
+            Github
+          </a>
         </li>
       </ul>
     </div>
-
   </div>
 </template>
-
 <script>
 import PassthroughGet from "@/components/PassthroughGet.vue";
 
@@ -137,7 +153,6 @@ export default {
 #app {
   min-height: 100vh;
 }
-
 .footer {
   background-color: #ced6e0;
 }
@@ -151,14 +166,6 @@ export default {
 .footer ul li:first-child {
   border: none;
 }
-
-.brand-image-large {
-  max-height: 50px;
-  padding-right: 0.5rem;
-}
-.brand-image-small {
-  max-height: 45px;
-}
 #name-large {
   font-size: 1.2rem;
   margin-right: 1rem;

src/App.vue

@@ -1,110 +1,7 @@
-// Updated basic colors
-$blue: #00adef;
-$yellow: #ffc107;
-$white: #fff;
-$red: #dc3545;
-$green: #28a745;
-
-// Updated theme colors
-$secondary: #80868c;
-$info: #8a6d3b;
-
-$font-family-sans-serif: 'Libre Franklin', sans-serif !default;
-$link-hover-decoration: none;
-
-$theme-colors: (
-  'blue': $blue,
-);
-
-$pagination-hover-bg: $yellow;
-$navbar-dark-color: $white;
-$navbar-dark-hover-color: $white;
-$dropdown-link-hover-bg: $yellow;
+// Override bootstrap variables here to customize style
+// https://bootstrap-vue.org/docs/reference/theming
 
 @import '~bootstrap';
 @import '~bootstrap-vue';
 
-
-// Override bootstrap bg-danger class. Soften the danger color when used as a background color.
-.bg-danger {
-  background-color: darken($danger, 12) !important;
-}
-
-// Override bootstrap bg-success class. Soften the success color when used as a background color
-.bg-success {
-  background-color: darken($success, 10) !important;
-}
-
-// Highlight the text of links on a page when hovered
-a:hover {
-  background-color: $yellow;
-  color: $black;
-}
-
-// Set the background hover color on the links in the page header to
-// be a more muted yellow
-a.nav-link:hover {
-  background-color: rgba($yellow, 0.2);
-}
-
-// Turn off hover-over coloring on the image in the header
-a.navbar-brand:hover {
-  background-color: rgba(0, 0, 0, 0);
-}
-
-// For tabs on the compose page and the request detail page
-.nav > li > a:not(.active):hover, .nav > li > a:not(.active):focus {
-  background-color: rgba($yellow, 0.5);
-  border-color: darken($yellow, 20);
-}
-
-// Custom button styling
-
-.btn-outline-warning {
-  color: darken($yellow, 25);
-}
-
-.btn-outline-primary {
-  color: darken($primary, 15);
-}
-
-.btn-outline-danger {
-  color: darken($danger, 25);
-}
-
-.btn-outline-secondary {
-  color: darken($secondary, 40);
-}
-
-.btn-outline-secondary:hover,
-.btn-outline-secondary:focus {
-  background-color: rgba($yellow, 0.5);
-  border-color: darken($yellow, 20);
-  color: $black;
-}
-
-// General styling
-
-html {
-  position: relative;
-  background-color: $white;
-}
-
-p {
-  margin-top: 1em;
-  margin-bottom: 1em;
-  padding: 0em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  padding: 0.1em 0;
-}
-
-.small {
-  font-size: 70%;
-}
+// Add any other general site styling here

src/assets/scss/app.scss

@@ -1,37 +1,39 @@
-
 export const clearAndSetErrorsMixin = {
   /* Methods to modify page messages */
-  data: function() {
+  data: function () {
     return {
-      errorMessages: []
+      errorMessages: [],
     };
   },
   methods: {
-    clearErrors: function() {
+    clearErrors: function () {
       for (let message of this.errorMessages) {
-        this.$store.commit('deleteMessage', message);
+        this.$store.commit("deleteMessage", message);
       }
       this.errorMessages = [];
     },
-    setErrors: function(errorMessagesObject) {
+    setErrors: function (errorMessagesObject) {
       for (let field in errorMessagesObject) {
-        let message = '';
-        if (field === 'retrieving') {
+        let message = "";
+        if (field === "retrieving") {
           message = errorMessagesObject[field];
         } else {
-          message = field + ': ' + errorMessagesObject[field];
+          message = field + ": " + errorMessagesObject[field];
         }
         this.errorMessages.push(message);
-        this.$store.commit('addMessage', { text: message, variant: 'danger' });
+        this.$store.commit("addMessage", { text: message, variant: "danger" });
       }
     },
-    setErrorsOnFailedAJAXCall: function(errorAjaxResponse) {
+    setErrorsOnFailedAJAXCall: function (errorAjaxResponse) {
       this.clearErrors();
       if (errorAjaxResponse.status === 400) {
         this.setErrors(errorAjaxResponse.responseJSON);
       } else {
-        this.setErrors({ retrieving: 'There was a problem retrieving your data, please try again.' });
+        this.setErrors({
+          retrieving:
+            "There was a problem retrieving your data, please try again.",
+        });
       }
-    }
-  }
+    },
+  },
 };

src/clearAndSetErrorsMixin.js

@@ -2,27 +2,33 @@
   <div class="row">
     <div class="col-md-12 text-center">
       <h2>Oops! This looks like a black hole.</h2>
-      <p>Either you don't have permission to view this page or it doesn't exist.</p>
+      <p>
+        Either you don't have permission to view this page or it doesn't exist.
+      </p>
       <p v-if="!userIsAuthenticated">
         Perhaps you should try
         <router-link :to="{ name: 'login' }"> logging in </router-link>.
       </p>
       <p v-else-if="userIsStaffWithoutStaffViewSet">
-        Perhaps you should try turning on staff view. You can do this on your <router-link :to="{ name: 'profile' }">profile page</router-link>.
+        Perhaps you should try turning on staff view. You can do this on your
+        <router-link :to="{ name: 'profile' }">profile page</router-link>.
       </p>
     </div>
   </div>
 </template>
 <script>
 export default {
-  name: 'NotFound',
+  name: "NotFound",
   computed: {
-    userIsAuthenticated: function() {
+    userIsAuthenticated: function () {
       return this.$store.state.userIsAuthenticated;
     },
-    userIsStaffWithoutStaffViewSet: function() {
-      return this.$store.state.profile.is_staff && !this.$store.state.profile.profile.staff_view;
-    }
-  }
+    userIsStaffWithoutStaffViewSet: function () {
+      return (
+        this.$store.state.profile.is_staff &&
+        !this.$store.state.profile.profile.staff_view
+      );
+    },
+  },
 };
 </script>