From 57c836a950be8b33c9f9d1755af4f3602581540b Mon Sep 17 00:00:00 2001
From: Javier <javier.arredondo.c@usach.cl>
Date: Mon, 15 Mar 2021 13:10:40 -0300
Subject: [PATCH] alert of changes in main view

---
 src/views/Home.vue | 173 +++++++++++++++++++++++++--------------------
 1 file changed, 98 insertions(+), 75 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index bc36ca18..699c26b5 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,112 +1,135 @@
 <template>
   <div>
-    <ReportModal/>
+    <ReportModal />
     <v-container fluid id="home">
-     <v-layout row wrap >
-       <v-flex md12 fill-height>
-         <MoreInfo/>
-       </v-flex> <!-- table -->
-     </v-layout>  <!-- map-table row-->
+      <v-layout row wrap>
+        <v-flex md12>
+          <v-alert
+            :value="true"
+            dismissible
+            color="yellow darken-3"
+            type="warning"
+          >
+            ALeRCE SN Hunter will be updated on March 26 (changes in model predictions). The beta version is
+            in
+            <a href="http://dev.snhunter.alerce.online/">http://dev.snhunter.alerce.online/</a>
+          </v-alert>
+        </v-flex>
+        <v-flex md12 fill-height>
+          <MoreInfo />
+        </v-flex>
+        <!-- table -->
+      </v-layout>
+      <!-- map-table row-->
 
       <v-layout row wrap>
         <v-flex md7 fill-height>
-          <Celestial/>
+          <Celestial />
           <div class="text-xs-center">
-            <v-btn id="quickStartBtn" @click="startTour()" dark color="primary" :disabled="quickStart">
+            <v-btn
+              id="quickStartBtn"
+              @click="startTour()"
+              dark
+              color="primary"
+              :disabled="quickStart"
+            >
               <v-icon>play_for_work</v-icon>
               Quick Start
             </v-btn>
           </div>
-
-        </v-flex> <!-- table -->
+        </v-flex>
+        <!-- table -->
         <v-flex id="table" md5 fill-height>
-          <Table/>
-        </v-flex> <!-- table -->
-      </v-layout>  <!-- map-table row-->
+          <Table />
+        </v-flex>
+        <!-- table -->
+      </v-layout>
+      <!-- map-table row-->
 
       <v-tour name="quickStart" :action="clickStep" :steps="steps"></v-tour>
-    </v-container> <!-- contianer -->
+    </v-container>
+    <!-- contianer -->
   </div>
 </template>
 
 <script>
-import Table from '../components/Table'
-import Celestial from '../components/Celestial'
-import MoreInfo from '../components/MoreInfo'
-import ReportModal from '../components/ReportModal'
+import Table from "../components/Table";
+import Celestial from "../components/Celestial";
+import MoreInfo from "../components/MoreInfo";
+import ReportModal from "../components/ReportModal";
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
     Table,
     Celestial,
     MoreInfo,
-    ReportModal
+    ReportModal,
   },
-  data () {
+  data() {
     return {
       steps: [
-          {
-            target: '#sneCandidates',
-            content: 'Here are the top 100 SN Candidates.'
-          },
-          {
-            target: '#celestialDiv',
-            content: 'All the candidate are also showed in the map, to get the spatial distribution of candidates.'
-          },
-          {
-            target: 'tr td',
-            content: 'This is the ZTF Object id for the candidate'
-          },
-          {
-            target: 'tr td:nth-of-type(2)',
-            content: 'The discovery date of the object'
-          },
-          {
-            target: 'tr td:nth-of-type(3)',
-            content: 'The probability given by the model'
-          },
-          {
-            target: 'tr td:nth-of-type(4)',
-            content: 'Number of detections of the object',
+        {
+          target: "#sneCandidates",
+          content: "Here are the top 100 SN Candidates.",
+        },
+        {
+          target: "#celestialDiv",
+          content:
+            "All the candidate are also showed in the map, to get the spatial distribution of candidates.",
+        },
+        {
+          target: "tr td",
+          content: "This is the ZTF Object id for the candidate",
+        },
+        {
+          target: "tr td:nth-of-type(2)",
+          content: "The discovery date of the object",
+        },
+        {
+          target: "tr td:nth-of-type(3)",
+          content: "The probability given by the model",
+        },
+        {
+          target: "tr td:nth-of-type(4)",
+          content: "Number of detections of the object",
+        },
+        {
+          target: "table",
+          content: "Clicking on a candidate will show more information",
+        },
+        {
+          target: "#moreInfoDiv",
+          content:
+            '<p>Here is shown relevant information about the candidate. Some positional, photometric, images and links to useful resources</p><p>For more information check the <a href="faq"> FAQ </a> section.</p>',
+          params: {
+            placement: "bot",
           },
-          {
-            target: 'table',
-            content: 'Clicking on a candidate will show more information',
-          },
-          {
-            target: '#moreInfoDiv',
-            content: '<p>Here is shown relevant information about the candidate. Some positional, photometric, images and links to useful resources</p><p>For more information check the <a href="faq"> FAQ </a> section.</p>',
-            params:{
-              placement: 'bot'
-            }
-          }
-
-        ],
-        tours: null
-    }
+        },
+      ],
+      tours: null,
+    };
   },
   computed: {
-    quickStart: function(){
-        return false;
+    quickStart: function () {
+      return false;
     },
-    clickStep: function(){
-      if(this.tours){
-        if(this.$tours['quickStart'].currentStep == 6){
-          this.clickRow()
+    clickStep: function () {
+      if (this.tours) {
+        if (this.$tours["quickStart"].currentStep == 6) {
+          this.clickRow();
         }
       }
-
-    }
+    },
   },
-  methods:{
-    startTour(){
-      this.tours = this.$tours
-      this.$tours['quickStart'].start();
+  methods: {
+    startTour() {
+      this.tours = this.$tours;
+      this.$tours["quickStart"].start();
     },
-    clickRow(){
+    clickRow() {
       $("#sneCandidates tr:nth-of-type(1)").click();
-    }
-  }
-}
+    },
+  },
+};
 </script>