Fix/proposal

src/components/Global/ProposalDropdown.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ref, defineEmits } from 'vue'
+import { useUserDataStore } from '../../stores/userData'
+
+const emit = defineEmits(['selectionsComplete'])
+
+const userDataStore = useUserDataStore()
+const proposals = userDataStore.profile.proposals
+const activeProposals = proposals.filter(proposal => proposal.current === true)
+
+const selectedProposal = ref()
+
+</script>
+
+<template>
+  <template v-if="proposals.length">
+    <div>
+      <label for="proposalSelect">Select a proposal:</label>
+      <select
+      id="proposalSelect"
+      v-model="selectedProposal"
+      @change="emit('selectionsComplete', selectedProposal)"
+      >
+        <option v-for="proposal in activeProposals" :key="proposal.id" :value="proposal.id">
+          {{ proposal.title }}
+        </option>
+      </select>
+    </div>
+  </template>
+  <template v-else>
+    <div>
+      <p>No proposals found. Please create a proposal <a href="https://observe.lco.global/apply">here</a></p>
+    </div>
+  </template>
+</template>

src/components/RealTimeInterface/TimePicker.vue

@@ -7,6 +7,7 @@ import { fetchApiCall } from '../../utils/api'
 import { formatToUTC, formatDate } from '../../utils/formatTime.js'
 import { useConfigurationStore } from '../../stores/configuration'
 import LeafletMap from './GlobeMap/LeafletMap.vue'
+import ProposalDropdown from '../Global/ProposalDropdown.vue'
 
 const router = useRouter()
 const realTimeSessionsStore = useRealTimeSessionsStore()
@@ -19,6 +20,7 @@ const errorMessage = ref(null)
 const selectedSite = ref(null)
 const availableTimes = ref({})
 const localTimes = ref([])
+const selectedProposal = ref()
 
 const timeInterval = 15
 const today = ref(new Date())
@@ -171,7 +173,7 @@ const blockRti = async () => {
   }
 
   const requestBody = {
-    proposal: 'LCORealtimeTest',
+    proposal: selectedProposal.value,
     name: 'Test Real Time',
     site: selectedSite.value.site,
     enclosure,
@@ -254,8 +256,9 @@ onMounted(() => {
   </template>
   <template v-if="hasAvailableTimes">
     <h2>Book your live observing session</h2>
+    <ProposalDropdown @selectionsComplete="(proposal) => { selectedProposal = proposal }" />
     <div class="columns">
-      <div class="column is-one-third">
+      <div v-if="selectedProposal" class="column is-one-third">
         <p>Select a date and time:</p>
         <div>
           <VDatePicker

src/components/Scheduling/AdvancedScheduling.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { ref } from 'vue'
 import SchedulingSettings from './SchedulingSettings.vue'
+import ProposalDropdown from '../Global/ProposalDropdown.vue'
 import Calendar from './Calendar.vue'
 
 const targetsData = ref([])
 const startDate = ref('')
 const endDate = ref('')
+const selectedProposal = ref()
 
 // Handle each target update and store it in the array
 const handleTargetUpdate = (target) => {
@@ -40,11 +42,12 @@ const handleDateRangeUpdate = (dateRange) => {
 
 const emits = defineEmits(['selectionsComplete'])
 const emitSelections = () => {
-  if (targetsData.value.length > 0 && startDate.value && endDate.value) {
+  if (targetsData.value.length > 0 && startDate.value && endDate.value && selectedProposal.value) {
     emits('selectionsComplete', {
       targets: targetsData.value,
       startDate: startDate.value,
-      endDate: endDate.value
+      endDate: endDate.value,
+      proposal: selectedProposal.value
     })
   }
 }
@@ -60,7 +63,7 @@ const emitSelections = () => {
     @targetUpdated="handleTargetUpdate"
     @exposuresUpdated="handleExposuresUpdate"
   />
-
+  <ProposalDropdown @selectionsComplete="(proposal) => { selectedProposal = proposal }"/>
   <Calendar @updateDateRange="handleDateRangeUpdate" />
 </template>
 

src/components/Scheduling/BeginnerScheduling.vue

@@ -3,6 +3,7 @@ import { ref, defineEmits } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import Calendar from './Calendar.vue'
 import SchedulingSettings from './SchedulingSettings.vue'
+import ProposalDropdown from '../Global/ProposalDropdown.vue'
 import { fetchApiCall } from '../../utils/api.js'
 
 const emits = defineEmits(['selectionsComplete', 'showButton'])
@@ -19,6 +20,7 @@ const loading = ref(false)
 const selectedTargets = ref([])
 const startDate = ref('')
 const endDate = ref('')
+const selectedProposal = ref()
 
 const categories = ref([
   {
@@ -81,7 +83,8 @@ const emitSelections = () => {
     target: targetSelection.value,
     settings: exposureSettings.value,
     startDate: startDate.value,
-    endDate: endDate.value
+    endDate: endDate.value,
+    proposal: selectedProposal.value
   })
   // }
 }
@@ -187,9 +190,10 @@ const handleExposuresUpdate = (exposures) => {
   </template>
   <div class="container">
     <div v-if="!dateRange">
-    <Calendar @updateDateRange="handleDateRangeUpdate"/>
+    <ProposalDropdown @selectionsComplete="(proposal) => { selectedProposal = proposal }"/>
+    <Calendar v-if="selectedProposal" @updateDateRange="handleDateRangeUpdate"/>
   </div>
-    <div v-if="!objectSelected && dateRange && !loading" class="content">
+    <div v-if="!objectSelected && dateRange && !loading && selectedProposal" class="content">
       <h2>Schedule an Observation</h2>
       <p>What do you want to take pictures of?</p>
       <div v-for="category in categories" :key="category.location" class="content">

src/components/Views/SchedulingView.vue

@@ -107,8 +107,7 @@ const sendObservationRequest = async () => {
       method: 'POST',
       body: {
         'name': 'UserObservation',
-        // TO DO: get proposals from user and use the proposal ID here
-        'proposal': 'LCOSchedulerTest',
+        'proposal': observationData.value.proposal,
         'ipp_value': 1.05,
         'operator': operatorValue.value,
         'observation_type': 'NORMAL',

src/tests/integration/components/beginnerScheduling.test.js

@@ -5,7 +5,7 @@ import { fetchApiCall } from '../../../utils/api.js'
 import { createTestStores } from '../../../utils/testUtils'
 import flushPromises from 'flush-promises'
 
-vi.mock('@/utils/api.js', () => ({
+vi.mock('../../../utils/api.js', () => ({
   fetchApiCall: vi.fn()
 }))
 
@@ -18,7 +18,16 @@ describe('BeginnerScheduling.vue', () => {
 
     wrapper = mount(BeginnerScheduling, {
       global: {
-        plugins: [pinia]
+        plugins: [pinia],
+        stubs: {
+          // Mock ProposalDropdown to control selectedProposal behavior
+          ProposalDropdown: {
+            template: '<div></div>',
+            methods: {
+              selectionsComplete: vi.fn()
+            }
+          }
+        }
       }
     })
   })
@@ -41,19 +50,20 @@ describe('BeginnerScheduling.vue', () => {
       successCallback(mockResponse)
     })
 
+    // Simulate setting a selected proposal
+    wrapper.vm.selectedProposal = 'TestProposal'
+
     // Simulate selecting a date range (which triggers fetchTargets)
     const startDate = new Date()
     const endDate = new Date()
-    // Adds 15 days to the start date
     endDate.setDate(startDate.getDate() + 15)
     const newDateRange = {
       start: startDate,
       end: endDate
     }
     await wrapper.vm.handleDateRangeUpdate(newDateRange)
 
-    // Because the Calendar component is a child of BeginnerScheduling, this test also makes the api call to fetch semester data (which is not tested here)
-    expect(fetchApiCall).toHaveBeenCalledTimes(2)
+    expect(fetchApiCall).toHaveBeenCalledTimes(1)
     expect(fetchApiCall).toHaveBeenCalledWith({
       url: `https://whatsup.lco.global/range/?start=${newDateRange.start.toISOString().split('.')[0]}&end=${newDateRange.end.toISOString().split('.')[0]}&aperture=0m4&mode=full`,
       method: 'GET',
@@ -71,4 +81,26 @@ describe('BeginnerScheduling.vue', () => {
     expect(wrapper.vm.selectedTargets[0].filters[0].exposure).toBe(300)
     expect(wrapper.vm.selectedTargets[0].filters[0].count).toBe(5)
   })
+
+  it('emits selectionsComplete with selectedProposal and other values', async () => {
+    // Simulate setting selected values
+    wrapper.vm.targetSelection = { name: 'Target 1' }
+    wrapper.vm.exposureSettings = [{ filter: 'Filter 1', exposureTime: 300 }]
+    wrapper.vm.startDate = '2024-11-18T00:00:00'
+    wrapper.vm.endDate = '2024-11-19T00:00:00'
+    wrapper.vm.selectedProposal = 'TestProposal'
+
+    // Call emitSelections
+    wrapper.vm.emitSelections()
+
+    // Check if the selectionsComplete event was emitted with the correct data
+    expect(wrapper.emitted().selectionsComplete).toBeTruthy()
+    expect(wrapper.emitted().selectionsComplete[0][0]).toEqual({
+      target: { name: 'Target 1' },
+      settings: [{ filter: 'Filter 1', exposureTime: 300 }],
+      startDate: '2024-11-18T00:00:00',
+      endDate: '2024-11-19T00:00:00',
+      proposal: 'TestProposal'
+    })
+  })
 })

src/tests/integration/components/schedulingView.test.js

@@ -31,7 +31,8 @@ describe('SchedulingView.vue', () => {
       ],
       startDate: new Date(),
       // 1 hour later
-      endDate: new Date(new Date().getTime() + 3600 * 1000)
+      endDate: new Date(new Date().getTime() + 3600 * 1000),
+      proposal: 'Test Proposal'
     }
 
     const mockRequestList = [
@@ -114,7 +115,7 @@ describe('SchedulingView.vue', () => {
       method: 'POST',
       body: {
         name: 'UserObservation',
-        proposal: 'LCOSchedulerTest',
+        proposal: 'Test Proposal',
         ipp_value: 1.05,
         operator: 'SINGLE',
         observation_type: 'NORMAL',