Merge pull request #37 from diging/DS-23

DS-23: Allow multiple availability time picking in scheduling

Author: jophals

package-lock.json

@@ -19,6 +19,7 @@
     "jwt-decode": "^3.1.2",
     "material-design-icons-iconfont": "^5.0.1",
     "moment": "^2.29.4",
+    "reflect-metadata": "^0.1.13",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
     "vue-property-decorator": "^8.3.0",
@@ -37,9 +38,9 @@
     "@vue/cli-plugin-router": "^4.5.11",
     "@vue/cli-plugin-typescript": "^4.5.11",
     "@vue/cli-plugin-vuex": "^4.5.11",
-    "@vue/cli-service": "^5.0.8",
+    "@vue/cli-service": "^4.5.11",
     "axios": "^0.21.2",
-    "chromedriver": "^77.0.0",
+    "chromedriver": "^98.0.0",
     "geckodriver": "^3.0.2",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",

package.json

@@ -1,56 +1,59 @@
-
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import {schedule, formattedSchedule} from '@/interfaces/GlobalTypes'
+import {schedule, formattedSchedule, time} from '@/interfaces/GlobalTypes'
 import moment from 'moment'
+
 @Component
 export class ScheduleBase extends Vue {
 
-
 	protected maxHours: string = '0.0'
 
-
-	parseStatus(status: number | string | undefined) {
+	parseStatus(status: number | undefined) {
 		switch(status) {
 			case 0:
-				return 'Pending';
+				return 'Pending'
 			case 1:
-				return 'Approved';
+				return 'Approved'
 			case 2:
 				return 'Denied'
 			default:
 				console.log("Nothing")
 		}
 	}
 
-
 	parseTime(key: string, schedule: any) {
-		let data = moment(schedule[`${key}_start_1`], 'HH:mm:ss').format('h:mm A') + ' - ' + moment(schedule[`${key}_end_1`], 'HH:mm:ss').format('h:mm A');
-		if(data === '12:00 AM - 12:00 AM'){
-			return 'OFF';
+		let data = moment(schedule[`${key}_start_1`], 'HH:mm:ss').format('h:mm A') + ' - ' + moment(schedule[`${key}_end_1`], 'HH:mm:ss').format('h:mm A')
+		if(data === '12:00 AM - 12:00 AM') {
+			return 'OFF'
 		} else {
-			return data;
+			return data
 		}
 	}
 
-
-	timeFormat(schedule: schedule, schedules: formattedSchedule[]) {
+	formatScheduleTime(schedule: schedule, schedules: formattedSchedule[]) {
 		let formattedSchedule: formattedSchedule = {
 			'created': moment(schedule['created']).format('MM/DD/YYYY'),
 			'mon': this.parseTime("mon", schedule),
 			'tue': this.parseTime("tue", schedule),
 			'wed': this.parseTime("wed", schedule),
-			'thu': this.parseTime("thur", schedule),
+			'thu': this.parseTime("thu", schedule),
 			'fri': this.parseTime("fri", schedule),
 			'max_hours': schedule['max_hours'],
 			// this works but vueter doesn't recognize it.
-			'status': this.parseStatus(schedule['status']),
+			'status': this.parseStatus(schedule.status),
 			'id': schedule.id
 		}
-
 		schedules.push(formattedSchedule)
 	}
 
+	formatDayTime(times: time) {
+		let formatted_day = moment(times['startTime1'], 'HH:mm:ss').format('h:mm A') + ' - ' + moment(times['endTime1'], 'HH:mm:ss').format('h:mm A')
+		if(formatted_day === '12:00 AM - 12:00 AM') {
+			return 'OFF'
+		} else {
+			return formatted_day
+		}
+	}
 
 	formatMaxHours() {
 		if(!this.maxHours.includes('.')) {
@@ -62,7 +65,7 @@ export class ScheduleBase extends Vue {
 				this.maxHours = '.' + this.maxHours
 			}
 		} else {
-			let split = this.maxHours.split('.').join("");
+			let split = this.maxHours.split('.').join("")
 			if(split.length > 2) {
 				let last = split.slice(-2)
 				let rest = split.slice(0, -2)

src/components/Bases/ScheduleBase.ts

@@ -89,7 +89,7 @@ export default class Availability extends ScheduleBase {
 		this.$axios.get('schedules/availability/list') 
 		.then(response => {
 			response.data.forEach((schedule: schedule) => {
-				this.timeFormat(schedule, this.schedules)
+				this.formatScheduleTime(schedule, this.schedules)
 			});
 			this.loading = false;
 		})
@@ -108,7 +108,7 @@ export default class Availability extends ScheduleBase {
 			maxHours: maxHoursDecimal
 		})
 		.then((response: any) => {
-			this.timeFormat(response.data, this.schedules)
+			this.formatScheduleTime(response.data, this.schedules)
 		})
 		.catch(function (error: any) {
 			console.log(error);

src/components/admin/Availability.vue

@@ -5,57 +5,70 @@ div
 		v-container
 			p(class="body-2 mb-10") Lab hours are from 9:00 AM to 4:30 PM.
 			div(v-for="day in days" :key="day")
-				v-row
-					v-col(cols='3')
-						p(class="font-weight-medium body-2") {{day}}
-					v-col(cols='4')
-						timePicker(:index = 'startTime1' :day='day')
-					v-col(cols='4') 
-						timePicker(:index = 'endTime1' :day='day')
-					v-col(cols='1')
-						v-btn(icon color="#F2594B"  v-on:click="isHidden=true") 
-							v-icon mdi-plus-circle-outline
+				div(v-if="availabilityTimes[day].length===0")
+					v-row
+						v-col(cols='3')
+							p(class="font-weight-medium body-2") {{day}}
+						v-col(cols='4')
+							timePicker(:day='day' :index='startTime1')
+						v-col(cols='4')
+							timePicker(:day='day' :index='endTime1')
+						v-col(cols='1')
+							v-btn(icon color="#F2594B" @click="updateAvailability(day)")
+								v-icon mdi-plus-circle-outline
+				div(v-else)
+					div(v-for="(avItem, avIndex) in availabilityTimes[day]" :key="day + avIndex.toString()")
+						v-row
+						v-col(cols='3')
+							p(class="font-weight-medium body-2") {{day}}
+						v-col(cols='4')
+							timePicker(:day='day' :index='startTime1')
+						v-col(cols='4')
+							timePicker(:day='day' :index='endTime1')
+						v-col(cols='1')
+							v-btn(icon color="#F2594B" @click="updateAvailability(day)")
+								v-icon mdi-plus-circle-outline
 				v-row(class="mt-n6 mb-4" v-if="isHidden")
 					v-col(cols='3')
 					v-col(cols='4')
-						timePicker(:index = 'startTime2' :day='day')
-					v-col(cols='4') 
-						timePicker(:index = 'endTime2' :day='day')
+						timePicker(:day='day' :index='startTime2')
+					v-col(cols='4')
+						timePicker(:day='day' :index='endTime2')
 					v-col(cols='1')
 			v-row
 				v-col.pt-4(cols='3')
-					p.pt-3(class="font-weight-medium body-2") Max Hours
+				p.pt-3(class="font-weight-medium body-2") Max Hours
 				v-col(cols='3')
-					v-text-field(v-model="maxHours" @input='formatMaxHours()' outlined dense)
+				v-text-field(v-model="maxHours" @input='formatMaxHours()' outlined dense)
 		v-card-actions
 			v-spacer
 			v-btn(color="grey" text @click="dialog = false") Cancel
 			v-btn(color="#F2594B" medium class="white--text" @click="postSched()") Submit
 
 	h3.mb-5 Previous Schedules
-	v-data-table(:headers="headers" 
-		:items="schedules" 
-		:items-per-page="5" 
-		item-key='id' 
-		class="elevation-1" 
-		:single-select="singleSelect" 
-		:loading='loading' 
+	v-data-table(:headers="headers"
+		:items="schedules"
+		:items-per-page="5"
+		item-key='id'
+		class="elevation-1"
+		:single-select="singleSelect"
+		:loading='loading'
 		:loading-text="loadingText"
 		:sort-by="['created']"
 		:sort-desc="[true]"
 	)
 		template(v-slot:item.actions="{ item }")
 			v-icon(v-if="item.status == 'Pending'" @click="deleteAvail(item.id)") mdi-delete
+        
 </template>
 <script lang="ts">
 import '@mdi/font/css/materialdesignicons.css'
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import { mixins } from 'vue-class-component'
-import Vuex from 'vuex';
+import Vuex from 'vuex'
 import timePicker from '@/components/global/timePicker.vue'
-import store from '@/store';
+import store from '@/store'
 import {formattedSchedule, schedule} from '@/interfaces/GlobalTypes'
-
 import { ScheduleBase }  from '@/components/Bases/ScheduleBase'
 
 const axios = require('axios')
@@ -69,12 +82,21 @@ const axios = require('axios')
 })
 
 export default class Availability extends ScheduleBase {
-	
-	private singleSelect: boolean = false;
-	private loading: boolean = false;
+
+	private singleSelect: boolean = false
+	private loading: boolean = false
 	private loadingText: string = 'The sched-o-matic is working hard on your request'
 	private dialog: boolean = false
-	private schedules: formattedSchedule[] = [];
+	private startTime1: string = "startTime1"
+	private endTime1: string = "endTime1"
+	private startTime2: string = "startTime2"
+	private endTime2: string = "endTime2"
+	private isHidden: boolean = false
+	private availabilityTimes: { [x: string]: any[]; } = {}
+	private days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
+	private time_suffixes = ['_start_1', '_start_2', '_end_1', '_end_2']
+	private day_time_strings: string[] = []
+	private schedules: formattedSchedule[] = []
 
 	headers = [
 		{text: 'Submitted', value: 'created'},
@@ -87,61 +109,79 @@ export default class Availability extends ScheduleBase {
 		{text: 'Max Hours', value: 'max_hours'},
 		{text: 'Delete', value: 'actions'},
 		//d-none must have leading space in string to work. Hide from table but id is still attached
-		{text: 'Id', value: 'id', align: ' d-none'} 
-	];
-
+		{text: 'Id', value: 'id', align: ' d-none'}
+	]
 
 	constructor() {
-        super();
+        super()
     }
 
+	updateAvailability(day: string) {
+		this.day_time_strings = []
+		var day_abbrev = day.slice(0, 3).toLowerCase()
+		for (var time of this.time_suffixes) {
+			this.day_time_strings.push(day_abbrev + time)
+		}
+		this.$axios.patch('/schedules/availability/update', {
+			time_strings: this.day_time_strings,
+			sched_times: store.getters.getDaySched(day)
+		})
+		.then((response: any) => {
+			var updated_time = this.formatDayTime(response.data.day)
+			var index = this.schedules.length - 1
+			this.schedules[index][day_abbrev] = updated_time
+		})
+		.catch(function (error: any) {
+			console.log(error)
+		})
+	}
 
 	created() {
-		this.loading = true;
-		this.$axios.get('/schedules/user/availability') 
+		for (var day of this.days) {
+			this.availabilityTimes[day] = []
+		}
+		this.loading = true
+		this.$axios.get('/schedules/user/availability')
 		.then(response => {
 			response.data.forEach((schedule: schedule) => {
-				this.timeFormat(schedule, this.schedules)
-			});
-			this.loading = false;
+				this.formatScheduleTime(schedule, this.schedules)
+			})
+			this.loading = false
 		})
 		.catch(function (error: any) {
-			console.log(error);
+			console.log(error)
 		})
 		.then(function () {
 			// always executed
-		}); 
+		})
 	}
 
-
-
 	postSched() {
-		let maxHoursDecimal = Number.parseFloat(this.maxHours).toFixed(2);
+		let maxHoursDecimal = Number.parseFloat(this.maxHours).toFixed(2)
 		this.$axios.post('/schedules/availability/create', {
 			schedule: store.getters.timeValues,
 			maxHours: maxHoursDecimal
 		})
 		.then((response: any) => {
-			this.timeFormat(response.data,this.schedules)
+			this.formatScheduleTime(response.data,this.schedules)
 		})
 		.catch(function (error: any) {
-			console.log(error);
+			console.log(error)
 		})
 	}
 
 	deleteAvail(id: number) {
 		this.$axios.delete('/schedules/availability/delete/' + id)
 		.then((response: any) => {
-			var removeIndex = this.schedules.map(item => item.id).indexOf(id);
-			~removeIndex && this.schedules.splice(removeIndex, 1);
+			var removeIndex = this.schedules.map(item => item.id).indexOf(id)
+			~removeIndex && this.schedules.splice(removeIndex, 1)
 		})
 		.catch(function (error: any) {
-			console.log(error);
+			console.log(error)
 		})
-	}
-
-	
+	}	
 }
+
 </script>
 
 <style scoped>