feat: added buttons

Author: stadial

components/ClassesList.vue

@@ -31,22 +31,28 @@
           </template>
 
           <template v-slot:item.button="{ item }">
-            <v-tooltip top :color="item.buttonOptions.color">
+            <v-tooltip right :color="item.buttonOptions.color">
               <template v-slot:activator="{ on, attrs }">
-                <v-btn
-                  elevation="2"
-                  :color="item.buttonOptions.color"
-                  :disabled="item.buttonOptions.disabled"
-                  v-bind="attrs"
-                  v-on="on"
-                  fab
-                  small
-                  @click="$emit('class:action', item)"
-                >
-                  <v-icon> mdi-plus </v-icon>
-                </v-btn>
+                <div v-bind="attrs" v-on="on">
+                  <v-btn
+                    elevation="2"
+                    :color="item.buttonOptions.color"
+                    :disabled="item.buttonOptions.disabled"
+                    fab
+                    small
+                    @click="$emit('class:action', item)"
+                  >
+                    <v-icon> {{ item.buttonOptions.icon }} </v-icon>
+                  </v-btn>
+                </div>
               </template>
-              <div v-for="tooltip in item.buttonOptions.tooltips">
+              <div v-if="item.buttonOptions.tooltips == 0">
+                {{ 'Add' }}
+              </div>
+              <div
+                v-for="tooltip in item.buttonOptions.tooltips"
+                align="center"
+              >
                 {{ tooltip }}
               </div>
             </v-tooltip>

components/snackBar.vue

@@ -24,7 +24,7 @@ export default {
   },
   watch: {
     active(val, oldVal) {
-      this.snackbar = val
+      this.snackbar = true
     },
   },
 }

logic/classes.ts

@@ -1,12 +1,40 @@
 // too lazy to  add types ;)
 export function buttonOptions(todo: any) {
+	let tooltips = todo.conflicts.time
+	let color = 'success'
+	let icon = 'mdi-plus'
+
+	let sameCourse = todo.conflicts.sameCourse
+	// course already added
+	if (sameCourse) {
+		// same class
+		if (sameCourse.crn == todo.crn) {
+			icon = 'mdi-minus'
+			tooltips = ['Remove']
+			color = 'red'
+		} else {
+			color = 'grey'
+			console.log(sameCourse)
+			tooltips = ['Course added in Section: ' + sameCourse.section, 'Replace?']
+		}
+	}
+
 	let buttonOptions = {
-		disabled: false,
-		color: 'success',
-		tooltips: ['Hello!', 'Error 2'],
+		icon,
+		disabled: todo.conflicts._any,
+		color,
+		tooltips,
 	}
 	return { ...todo, buttonOptions }
 }
-export function findConflicts(todo: any) {
-	return todo
+export function findConflicts(checkClass: any, selectedClasses: any) {
+	// same course
+	let time: String[] = []
+	let sameCourse: any = selectedClasses.filter(
+		(c: any) => c.code == checkClass.code
+	)[0]
+	let _any = time.length > 0
+	let conflicts = { _any, time, sameCourse }
+
+	return { ...checkClass, conflicts }
 }

pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    {{ selectedClasses }}
     <!-- <ClassesCalendar /> -->
     <!-- <ClassesSelectedStats /> -->
     <ClassesFilters
@@ -9,7 +10,11 @@
       :selectedSemstersProp="selectedSemsters"
       :departments="departments"
     />
-    <ClassesList :loading="loadingClasses" :classes="filteredClasses" />
+    <ClassesList
+      :loading="loadingClasses"
+      :classes="filteredClasses"
+      @class:action="classButtonAction($event)"
+    />
     <snackBar :text="snackbarText" :active="snackbarActive" />
   </div>
 </template>
@@ -52,6 +57,7 @@ export default {
       selectedDepartment: null,
       selectedMajor: null,
       selectedSemsters: [0],
+      selectedClasses: [],
       loadingClasses: false,
       snackbarText: '',
       snackbarActive: false,
@@ -63,7 +69,9 @@ export default {
       let filtered = this.rawClasses.filter((c) =>
         this.selectedSemsters.includes(c.semster_index)
       )
-      filtered = filtered.map(findConflicts)
+      filtered = filtered.map((clas) =>
+        findConflicts(clas, this.selectedClasses)
+      )
       filtered = filtered.map(buttonOptions)
 
       return filtered
@@ -72,7 +80,6 @@ export default {
   methods: {
     majorChange(e) {
       this.selectedMajor = e.abbrv
-      this.snackbarActive = false
       this.getCP()
     },
     departmentChange(e) {
@@ -87,13 +94,23 @@ export default {
         this.rawClasses = response.data
         this.loadingClasses = false
       } catch (error) {
-        this.snackbarActive = true
+        this.snackbarActive = !this.snackbarActive
         this.snackbarText = `${this.selectedDepartment}, ${this.selectedMajor} Not yet supported!`
         this.loadingClasses = false
         this.rawClasses = []
         console.log(error) //TODO: handle error
       }
     },
+    // If the button was pressed
+    classButtonAction(e) {
+      console.log(e)
+      if (this.selectedClasses.find((c) => c.crn == e.crn)) {
+        this.snackbarActive = !this.snackbarActive
+        this.snackbarText = `Already added ${e.name}`
+      } else {
+        this.selectedClasses.push(e)
+      }
+    },
   },
 }
 </script>